Y! Auction 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. Try to input or select pruduct id in the following field and press 「SUMMON」to see what can <yauction-clipping-purchase /> do ?

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

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.

Style Customization

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

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

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>

Property

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`.