Merge pull request #138 from Voog/137-product-multi-assets

Add multi-assets support to auto-rendered product page
Voog · Nov 27, 2023 · 0b66d20 · 0b66d20
2 parents 9223db9 + bfd6397
commit 0b66d20
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 39 deletions.
diff --git a/javascripts/editmode.js b/javascripts/editmode.js
@@ -695,14 +695,6 @@
     });
   };
 
-  // Opens product admin view on product image click
-
-  var handleProductImageClick = function(product_id) {
-    $('.product-content .product-image').click(function() {
-      window.open('/admin/ecommerce/products/' + product_id, '_blank').focus();
-    });
-  };
-
   var init = function() {
     bindCustomDataItem();
     handleDocument();
@@ -719,7 +711,6 @@
     bindProductListeners: bindProductListeners,
     initProductPageSettings: initProductPageSettings,
     initSettingsEditorBtn: initSettingsEditorBtn,
-    handleProductImageClick: handleProductImageClick
   });
 
   // Initiates site wide functions.

diff --git a/javascripts/editmode.min.js b/javascripts/editmode.min.js
diff --git a/layouts/auto_generated_product.tpl b/layouts/auto_generated_product.tpl
@@ -54,20 +54,20 @@
           <div class="flex_row flex_row-2 reverse-col-tablet mar_0-32-neg">
             <div class="flex_row-2--item-60">
               <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="js-product-page-image mar_b-32">
-                  <div class="content-item-box {{ item_image_state }} js-content-item-box not-loaded">
-                    <div class="item-top product-image">
+                  <div class="content-item-box {{ item_image_state }}">
+                    <div class="item-top without-pointer">
                       <div class="top-inner of-hidden">
-                        {%- if product.image != blank -%}
-                          <div class="loader js-loader"></div>
-                          {%- assign imageClass = "item-image " | append: "not-cropped " | append: "js-lazyload" -%}
-                          {% image_data product.image target_width="600" class: imageClass %}
+                        {%- if product.photos != blank -%}
+                          <div class="item-image">
+                            {% gallery product layout="product_slider" %}
+                          </div>
                         {%- endif -%}
                       </div>
                     </div>
@@ -185,9 +185,6 @@
   <script>
     if (site) {
       site.handleProductPageContent();
-      {%- if product and editmode %}
-        site.handleProductImageClick({{ product.id }});
-      {% endif -%}
     }
   </script>
   {% include "settings-popover" %}

diff --git a/sources/javascripts/concat/editmode/editmode.js b/sources/javascripts/concat/editmode/editmode.js
@@ -695,14 +695,6 @@
     });
   };
 
-  // Opens product admin view on product image click
-
-  var handleProductImageClick = function(product_id) {
-    $('.product-content .product-image').click(function() {
-      window.open('/admin/ecommerce/products/' + product_id, '_blank').focus();
-    });
-  };
-
   var init = function() {
     bindCustomDataItem();
     handleDocument();
@@ -719,7 +711,6 @@
     bindProductListeners: bindProductListeners,
     initProductPageSettings: initProductPageSettings,
     initSettingsEditorBtn: initSettingsEditorBtn,
-    handleProductImageClick: handleProductImageClick
   });
 
   // Initiates site wide functions.

diff --git a/sources/stylesheets/components/_image-drop-area.scss b/sources/stylesheets/components/_image-drop-area.scss
@@ -6,8 +6,10 @@
   justify-content: center;
   overflow: hidden;
 
-  .editmode & {
-    cursor: pointer;
+  &:not(.without-pointer) {
+    .editmode & {
+      cursor: pointer;
+    }
   }
 
   article & {
@@ -60,13 +62,15 @@
     }
   }
 
-  .without-image & {
+  .without-image &,
+  .without-images & {
     background-color: $white;
     background-image: url('../assets/ico-placeholder.svg');
     background-size: 40px;
     background-repeat: no-repeat;
     background-position: center;
   }
+
   .top-inner {
     // scss-lint:disable ImportantRule
     display: flex !important;
@@ -80,7 +84,8 @@
     width: 100%;
     background: transparent;
 
-    .without-image .editmode & {
+    .without-image .editmode &,
+    .without-images .editmode & {
       border: none;
     }
 

diff --git a/stylesheets/main.css b/stylesheets/main.css
@@ -4970,7 +4970,7 @@ body .edy-tick-checkbox-btn .edy-tick-checkbox-label-padded:hover {
   left: 0;
 }
 
-.editmode .item-top {
+.editmode .item-top:not(.without-pointer) {
   cursor: pointer;
 }
 
@@ -5042,7 +5042,8 @@ article .item-top > .aspect-ratio-inner {
   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;
@@ -5068,7 +5069,8 @@ article .item-top > .aspect-ratio-inner {
   background: transparent;
 }
 
-.without-image .editmode .item-top .top-inner {
+.without-image .editmode .item-top .top-inner,
+.without-images .editmode .item-top .top-inner {
   border: none;
 }
 

diff --git a/stylesheets/main.min.css b/stylesheets/main.min.css