DCChildCatalogs

DCChildCatalogs is the component for listing all the child catalogs within the selected catalog.

DCChildCatalogs methods
1. fetchChildCatalogs - Method to get all the child catalogs of the selected catalog.
2. getSDKInstance - Method to get digital commerce SDK instance.
3. onChildCatalogClick - Method to select child catalog.
Features
1. Render all the child catalogs.
2. Allow selection of child catalogs.

Constructor

new DCChildCatalogs()

Properties:

Name	Type	Description
`parentCatalogCode`	String	catalog code of the parent catalog.

Example

Sample Usage -

Include the component in your template by adding <c-dc-child-catalogs> custom tag

<c-dc-child-catalogs parent-catalog-code={parentCatalogCode}></c-dc-child-catalogs>

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

 events registered : none

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

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         |

Extends

DCBaseComponent

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.

(static) getSDKInstance()

Method to get digital commerce SDK instance.

(static) onChildCatalogClick(event)

Method to select any child catalog.

Parameters:

Name	Type	Description
`event`	event	Event object