Merge pull request #71 from findify/feature/FINDEV-1619-promo-styling…

…-options Feature/findev 1619 promo styling options
findify · Jun 18, 2024 · 21b766d · 21b766d
2 parents 315715f + dada177
commit 21b766d
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 18 deletions.
diff --git a/assets/findify-grid.css b/assets/findify-grid.css
@@ -123,6 +123,10 @@ b {
   .findify-search-desktop-breadcrumb {
     margin-bottom: 15px;
   }
+
+  .findify-product-list {
+    grid-auto-flow: dense;
+  }
 }
 
 @media (max-width: 768px) {

diff --git a/assets/findify-promo-card.css b/assets/findify-promo-card.css
@@ -3,14 +3,15 @@
   height: 100%;
   width: 100%;
   flex-direction: column;
+  min-height: 380px;
 }
 
 .findify-promo-card-wrapper {
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   background-size: cover;
-  height: 90%;
+  height: 100%;
   cursor: pointer;
   background-position: center;
   overflow: hidden;
@@ -29,6 +30,7 @@
   text-align: center;
   font-weight: 600;
   margin-bottom: 0px;
+  margin-top: 0px;
 }
 
 .findify-promo-card-subheader {
@@ -53,9 +55,40 @@
   margin-bottom: 15px;
 }
 
+.findify-promo-card-cta-button-fullwidth {
+  width: 90%;
+}
+
+.findify-promo-card-title-container-left {
+  align-items: start;
+  margin-left: 10px;
+}
+
+.findify-promo-card-title-container-right {
+  align-items: end;
+  margin-right: 10px;
+}
+
+.findify-promo-card-title-container-center {
+  align-items: center;
+}
+
+.findify-promo-card-title-container-top {
+  justify-content: start;
+  margin-top: 10px;
+}
+
+.findify-promo-card-title-container-bottom {
+  justify-content: end;
+  margin-bottom: 10px;
+}
+
+.findify-promo-card-title-container-middle {
+  justify-content: center;
+}
+
 .findify-promo-card-footer {
   text-align: center;
   padding: 10px 20px 0 20px;
-
   width: 100%;
 }
diff --git a/sections/findify-promo-card.liquid b/sections/findify-promo-card.liquid
@@ -9,33 +9,78 @@
 {%- assign top_header = parameters | split: 'top_header=' | last | split: '&' | first -%}
 {%- assign id = parameters | split: 'id=' | last | split: '&' | first -%}
 
-<div id="findify-promo-card-{{id}}" class="findify-promo-card">
+{%- assign margin_bottom_btn = parameters | split: 'margin_bottom_btn=' | last | split: '&' | first -%}
+{%- assign span_col = parameters | split: 'span_col=' | last | split: '&' | first -%}
+{%- assign span_row = parameters | split: 'span_row=' | last | split: '&' | first -%}
+{%- assign horizontal_align = parameters | split: 'horizontal_align=' | last | split: '&' | first -%}
+{%- assign vertical_align = parameters | split: 'vertical_align=' | last | split: '&' | first -%}
+{%- assign button_layout = parameters | split: 'button_layout=' | last | split: '&' | first -%}
+{%- assign header1_color = parameters | split: 'header1_color=' | last | split: '&' | first -%}
+{%- assign header2_color = parameters | split: 'header2_color=' | last | split: '&' | first -%}
+{%- assign button_text_color = parameters | split: 'button_text_color=' | last | split: '&' | first -%}
+
+{%- assign header1_size = parameters | split: 'header1_size=' | last | split: '&' | first -%}
+{%- assign header2_size = parameters | split: 'header2_size=' | last | split: '&' | first -%}
+{%- assign button_text_size = parameters | split: 'button_text_size=' | last | split: '&' | first -%}
+
+<div 
+  id="findify-promo-card-{{id}}" 
+  class="findify-promo-card"
+  style="
+    grid-column: auto / span {{ span_col }};
+    grid-row: span {{ span_row }}">
   {% if image_url != '' %}
-    <style>
-      #findify-promo-card-{{ id }} .findify-promo-card-wrapper {
-        background-image: url('{{image_url}}');
-      }
-    </style>
+  <style>
+    #findify-promo-card-{{ id }} .findify-promo-card-wrapper {
+      background-image: url('{{ image_url }}');
+    }
+  </style>
   {% endif %}
   <div class="findify-promo-card-wrapper">
-    <div class="findify-promo-card-title-container">
-      <h4 class="findify-promo-card-top-header">{{ top_header }}</h4>
-      <p class="findify-promo-card-subheader">{{ sub_header }}</p>
+    <div 
+     class="
+      findify-promo-card-title-container
+      findify-promo-card-title-container-{{ vertical_align }}
+      findify-promo-card-title-container-{{ horizontal_align }}
+      "
+     >
+      <h4 
+        class="findify-promo-card-top-header" 
+        style="color: {{ header1_color }}; font-size: {{ header1_size }}px">
+          {{ top_header }}
+      </h4>
+      <p 
+        class="findify-promo-card-subheader" 
+        style="color: {{ header2_color }}; font-size: {{ header2_size }}px">
+          {{ sub_header }}
+      </p>
     </div>
     {% if cta_text != '' %}
-      <a href="{{redirect_link}}" class="findify-promo-card-cta-button">{{ cta_text }}</a>
+    <a 
+      href="{{redirect_link}}" 
+      class="
+        findify-promo-card-cta-button 
+        {% if button_layout == 'fullwidth' %}
+          findify-promo-card-cta-button-fullwidth
+        {% endif %}"
+      style=" 
+        margin-bottom: {{ margin_bottom_btn }}px;
+        color: {{ button_text_color }}; 
+        font-size: {{ button_text_size }}px">
+          {{cta_text }}
+    </a>
     {% endif %}
   </div>
-{% comment %}
+  {% comment %}
   <div class="findify-promo-card-footer">{{footer}}</div>
-{% endcomment %}
+  {% endcomment %}
 </div>
 
 {% schema %}
-  {
-    "name": "Findify promo card",
-    "settings": []
-  }
+{
+"name": "Findify promo card",
+"settings": []
+}
 {% endschema %}
 
 {% stylesheet %}