feat: add category product block

README.md

@@ -144,3 +144,7 @@ Permission is hereby granted, free of charge, to any person obtaining a copy of
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+### Notes
+
+Deployment locally on an M1 (for Cornerstone 4.9.0) needed `NODE_OPTIONS=--openssl-legacy-provider` before the stencil command

assets/js/app.js

@@ -40,7 +40,7 @@ const pageClasses = {
     giftcertificates: () => import('./theme/gift-certificate'),
     giftcertificates_balance: () => import('./theme/gift-certificate'),
     giftcertificates_redeem: () => import('./theme/gift-certificate'),
-    default: noop,
+    default: () => import('./theme/home'),
     page: noop,
     product: () => import('./theme/product'),
     amp_product_options: () => import('./theme/product'),

assets/js/theme/common/product-by-category.js

@@ -0,0 +1,76 @@
+import utils from '@bigcommerce/stencil-utils';
+
+export default function loadProductByCategory(productBlockCols, productBlockLimit) {
+    const carouselConfig = {
+        template: 'products/carousel-2',
+    };
+    const categoryBlocks = $('.mwn-block[data-category-id]');
+
+    if (categoryBlocks.length > 0) {
+        const headerHeight = $('.header').height();
+        let hasInitialized = false;
+
+        $(window).on('load scroll', (() => {
+            let hasScrolledHeader = false;
+
+            if (hasInitialized) {
+                return;
+            }
+
+            if ($(window).scrollTop() > headerHeight) {
+                hasScrolledHeader = true;
+            }
+
+            if (hasScrolledHeader) {
+                categoryBlocks.each(((_index, element) => {
+                    const productCarousel = $(element).find('.productCarousel');
+                    const categoryId = $(element).data('category-id');
+                    const categoryUrl = $(element).data('category-url');
+
+                    // Load products for the category if the product carousel is empty
+                    if ($(`#category-product-${categoryId}.productCarousel .productCarousel-slide`).length === 0) {
+                        utils.api.getPage(`${categoryUrl}?limit=${productBlockLimit}`, carouselConfig, (_err, responseData) => {
+                            productCarousel.html(responseData);
+
+                            // Initialize the product carousel with Slick slider
+                            function initializeCarousel(carouselElement) {
+                                carouselElement.slick({
+                                    dots: true,
+                                    arrows: false,
+                                    infinite: false,
+                                    mobileFirst: true,
+                                    slidesToShow: 2,
+                                    slidesToScroll: 1,
+                                    nextArrow: "<svg class='slick-next slick-arrow slick-arrow-large' aria-label='Next Slide'><use xlink:href=#slick-arrow-next></use></svg>",
+                                    prevArrow: "<svg class='slick-prev slick-arrow slick-arrow-large' aria-label='Previous Slide'><use xlink:href=#slick-arrow-prev></use></svg>",
+                                    responsive: [{
+                                        breakpoint: 1024,
+                                        settings: {
+                                            arrows: true,
+                                            slidesToShow: parseInt(productBlockCols, 10),
+                                        },
+                                    }, {
+                                        breakpoint: 991,
+                                        settings: {
+                                            slidesToShow: parseInt(productBlockCols, 10) - 1,
+                                        },
+                                    }, {
+                                        breakpoint: 767,
+                                        settings: {
+                                            slidesToShow: parseInt(productBlockCols, 10) - 2,
+                                        },
+                                    }],
+                                });
+                            }
+
+                            initializeCarousel(productCarousel);
+                            productCarousel.parents('.mwn-block[data-category-id]').find('.loadingOverlay').remove();
+                        });
+                    }
+                }));
+
+                hasInitialized = true;
+            }
+        }));
+    }
+}

assets/js/theme/home.js

@@ -0,0 +1,13 @@
+import PageManager from './page-manager';
+import loadProductByCategory from './common/product-by-category';
+
+export default class Home extends PageManager {
+    onReady() {
+        const {
+            categoryBlockCarouselLimit,
+            categoryBlockCarouselCol,
+        } = this.context;
+
+        loadProductByCategory(categoryBlockCarouselCol, categoryBlockCarouselLimit);
+    }
+}

assets/scss/components/_components.scss

@@ -202,3 +202,5 @@
 
 // Vendors
 @import "stencil/vendor/component";
+
+@import "stencil/customBlocks";

assets/scss/components/stencil/_customBlocks.scss

@@ -0,0 +1,15 @@
+.mwn-block {
+  display: block;
+  position: relative;
+
+  .padding-vertical {
+    padding-top: 30px;
+    padding-bottom: 30px;
+  }
+
+  &-product {
+    .loadingOverlay {
+      display: block;
+    }
+  }
+}

assets/scss/components/vendor/slick/_slick.scss

@@ -183,3 +183,6 @@ div.slick-slider {
     *width: 100%;
 }
 
+.slick-list {
+    margin-bottom: 12px;
+}

config.json

@@ -371,7 +371,12 @@
       "paypal"
     ],
     "lazyload_mode": "lazyload+lqip",
-    "show-admin-bar": true
+    "show-admin-bar": true,
+    "mwn_home_category_block": true,
+    "mwn_home_category_block_heading": "",
+    "mwn_home_category_block_id": "",
+    "mwn_home_category_block_limit": 10,
+    "mwn_home_category_block_col": 5
   },
   "read_only_files": [
     "/assets/scss/components/citadel",

schema.json

@@ -1252,6 +1252,52 @@
         "id": "homepage_featured_vendor",
         "label": "Display featured vendor",
         "force_reload": true
+      },
+      {
+        "type": "heading",
+        "content": "Featured Category Block"
+      },
+      {
+        "type": "checkbox",
+        "force_reload": true,
+        "id": "mwn_home_category_block",
+        "label": "Display featured category"
+      },
+      {
+        "type": "text",
+        "force_reload": true,
+        "id": "mwn_home_category_block_heading",
+        "label": "Heading"
+      },
+      {
+        "type": "text",
+        "force_reload": true,
+        "id": "mwn_home_category_block_id",
+        "label": "Category ID"
+      },
+      {
+        "type": "select",
+        "force_reload": true,
+        "id": "mwn_home_category_block_limit",
+        "label": "Number of products",
+        "options": [
+          { "label": "5", "value": "5" },
+          { "label": "6", "value": "6" },
+          { "label": "10", "value": "10" },
+          { "label": "12", "value": "12" },
+          { "label": "15", "value": "15" }
+        ]
+      },
+      {
+        "type": "select",
+        "force_reload": true,
+        "id": "mwn_home_category_block_col",
+        "label": "Columns to display",
+        "options": [
+          { "label": "4", "value": "4" },
+          { "label": "5", "value": "5" },
+          { "label": "6", "value": "6" }
+        ]
       }
     ]
   },