resolved issues.

public/css/base.scss

@@ -3,3 +3,4 @@
 @tailwind utilities;
 
 @import './modules.scss';
+@import './core.scss';

public/css/core.scss

@@ -0,0 +1,4 @@
+//Product grid and list styles
+.UNX-grid-view, .UNX-list-view{
+    @apply grid gap-4 p-4;
+}

public/css/index.scss

@@ -19044,6 +19044,8 @@ video {
 
 @import './modules.scss';
 
+@import './core.scss';
+
 @media (min-width: 640px) {
   .sm\:space-y-0 > :not(template) ~ :not(template) {
     --space-y-reverse: 0;

src/App.js

@@ -8,12 +8,12 @@ import '../public/css/index.scss';
 class App extends Component {
 
     setProductConfiguration = (config) => {
-        const { per_page, requiredFields, variants,
-            variantCount, variantRequiredFields, groupBy } = config;
-        this.state.unbxdCore.setNumberOfProducts(per_page);
+        const { pageSize, requiredFields, showVariants,
+            variantsCount, variantRequiredFields, groupBy } = config;
+        this.state.unbxdCore.setNumberOfProducts(pageSize);
         this.state.unbxdCore.setFields(requiredFields);
-        this.state.unbxdCore.setIsVariants(variants);
-        this.state.unbxdCore.setVariantsCount(variantCount);
+        this.state.unbxdCore.setIsVariants(showVariants);
+        this.state.unbxdCore.setVariantsCount(variantsCount);
         this.state.unbxdCore.setVariantFields(variantRequiredFields);
         this.state.unbxdCore.setVariantsGroupBy(groupBy);
     }
@@ -27,7 +27,7 @@ class App extends Component {
         this.state = {
             unbxdCore:
                 new UnbxdSearch({ ...searchConfigurations, siteName, siteKey, callBackFn: this.unbxdCallBack }),
-            helpers: this.helpers
+
         };
 
     }
@@ -38,16 +38,20 @@ class App extends Component {
         }
     }
 
+    getProps = () => {
+        return { ...this.state, helpers: this.helpers }
+    }
+
     componentDidMount() {
         //this.state.unbxdCore.getResults('boots');
-        //this.state.unbxdCore.getResults('cooking stoves');
-        this.state.unbxdCore.getResults('red shirt');
+        this.state.unbxdCore.getResults('cooking stoves');
+        //this.state.unbxdCore.getResults('red shirt');
         //this.state.unbxdCore.getResults('xxxxxxxxxxxxxxx');
     }
 
     render() {
         return (
-            <AppContextProvider value={this.state}>
+            <AppContextProvider value={this.getProps()}>
                 {this.props.children}
             </AppContextProvider>
         )

src/common/utils.js

@@ -6,3 +6,19 @@ export const conditionalRenderer = (children, state, DefaultComponents) => {
             children(state) : children) :
         (DefaultComponents)
 }
+
+
+export const debounce = (func, wait, immediate) => {
+    var timeout;
+    return function () {
+        var context = this, args = arguments;
+        var later = function () {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+        };
+        var callNow = immediate && !timeout;
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+        if (callNow) func.apply(context, args);
+    };
+};

src/config/index.js

@@ -14,7 +14,7 @@ const searchConfiguration = {
     facetMultiSelectionMode: true,
     searchQueryParam: null,
     updateUrls: true,
-    variants: false,
+    showVariants: false,
     variantMapping: {},
     variantConfig: {
         count: 1

src/modules/Products/NoProducts.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const NoProducts = () => {
-    return (<div className='Unbx-no-products-container'>Sorry! No products found!</div>)
+    return (<div className='UNX-no-products-container'>Sorry! No products found!</div>)
 }
 
 export default NoProducts;

src/modules/Products/ProductCards/GridProductCard.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { productFieldsMapper } from '../utils';
+import { getProductFields } from '../utils';
 
-const GridProductCard = ({ product, fieldMap, variantMap, unbxdProductCardClickHandler }) => {
+const GridProductCard = ({ product, productMap, productVariantMap }) => {
 
-    //Get the datas from the product bases on fieldMap and create the card
-    const productValues = productFieldsMapper(product, fieldMap, variantMap);
+    //Get the datas from the product bases on productMap and create the card
+    const productValues = getProductFields(product, productMap, productVariantMap);
 
     const {
         productName,
@@ -15,23 +15,21 @@ const GridProductCard = ({ product, fieldMap, variantMap, unbxdProductCardClickH
         sellingPrice } = productValues;
 
     //Add support for router as a config
-    return (<div className='Unbx-product-card-container'>
-        <a href={product.productUrl} className={`Unbx-product-card Unbx-grid-card`} onClick={unbxdProductCardClickHandler}>
-            <img className='Unbx-product-card Unbx-image' src={imageUrl[0]} />
-            <p className='Unbx-product-card Unbx-product-name'>{productName}</p>
-            <p className='Unbx-product-card Unbx-price'>{price}</p>
-            <p className='Unbx-product-card Unbx-selling-price'>{sellingPrice}</p>
+    return (<div className='UNX-product-card-container' data-uniqueid={product.uniqueId}>
+        <a href={product.productUrl} className={`UNX-product-card UNX-grid-card`} data-uniqueid={product.uniqueId}>
+            <img className='UNX-image' src={imageUrl} data-uniqueid={product.uniqueId} />
+            <p className='UNX-product-name' data-uniqueid={product.uniqueId}>{productName}</p>
+            <p className='UNX-price' data-uniqueid={product.uniqueId}>{price}</p>
+            <p className='UNX-selling-price' data-uniqueid={product.uniqueId}>{sellingPrice}</p>
         </a>
         {/* swatch content */}
     </div>)
 }
 
 GridProductCard.propTypes = {
     product: PropTypes.object.isRequired,
-    fieldMap: PropTypes.object.isRequired,
-    isVariant: PropTypes.bool.isRequired,
-    variantMap: PropTypes.object.isRequired,
-    unbxdProductCardClickHandler: PropTypes.func.isRequired
+    productMap: PropTypes.object.isRequired,
+    productVariantMap: PropTypes.object.isRequired
 }
 
 export default GridProductCard;

src/modules/Products/ProductCards/ListProductCard.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { productFieldsMapper } from '../utils';
+import { getProductFields } from '../utils';
 
-const ListProductCard = ({ product, fieldMap, variantMap, unbxdProductCardClickHandler }) => {
+const ListProductCard = ({ product, productMap, productVariantMap }) => {
 
-    //Get the datas from the product bases on fieldMap and create the card
-    const productValues = productFieldsMapper(product, fieldMap, variantMap);
+    //Get the datas from the product bases on productMap and create the card
+    const productValues = getProductFields(product, productMap, productVariantMap);
 
     const {
         productName,
@@ -15,23 +15,21 @@ const ListProductCard = ({ product, fieldMap, variantMap, unbxdProductCardClickH
         sellingPrice } = productValues;
 
     //Add support for router as a config
-    return (<div className='Unbx-product-card-container'>
-        <a href={product.productUrl} className={`Unbx-product-card Unbx-grid-card`} onClick={unbxdProductCardClickHandler}>
-            <img className='Unbx-product-card Unbx-image' src={imageUrl[0]} />
-            <p className='Unbx-product-card Unbx-product-name'>{productName}</p>
-            <p className='Unbx-product-card Unbx-price'>{price}</p>
-            <p className='Unbx-product-card Unbx-selling-price'>{sellingPrice}</p>
+    return (<div className='UNX-product-card-container' data-uniqueid={product.uniqueId}>
+        <a href={product.productUrl} className={`UNX-product-card UNX-list-card`} data-uniqueid={product.uniqueId}>
+            <img className='UNX-image' src={imageUrl} data-uniqueid={product.uniqueId} />
+            <p className='UNX-product-name data-uniqueid={product.uniqueId}'>{productName}</p>
+            <p className='UNX-price' data-uniqueid={product.uniqueId}>{price}</p>
+            <p className='UNX-selling-price' data-uniqueid={product.uniqueId}>{sellingPrice}</p>
         </a>
         {/* swatch content */}
     </div>)
 }
 
 ListProductCard.propTypes = {
     product: PropTypes.object.isRequired,
-    fieldMap: PropTypes.object.isRequired,
-    isVariant: PropTypes.bool.isRequired,
-    variantMap: PropTypes.object.isRequired,
-    unbxdProductCardClickHandler: PropTypes.func.isRequired
+    productMap: PropTypes.object.isRequired,
+    productVariantMap: PropTypes.object.isRequired
 }
 
 export default ListProductCard;