yauction-clipping-purchase

<yauction-clipping-purchase /> provides 「add to cart」&「direct buy」features for commerce site wiich means developers could adopt these features in any web pages they liked.（<yauction-clipping-purchase /> adopts TW Yahoo! Auction's product data）

Vision

Here comes <yauction-clipping-purchase /> rised vision. With this clear view, vistors could add product to cart or buy it directly.

Basic Usage

<yauction-clipping-purchase /> is a web component. All we need to do is put the required script into your HTML document. Then follow <yauction-clipping-purchase />'s html structure and everything will be all set.

• Required Script

<script
  type="module"
  src="https://your-domain/wc-yauction-clipping-purchase.js">        
</script>

• Structure

Put <yauction-clipping-purchase /> into HTML document. It will have different functions and looks with attribute mutation.

<yauction-clipping-purchase>
  <script type="application/json">
    {
      "carturl": "https://tw.bid.yahoo.com/cart",
      "l10n": {
        "cart": "ADD TO CART",
        "buy": "DIRECT BUY",
        "pickSpec": "Pick「{{spec}}」please."
      },
      "params": {
        "id": "mei",
        "sex": "M"
      },
      "webservice": {
        "info": "https://your-domain/getProductInformation",
        "cart": "https://your-domain/getAddToCart"
      }
    }
  </script>
</yauction-clipping-purchase>

Otherwise, developers could also choose remoteconfig to fetch config for <yauction-clipping-purchase />.

<yauction-clipping-purchase
  remoteconfig="https://your-domain/api-path"
>
</yauction-clipping-purchase>

JavaScript Instantiation

<yauction-clipping-purchase /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { YauctionClippingPurchase } from 'https://your-domain/wc-yauction-clipping-purchase.js';

// use DOM api
const nodeA = document.createElement('yauction-clipping-purchase');
document.body.appendChild(nodeA);
nodeA.params = {
  id: 'mei',
  sex: 'M'
};
nodeA.show('100450639430');

// new instance with Class
const nodeB = new YauctionClippingPurchase();
document.body.appendChild(nodeB);
nodeB.params = {
  id: 'mei',
  sex: 'M'
};
nodeB.show('101395118170');

// new instance with Class & default config
const config = {
  carturl: 'https://tw.bid.yahoo.com/cart',
  params: {},
  l10n: {
    cart: 'ADD TO CART',
    buy: 'DIRECT BUY',
    pickSpec: 'Pick {{spec}} please.'
  },
  webservice: {
    info: 'https://your-domain/getProductInformation',
    cart: 'https://your-domain/getAddToCart'
  }
};
const nodeC = new YauctionClippingPurchase(config);
document.body.appendChild(nodeC);
</script>

Style Customization

Developers could apply styles to decorate <yauction-clipping-purchase />'s looking.

<style>
yauction-clipping-purchase {
  --yauction-clipping-purchase-indicator-color: rgba(58 191 186/.8);
  --yauction-clipping-purchase-out-of-stock-text: '缺貨中';
}
</style>

Otherwise, apply pseudo class ::part(price) to direct style price element.

<style>
yauction-clipping-purchase::part(price) {
  font-size: 36px;
  color: #000;
  line-height: 1.5;
}
</style>

Attributes

<yauction-clipping-purchase /> supports some attributes to let it become more convenience & useful.

• carturl

Set carturl for <yauction-clipping-purchase />. It will redirect to this url when 「direct buy」 button pressed. Default is https://tw.bid.yahoo.com/cart (not set).

<yauction-clipping-purchase
  carturl="https://tw.bid.yahoo.com/cart"
>
  ...
</yauction-clipping-purchase>

• params

Set parameters for <yauction-clipping-purchase />. It should be JSON string. Each fetching will attached these parameters to api. Default is {} (not set).

<yauction-clipping-purchase
  params='{"id":"mei","sex":"M"}'
>
  ...
</yauction-clipping-purchase>

• l10n

Set localization for <yauction-clipping-purchase />. It will replace some message & button text to anything you like. It should be JSON string. Developers could set cart、buy and pickSpec.

• cart：button 「add to cart」text. Default is ADD TO CART.
• buy：button 「direct buy」text. Default is DIRECT BUY.
• pickSpec：Warnning message when spec not pick. Default is Pick {{spec}} please. Developers could apply {{spec}} as replace key for message.

<yauction-clipping-purchase
  l10n='{"cart":"ADD TO CART","buy":"DIRECT BUY","pickSpec":"Pick {{spec}} please."}'
>
  ...
</yauction-clipping-purchase>

• webservice

Set web service information for <yauction-clipping-purchase />. It should be JSON string. Developers could set info、cart api address here.

• info：api address for product information fetching.
• cart：api address for add product to cart fetching.

<yauction-clipping-purchase
  webservice='{"info":"https://your-domain/getProductInformation","cart":"https://your-domain/getAddToCart"}'
>
  ...
</yauction-clipping-purchase>

Properties

Property Name	Type	Description
carturl	String	Getter / Setter for carturl. It will redirect to this url when 「direct buy」 button pressed. Default is https://tw.bid.yahoo.com/cart.
params	Object	Getter / Setter for params. Each fetching will attached these parameters to api. Default is {}.
l10n	Object	Getter / Setter for l10n. It will replace some message & button text to anything you like. Developers could set cart、buy and pickSpec.
webservice	Object	Getter / Setter for webservice. Developers could set info、cart api address here.
open	Boolean	Getter for <yauction-clipping-purchase />'s open status.
processing	Boolean	Getter for <yauction-clipping-purchase />'s fetching status.）
productInfo	Object	Getter for current <yauction-clipping-purchase />'s product information.

Method

Method Signature	Description
show(merchandiseId)	Fetch & popup <yauction-clipping-purchase />. Developers could call this method with argument > product id to popup <yauction-clipping-purchase />. Such as：element.show('100450639430')
dismiss	Dismiss <yauction-clipping-purchase />.

Event

Event Signature	Description
yauction-clipping-purchase-add-to-cart-success	Fired when <yauction-clipping-purchase /> successed for adding to cart action.（button「add to cart」pressed）
yauction-clipping-purchase-direct-buy-success	Fired when <yauction-clipping-purchase /> successed for direct buy action.（button「direct buy」pressed）
yauction-clipping-purchase-processing	Fired when <yauction-clipping-purchase /> started fetching.
yauction-clipping-purchase-process-finish	Fired when <yauction-clipping-purchase /> finished fetching.
yauction-clipping-purchase-cancel	Fired when <yauction-clipping-purchase /> canceled.（user closed <yauction-clipping-purchase />）
yauction-clipping-purchase-error	Fired when <yauction-clipping-purchase /> fetching error. Develpoers could gather information through event.detail.

Reference

• <yauction-clipping-purchase />
• WEBCOMPONENTS.ORG
• YouTube
• TW Yahoo! Auction