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

Voog · Nov 30, 2023 · c0188b1 · c0188b1
1 parent d954332
commit c0188b1
Show file tree

Hide file tree

Showing 8 changed files with 19 additions and 45 deletions.
diff --git a/javascripts/main.js b/javascripts/main.js
@@ -1184,16 +1184,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();
-      });
-    }
-  };
-
   // Enables the usage of the initiations outside this file.
   window.site = $.extend(window.site || {}, {
     bgPickerColorScheme: bgPickerColorScheme,
@@ -1204,7 +1194,6 @@
     bindLanguageMenuSettings: bindLanguageMenuSettings,
     bindRootItemSettings: bindRootItemSettings,
     bindSiteSearch: bindSiteSearch,
-    handleProductImageClick: handleProductImageClick,
     handleProductPageContent: handleProductPageContent,
     initArticlePage: initArticlePage,
     initBlogPage: initBlogPage,

diff --git a/javascripts/main.min.js b/javascripts/main.min.js
diff --git a/layouts/auto_generated_product.tpl b/layouts/auto_generated_product.tpl
@@ -69,21 +69,18 @@
                     <div class="flex-col">
                       <div class="content-illustrations">
 
-                        {%- if product.image != blank %}
-                          {% assign item_image_state = "with-image" %}
-                        {% else %}
-                          {% assign item_image_state = "without-image" %}
-                        {% endif -%}
+                        {%- if product.photos != blank -%}
+                          {%- assign item_image_state = "with-images" -%}
+                        {%- else -%}
+                          {%- assign item_image_state = "without-images" -%}
+                        {%- endif -%}
 
                         <div class="content-item-box {{ item_image_state }} js-content-item-box">
-                          <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>
+                          {%- 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 -%}
@@ -202,9 +199,6 @@
     if (site) {
       site.initWindowResize();
       site.handleProductPageContent();
-      {%- if product and editmode %}
-        site.handleProductImageClick({{ product.id }});
-      {% endif -%}
     }
   </script>
 </body>

diff --git a/sources/javascripts/concat/base.js b/sources/javascripts/concat/base.js
@@ -1129,16 +1129,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();
-      });
-    }
-  };
-
   // Enables the usage of the initiations outside this file.
   window.site = $.extend(window.site || {}, {
     bgPickerColorScheme: bgPickerColorScheme,
@@ -1149,7 +1139,6 @@
     bindLanguageMenuSettings: bindLanguageMenuSettings,
     bindRootItemSettings: bindRootItemSettings,
     bindSiteSearch: bindSiteSearch,
-    handleProductImageClick: handleProductImageClick,
     handleProductPageContent: handleProductPageContent,
     initArticlePage: initArticlePage,
     initBlogPage: initBlogPage,

diff --git a/sources/stylesheets/components/_content-item.scss b/sources/stylesheets/components/_content-item.scss
@@ -103,8 +103,10 @@
 .item-top {
   @include aspect-ratio(1, 1);
 
-  [data-view-state="editmode"] & {
-    cursor: pointer;
+  &:not(.without-pointer) {
+    [data-view-state="editmode"] & {
+      cursor: pointer;
+    }
   }
 
   &:hover {

diff --git a/sources/stylesheets/layouts/_auto-generated-product.scss b/sources/stylesheets/layouts/_auto-generated-product.scss
@@ -1,5 +1,5 @@
 .product-content {
-  .without-image .item-top {
+  .without-images .item-top {
     background-image: url("../assets/ico-placeholder.svg");
     background-size: 40px;
     background-repeat: no-repeat;

diff --git a/stylesheets/main.css b/stylesheets/main.css
@@ -1593,7 +1593,7 @@ a img {
   margin: 20px 0;
 }
 
-.product-content .without-image .item-top {
+.product-content .without-images .item-top {
   background-image: url("../assets/ico-placeholder.svg");
   background-size: 40px;
   background-repeat: no-repeat;
@@ -4204,7 +4204,7 @@ a img {
   bottom: 0;
   left: 0;
 }
-[data-view-state=editmode] .item-top {
+[data-view-state=editmode] .item-top:not(.without-pointer) {
   cursor: pointer;
 }
 .item-top:hover .btn,

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