VlocityDCChildCatalog

vlocity-dc-child-catalog is the component for listing all the child catalogs within the selected catalog.

Constructor

new VlocityDCChildCatalog()

Properties:

Name	Type	Description
`pageSize`	Number	page size for pagination.
`activeIndex`	Number	current selected childCatalog's index.
`catalogTitle`	String	currently selected main catalog.
`childCatalogs`	Object	indicates an object which contains a list of the all the childCatalogs.

Example

Sample Usage -

Include the component in your template simply by adding vlocity-dc-child-catalog custom tag

<vlocity-dc-child-catalog></vlocity-dc-child-catalog>

| Attribute Name    | Type Expected                                                                   | Required |
|-------------------|---------------------------------------------------------------------------------|----------|
| parentCatalogCode | It expects a String which denotes Parent Catalog Code                           | optional |


 KEY INFO -

 events fired : "vlocity-dc-update-catalog-code"

 events registered :none

 Dependency - vlocity-dc-child-catalog is a child level component which is commonly used within vlocity-dc-catalog component
 but it can also be used as an independent component.

               | Parent Component      | Expected Child Component    |
               |-----------------------|-----------------------------|
               | none                  | none                        |


Sample with slots -

<vlocity-dc-child-catalog>
   <span slot="{slot_name}">
     Custom HTML elements goes here
   </span>
</vlocity-dc-child-catalog>

List of available slots -

| Slot names               | Dynamic     | Description                 | Impact                             |
|--------------------------|-------------|------------------------------------------------------------------|
| dc-child-catalog-wrapper | -           | Wrapper for component       | Will replace complete template DOM |
| dc-title                 | -           | Selected catlog name        | Will replace default title         |
| dc-{catlog-name}         | Y           | Each Child catalog menu     | Adds DOM in given catalog menu     |

Extends

LitElement

Members

(static, readonly) properties

Properties that will be available in the template binding

Properties:

Name	Type	Description
`pageSize`	Number	page size for pagination.
`activeIndex`	Number	current selected childCatalog's index.
`catalogTitle`	String	currently selected main catalog.
`childCatalogs`	Object	indicates an object which contains a list of the all the childCatalogs.

Methods

(static) fetchCatalogsPreHook(catalogs)

A custom function to be used by customers for customisation. You can add your own catalog & child-catalogs object by overriding fetchCatalogsPreHook() method.

Parameters:

Name	Type	Description
`catalogs`	Array	List of default catalogs.

Example

fetchCatalogsPreHook(catalogs) {
 const myCatalogDetails = {
  name: "Mobo Category",
  catalogCode: "mobile",  // catalog category name
  img1: "/resource/dc_assets/images/mobile.svg",
  img2: "/resource/dc_assets/images/mobile_white.svg",
  childCatalogs: {
    totalSize: 3,
    records: [
      { name: "Phones", catalogCode: "Phones" }, // catalog codes goes here
      { name: "Tablets", catalogCode: "Tablets" },
      { name: "Wearables", catalogCode: "Wearables" }
    ]
  }
 }
 catalogs.push(myCatalogDetails); // append to original catalogs list
 return Promise.resolve(catalogs);
}

(async, static) fetchChildCatalogs()

Method to get all the child catalogs.