Y! Auction Category Picker

<yauction-category-picker /> is a category picker for TW Yahoo! Auction. Users could go through the whole category tree to pick a suitable category for their merchandise.

<yauction-category-picker /> will show up with categoryId which developers set. That means user can start from category 「root」 or 「leaf」.

Try to select category in the following field and press 「SUMMON」to see what can <yauction-category-picker /> do ?

Vision

Here comes <yauction-category-picker /> rised vision. With this clear view, users could find suitable category through it.

yauction-category-picker
<yauction-category-picker /> rised.
yauction-category-picker
<yauction-category-picker /> rised (search mode).

Basic Usage

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

Required Script

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

Structure

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

<yauction-category-picker> <script type="application/json"> { "l10n": { "title": "Category Picker", "confirm": "CONFIRM", "emptyLabel": "Select", "placeholder": "Search category" }, "params": { "id": "mei", ... }, "webservice": { "path": "https://your-domain/getCategoryPath", "children": "https://your-domain/getCategoryChildren", "nodes": "https://your-domain/getCategoryNodes", "tree": "https://your-domain/getCategoryTree" } } </script> </yauction-category-picker>

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

<yauction-category-picker remoteconfig="https://your-domain/api-path" > </yauction-category-picker>

JavaScript Instantiation

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

<script type="module"> import { YauctionCategoryPicker } from 'https://your-domain/wc-yauction-category-picker.js'; // use DOM api const nodeA = document.createElement('yauction-category-picker'); document.body.appendChild(nodeA); nodeA.params = { id: 'mei', sex: 'M' }; nodeA.show(); // new instance with Class const nodeB = new YauctionCategoryPicker(); document.body.appendChild(nodeB); nodeB.params = { id: 'mei', sex: 'M' }; nodeB.show('23288'); // new instance with Class & default config const config = { l10n: { title: 'Category Picker', confirm: 'CONFIRM', emptyLabel: 'Select' }, params: { id: 'mei', sex: 'M' }, webservice: { path: 'https://your-domain/getCategoryPath', children: 'https://your-domain/getCategoryChildren', nodes: 'https://your-domain/getCategoryNodes' tree: 'https://your-domain/getCategoryTree' } }; const nodeC = new YauctionCategoryPicker(config); document.body.appendChild(nodeC); </script>

Style Customization

Developers could apply styles to decorate <yauction-category-picker />'s looking.

<style> yauction-category-picker { /* common */ --yauction-category-picker-label-color: rgba(35 42 49); --yauction-category-picker-theme-color: rgba(15 105 255); --yauction-category-picker-section-line-color: rgba(224 228 233); /* listing */ --yauction-category-picker-listing-color: rgba(35 42 49); --yauction-category-picker-listing-bgc: rgba(246 248 250); --yauction-category-picker-arrow-color: rgba(151 158 168); --yauction-category-picker-line-color: rgba(198 198 200); --yauction-category-picker-max-listing-count: 10; --yauction-category-picker-no-result-color: rgba(35 42 49); /* action button */ --yauction-category-picker-confirm-text-color: rgba(255 255 255); --yauction-category-picker-confirm-bgc: rgba(58 191 186); /* loading sign */ --yauction-category-picker-loading-color: rgba(255 255 255); --yauction-category-picker-loading-bgc: rgba(0 0 0/.25); } </style>

Attributes

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

params

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

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

l10n

Set localization for <yauction-category-picker />. It will replace some message & button text to anything you like. It should be JSON string. Developers could set title、confirm、emptyLabel and placeholder.

- title：category title text. Default is Category Picker.
- confirm：button「confirm」text. Default is CONFIRM.
- emptyLabel：empty label text. Default is Select.
- placeholder：search field placeholder content. Default is Search category.

<yauction-category-picker l10n='{"title":"Category Picker","confirm":"CONFIRM","emptyLabel":"Select","placeholder":"Search category"}' > ... </yauction-category-picker>

webservice

Set web service information for <yauction-category-picker />. It should be JSON string. Developers could set path、nodes、children and tree api address here.

PS. Developers could apply {{categoryId}} as replace key for category id in api address. Such as "https://your-domain/getCategoryChildren/{{categoryId}}".

- path：api address for category path information fetching (leaf to root).
- children：api address for category children fetching.
- nodes：api address for category nodes information fetching.
- tree：api address for category tree information fetching.

<yauction-category-picker webservice='{"path":"https://your-domain/getCategoryPath","children":"https://your-domain/getCategoryChildren","nodes":"https://your-domain/getCategoryNodes","tree":"https://your-domain/getCategoryTree"}' > ... </yauction-category-picker>

Property

Property Name Type Description
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 UI text to anything you like. Developers could set title、confirm、emptyLabel and placeholder.
webservice Object Getter / Setter for webservice. Developers could set path、children、nodes and tree api address here.
open Boolean Getter for <yauction-category-picker />'s open status.
pickedInfo Object Getter for current <yauction-category-picker />'s category information. Developers could get { picked, path }.

Method

Method Signature Description
show(categoryId) Fetch & popup <yauction-category-picker />. Developers could call this method with argument > category id to popup <yauction-category-picker />.

Such as：element.show('23288'). Default is 0 (not set).
dismiss Dismiss <yauction-category-picker />.

Event

Event Signature Description
yauction-category-picker-pick Fired when user finish picked category. Developers could gather picked data > { picked,path } through event.detail.
yauction-category-picker-cancel Fired when <yauction-category-picker /> canceled.（user closed <yauction-category-picker />）
yauction-category-picker-error Fired when <yauction-category-picker /> fetching error. Develpoers could gather information through event.detail.（<yauction-category-picker /> will put server response to event.detail.cause）

Reference