Merge pull request #84 from findify/feature/FI-7903-liquid-product-ca…

…rd-layout added aspect ratio functionality using CSS variables
findify · Jul 3, 2024 · ac86a68 · ac86a68
2 parents f3aedfc + 4b7c24e
commit ac86a68
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 2 deletions.
diff --git a/assets/findify-product-card.css b/assets/findify-product-card.css
@@ -42,7 +42,7 @@ a:visited:not(.button) {
 
 .image-container {
   position: relative;
-  padding-top: 150%;
+  padding-top: var(--findify-product-card-aspect-ratio);
   display: inline-block;
   width: 100%;
 }

diff --git a/assets/findify-variables-defaults.css b/assets/findify-variables-defaults.css
@@ -33,4 +33,7 @@
 
   /* Sidebar mobile */
   --findify-sidebar-header-background-color: #000000;
+
+  /* Product Card */
+  --findify-product-card-aspect-ratio: 100%
 }
diff --git a/sections/findify-product-card.liquid b/sections/findify-product-card.liquid
@@ -19,7 +19,7 @@
           , media: product.featured_media
           , class: 'first-image' %}
       {% endif %}
-      {%- if product.media[1] != null -%}
+      {%- if product.media[1] != null and showHoverImage == 'true' -%}
         {% render 'findify-product-image'
           , media: product.media[1]
           , class: 'second-image' %}

diff --git a/snippets/findify-product-card-connector.liquid b/snippets/findify-product-card-connector.liquid
@@ -12,6 +12,11 @@
   if query_parameters contains "collectionSlot="
     assign collection_slot = query_parameters | split: "collectionSlot=" | last | split: "&" | first
   endif
+  # Product Show Hover Image
+  if query_parameters contains "showHoverImage="
+    assign showHoverImage = query_parameters | split: "showHoverImage=" | last | split: "&" | first
+  endif
+
   # Product metadata
   assign colormap = query_parameters | split: "colormap=" | last | split: "&" | first | split: ';'
   assign position = query_parameters | split: "position=" | last | split: "&" | first