+
{{- title -}}
@@ -42,7 +42,7 @@
{%- if sku_enable -%}
- {%- render 'variant-sku' -%}
+ {%- render 'product.block.title.sku' -%}
{%- endif -%}
diff --git a/components/product.block.title/setup/sections/block-title.liquid b/components/product.block.title/setup/sections/block-title.liquid
new file mode 100644
index 0000000..74c891b
--- /dev/null
+++ b/components/product.block.title/setup/sections/block-title.liquid
@@ -0,0 +1,13 @@
+{% assign current_variant = product.selected_or_first_available_variant %}
+
+{% render 'product.block.title' %}
+
+
diff --git a/components/product.block.title/setup/templates/product.block-title.json b/components/product.block.title/setup/templates/product.block-title.json
new file mode 100644
index 0000000..81bb32b
--- /dev/null
+++ b/components/product.block.title/setup/templates/product.block-title.json
@@ -0,0 +1,8 @@
+{
+ "sections": {
+ "block_title": {
+ "type": "block-title"
+ }
+ },
+ "order": ["block_title"]
+}
diff --git a/components/variant-sku/variant-sku.liquid b/components/product.block.title/snippets/product.block.title.sku.liquid
similarity index 92%
rename from components/variant-sku/variant-sku.liquid
rename to components/product.block.title/snippets/product.block.title.sku.liquid
index e7bef86..d90c7be 100644
--- a/components/variant-sku/variant-sku.liquid
+++ b/components/product.block.title/snippets/product.block.title.sku.liquid
@@ -19,5 +19,5 @@
diff --git a/components/block-title/test/block-title.spec.js b/components/product.block.title/test/block-title.spec.js
similarity index 100%
rename from components/block-title/test/block-title.spec.js
rename to components/product.block.title/test/block-title.spec.js
diff --git a/components/variant-button/assets/component.variant-button.css b/components/product.block.variant-picker/assets/product.block.variant-picker.css
similarity index 95%
rename from components/variant-button/assets/component.variant-button.css
rename to components/product.block.variant-picker/assets/product.block.variant-picker.css
index f7204c3..bcdc5d1 100644
--- a/components/variant-button/assets/component.variant-button.css
+++ b/components/product.block.variant-picker/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/components/block-variant-picker/assets/component.block-variant-picker.js b/components/product.block.variant-picker/assets/product.block.variant-picker.js
similarity index 100%
rename from components/block-variant-picker/assets/component.block-variant-picker.js
rename to components/product.block.variant-picker/assets/product.block.variant-picker.js
diff --git a/components/block-variant-picker/block-variant-picker.liquid b/components/product.block.variant-picker/product.block.variant-picker.liquid
similarity index 65%
rename from components/block-variant-picker/block-variant-picker.liquid
rename to components/product.block.variant-picker/product.block.variant-picker.liquid
index f93398f..21dfa95 100644
--- a/components/block-variant-picker/block-variant-picker.liquid
+++ b/components/product.block.variant-picker/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/components/product.block.variant-picker/setup/sections/block-variant-picker-dropdown.liquid b/components/product.block.variant-picker/setup/sections/block-variant-picker-dropdown.liquid
new file mode 100644
index 0000000..84bd1ad
--- /dev/null
+++ b/components/product.block.variant-picker/setup/sections/block-variant-picker-dropdown.liquid
@@ -0,0 +1 @@
+{%- render 'product.block.variant-picker', picker_type: 'dropdown' -%}
diff --git a/components/product.block.variant-picker/setup/sections/block-variant-picker.liquid b/components/product.block.variant-picker/setup/sections/block-variant-picker.liquid
new file mode 100644
index 0000000..9c4d892
--- /dev/null
+++ b/components/product.block.variant-picker/setup/sections/block-variant-picker.liquid
@@ -0,0 +1 @@
+{%- render 'product.block.variant-picker' -%}
diff --git a/components/product.block.variant-picker/setup/templates/product.block-variant-picker.json b/components/product.block.variant-picker/setup/templates/product.block-variant-picker.json
new file mode 100644
index 0000000..b4a670d
--- /dev/null
+++ b/components/product.block.variant-picker/setup/templates/product.block-variant-picker.json
@@ -0,0 +1,12 @@
+{
+ "sections": {
+ "variant_picker_1": {
+ "type": "block-variant-picker"
+ },
+ "variant_picker_2": {
+ "type": "block-variant-picker-dropdown",
+ "disabled": true
+ }
+ },
+ "order": ["variant_picker_1", "variant_picker_2"]
+}
diff --git a/components/variant-button/variant-button.liquid b/components/product.block.variant-picker/snippets/product.block.variant-picker.button.liquid
similarity index 96%
rename from components/variant-button/variant-button.liquid
rename to components/product.block.variant-picker/snippets/product.block.variant-picker.button.liquid
index c9d3a68..dbf1538 100644
--- a/components/variant-button/variant-button.liquid
+++ b/components/product.block.variant-picker/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/components/variant-dropdown/variant-dropdown.liquid b/components/product.block.variant-picker/snippets/product.block.variant-picker.dropdown.liquid
similarity index 100%
rename from components/variant-dropdown/variant-dropdown.liquid
rename to components/product.block.variant-picker/snippets/product.block.variant-picker.dropdown.liquid
diff --git a/components/block-variant-picker/test/block-variant-picker.spec.js b/components/product.block.variant-picker/test/block-variant-picker.spec.js
similarity index 100%
rename from components/block-variant-picker/test/block-variant-picker.spec.js
rename to components/product.block.variant-picker/test/block-variant-picker.spec.js
diff --git a/components/section-main-product/assets/component.section-main-product.css b/components/product.section.main/assets/component.section-main-product.css
similarity index 100%
rename from components/section-main-product/assets/component.section-main-product.css
rename to components/product.section.main/assets/component.section-main-product.css
diff --git a/components/section-main-product/section-main-product.liquid b/components/product.section.main/product.section.main.liquid
similarity index 74%
rename from components/section-main-product/section-main-product.liquid
rename to components/product.section.main/product.section.main.liquid
index b607456..52f5cc8 100644
--- a/components/section-main-product/section-main-product.liquid
+++ b/components/product.section.main/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
@@ -40,7 +31,7 @@
{%- if slot_product_gallery != blank -%}
{{ slot_product_gallery }}
{%- else -%}
- {%- render 'product-media-gallery' -%}
+ {%- render 'product.block.media-gallery' -%}
{%- endif -%}
diff --git a/components/product.section.main/setup/blocks/_product-buy-buttons.liquid b/components/product.section.main/setup/blocks/_product-buy-buttons.liquid
new file mode 100644
index 0000000..1403e93
--- /dev/null
+++ b/components/product.section.main/setup/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/components/product.section.main/setup/blocks/_product-description.liquid b/components/product.section.main/setup/blocks/_product-description.liquid
new file mode 100644
index 0000000..67c645c
--- /dev/null
+++ b/components/product.section.main/setup/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/components/product.section.main/setup/blocks/_product-price.liquid b/components/product.section.main/setup/blocks/_product-price.liquid
new file mode 100644
index 0000000..4f6b74a
--- /dev/null
+++ b/components/product.section.main/setup/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/components/product.section.main/setup/blocks/_product-title.liquid b/components/product.section.main/setup/blocks/_product-title.liquid
new file mode 100644
index 0000000..8d81d15
--- /dev/null
+++ b/components/product.section.main/setup/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/components/product.section.main/setup/blocks/_product-variant-picker.liquid b/components/product.section.main/setup/blocks/_product-variant-picker.liquid
new file mode 100644
index 0000000..11bc98b
--- /dev/null
+++ b/components/product.section.main/setup/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/components/product.section.main/setup/sections/main-product.liquid b/components/product.section.main/setup/sections/main-product.liquid
new file mode 100644
index 0000000..603b501
--- /dev/null
+++ b/components/product.section.main/setup/sections/main-product.liquid
@@ -0,0 +1,47 @@
+{%- liquid
+ capture blocks
+ content_for 'blocks'
+ endcapture
+
+ render 'section-main-product', slot_product_blocks: blocks
+-%}
+
+{% schema %}
+{
+ "name": "t:labels.product",
+ "settings": [
+ {
+ "type": "header",
+ "content": "t:labels.media"
+ },
+ {
+ "type": "paragraph",
+ "content": "t:info.learn_more_media_types"
+ },
+ {
+ "type": "select",
+ "id": "image_position",
+ "label": "t:labels.position",
+ "options": [
+ {
+ "value": "left",
+ "label": "t:labels.alignments.left"
+ },
+ {
+ "value": "right",
+ "label": "t:labels.alignments.right"
+ }
+ ],
+ "default": "left"
+ }
+ ],
+ "blocks": [
+ { "type": "@app" },
+ { "type": "_product-buy-buttons" },
+ { "type": "_product-description" },
+ { "type": "_product-price" },
+ { "type": "_product-title" },
+ { "type": "_product-variant-picker" }
+ ]
+}
+{% endschema %}
diff --git a/components/section-main-product/setup/templates/product.section-main-product.json b/components/product.section.main/setup/templates/product.section-main-product.json
similarity index 100%
rename from components/section-main-product/setup/templates/product.section-main-product.json
rename to components/product.section.main/setup/templates/product.section-main-product.json
diff --git a/components/section-main-product/setup/sections/main-product.liquid b/components/section-main-product/setup/sections/main-product.liquid
deleted file mode 100644
index bb868b0..0000000
--- a/components/section-main-product/setup/sections/main-product.liquid
+++ /dev/null
@@ -1,126 +0,0 @@
-{%- 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
- endcapture
-
- render 'section-main-product', slot_product_blocks: blocks
--%}
-
-{% schema %}
-{
- "name": "t:labels.product",
- "settings": [
- {
- "type": "header",
- "content": "t:labels.media"
- },
- {
- "type": "paragraph",
- "content": "t:info.learn_more_media_types"
- },
- {
- "type": "select",
- "id": "image_position",
- "label": "t:labels.position",
- "options": [
- {
- "value": "left",
- "label": "t:labels.alignments.left"
- },
- {
- "value": "right",
- "label": "t:labels.alignments.right"
- }
- ],
- "default": "left"
- }
- ],
- "blocks": [
- {
- "type": "@app"
- },
- {
- "type": "title",
- "name": "t:labels.title",
- "limit": 1,
- "settings": [
- {
- "type": "inline_richtext",
- "id": "vendor_enable",
- "label": "t:actions.show_vendor",
- "default": "{{ product.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"
- }
- ]
- }
- ]
-}
-{% endschema %}
diff --git a/components/styles-tokens/styles-tokens.liquid b/components/styles-tokens/styles-tokens.liquid
index e54d4d7..7101814 100644
--- a/components/styles-tokens/styles-tokens.liquid
+++ b/components/styles-tokens/styles-tokens.liquid
@@ -1,8 +1,9 @@
{%- comment -%}
- Renders the list of CSS token variables
+ Renders the list of CSS variables. Typically, this is referenced inside of a
+ theme's layout file.
Usage:
- {% render 'css-variables' %}
+ {% render 'styles-tokens' %}
{%- endcomment -%}
{%- style -%}
diff --git a/components/variant-button/setup/sections/variant-button.liquid b/components/variant-button/setup/sections/variant-button.liquid
deleted file mode 100644
index 754fd91..0000000
--- a/components/variant-button/setup/sections/variant-button.liquid
+++ /dev/null
@@ -1,11 +0,0 @@
-{%- liquid
- for option in product.options_with_values
- render 'variant-button', option: option
- endfor
--%}
-
-{% schema %}
-{
- "name": "t:labels.product"
-}
-{% endschema %}
diff --git a/components/variant-button/setup/templates/product.variant-button.json b/components/variant-button/setup/templates/product.variant-button.json
deleted file mode 100644
index 5d28b98..0000000
--- a/components/variant-button/setup/templates/product.variant-button.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "sections": {
- "variant_button": {
- "type": "variant-button"
- }
- },
- "order": ["variant_button"]
-}
diff --git a/components/variant-dropdown/setup/sections/variant-dropdown.liquid b/components/variant-dropdown/setup/sections/variant-dropdown.liquid
deleted file mode 100644
index 1e47161..0000000
--- a/components/variant-dropdown/setup/sections/variant-dropdown.liquid
+++ /dev/null
@@ -1,11 +0,0 @@
-{%- liquid
- for option in product.options_with_values
- render 'variant-dropdown', option: option
- endfor
--%}
-
-{% schema %}
-{
- "name": "t:labels.product"
-}
-{% endschema %}
diff --git a/components/variant-dropdown/setup/templates/product.variant-dropdown.json b/components/variant-dropdown/setup/templates/product.variant-dropdown.json
deleted file mode 100644
index 8cd9fe7..0000000
--- a/components/variant-dropdown/setup/templates/product.variant-dropdown.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "sections": {
- "variant_dropdown": {
- "type": "variant-dropdown"
- }
- },
- "order": ["variant_dropdown"]
-}
diff --git a/components/variant-sku/setup/sections/variant-sku.liquid b/components/variant-sku/setup/sections/variant-sku.liquid
deleted file mode 100644
index e96d675..0000000
--- a/components/variant-sku/setup/sections/variant-sku.liquid
+++ /dev/null
@@ -1,7 +0,0 @@
-{%- render 'variant-sku' -%}
-
-{% schema %}
-{
- "name": "t:labels.product"
-}
-{% endschema %}
diff --git a/components/variant-sku/setup/templates/product.variant-sku.json b/components/variant-sku/setup/templates/product.variant-sku.json
deleted file mode 100644
index 0bdad6d..0000000
--- a/components/variant-sku/setup/templates/product.variant-sku.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
- "sections": {
- "variant_sku": {
- "type": "variant-sku"
- }
- },
- "order": ["variant_sku"]
-}
diff --git a/jsconfig.json b/jsconfig.json
index acc8ba7..cb6c8eb 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -7,5 +7,5 @@
"*": ["scripts/*"],
}
},
- "include": ["scripts", "components"]
+ "include": ["scripts", "components", "components/is-land/assets/vendor.is-land.min.js"]
}