Badge,Price,template name fix

konnected-io · Oct 3, 2023 · da90088 · da90088
1 parent aa53fee
commit da90088
Show file tree

Hide file tree

Showing 19 changed files with 122 additions and 150 deletions.
diff --git a/assets/konnected.css b/assets/konnected.css
@@ -855,11 +855,52 @@ iframe#bwpFrame {
   font-weight: var(--font-heading-weight);
 }
 
+.badge {
+  font-weight: 600;
+}
+
+.badge-sold-out {
+  --color-background: var(--color-sold-badge);
+  color: rgb(var(--color-base-text));
+}
+
+.badge-sale {
+  --color-background: var(--color-sale-badge);
+}
 
 .custom-badge {
+  --color-background: var(--color-custom-badge);
   color: rgb(var(--color-base-text));
-  font-weight: 600;
-  --badge-corner-radius: 0;
+}
+
+.price--on-sale .price-item--regular {
+  font-weight: normal !important;
+  font-size: 1.4rem !important;
+  top: -2px;
+  position: relative;
+}
+
+.product .price--sold-out .price__badge-sold-out {
+  background: rgb(var(--color-background)) !important;
+}
+
+.price__sale.swap-flex {
+  display: flex !important;
+  align-items: center;
+  flex-direction: row-reverse !important;
+  gap: 0.5rem;
+}
+
+.product .price .badge {
+  margin-left: 1rem;
+}
+
+.price {
+  letter-spacing: 0 !important;
+}
+
+.price .price-item {
+  margin: 0 0.3rem 0 0 !important;
 }
 
 .has-cbadge .custom-badge {

diff --git a/config/settings_data.json b/config/settings_data.json
@@ -17,7 +17,10 @@
     "card_style": "standard",
     "text_boxes_border_thickness": 0,
     "media_radius": 20,
+    "badge_corner_radius": 0,
     "custom_badge_color_bg": "#47f5a3",
+    "sale_badge_color_bg": "#bc0001",
+    "sold_badge_color_bg": "#dcdcdc",
     "social_facebook_link": "https:\/\/www.facebook.com\/konnected.io\/",
     "social_instagram_link": "https:\/\/www.instagram.com\/konnected.io\/",
     "social_youtube_link": "https:\/\/www.youtube.com\/c\/konnected-io",

diff --git a/config/settings_schema.json b/config/settings_schema.json
@@ -1350,6 +1350,16 @@
         "type": "color",
         "id": "custom_badge_color_bg",
         "label": "Custom Badge Color"
+      },
+      {
+        "type": "color",
+        "id": "sale_badge_color_bg",
+        "label": "Sale Badge Color"
+      },
+      {
+        "type": "color",
+        "id": "sold_badge_color_bg",
+        "label": "Sold Badge Color"
       }
     ]
   },

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -86,8 +86,11 @@
         --color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
         --color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
         --color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
+        --color-sold-badge: {{ settings.sold_badge_color_bg.red }}, {{ settings.sold_badge_color_bg.green }}, {{ settings.sold_badge_color_bg.blue }};
+        --color-sale-badge: {{ settings.sale_badge_color_bg.red }}, {{ settings.sale_badge_color_bg.green }}, {{ settings.sale_badge_color_bg.blue }};
+        --color-custom-badge: {{ settings.custom_badge_color_bg.red }}, {{ settings.custom_badge_color_bg.green }}, {{ settings.custom_badge_color_bg.blue }};
         --payment-terms-background-color: {{ settings.colors_background_1 }};
-
+ 
         --gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
         --gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
         --gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};

diff --git a/locales/en.default.json b/locales/en.default.json
@@ -118,7 +118,7 @@
       "inventory_out_of_stock": "Out of stock",
       "inventory_out_of_stock_continue_selling": "In stock",
       "sku": "SKU",
-      "on_sale": "Sale",
+      "on_sale": "SALE!",
       "partner_label": "Partner Pricing",
       "product_variants": "Product variants",
       "media": {

diff --git a/sections/header.liquid b/sections/header.liquid
@@ -249,7 +249,7 @@
       {% assign shopLink = '/collections/shop-now' %}
 
       {% if customer.tags contains 'wholesale' %}
-        {% assign shopLink = '/collections/wholesale' %}
+        {% assign shopLink = '/collections/partners-and-resellers' %}
       {% endif %}
 
       <a class="shop-btn" href="{{ shopLink }}">Shop Now</a>

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -94,7 +94,8 @@
                   product: product,
                   use_variant: true,
                   show_badges: true,
-                  price_class: 'price--large'
+                  price_class: 'price--large',
+                  pdpBox: true
                 -%}
               </div>
               {%- if cart.taxes_included or shop.shipping_policy.body != blank -%}

diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
@@ -122,16 +122,15 @@
             {%- if card_product.available == false -%}
               <span
                 id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
-                class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
+                class="badge badge--bottom-left badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}"
               >
                 {{- 'products.product.sold_out' | t -}}
               </span>
             {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
               <span
                 id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
-                class="badge {% if card_product.type == 'Wholesale' %}custom-badge{% endif %} badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
-                {% if card_product.type == 'Wholesale' %}style="--color-background: {{ settings.custom_badge_color_bg.red }}, {{ settings.custom_badge_color_bg.green }}, {{ settings.custom_badge_color_bg.blue }};"{% endif %}
-              >
+                class="badge badge-sale {% if card_product.type == 'Wholesale' %}custom-badge{% endif %} badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
+              > 
                 {% if card_product.type == 'Wholesale' %}
                   {{ 'products.product.partner_label' | t }}
                 {% else %}
@@ -324,15 +323,14 @@
           {%- if card_product.available == false -%}
             <span
               id="Badge-{{ section_id }}-{{ card_product.id }}"
-              class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
+              class="badge badge-sold-out badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
             >
               {{- 'products.product.sold_out' | t -}}
             </span>
           {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
             <span
               id="Badge-{{ section_id }}-{{ card_product.id }}"
-              class="badge badge--bottom-left {% if card_product.type == 'Wholesale' and customer.tags contains 'wholesale' %}custom-badge{% endif %} color-{{ settings.sale_badge_color_scheme }}"
-              {% if card_product.type == 'Wholesale' and customer.tags contains 'wholesale' %}style="--color-background: {{ settings.custom_badge_color_bg.red }}, {{ settings.custom_badge_color_bg.green }}, {{ settings.custom_badge_color_bg.blue }};"{% endif %}
+              class="badge badge--bottom-left badge-sale {% if card_product.type == 'Wholesale' and customer.tags contains 'wholesale' %}custom-badge{% endif %} color-{{ settings.sale_badge_color_scheme }}"
             >
               {% if card_product.type == 'Wholesale' and customer.tags contains 'wholesale' %}
                 {{ 'products.product.partner_label' | t }}

diff --git a/snippets/header-drawer.liquid b/snippets/header-drawer.liquid
@@ -111,7 +111,7 @@
               <li>
 
                 {% if customer.tags contains 'wholesale' %}
-                  {% assign shopLink = '/collections/wholesale' %}
+                  {% assign shopLink = '/collections/partners-and-resellers' %}
                 {% else %}
                   {% assign shopLink = '/collections/shop-now' %}
                 {% endif %}

diff --git a/snippets/price.liquid b/snippets/price.liquid
@@ -50,7 +50,7 @@
         {{ money_price }}
       </span>
     </div>
-    <div class="price__sale">
+    <div class="price__sale {% unless pdpBox or product.price_varies == false or product.compare_at_price_varies == false %}swap-flex{% endunless %}">
       {%- unless product.price_varies == false and product.compare_at_price_varies %}
         <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
         <span>
@@ -84,15 +84,15 @@
     </small>
   </div>
   {%- if show_badges -%}
-    <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }} {% if product.type == 'Wholesale' and customer.tags contains 'wholesale' %}custom-badge{% endif %}" {% if product.type == 'Wholesale' and customer.tags contains 'wholesale' %}style="--color-background: {{ settings.custom_badge_color_bg.red }}, {{ settings.custom_badge_color_bg.green }}, {{ settings.custom_badge_color_bg.blue }};"{% endif %}>
+    <span class="badge price__badge-sale badge-sale color-{{ settings.sale_badge_color_scheme }} {% if product.type == 'Wholesale' and customer.tags contains 'wholesale' %}custom-badge{% endif %}">
       {% if product.type == 'Wholesale' and customer.tags contains 'wholesale' %}
         {{ 'products.product.partner_label' | t }}
-      {% else %}
+      {% else %} 
         {{ 'products.product.on_sale' | t }}
       {% endif %} 
     </span>
 
-    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
+    <span class="badge price__badge-sold-out badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
       {{ 'products.product.sold_out' | t }}
     </span>
   {%- endif -%}

diff --git a/templates/collection.alarm-kits-sale.json b/templates/collection.alarm-kits-sale.json
diff --git a/templates/collection.partners-and-resellers.json b/templates/collection.partners-and-resellers.json
@@ -9,50 +9,51 @@
         "color_scheme": "background-1"
       }
     },
-    "33d9a8fc-3c93-49cb-af91-4c82accd5904": {
-      "type": "k-quiz",
+    "00980e59-2fd3-4a9b-9bc8-bc20a9402e7b": {
+      "type": "k-image-banner",
       "blocks": {
-        "7cfa2d0f-86b8-4298-a0eb-593fc91fe242": {
-          "type": "heading",
+        "faa3c26c-b81f-47f5-af80-da36403d6cea": {
+          "type": "slide1",
           "settings": {
-            "heading": "Find the right Alarm Panel for you!",
-            "heading_size": "h1"
-          }
-        },
-        "7c2c1f4c-d43e-45ed-bff0-a6471f8ecc33": {
-          "type": "text",
-          "settings": {
-            "text": "Take our simple product quiz and we’ll help find what’s right for your household.",
-            "text_style": "body"
-          }
-        },
-        "template--19134354751803__33d9a8fc-3c93-49cb-af91-4c82accd5904-168476023329fb6e3b-1": {
-          "type": "buttons",
-          "settings": {
-            "button_label_1": "Take Quiz",
+            "image": "shopify:\/\/shop_images\/ppbanner.jpg",
+            "image_overlay_opacity": 0,
+            "image_height": "adapt",
+            "desktop_content_position": "middle-left",
+            "show_text_box": false,
+            "desktop_content_alignment": "left",
+            "heading": "<p>Hello, <br\/>Partner<\/p>",
+            "heading_size": "h0",
+            "dark_text": true,
+            "text": "Here you can shop the exclusive partner pricing and the rest of the catalog.",
+            "text_style": "body",
+            "wrap_text": true,
+            "button_label_1": "",
+            "button_link_1": "",
             "button_style_secondary_1": false,
-            "button_label_2": "Exit Quiz"
+            "button_label_2": "",
+            "button_link_2": "",
+            "button_style_secondary_2": false,
+            "new_tab": false,
+            "mobile_content_alignment": "center",
+            "stack_images_on_mobile": false,
+            "show_text_below": false
           }
         }
       },
       "block_order": [
-        "7cfa2d0f-86b8-4298-a0eb-593fc91fe242",
-        "7c2c1f4c-d43e-45ed-bff0-a6471f8ecc33",
-        "template--19134354751803__33d9a8fc-3c93-49cb-af91-4c82accd5904-168476023329fb6e3b-1"
+        "faa3c26c-b81f-47f5-af80-da36403d6cea"
+      ],
+      "custom_css": [
+        "@media (min-width: 750px) {.wrap-text {max-width: 38rem; }}",
+        "@media (max-width: 749px) {.banner__heading p br {display: none; }}"
       ],
       "settings": {
-        "image": "shopify:\/\/shop_images\/ManThinking_Quiz_banner_2_copy_1_1.png",
-        "image_overlay_opacity": 0,
-        "image_height": "adapt",
-        "desktop_content_position": "middle-left",
-        "show_text_box": false,
-        "desktop_content_alignment": "left",
+        "slider_visual": "counter",
+        "auto_rotate": false,
+        "change_slides_speed": 5,
+        "swipe_on_mobile": false,
         "color_scheme": "background-1",
-        "image_behavior": "none",
-        "mobile_content_alignment": "center",
-        "bg_alignment_mobile": "center",
-        "stack_images_on_mobile": false,
-        "show_text_below": false
+        "image_behavior": "none"
       }
     },
     "product-grid": {
@@ -61,7 +62,7 @@
         "enable_infinite": true,
         "products_per_page": 16,
         "columns_desktop": 4,
-        "image_ratio": "adapt",
+        "image_ratio": "square",
         "image_shape": "default",
         "show_secondary_image": false,
         "show_vendor": false,
@@ -78,7 +79,7 @@
   },
   "order": [
     "banner",
-    "33d9a8fc-3c93-49cb-af91-4c82accd5904",
+    "00980e59-2fd3-4a9b-9bc8-bc20a9402e7b",
     "product-grid"
   ]
-}
+}