<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.
npm install 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）
Here comes <yauction-clipping-purchase /> rised vision. With this clear view, vistors could add product to cart or buy it directly.
<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
``html`
src="https://your-domain/wc-yauction-clipping-purchase.js">
- Structure
Put <yauction-clipping-purchase /> into HTML document. It will have different functions and looks with attribute mutation.
`html`
Otherwise, developers could also choose remoteconfig to fetch config for <yauction-clipping-purchase />.
`html`
>
<yauction-clipping-purchase /> could also use JavaScript to create DOM element. Here comes some examples.
`html`
Developers could apply styles to decorate <yauction-clipping-purchase />'s looking.
`html`
Otherwise, apply pseudo class ::part(price) to direct style price element.
`html`
<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).
`html`
>
...
- params
Set parameters for <yauction-clipping-purchase />. It should be JSON string. Each fetching will attached these parameters to api. Default is {} (not set).
`html`
>
...
- 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.
`html`
>
...
- 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.
`html`
>
...
| 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 .|cart
| l10n | Object | Getter / Setter for l10n. It will replace some message & button text to anything you like. Developers could set 、buy and pickSpec. |info
| webservice | Object | Getter / Setter for webservice. Developers could set 、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 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 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`. |