Constructor
new DCCatalog()
Example
Sample Usage -
Include the component in your template by adding <c-dc-catalog> custom tag
<c-dc-catalog></c-dc-catalog>
KEY INFO -
events fired : "vlocity-dc-update-parent-catalog"
events registered : none
Dependency - c-dc-catalog is an independent component and has no dependency on any parent component.
It is commonly used in the home page to display the list of all the available catalogs.
Sample with slots -
<c-dc-catalog>
<span slot="{slot_name}">
Custom HTML elements goes here
</span>
</c-dc-catalog>
List of available slots -
| Slot names | Dynamic | Description | Impact |
|-------------------------- |-------------|-------------------------------|----------------------------------------|
| dc-catalog-wrapper-small | - | Wrapper for mobile menu | Replaces mobile menu |
| dc-catalog-wrapper-large | - | Wrapper for desktop menu | Replaces desktop menu |Extends
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) getCatalogs()
Method to get all the catalogs.
(static) getSDKInstance()
Method to get digital commerce SDK instance.
(static) selectCatalog(event)
Method to select any catalog.
Parameters:
| Name | Type | Description |
|---|---|---|
event |
event | Event object |
(static) toggleCatalogMobileMenu()
Method to toggle catalog menu in mobile form factor.