refactor: PDP built with theme blocks

.gitignore

@@ -11,3 +11,4 @@ test-results
 
 #IntelliJ IDE
 .idea
+.shopify

.vscode/settings.json

@@ -3,6 +3,12 @@
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "files.associations": {
+    "**/*.min.js": "plaintext"
+  },
+  "[plaintext]": {
+    "editor.formatOnSave": false
+  },
   "[css]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },

components/block-buy-buttons/block-buy-buttons.liquid → components/product.block.buy-buttons/product.block.buy-buttons.liquid

@@ -6,19 +6,14 @@
   - product {product} - Product object
 
   Usage:
-  {% render 'block-buy-buttons', block: block %}
+  {% render 'product.block.buy-buttons' %}
 {% endcomment %}
 
-{% render 'stylesheet', name: 'component.block-buy-buttons.css' %}
+{% render 'stylesheet', name: 'product.block.buy-buttons.css' %}
 
 {%- liquid
   assign form_id = 'product-form-' | append: section.id
-
-  assign show_dynamic_checkout = false
-
-  if block.settings.show_dynamic_checkout
-    assign show_dynamic_checkout = true
-  endif
+  assign show_dynamic_checkout = show_dynamic_checkout | default: block.settings.show_dynamic_checkout, allow_false: true | default: false
 
   assign check_against_inventory = true
   assign quantity_rule_soldout = false
@@ -38,7 +33,6 @@
   {% if show_dynamic_checkout %}
     data-show-dynamic-checkout=""
   {% endif %}
-  {{ block.shopify_attributes }}
 >
   <div role="alert" hidden>
     <span></span>
@@ -102,5 +96,5 @@
 </block-buy-buttons>
 
 <script type="module">
-  import 'component.block-buy-buttons'
+  import 'product.block.buy-buttons'
 </script>

components/product.block.buy-buttons/setup/sections/block-buy-buttons.liquid

@@ -0,0 +1,5 @@
+{%- render 'product.block.buy-buttons' -%}
+
+<script type="application/json">
+  {{ product.variants | json }}
+</script>

components/product.block.buy-buttons/setup/templates/product.block-buy-buttons.json

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "block_buy_buttons": {
+      "type": "block-buy-buttons"
+    }
+  },
+  "order": ["block_buy_buttons"]
+}

components/product-description/product-description.liquid → components/product.block.description/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

components/product.block.description/setup/sections/block-description.liquid

@@ -0,0 +1 @@
+{%- render 'product.block.description' -%}

components/product.block.description/setup/templates/product.block-description.json

@@ -0,0 +1,8 @@
+{
+  "sections": {
+    "block_description": {
+      "type": "block-description"
+    }
+  },
+  "order": ["block_description"]
+}