Merge pull request #67 from konnected-io/feature/backorder-notice

Backorder notice
konnected-io · Nov 28, 2023 · 896f1fc · 896f1fc
2 parents 81168ad + 81362b6
commit 896f1fc
Show file tree

Hide file tree

Showing 9 changed files with 153 additions and 7 deletions.
diff --git a/assets/konnected.css b/assets/konnected.css
@@ -981,6 +981,39 @@ slideshow-component .slider-button {
 }
 
 /* Product */
+.backorder-notice {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  max-width: 50rem;
+  justify-content: center;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  margin-top: -1rem !important;
+  padding: 1.5rem 1.5rem;
+}
+
+.backorder-notice p {
+  margin: 0;
+  line-height: 1.2em;
+}
+
+.backorder-notice img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+.backorder-notice>div {
+  flex: 0 auto;
+}
+
+.backorder-notice > div:first-child {
+  max-width: 2rem;
+}
+
 .preorder-text {
   margin-bottom: -1.5rem !important;
 }

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -72,6 +72,23 @@
           {%- case block.type -%}
             {%- when '@app' -%}
               {% render block %}
+            {% when 'backorder' %}
+              {% if block.settings.content != blank %}
+                <div class="backorder-notice" style="--bg-color: {{ block.settings.bg_color }};--text-color: {{ block.settings.text_color }};">
+                  {% if block.settings.icon != blank %}
+                    <div>
+                      {{ block.settings.icon | image_url: width: 80 | image_tag:
+                        loading: lazy
+                      }}
+                    </div>
+                  {% endif %}
+                  {% if block.settings.content != blank %}
+                    <div>
+                      {{ block.settings.content }}
+                    </div>
+                  {% endif %}
+                </div>
+              {% endif %}
             {%- when 'text' -%}
               <p
                 class="product__text inline-richtext{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}"
@@ -592,6 +609,32 @@
     {
       "type": "@app"
     },
+    {
+      "type": "backorder",
+      "name": "Back-order message",
+      "settings": [
+        {
+          "type": "image_picker",
+          "id": "icon",
+          "label": "Icon"
+        },
+        {
+          "type": "richtext",
+          "id": "content",
+          "label": "Content"
+        },
+        {
+          "type": "color",
+          "id": "bg_color",
+          "label": "Background color"
+        },
+        {
+          "type": "color",
+          "id": "text_color",
+          "label": "Text color"
+        }
+      ]
+    },
     {
       "type": "richtext",
       "name": "Rich text block",

diff --git a/templates/product.backup-battery-pdp.json b/templates/product.backup-battery-pdp.json
@@ -76,6 +76,15 @@
             "custom_liquid": "{% unless product.type == 'Wholesale' %}\n    <!-- Beginning of Buy With Prime Widget -->\n    {% if product.sku %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.sku}}\"\n            ><\/div>\n        <\/div>\n        {% else %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-2.3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.selected_or_first_available_variant.sku}}\"\n            ><\/div>\n        <\/div>\n    {% endif %}\n    <!-- End of Buy With Prime Widget -->\n{% endunless %}"
           }
         },
+        "37bbc0b5-5a50-4d69-bb25-b3b72d39016a": {
+          "type": "backorder",
+          "settings": {
+            "icon": "shopify:\/\/shop_images\/Warning.svg",
+            "content": "{{ product.metafields.custom.backorder_text | metafield_tag }}",
+            "bg_color": "#fdf0d7",
+            "text_color": "#be733c"
+          }
+        },
         "8844cfe1-aa50-4545-8891-8470166450f7": {
           "type": "custom_liquid",
           "settings": {
@@ -153,6 +162,7 @@
         "31dd665b-426f-4fe9-8991-0c4203a5db0f",
         "buy_buttons",
         "6946b621-21f5-44b7-951e-5daf3539d711",
+        "37bbc0b5-5a50-4d69-bb25-b3b72d39016a",
         "8844cfe1-aa50-4545-8891-8470166450f7",
         "description",
         "collapsible-row-1",
@@ -607,4 +617,4 @@
     "1cfb2210-2967-4e12-ab04-91d2cf221bf9",
     "16796019742a86b0ad"
   ]
-}
+}
diff --git a/templates/product.garage-door-opener.json b/templates/product.garage-door-opener.json
@@ -76,6 +76,15 @@
             "custom_liquid": "{% unless product.type == 'Wholesale' %}\n    <!-- Beginning of Buy With Prime Widget -->\n    {% if product.sku %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.sku}}\"\n            ><\/div>\n        <\/div>\n        {% else %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-2.3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.selected_or_first_available_variant.sku}}\"\n            ><\/div>\n        <\/div>\n    {% endif %}\n    <!-- End of Buy With Prime Widget -->\n{% endunless %}"
           }
         },
+        "e4f226a5-d463-40c8-9466-bb77982d5ebd": {
+          "type": "backorder",
+          "settings": {
+            "icon": "shopify:\/\/shop_images\/Warning.svg",
+            "content": "{{ product.metafields.custom.backorder_text | metafield_tag }}",
+            "bg_color": "#fdf0d7",
+            "text_color": "#be733c"
+          }
+        },
         "c54d400c-04e2-4223-9997-8c54a7b9d32d": {
           "type": "custom_liquid",
           "settings": {
@@ -193,6 +202,7 @@
         "e145a4f4-9945-471e-8cdc-960ffdd067a7",
         "buy_buttons",
         "6c4b36af-e190-443a-9d90-0d57c7b96795",
+        "e4f226a5-d463-40c8-9466-bb77982d5ebd",
         "c54d400c-04e2-4223-9997-8c54a7b9d32d",
         "description",
         "collapsible-row-0",
@@ -1358,4 +1368,4 @@
     "bf53a2af-c80e-41fd-b35f-d7ca24e672fc",
     "16853831377ff6f5d4"
   ]
-}
+}
diff --git a/templates/product.json b/templates/product.json
@@ -76,6 +76,15 @@
             "custom_liquid": "{% unless product.type == 'Wholesale' %}\n    <!-- Beginning of Buy With Prime Widget -->\n    {% if product.sku %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.sku}}\"\n            ><\/div>\n        <\/div>\n        {% else %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-2.3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.selected_or_first_available_variant.sku}}\"\n            ><\/div>\n        <\/div>\n    {% endif %}\n    <!-- End of Buy With Prime Widget -->\n{% endunless %}"
           }
         },
+        "9fd1e51c-542e-48cd-9ce5-072bedd0041a": {
+          "type": "backorder",
+          "settings": {
+            "icon": "shopify:\/\/shop_images\/Warning.svg",
+            "content": "{{ product.metafields.custom.backorder_text | metafield_tag }}",
+            "bg_color": "#fdf0d7",
+            "text_color": "#be733c"
+          }
+        },
         "30095489-f50d-4fca-8dd7-b57ec6e9132b": {
           "type": "custom_liquid",
           "settings": {
@@ -153,6 +162,7 @@
         "31dd665b-426f-4fe9-8991-0c4203a5db0f",
         "buy_buttons",
         "6946b621-21f5-44b7-951e-5daf3539d711",
+        "9fd1e51c-542e-48cd-9ce5-072bedd0041a",
         "30095489-f50d-4fca-8dd7-b57ec6e9132b",
         "description",
         "collapsible-row-1",

diff --git a/templates/product.pro-conversion-kit.json b/templates/product.pro-conversion-kit.json
@@ -81,6 +81,15 @@
             "custom_liquid": "{% unless product.type == 'Wholesale' %}\n    <!-- Beginning of Buy With Prime Widget -->\n    {% if product.sku %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.sku}}\"\n            ><\/div>\n        <\/div>\n        {% else %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-2.3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.selected_or_first_available_variant.sku}}\"\n            ><\/div>\n        <\/div>\n    {% endif %}\n    <!-- End of Buy With Prime Widget -->\n{% endunless %}"
           }
         },
+        "d47a9761-1242-4f02-b05c-6d65696fd06a": {
+          "type": "backorder",
+          "settings": {
+            "icon": "shopify:\/\/shop_images\/Warning.svg",
+            "content": "<p>{{ product.metafields.custom.backorder_text | metafield_tag }}<\/p>",
+            "bg_color": "#fdf0d7",
+            "text_color": "#be733c"
+          }
+        },
         "6f267def-e823-468a-bf78-99f0f263ecbc": {
           "type": "custom_liquid",
           "settings": {
@@ -175,6 +184,7 @@
         "104f977f-8fbe-48a1-a41a-3b6b4ad7e591",
         "buy_buttons",
         "2777f450-1d93-4fd4-b506-fc787f178661",
+        "d47a9761-1242-4f02-b05c-6d65696fd06a",
         "6f267def-e823-468a-bf78-99f0f263ecbc",
         "collapsible-row-0",
         "collapsible-row-1",
@@ -1294,4 +1304,4 @@
     "1658354636f30e9d06",
     "related-products"
   ]
-}
+}
diff --git a/templates/product.pro-interface-kit.json b/templates/product.pro-interface-kit.json
@@ -81,6 +81,15 @@
             "custom_liquid": "{% unless product.type == 'Wholesale' %}\n    <!-- Beginning of Buy With Prime Widget -->\n    {% if product.sku %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.sku}}\"\n            ><\/div>\n        <\/div>\n        {% else %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-2.3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.selected_or_first_available_variant.sku}}\"\n            ><\/div>\n        <\/div>\n    {% endif %}\n    <!-- End of Buy With Prime Widget -->\n{% endunless %}"
           }
         },
+        "67889c8e-0e8f-46b6-857e-2cb440702606": {
+          "type": "backorder",
+          "settings": {
+            "icon": "shopify:\/\/shop_images\/Warning.svg",
+            "content": "{{ product.metafields.custom.backorder_text | metafield_tag }}",
+            "bg_color": "#fdf0d7",
+            "text_color": "#be733c"
+          }
+        },
         "a6bdfe84-9a06-4bdf-b3ff-9285d86430d0": {
           "type": "custom_liquid",
           "settings": {
@@ -174,6 +183,7 @@
         "71881e6e-2262-4ec2-a7d7-c508b804343f",
         "buy_buttons",
         "fc0cbbce-9615-4316-9b25-086f812c320d",
+        "67889c8e-0e8f-46b6-857e-2cb440702606",
         "a6bdfe84-9a06-4bdf-b3ff-9285d86430d0",
         "fc72b1cd-6e17-442e-8542-b8208d15ceb4",
         "collapsible-row-0",
@@ -1302,4 +1312,4 @@
     "1658354636f30e9d06",
     "related-products"
   ]
-}
+}
diff --git a/templates/product.starter-conversion-kit.json b/templates/product.starter-conversion-kit.json
@@ -72,6 +72,15 @@
             "custom_liquid": "{% unless product.type == 'Wholesale' %}\n    <!-- Beginning of Buy With Prime Widget -->\n    {% if product.sku %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.sku}}\"\n            ><\/div>\n        <\/div>\n        {% else %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-2.3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.selected_or_first_available_variant.sku}}\"\n            ><\/div>\n        <\/div>\n    {% endif %}\n    <!-- End of Buy With Prime Widget -->\n{% endunless %}"
           }
         },
+        "a6ffcba8-48c0-4813-90b6-c6dbb077eac0": {
+          "type": "backorder",
+          "settings": {
+            "icon": "shopify:\/\/shop_images\/Warning.svg",
+            "content": "{{ product.metafields.custom.backorder_text | metafield_tag }}",
+            "bg_color": "#fdf0d7",
+            "text_color": "#be733c"
+          }
+        },
         "22b6aca6-a566-4db2-bcac-c46898076018": {
           "type": "custom_liquid",
           "settings": {
@@ -165,6 +174,7 @@
         "634d0bc1-554d-457a-9722-f1d980982ac5",
         "buy_buttons",
         "108f1dd0-3bb7-42ae-98e1-1b43c74227b1",
+        "a6ffcba8-48c0-4813-90b6-c6dbb077eac0",
         "22b6aca6-a566-4db2-bcac-c46898076018",
         "collapsible-row-0",
         "collapsible-row-1",
@@ -683,7 +693,7 @@
         "heading_size": "h2",
         "description": "<p>Breathe new life into all the sensors already wired in your home and make them visible and actionable in your smart home app.<\/p>",
         "description_style": "body",
-        "icons_bg": "#E6F7FE",
+        "icons_bg": "#e6f7fe",
         "text_list": "Door and Window Sensors\nWired PIR Motion Sensors\nWired Glass-Break Detectors\nWater Leak Detectors\nSmoke and Carbon Monoxide Detectors*\nAlarm Siren and Strobe Light",
         "text_warning": "*THIS PRODUCT IS NOT A FIRE OR LIFE SAFETY DEVICE. Use with smoke and carbon monoxide detectors is for informational purposes only. Do not rely on Konnected alone to notify you in a life threatening emergency.",
         "color_scheme": "background-1",
@@ -1285,4 +1295,4 @@
     "1658354636f30e9d06",
     "related-products"
   ]
-}
+}
diff --git a/templates/product.starter-interface-kit.json b/templates/product.starter-interface-kit.json
@@ -81,6 +81,15 @@
             "custom_liquid": "{% unless product.type == 'Wholesale' %}\n    <!-- Beginning of Buy With Prime Widget -->\n    {% if product.sku %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.sku}}\"\n            ><\/div>\n        <\/div>\n        {% else %}\n        <script defer src='https:\/\/code.buywithprime.amazon.com\/default.variant.selector.shopify.js'><\/script>\n        <script async fetchpriority='high' src='https:\/\/code.buywithprime.amazon.com\/bwp.v1.js'><\/script>\n        <div class=\"product-form__buttons\" style=\"margin:-2.3rem 0 0;\">\n            <div class=\"or-separator\">OR<\/div>\n            <div\n                id=\"amzn-buy-now\"\n                data-site-id=\"blbt7vxfz4\"\n                data-widget-id=\"w-k7t1lPztfk2sAWtjZl66E1\"\n                data-sku=\"{{product.selected_or_first_available_variant.sku}}\"\n            ><\/div>\n        <\/div>\n    {% endif %}\n    <!-- End of Buy With Prime Widget -->\n{% endunless %}"
           }
         },
+        "57a4e7ab-29bc-40b4-9120-ef9c6d8fbec4": {
+          "type": "backorder",
+          "settings": {
+            "icon": "shopify:\/\/shop_images\/Warning.svg",
+            "content": "{{ product.metafields.custom.backorder_text | metafield_tag }}",
+            "bg_color": "#fdf0d7",
+            "text_color": "#be733c"
+          }
+        },
         "1b0361d2-d153-4d49-8f55-77c99dcc3e29": {
           "type": "custom_liquid",
           "settings": {
@@ -174,6 +183,7 @@
         "42f9e305-6754-4095-81f6-c942f78074b4",
         "buy_buttons",
         "87a49929-3f55-4f3e-bb10-d5cbe92d4384",
+        "57a4e7ab-29bc-40b4-9120-ef9c6d8fbec4",
         "1b0361d2-d153-4d49-8f55-77c99dcc3e29",
         "ca7d87ae-94a5-4424-83f4-9f8a699c99ad",
         "collapsible-row-0",
@@ -1302,4 +1312,4 @@
     "1658354636f30e9d06",
     "related-products"
   ]
-}
+}