magento2/magento2-page-builder#636: Responsive breakpoint switcher - applied additional fixes for product content type carousel appearance issue

Author: joiecaquicla

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

@@ -77,10 +77,12 @@ export default class Preview extends BasePreview {
         });
 
         events.on(`stage:${this.contentType.stageId}:viewportChangeAfter`, (args: {viewport: string}) => {
-            const viewports = Config.getConfig("breakpoints");
-            this.slidesToShow = parseFloat(viewports[args.viewport].options.products.default.slidesToShow);
-            this.destroySlider();
-            this.initSlider();
+            const viewports = Config.getConfig("viewports");
+            if (this.element && this.appearance() === "carousel") {
+                this.slidesToShow = parseFloat(viewports[args.viewport].options.products.default.slidesToShow);
+                this.destroySlider();
+                this.initSlider();
+            }
         });
     }
 

app/code/Magento/PageBuilder/view/adminhtml/web/js/page-builder.js

@@ -255,17 +255,17 @@ export default class PageBuilder implements PageBuilderInterface {
         const previousViewport = this.viewport();
 
         this.viewport(viewport);
+        _.each(this.viewportClasses, (viewportClass) => {
+            viewportClass(false);
+        });
+        this.viewportClasses[`${viewport}-viewport`](true);
         Config.setConfig({
             viewport,
         } as ConfigInterface);
         events.trigger(`stage:${this.id}:viewportChangeAfter`, {
             viewport,
             previousViewport,
         });
-        _.each(this.viewportClasses, (viewportClass) => {
-            viewportClass(false);
-        });
-        this.viewportClasses[`${viewport}-viewport`](true);
     }
 
     /**