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

javascripts/editmode.js

@@ -528,16 +528,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 () {
     bindCustomDataItem();
     handleDocument();
@@ -556,7 +546,6 @@
     frontPageContentCoverBgCommit: frontPageContentCoverBgCommit,
     frontPageContentCoverBgPreview: frontPageContentCoverBgPreview,
     handleFrontPageContentCoverColorScheme: handleFrontPageContentCoverColorScheme,
-    handleProductImageClick: handleProductImageClick,
     toggleFlags: toggleFlags
   });
 

layouts/auto_generated_product.tpl

@@ -45,22 +45,20 @@
         <div class="flex_row flex_row-2 mar_0-32-neg" data-search-indexing-allowed="true">
           <div class="flex_row-2--item-50">
             <div class="mar_0-32 p-rel js-product-page-image-wrap">
-              {%- 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-illustrations">
                 <div class="content-item-box {{ item_image_state }} mar_b-32 js-content-item-box" data-item-type="page">
-                  <div class="item-top product-image">
-                    {%- if product.image != blank- %}
-                      <div class="top-inner aspect-ratio-inner">
-                        {%- assign image_class = "item-image not-cropped" -%}
-                        {% image product.image target_width: "600" class: image_class loading: "lazy" %}
-                      </div>
-                    {%- endif -%}
-                  </div>
+                  {%- if product.photos == blank -%}
+                    <div class="item-top without-pointer"></div>
+                  {%- else -%}
+                    {% gallery product layout="product_slider" %}
+                  {%- endif -%}
                 </div>
               </div>
             </div>
@@ -173,9 +171,6 @@
   <script>
     if (site) {
       site.handleProductPageContent();
-      {%- if product and editmode %}
-        site.handleProductImageClick({{ product.id }});
-      {% endif -%}
     }
   </script>
 </body>

sources/javascripts/concat/editmode/editmode.js

@@ -528,16 +528,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 () {
     bindCustomDataItem();
     handleDocument();
@@ -556,7 +546,6 @@
     frontPageContentCoverBgCommit: frontPageContentCoverBgCommit,
     frontPageContentCoverBgPreview: frontPageContentCoverBgPreview,
     handleFrontPageContentCoverColorScheme: handleFrontPageContentCoverColorScheme,
-    handleProductImageClick: handleProductImageClick,
     toggleFlags: toggleFlags
   });
 

sources/stylesheets/components/_image-drop-area.scss

@@ -7,8 +7,10 @@
   overflow: hidden;
   margin-top: 10px;
 
-  .editmode & {
-    cursor: pointer;
+  &:not(.without-pointer) {
+    .editmode & {
+      cursor: pointer;
+    }
   }
 
   &:hover {
@@ -57,7 +59,8 @@
     }
   }
 
-  .without-image & {
+  .without-image &,
+  .without-images & {
     background-color: $white;
     background-image: url('../assets/ico-placeholder.svg');
     background-size: 40px;

stylesheets/main.css

@@ -345,7 +345,7 @@ body.search-open {
   bottom: 0;
   left: 0;
 }
-.editmode .item-top {
+.editmode .item-top:not(.without-pointer) {
   cursor: pointer;
 }
 .item-top:hover .btn,
@@ -389,7 +389,7 @@ body.search-open {
 .item-top .bg-crop-btn.is-hidden, .without-image .editmode .item-top .bg-crop-btn {
   display: none;
 }
-.without-image .item-top {
+.without-image .item-top, .without-images .item-top {
   background-color: #FFFFFF;
   background-image: url("../assets/ico-placeholder.svg");
   background-size: 40px;