VtexShelfProperties.js
Set custom properties on shelves templates on Vtex stores.
Table of contents
Main
dist/├── vtex-shelf-properties.js (UMD)├── vtex-shelf-properties.min.js (UMD, compressed)├── vtex-shelf-properties.common.js (CommonJS, default)└── vtex-shelf-properties.esm.js (ES Module)
Getting started
Direct download
Download the script here and include it.
You will need VtexUtils.js and VtexCatalog.js
Package Managers
VtexShelfProperties.js supports npm under the name vtex-shelf-properties
.
npm install vtex-shelf-properties --save
Module Loaders
VtexShelfProperties.js can also be loaded as an CommonJS or ES6 module (recomended).
// CommomJSvar VtexShelfProperties = ; // ES6 module;
Usage
With UMD (Universal Module Definition), the package is available on VTEX
namespace.
For every shelf type, you will need create a new instance of VtexShelfProperties
// First, initialize VtexUtils.jsvar vtexUtils = ; // Then, initialize VtexCatalog.jsvar vtexCatalog = VTEX; // Initialize constructor passing a instance of VtexUtils.js and VtexCatalog.js as a paramvtexShelfProperties = vtexUtils vtexCatalog handler;
Instance Params
The handler
param is a callback function. There are two params: current DOM element and related product object info.
This handle is used to set custom properties into DOM element (set on setShelfContainer method) inside a shelf.
Example
<!-- Inside a Shelf Template, create your container -->
{ var markup = '<a href="' + productlink + '" title="' + productproductName + '">' + '<h2>' + productproductName + '</h2>' + '<small>' + productproductReference + '</small>' + '<p>' + productdescription + '</p>' + '</a>'; $el;} var vtexShelfProperties = vtexUtils vtexCatalog myCustomProp;shelfProperties;shelfProperties;shelfProperties;
Methods
vtexShelfProperties.setLoadedClass(className)
Add a custom class on loaded elements.
Default loaded class is is--loaded
Needs to call before setShelfContainer
method.
- className:
- Type:
String
- Name of custom loaded class
- Type:
Example
// Set custom loaded classvtexShelfProperties;
<!-- Your element class is like: --> <!-- Properties added -->
vtexShelfProperties.setEventName(eventName)
Create custom event name for actual instance.
Needs to call before setShelfContainer
method.
- eventName:
- Type:
String
- Name of custom event when triggered on request end.
- Type:
Example
// Set custom event namevtexShelfProperties;// And use like:; // If this method is not provide, the default event name is:;
vtexShelfProperties.setShelfContainer(shelfClass)
Any container inside your shelf to receive custom properties.
Your container needs have a data attribute with product id.
- shelfClass:
- Type:
String
- Name of shelf container class
- Type:
Example
<!-- Your container -->
License
vtexShelfProperties.js is open-sourced software licensed under the MIT license.
Dependencies
jQuery 1.8.3+
VtexUtils.js
VtexCatalog.js