From 18ce9cc6dfc8cc89befc4515302c71e29d652b2a Mon Sep 17 00:00:00 2001 From: Thomas Kelly Date: Thu, 27 Mar 2025 15:15:36 -0400 Subject: [PATCH 1/2] refactor: Use theme blocks for PDP --- blocks/_product-buy-buttons.liquid | 17 ++++ blocks/_product-description.liquid | 7 ++ blocks/_product-media-gallery.liquid | 7 ++ blocks/_product-price.liquid | 7 ++ blocks/_product-title.liquid | 20 +++++ blocks/_product-variant-picker.liquid | 25 ++++++ sections/main-product.liquid | 105 ++++------------------ snippets/block-product-description.liquid | 18 ---- snippets/product-media-gallery.liquid | 47 ---------- snippets/section-main-product.liquid | 2 +- templates/product.json | 50 ++++++----- 11 files changed, 132 insertions(+), 173 deletions(-) create mode 100644 blocks/_product-buy-buttons.liquid create mode 100644 blocks/_product-description.liquid create mode 100644 blocks/_product-media-gallery.liquid create mode 100644 blocks/_product-price.liquid create mode 100644 blocks/_product-title.liquid create mode 100644 blocks/_product-variant-picker.liquid delete mode 100644 snippets/block-product-description.liquid delete mode 100644 snippets/product-media-gallery.liquid diff --git a/blocks/_product-buy-buttons.liquid b/blocks/_product-buy-buttons.liquid new file mode 100644 index 0000000..868557d --- /dev/null +++ b/blocks/_product-buy-buttons.liquid @@ -0,0 +1,17 @@ +{% render 'product.block.buy-buttons' %} + +{% schema %} + { + "name": "t:labels.buy_buttons", + "settings": [ + { + "type": "checkbox", + "id": "show_dynamic_checkout", + "label": "t:actions.show_dynamic_checkout", + "default": true, + "info": "t:info.lets_customers_checkout_familiar" + } + ] + } +{% endschema %} + diff --git a/blocks/_product-description.liquid b/blocks/_product-description.liquid new file mode 100644 index 0000000..80378be --- /dev/null +++ b/blocks/_product-description.liquid @@ -0,0 +1,7 @@ +{%- render 'product.block.description', product: product -%} + +{% schema %} + { + "name": "t:labels.description" + } +{% endschema %} \ No newline at end of file diff --git a/blocks/_product-media-gallery.liquid b/blocks/_product-media-gallery.liquid new file mode 100644 index 0000000..c8428df --- /dev/null +++ b/blocks/_product-media-gallery.liquid @@ -0,0 +1,7 @@ +{% render 'product.block.media-gallery' %} + +{% schema %} + { + "name": "Product Media Gallery" + } +{% endschema %} diff --git a/blocks/_product-price.liquid b/blocks/_product-price.liquid new file mode 100644 index 0000000..a724c09 --- /dev/null +++ b/blocks/_product-price.liquid @@ -0,0 +1,7 @@ +{% render 'product.block.price' %} + +{% schema %} + { + "name": "t:labels.price" + } +{% endschema %} \ No newline at end of file diff --git a/blocks/_product-title.liquid b/blocks/_product-title.liquid new file mode 100644 index 0000000..330497f --- /dev/null +++ b/blocks/_product-title.liquid @@ -0,0 +1,20 @@ +{% render 'product.block.title' %} + +{% schema %} + { + "name": "t:labels.title", + "settings": [ + { + "type": "checkbox", + "id": "vendor_enable", + "label": "t:actions.show_vendor" + }, + { + "type": "checkbox", + "id": "sku_enable", + "label": "t:actions.show_sku", + "default": true + } + ] + } +{% endschema %} \ No newline at end of file diff --git a/blocks/_product-variant-picker.liquid b/blocks/_product-variant-picker.liquid new file mode 100644 index 0000000..428d4e4 --- /dev/null +++ b/blocks/_product-variant-picker.liquid @@ -0,0 +1,25 @@ +{% render 'product.block.variant-picker' %} + +{% schema %} + { + "name": "Variant picker", + "settings": [ + { + "type": "select", + "id": "picker_type", + "label": "t:labels.type", + "options": [ + { + "value": "button", + "label": "t:labels.buttons" + }, + { + "value": "dropdown", + "label": "t:labels.dropdown" + } + ], + "default": "button" + } + ] + } +{% endschema %} \ No newline at end of file diff --git a/sections/main-product.liquid b/sections/main-product.liquid index b898ca8..ae3e2a3 100644 --- a/sections/main-product.liquid +++ b/sections/main-product.liquid @@ -1,29 +1,21 @@ {%- liquid capture blocks - for block in section.blocks - case block.type - when '@app' - render block - when 'description' - render 'block-product-description', block: block - when 'variant_picker' - render 'block-variant-picker', block: block - when 'buy_buttons' - render 'block-buy-buttons', block: block - when 'title' - render 'block-title', block: block - when 'price' - render 'block-price', block: block - endcase - endfor + content_for 'blocks' endcapture - render 'section-main-product', slot_product_blocks: blocks --%} + render 'product.section.main', slot_product_blocks: blocks +-%} {% schema %} { "name": "t:labels.product", + "blocks": [ + { "type": "_product-buy-buttons" }, + { "type": "_product-description" }, + { "type": "_product-price" }, + { "type": "_product-title" }, + { "type": "_product-variant-picker" } + ], "settings": [ { "type": "header", @@ -50,74 +42,15 @@ "default": "left" } ], - "blocks": [ - { - "type": "@app" - }, - { - "type": "title", - "name": "t:labels.title", - "limit": 1, - "settings": [ - { - "type": "checkbox", - "id": "vendor_enable", - "label": "t:actions.show_vendor" - }, - { - "type": "checkbox", - "id": "sku_enable", - "label": "t:actions.show_sku", - "default": true - } - ] - }, - { - "type": "price", - "name": "t:labels.price", - "limit": 1 - }, - { - "type": "description", - "name": "t:labels.description", - "limit": 1, - "settings": [] - }, - { - "type": "variant_picker", - "name": "Variant picker", - "limit": 1, - "settings": [ - { - "type": "select", - "id": "picker_type", - "label": "t:labels.type", - "options": [ - { - "value": "button", - "label": "t:labels.buttons" - }, - { - "value": "dropdown", - "label": "t:labels.dropdown" - } - ], - "default": "button" - } - ] - }, - { - "type": "buy_buttons", - "name": "t:labels.buy_buttons", - "limit": 1, - "settings": [ - { - "type": "checkbox", - "id": "show_dynamic_checkout", - "label": "t:actions.show_dynamic_checkout", - "default": true, - "info": "t:info.lets_customers_checkout_familiar" - } + "presets": [ + { + "name": "t:labels.product", + "blocks": [ + { "type": "_product-title" }, + { "type": "_product-price" }, + { "type": "_product-variant-picker" }, + { "type": "_product-description" }, + { "type": "_product-buy-buttons" } ] } ] diff --git a/snippets/block-product-description.liquid b/snippets/block-product-description.liquid deleted file mode 100644 index 30af0ba..0000000 --- a/snippets/block-product-description.liquid +++ /dev/null @@ -1,18 +0,0 @@ -{%- comment -%} - Renders the product description - - Accepts: - - block {block} - Block object - - product {product} - Product object - - Usage: - {% render 'block-product-description', block: block %} -{%- endcomment -%} - -{% liquid - assign product = product | default: section.settings.product -%} - -
- {%- render 'product-description', product: product -%} -
diff --git a/snippets/product-media-gallery.liquid b/snippets/product-media-gallery.liquid deleted file mode 100644 index 23c07ca..0000000 --- a/snippets/product-media-gallery.liquid +++ /dev/null @@ -1,47 +0,0 @@ -{%- comment -%} - Renders a product media gallery - - Accepts: - - product {product} - The product object - - Usage: - {% render 'product-media-gallery' %} -{%- endcomment -%} - -{%- render 'stylesheet', name: 'component.product-media-gallery.css' -%} - -{%- liquid - assign default_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media - assign sizes = '(min-width: 48em) 60vw, 90vw' --%} - - - {%- for media in product.media -%} -
-
- {%- liquid - assign preload = false - - if default_media == media - assign preload = true - endif - - case media.media_type - when 'image' - render 'block-image', image: media, preload: preload, sizes: sizes - when 'video' - render 'block-video', video: media, autoplay: true - when 'external_video' - render 'block-video', external_video: media, autoplay: true - when 'model' - render 'block-model', model: media, autoplay: true - endcase - -%} -
-
- {%- endfor -%} - - - diff --git a/snippets/section-main-product.liquid b/snippets/section-main-product.liquid index b607456..10e253f 100644 --- a/snippets/section-main-product.liquid +++ b/snippets/section-main-product.liquid @@ -40,7 +40,7 @@ {%- if slot_product_gallery != blank -%} {{ slot_product_gallery }} {%- else -%} - {%- render 'product-media-gallery' -%} + {%- render 'product.block.media-gallery' -%} {%- endif -%} diff --git a/templates/product.json b/templates/product.json index 7a9a38e..52bb26f 100644 --- a/templates/product.json +++ b/templates/product.json @@ -1,38 +1,46 @@ { "sections": { - "main": { + "main_product": { "type": "main-product", "blocks": { - "title": { - "type": "title", + "product_title": { + "type": "_product-title", "settings": { - "vendor_enable": true, + "vendor_enable": false, "sku_enable": true } }, - "price": { - "type": "price" + "product_price": { + "type": "_product-price", + "settings": {} }, - "variant_picker": { - "type": "variant_picker" + "product_variant_picker": { + "type": "_product-variant-picker", + "settings": { + "picker_type": "button" + } }, - "description": { - "type": "description" + "product_description": { + "type": "_product-description", + "settings": {} }, - "buy_buttons": { - "type": "buy_buttons" + "product_buy_buttons": { + "type": "_product-buy-buttons", + "settings": { + "show_dynamic_checkout": true + } } }, "block_order": [ - "title", - "price", - "variant_picker", - "description", - "buy_buttons" + "product_title", + "product_price", + "product_variant_picker", + "product_description", + "product_buy_buttons" ], - "custom_css": [ - ".main-product {padding-top: 0;}" - ] + "settings": { + "image_position": "left" + } }, "media-with-text": { "type": "media-with-text", @@ -54,7 +62,7 @@ } }, "order": [ - "main", + "main_product", "media-with-text" ] } From b64b21363f394c0c5dd977d62a915c4b5d889021 Mon Sep 17 00:00:00 2001 From: Thomas Kelly Date: Thu, 27 Mar 2025 18:19:47 -0400 Subject: [PATCH 2/2] Install the updated components --- .gitignore | 1 + assets/component.block-variant-picker.css | 4 -- ...tons.css => product.block.buy-buttons.css} | 0 ...uttons.js => product.block.buy-buttons.js} | 0 ...ry.css => product.block.media-gallery.css} | 0 ...lery.js => product.block.media-gallery.js} | 0 ...lock-price.css => product.block.price.css} | 0 ....block-price.js => product.block.price.js} | 0 ...lock-title.css => product.block.title.css} | 0 ...iant-sku.js => product.block.title.sku.js} | 0 ...n.css => product.block.variant-picker.css} | 5 ++ ...ker.js => product.block.variant-picker.js} | 0 component.manifest.json | 45 +++++++++--------- snippets/import-map.liquid | 10 ++-- ...iquid => product.block.buy-buttons.liquid} | 14 ++---- ...iquid => product.block.description.liquid} | 4 +- snippets/product.block.media-gallery.liquid | 47 +++++++++++++++++++ ...rice.liquid => product.block.price.liquid} | 8 ++-- ...itle.liquid => product.block.title.liquid} | 8 ++-- ....liquid => product.block.title.sku.liquid} | 2 +- ...roduct.block.variant-picker.button.liquid} | 2 +- ...duct.block.variant-picker.dropdown.liquid} | 0 ...id => product.block.variant-picker.liquid} | 15 +++--- ...uct.liquid => product.section.main.liquid} | 11 +---- 24 files changed, 105 insertions(+), 71 deletions(-) delete mode 100644 assets/component.block-variant-picker.css rename assets/{component.block-buy-buttons.css => product.block.buy-buttons.css} (100%) rename assets/{component.block-buy-buttons.js => product.block.buy-buttons.js} (100%) rename assets/{component.product-media-gallery.css => product.block.media-gallery.css} (100%) rename assets/{component.product-media-gallery.js => product.block.media-gallery.js} (100%) rename assets/{component.block-price.css => product.block.price.css} (100%) rename assets/{component.block-price.js => product.block.price.js} (100%) rename assets/{component.block-title.css => product.block.title.css} (100%) rename assets/{component.variant-sku.js => product.block.title.sku.js} (100%) rename assets/{component.variant-button.css => product.block.variant-picker.css} (95%) rename assets/{component.block-variant-picker.js => product.block.variant-picker.js} (100%) rename snippets/{block-buy-buttons.liquid => product.block.buy-buttons.liquid} (90%) rename snippets/{product-description.liquid => product.block.description.liquid} (80%) create mode 100644 snippets/product.block.media-gallery.liquid rename snippets/{block-price.liquid => product.block.price.liquid} (95%) rename snippets/{block-title.liquid => product.block.title.liquid} (84%) rename snippets/{variant-sku.liquid => product.block.title.sku.liquid} (92%) rename snippets/{variant-button.liquid => product.block.variant-picker.button.liquid} (96%) rename snippets/{variant-dropdown.liquid => product.block.variant-picker.dropdown.liquid} (100%) rename snippets/{block-variant-picker.liquid => product.block.variant-picker.liquid} (65%) rename snippets/{section-main-product.liquid => product.section.main.liquid} (77%) diff --git a/.gitignore b/.gitignore index e4e7d98..ef651ea 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ .collections .locales +.shopify diff --git a/assets/component.block-variant-picker.css b/assets/component.block-variant-picker.css deleted file mode 100644 index 6a0bc97..0000000 --- a/assets/component.block-variant-picker.css +++ /dev/null @@ -1,4 +0,0 @@ -.block-variant-picker { - display: grid; - gap: var(--size-6); -} diff --git a/assets/component.block-buy-buttons.css b/assets/product.block.buy-buttons.css similarity index 100% rename from assets/component.block-buy-buttons.css rename to assets/product.block.buy-buttons.css diff --git a/assets/component.block-buy-buttons.js b/assets/product.block.buy-buttons.js similarity index 100% rename from assets/component.block-buy-buttons.js rename to assets/product.block.buy-buttons.js diff --git a/assets/component.product-media-gallery.css b/assets/product.block.media-gallery.css similarity index 100% rename from assets/component.product-media-gallery.css rename to assets/product.block.media-gallery.css diff --git a/assets/component.product-media-gallery.js b/assets/product.block.media-gallery.js similarity index 100% rename from assets/component.product-media-gallery.js rename to assets/product.block.media-gallery.js diff --git a/assets/component.block-price.css b/assets/product.block.price.css similarity index 100% rename from assets/component.block-price.css rename to assets/product.block.price.css diff --git a/assets/component.block-price.js b/assets/product.block.price.js similarity index 100% rename from assets/component.block-price.js rename to assets/product.block.price.js diff --git a/assets/component.block-title.css b/assets/product.block.title.css similarity index 100% rename from assets/component.block-title.css rename to assets/product.block.title.css diff --git a/assets/component.variant-sku.js b/assets/product.block.title.sku.js similarity index 100% rename from assets/component.variant-sku.js rename to assets/product.block.title.sku.js diff --git a/assets/component.variant-button.css b/assets/product.block.variant-picker.css similarity index 95% rename from assets/component.variant-button.css rename to assets/product.block.variant-picker.css index f7204c3..bcdc5d1 100644 --- a/assets/component.variant-button.css +++ b/assets/product.block.variant-picker.css @@ -1,3 +1,8 @@ +.block-variant-picker { + display: grid; + gap: var(--size-6); +} + .variant-button { --label-bottom-margin: var(--size-3); diff --git a/assets/component.block-variant-picker.js b/assets/product.block.variant-picker.js similarity index 100% rename from assets/component.block-variant-picker.js rename to assets/product.block.variant-picker.js diff --git a/component.manifest.json b/component.manifest.json index 26efd7c..f22a4ea 100644 --- a/component.manifest.json +++ b/component.manifest.json @@ -1,6 +1,7 @@ { "collections": { "@archetype-themes/reference-components": { + "commit": "ec57c3ff897f9dd4e6ddde29d6a4e45dc027b3b4", "version": "2.0.0" } }, @@ -10,8 +11,6 @@ "base.document.css": "@archetype-themes/reference-components", "base.normalize.css": "@archetype-themes/reference-components", "base.typography.css": "@archetype-themes/reference-components", - "component.block-buy-buttons.css": "@archetype-themes/reference-components", - "component.block-buy-buttons.js": "@archetype-themes/reference-components", "component.block-cart-checkout-button.css": "@archetype-themes/reference-components", "component.block-cart-note.css": "@archetype-themes/reference-components", "component.block-cart-note.js": "@archetype-themes/reference-components", @@ -20,12 +19,7 @@ "component.block-image.css": "@archetype-themes/reference-components", "component.block-model.css": "@archetype-themes/reference-components", "component.block-model.js": "@archetype-themes/reference-components", - "component.block-price.css": "@archetype-themes/reference-components", - "component.block-price.js": "@archetype-themes/reference-components", "component.block-rich-text.css": "@archetype-themes/reference-components", - "component.block-title.css": "@archetype-themes/reference-components", - "component.block-variant-picker.css": "@archetype-themes/reference-components", - "component.block-variant-picker.js": "@archetype-themes/reference-components", "component.block-video.css": "@archetype-themes/reference-components", "component.block-video.js": "@archetype-themes/reference-components", "component.button.css": "@archetype-themes/reference-components", @@ -40,21 +34,27 @@ "component.line-item.css": "@archetype-themes/reference-components", "component.model-viewer.css": "@archetype-themes/reference-components", "component.placeholder-svg.css": "@archetype-themes/reference-components", - "component.product-media-gallery.css": "@archetype-themes/reference-components", - "component.product-media-gallery.js": "@archetype-themes/reference-components", "component.rte.css": "@archetype-themes/reference-components", "component.section-header.css": "@archetype-themes/reference-components", "component.section-main-cart.css": "@archetype-themes/reference-components", "component.section-main-product.css": "@archetype-themes/reference-components", "component.section-media-with-text.css": "@archetype-themes/reference-components", "component.select.css": "@archetype-themes/reference-components", - "component.variant-button.css": "@archetype-themes/reference-components", - "component.variant-sku.js": "@archetype-themes/reference-components", "element.base-media.js": "@archetype-themes/reference-components", "icon.alert.svg": "@archetype-themes/reference-components", "icon.bag.svg": "@archetype-themes/reference-components", "icon.caret.svg": "@archetype-themes/reference-components", "icon.cart.svg": "@archetype-themes/reference-components", + "product.block.buy-buttons.css": "@archetype-themes/reference-components", + "product.block.buy-buttons.js": "@archetype-themes/reference-components", + "product.block.media-gallery.css": "@archetype-themes/reference-components", + "product.block.media-gallery.js": "@archetype-themes/reference-components", + "product.block.price.css": "@archetype-themes/reference-components", + "product.block.price.js": "@archetype-themes/reference-components", + "product.block.title.css": "@archetype-themes/reference-components", + "product.block.title.sku.js": "@archetype-themes/reference-components", + "product.block.variant-picker.css": "@archetype-themes/reference-components", + "product.block.variant-picker.js": "@archetype-themes/reference-components", "util.aspect-ratio.css": "@archetype-themes/reference-components", "util.clearfix.css": "@archetype-themes/reference-components", "util.display.css": "@archetype-themes/reference-components", @@ -70,17 +70,12 @@ "vendor.is-land.min.js": "@archetype-themes/reference-components" }, "snippets": { - "block-buy-buttons.liquid": "@archetype-themes/reference-components", "block-cart-checkout-button.liquid": "@archetype-themes/reference-components", "block-cart-note.liquid": "@archetype-themes/reference-components", "block-cart-totals.liquid": "@archetype-themes/reference-components", "block-image.liquid": "@archetype-themes/reference-components", "block-model.liquid": "@archetype-themes/reference-components", - "block-price.liquid": "@archetype-themes/reference-components", - "block-product-description.liquid": "@archetype-themes/reference-components", "block-rich-text.liquid": "@archetype-themes/reference-components", - "block-title.liquid": "@archetype-themes/reference-components", - "block-variant-picker.liquid": "@archetype-themes/reference-components", "block-video.liquid": "@archetype-themes/reference-components", "cart-icon.liquid": "@archetype-themes/reference-components", "cart-status-notifier.liquid": "@archetype-themes/reference-components", @@ -96,19 +91,23 @@ "line-item-quantity.liquid": "@archetype-themes/reference-components", "line-item.liquid": "@archetype-themes/reference-components", "price.liquid": "@archetype-themes/reference-components", - "product-description.liquid": "@archetype-themes/reference-components", - "product-media-gallery.liquid": "@archetype-themes/reference-components", + "product.block.buy-buttons.liquid": "@archetype-themes/reference-components", + "product.block.description.liquid": "@archetype-themes/reference-components", + "product.block.media-gallery.liquid": "@archetype-themes/reference-components", + "product.block.price.liquid": "@archetype-themes/reference-components", + "product.block.title.liquid": "@archetype-themes/reference-components", + "product.block.title.sku.liquid": "@archetype-themes/reference-components", + "product.block.variant-picker.button.liquid": "@archetype-themes/reference-components", + "product.block.variant-picker.dropdown.liquid": "@archetype-themes/reference-components", + "product.block.variant-picker.liquid": "@archetype-themes/reference-components", + "product.section.main.liquid": "@archetype-themes/reference-components", "section-header.liquid": "@archetype-themes/reference-components", "section-main-cart.liquid": "@archetype-themes/reference-components", - "section-main-product.liquid": "@archetype-themes/reference-components", "section-media-with-text.liquid": "@archetype-themes/reference-components", "styles-head.liquid": "@archetype-themes/reference-components", "styles-tokens.liquid": "@archetype-themes/reference-components", "stylesheet.liquid": "@archetype-themes/reference-components", - "t-with-fallback.liquid": "@archetype-themes/reference-components", - "variant-button.liquid": "@archetype-themes/reference-components", - "variant-dropdown.liquid": "@archetype-themes/reference-components", - "variant-sku.liquid": "@archetype-themes/reference-components" + "t-with-fallback.liquid": "@archetype-themes/reference-components" } } } \ No newline at end of file diff --git a/snippets/import-map.liquid b/snippets/import-map.liquid index c70ba68..d7c7717 100644 --- a/snippets/import-map.liquid +++ b/snippets/import-map.liquid @@ -1,20 +1,20 @@ diff --git a/snippets/product-description.liquid b/snippets/product.block.description.liquid similarity index 80% rename from snippets/product-description.liquid rename to snippets/product.block.description.liquid index 2153791..c4c9a00 100644 --- a/snippets/product-description.liquid +++ b/snippets/product.block.description.liquid @@ -5,10 +5,12 @@ - product {product} - Product object Usage: - {% render 'product-description' %} + {% render 'product.block.description' %} {% endcomment %} {%- liquid + assign product = product | default: block.settings.product | default: section.settings.product + capture description render 't-with-fallback', key: 'info.placeholder_product_description', fallback: 'This area is used to describe your product’s details. Tell customers about the look, feel, and style of your product. Add details on color, materials used, sizing, and where it was made.' endcapture diff --git a/snippets/product.block.media-gallery.liquid b/snippets/product.block.media-gallery.liquid new file mode 100644 index 0000000..0ca7d1f --- /dev/null +++ b/snippets/product.block.media-gallery.liquid @@ -0,0 +1,47 @@ +{%- comment -%} + Renders a product media gallery + + Accepts: + - product {product} - The product object + + Usage: + {% render 'product-media-gallery' %} +{%- endcomment -%} + +{%- render 'stylesheet', name: 'product.block.media-gallery.css' -%} + +{%- liquid + assign default_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media + assign sizes = '(min-width: 48em) 60vw, 90vw' +-%} + + + {%- for media in product.media -%} +
+
+ {%- liquid + assign preload = false + + if default_media == media + assign preload = true + endif + + case media.media_type + when 'image' + render 'block-image', image: media, preload: preload, sizes: sizes + when 'video' + render 'block-video', video: media, autoplay: true + when 'external_video' + render 'block-video', external_video: media, autoplay: true + when 'model' + render 'block-model', model: media, autoplay: true + endcase + -%} +
+
+ {%- endfor -%} + + + diff --git a/snippets/block-price.liquid b/snippets/product.block.price.liquid similarity index 95% rename from snippets/block-price.liquid rename to snippets/product.block.price.liquid index 11959a5..9c6fb54 100644 --- a/snippets/block-price.liquid +++ b/snippets/product.block.price.liquid @@ -9,10 +9,10 @@ - product_save_type {'dollar'|'percent'} - Savings display style Usage: - {% render 'block-price' block: block %} + {% render 'product.block.price' %} {%- endcomment -%} -{% render 'stylesheet', name: 'component.block-price.css' %} +{% render 'stylesheet', name: 'product.block.price.css' %} {%- liquid assign use_variant = use_variant | default: true @@ -34,7 +34,7 @@ endif -%} - + {% render 't-with-fallback', key: 'labels.price', fallback: 'Price' %} @@ -109,5 +109,5 @@ diff --git a/snippets/block-title.liquid b/snippets/product.block.title.liquid similarity index 84% rename from snippets/block-title.liquid rename to snippets/product.block.title.liquid index 4014a35..532b7fe 100644 --- a/snippets/block-title.liquid +++ b/snippets/product.block.title.liquid @@ -8,10 +8,10 @@ - vendor_enable {boolean} - Show or hide the vendor Usage: - {% render 'block-title', block: block %} + {% render 'product.block.title' %} {%- endcomment -%} -{% render 'stylesheet', name: 'component.block-title.css' %} +{% render 'stylesheet', name: 'product.block.title.css' %} {%- liquid capture title_default @@ -27,7 +27,7 @@ assign vendor_url = collection_for_vendor.url | default: vendor_url_default -%} -
+

{{- title -}}

@@ -42,7 +42,7 @@ {%- if sku_enable -%}
- {%- render 'variant-sku' -%} + {%- render 'product.block.title.sku' -%}
{%- endif -%}
diff --git a/snippets/variant-sku.liquid b/snippets/product.block.title.sku.liquid similarity index 92% rename from snippets/variant-sku.liquid rename to snippets/product.block.title.sku.liquid index e7bef86..d90c7be 100644 --- a/snippets/variant-sku.liquid +++ b/snippets/product.block.title.sku.liquid @@ -19,5 +19,5 @@ diff --git a/snippets/variant-button.liquid b/snippets/product.block.variant-picker.button.liquid similarity index 96% rename from snippets/variant-button.liquid rename to snippets/product.block.variant-picker.button.liquid index c9d3a68..dbf1538 100644 --- a/snippets/variant-button.liquid +++ b/snippets/product.block.variant-picker.button.liquid @@ -12,7 +12,7 @@ {%- endfor -%} {% endcomment %} -{%- render 'stylesheet', name: 'component.variant-button.css' -%} +{%- render 'stylesheet', name: 'product.block.variant-picker.button.css' -%} {%- liquid assign variants_available_arr = product.variants | map: 'available' diff --git a/snippets/variant-dropdown.liquid b/snippets/product.block.variant-picker.dropdown.liquid similarity index 100% rename from snippets/variant-dropdown.liquid rename to snippets/product.block.variant-picker.dropdown.liquid diff --git a/snippets/block-variant-picker.liquid b/snippets/product.block.variant-picker.liquid similarity index 65% rename from snippets/block-variant-picker.liquid rename to snippets/product.block.variant-picker.liquid index f93398f..21dfa95 100644 --- a/snippets/block-variant-picker.liquid +++ b/snippets/product.block.variant-picker.liquid @@ -2,18 +2,18 @@ Renders product variant-picker Accepts: - - block {block} - Block object - product {product} - Product object - update_url {boolean} - Whether to update the URL when the variant is changed Usage: - {% render 'block-variant-picker', block: block %} + {% render 'product.block.variant-picker' %} {%- endcomment -%} -{% render 'stylesheet', name: 'component.block-variant-picker.css' %} +{% render 'stylesheet', name: 'product.block.variant-picker.css' %} {%- liquid assign update_url = update_url | default: true, allow_false: true + assign picker_type = picker_type | default: block.settings.picker_type | default: 'button' -%} {%- unless product.has_only_default_variant -%} @@ -23,14 +23,13 @@ section-id="{{ section.id }}" url="{{ product.url }}" update-url="{{ update_url }}" - {{ block.shopify_attributes }} > {%- liquid for option in product.options_with_values - if block.settings.picker_type == 'button' - render 'variant-button', option: option + if picker_type == 'button' + render 'product.block.variant-picker.button', option: option else - render 'variant-dropdown', option: option + render 'product.block.variant-picker.dropdown', option: option endif endfor -%} @@ -41,6 +40,6 @@ {%- endunless -%} diff --git a/snippets/section-main-product.liquid b/snippets/product.section.main.liquid similarity index 77% rename from snippets/section-main-product.liquid rename to snippets/product.section.main.liquid index 10e253f..52f5cc8 100644 --- a/snippets/section-main-product.liquid +++ b/snippets/product.section.main.liquid @@ -8,16 +8,7 @@ Usage: {% liquid capture blocks - for block in section.blocks - case block.type - when 'title' - render 'block-title', block: block - when 'variant_picker' - render 'block-variant-picker', block: block - when 'buy_buttons' - render 'block-buy-buttons', block: block - endcase - endfor + content_for: 'blocks' endcapture render 'main-product', slot_product_blocks: blocks