Add multi-assets support to auto-gen pr. page

javascripts/application.js

@@ -1159,16 +1159,6 @@ MMCQ = (function() {
       }
     };
 
-    // Opens product admin view on product image click
-
-    var handleProductImageClick = function(product_id) {
-      if (editmode()) {
-        $('.product-content .product-image').click(function() {
-          window.open('/admin/ecommerce/products/' + product_id, '_blank').focus();
-        });
-      }
-    };
-
     var init = function() {
       // ADD SITE WIDE FUNCTIONS HERE
       handleLanguageSwitch();
@@ -1196,7 +1186,6 @@ MMCQ = (function() {
       initItemsPage: initItemsPage,
       handleColorScheme: handleColorScheme,
       handleProductPageContent: handleProductPageContent,
-      handleProductImageClick: handleProductImageClick,
       getCombinedLightness: getCombinedLightness,
       handleHeaderColorScheme: handleHeaderColorScheme,
       getPhotoByWidth: getPhotoByWidth,

layouts/auto_generated_product.tpl

@@ -50,21 +50,18 @@
         <div class="flex-col">
           <div class="content-illustrations">
 
-            {%- if product.image != blank %}
-              {% assign item_image_state = "with-image" %}
+            {%- if product.photos != blank %}
+              {% assign item_image_state = "with-images" %}
             {% else %}
-              {% assign item_image_state = "without-image" %}
+              {% assign item_image_state = "without-images" %}
             {% endif -%}
 
-            <div class="content-item-box {{ item_image_state }} js-content-item-box" href="{{ page.url }}">
-              <div class="item-top product-image">
-                {%- if product.image != blank -%}
-                  <div class="top-inner aspect-ratio-inner product-page-image">
-                    {%- assign image_class = "item-image not-cropped" -%}
-                    {% image product.image target_width: "600" class: image_class loading: "lazy" %}
-                  </div>
-                {%- endif -%}
-              </div>
+            <div class="content-item-box {{ item_image_state }} js-content-item-box">
+              {%- if product.photos == blank -%}
+                <div class="item-top without-pointer"></div>
+              {%- else -%}
+                {% gallery product layout="product_slider" %}
+              {%- endif -%}
             </div>
 
             {%- if gallery_content_size > 0 or editmode -%}
@@ -168,9 +165,6 @@
   <script>
     if (site) {
       site.handleProductPageContent();
-      {%- if product and editmode %}
-        site.handleProductImageClick({{ product.id }});
-      {% endif -%}
     }
   </script>
 </body>

sources/javascripts/concat/main.js

@@ -618,16 +618,6 @@
       }
     };
 
-    // Opens product admin view on product image click
-
-    var handleProductImageClick = function(product_id) {
-      if (editmode()) {
-        $('.product-content .product-image').click(function() {
-          window.open('/admin/ecommerce/products/' + product_id, '_blank').focus();
-        });
-      }
-    };
-
     var init = function() {
       // ADD SITE WIDE FUNCTIONS HERE
       handleLanguageSwitch();
@@ -655,7 +645,6 @@
       initItemsPage: initItemsPage,
       handleColorScheme: handleColorScheme,
       handleProductPageContent: handleProductPageContent,
-      handleProductImageClick: handleProductImageClick,
       getCombinedLightness: getCombinedLightness,
       handleHeaderColorScheme: handleHeaderColorScheme,
       getPhotoByWidth: getPhotoByWidth,

sources/stylesheets/_product.scss

@@ -79,8 +79,10 @@
   position: relative;
   @include aspect-ratio(1, 1);
 
-  .editmode & {
-    cursor: pointer;
+  &:not(.without-pointer) {
+    .editmode & {
+      cursor: pointer;
+    }
   }
 
   &:hover {
@@ -200,7 +202,7 @@
       // scss-lint:enable SelectorDepth
     }
 
-    .with-image &:not(.product-page-image) {
+    .with-image {
       background-color: rgba($color-black, .05);
       border: 0;
 
@@ -219,12 +221,6 @@
       }
     }
 
-    &.product-page-image > .item-image {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-
     .item-placeholder {
       padding: .5em;
       text-transform: none;
@@ -334,7 +330,7 @@
     margin: 24px 0;
   }
 
-  .without-image .item-top {
+  .without-images {
     background-image: url('../assets/ico-placeholder.svg');
     background-color: #F2F2F2;
     background-size: 40px;
@@ -355,7 +351,7 @@
     opacity: .4;
     display: inline-block;
   }
-  
+
   &-final {
     display: inline-block;
   }

stylesheets/main.css

@@ -3380,7 +3380,7 @@ ul.menu .menu-item:before {
   bottom: 0;
   left: 0;
 }
-.editmode .item-top {
+.editmode .item-top:not(.without-pointer) {
   cursor: pointer;
 }
 .item-top:hover .btn,
@@ -3487,11 +3487,11 @@ ul.menu .menu-item:before {
   width: 100%;
   height: auto;
 }
-.with-image .item-top .top-inner:not(.product-page-image) {
+.item-top .top-inner .with-image {
   background-color: rgba(0, 0, 0, 0.05);
   border: 0;
 }
-.dark-background .with-image .item-top .top-inner:not(.product-page-image) {
+.dark-background .item-top .top-inner .with-image {
   background-color: rgba(255, 255, 255, 0.05);
 }
 .without-image .item-top .top-inner {
@@ -3502,12 +3502,6 @@ ul.menu .menu-item:before {
 .dark-background .without-image .item-top .top-inner {
   border-color: rgba(255, 255, 255, 0.1);
 }
-.item-top .top-inner.product-page-image > .item-image {
-  width: 100%;
-  height: 100%;
-  -o-object-fit: contain;
-     object-fit: contain;
-}
 .item-top .top-inner .item-placeholder {
   padding: 0.5em;
   text-transform: none;
@@ -3600,7 +3594,7 @@ ul.menu .menu-item:before {
 .product-content .edy-buy-button-container {
   margin: 24px 0;
 }
-.product-content .without-image .item-top {
+.product-content .without-images {
   background-image: url("../assets/ico-placeholder.svg");
   background-color: #F2F2F2;
   background-size: 40px;