magento2/magento2-page-builder#636: Responsive breakpoint switcher - additional fixes for product content type styling and preview issue

Author: joiecaquicla

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/products/preview.js

@@ -190,6 +190,9 @@ export default class Preview extends BasePreview {
     private buildSlickConfig() {
         const attributes = this.data.main.attributes();
         const productCount = $(this.widgetUnsanitizedHtml()).find(this.productItemSelector).length;
+        const viewports = Config.getConfig("viewports");
+        const currentViewport = this.viewport();
+        const carouselMode = attributes["data-carousel-mode"];
         const config: {[key: string]: any} = {
             slidesToShow: this.slidesToShow,
             slidesToScroll: this.slidesToShow,
@@ -199,7 +202,13 @@ export default class Preview extends BasePreview {
             autoplaySpeed: parseFloat(attributes["data-autoplay-speed"]),
         };
 
-        if (attributes["data-carousel-mode"] === "continuous" && productCount > this.slidesToShow) {
+        const slidesToShow = viewports[currentViewport].options.products[carouselMode] ?
+            viewports[currentViewport].options.products[carouselMode].slidesToShow :
+            viewports[currentViewport].options.products.default.slidesToShow;
+
+        config.slidesToShow = parseFloat(slidesToShow);
+
+        if (attributes["data-carousel-mode"] === "continuous" && productCount > config.slidesToShow) {
             config.centerPadding = attributes["data-center-padding"];
             config.centerMode = true;
             $(this.element).addClass(this.centerModeClass);

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/products/preview.ts

@@ -9,8 +9,9 @@ define([
     'matchMedia',
     'Magento_PageBuilder/js/utils/breakpoints',
     'Magento_PageBuilder/js/events',
+    'Magento_PageBuilder/js/config',
     'slick'
-], function ($, _, mediaCheck, breakpointsUtils, events) {
+], function ($, _, mediaCheck, breakpointsUtils, events, pageBuilderConfig) {
     'use strict';
 
     /**
@@ -31,12 +32,34 @@ define([
         $carouselElement.slick(config);
     }
 
-    return function (config, element) {
-        var $element = $(element),
+    function initSlider($element, slickConfig, breakpoint) {
+        var productCount = $element.find('.product-item').length,
             $carouselElement = $($element.children()),
-            productCount = $(element).find('.product-item').length,
             centerModeClass = 'center-mode',
             carouselMode = $element.data('carousel-mode'),
+            slidesToShow = breakpoint.options.products[carouselMode] ?
+                breakpoint.options.products[carouselMode].slidesToShow :
+                breakpoint.options.products.default.slidesToShow;
+
+        slickConfig.slidesToShow = parseFloat(slidesToShow);
+
+        if (carouselMode === 'continuous' && productCount > slickConfig.slidesToShow) {
+            $element.addClass(centerModeClass);
+            slickConfig.centerPadding = $element.data('center-padding');
+            slickConfig.centerMode = true;
+        } else {
+            $element.removeClass(centerModeClass);
+            slickConfig.infinite = $element.data('infinite-loop');
+        }
+
+        buildSlick($carouselElement, slickConfig);
+    }
+
+    return function (config, element) {
+        var $element = $(element),
+            $carouselElement = $($element.children()),
+            stageId = $($element).parents('[data-role="pagebuilder-stage"]').attr('id'),
+            currentViewport = pageBuilderConfig.getConfig("viewport"),
             slickConfig = {
                 autoplay: $element.data('autoplay'),
                 autoplaySpeed: $element.data('autoplay-speed') || 0,
@@ -50,31 +73,27 @@ define([
 
                 /** @inheritdoc */
                 entry: function () {
-                    var slidesToShow = breakpoint.options.products[carouselMode] ?
-                        breakpoint.options.products[carouselMode].slidesToShow :
-                        breakpoint.options.products.default.slidesToShow;
-
-                    slickConfig.slidesToShow = parseFloat(slidesToShow);
-
-                    if (carouselMode === 'continuous' && productCount > slickConfig.slidesToShow) {
-                        $element.addClass(centerModeClass);
-                        slickConfig.centerPadding = $element.data('center-padding');
-                        slickConfig.centerMode = true;
-                    } else {
-                        $element.removeClass(centerModeClass);
-                        slickConfig.infinite = $element.data('infinite-loop');
-                    }
-
-                    buildSlick($carouselElement, slickConfig);
+                    initSlider($element, slickConfig, breakpoint);
                 }
             });
         });
 
+        //initialize slider when content type is added in mobile viewport
+        if (currentViewport === 'mobile') {
+            var breakpoint = config.breakpoints[currentViewport];
+            initSlider($element, slickConfig, breakpoint);
+        }
+
         // Redraw slide after content type gets redrawn
         events.on('contentType:redrawAfter', function (args) {
             if ($carouselElement.closest(args.element).length) {
                 $carouselElement.slick('setPosition');
             }
         });
+
+        events.on('stage:' + stageId + ':viewportChangeAfter', function (args) {
+            var breakpoint = config.breakpoints[args.viewport];
+            initSlider($element, slickConfig, breakpoint);
+        });
     };
 });