product-main

Shopify · Sep 29, 2024 · 5fdc540 · 5fdc540
1 parent 2e0ca7b
commit 5fdc540
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 41 deletions.
diff --git a/assets/product-form.js b/assets/product-form.js
@@ -0,0 +1,9 @@
+class ProductForm extends HTMLElement {
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+
+  }
+}
+customElements.define("product-form", ProductForm);
diff --git a/sections/product-main.liquid b/sections/product-main.liquid
@@ -1,8 +1,13 @@
-{% stylesheet %}{% endstylesheet %}
+
+
 <div class="color-{{ section.settings.color_scheme }} full-width {{ section.settings.overflow }} {{ section.settings.position }}">
-  <div class="{{section.settings.page_width}} {{ section.settings | class_list }} ">
-    {% content_for "blocks" %}
-  </div>
+  <product-form section="{{section.id}}">
+    {%- form "product", product, novalidate: "novalidate" -%}
+      <div class="{{section.settings.page_width}} {{ section.settings | class_list }} ">
+        {% content_for "blocks" %}
+      </div>
+    {% endform %}
+  </product-form>
 </div>
 
 {% schema %}

diff --git a/snippets/image-element.liquid b/snippets/image-element.liquid
@@ -1,7 +1,4 @@
-<div
-  class="image-wrapper {{ fit }}"
-  style="--aspect-ratio: {{ aspect_ratio }};">
-{% liquid
+{% liquid 
   comment
     image -> image object
     aspect_ratio -> required aspect_ratio
@@ -11,42 +8,44 @@
     fit -> object-fit
     placeholder -> svg placeholder handle
   endcomment
-  assign placeholder = placeholder | default: "image"
-  if image != blank
-    assign fit = fit | default: "cover"
-    if image.src contains ".svg"
-      assign style = "object-fit: " | append: fit | append: ";"
-      echo image | image_url: width: image.width, height: image.height | image_tag: style: style
-    else
-      assign crop_left = 0
-      assign crop_top = 0
-      assign widths = widths | default: "300, 400, 500, 650, 900, 1100, 1300, 1600"
-      assign loading = loading | default: "lazy"
-      assign sizes = sizes | default: "100vw"
-      if aspect_ratio != blank and fit == "cover"
-        assign aspect_ratio = aspect_ratio | times: 1.0
-        if aspect_ratio > image.aspect_ratio
+  assign fit = fit | default: "cover"
+%}
+<div class="image-wrapper {{ fit }}" style="--aspect-ratio: {{ aspect_ratio | default: image.aspect_ratio }};">
+  {% liquid
+    assign placeholder = placeholder | default: "image"
+    if image != blank
+      if image.src contains ".svg"
+        assign style = "object-fit: " | append: fit | append: ";"
+        echo image | image_url: width: image.width, height: image.height | image_tag: style: style
+      else
+        assign widths = widths | default: "300, 400, 500, 650, 900, 1100, 1300, 1600"
+        assign loading = loading | default: "lazy"
+        assign sizes = sizes | default: "100vw"
+        if aspect_ratio != blank and fit == "cover" 
+          assign aspect_ratio = aspect_ratio | times: 1.0
+          assign crop_left = 0
+          assign crop_top = 0
           assign crop_width = image.width
-          assign crop_height = image.width | divided_by: aspect_ratio
-          assign focus_vertical_shift = image.presentation.focal_point.y | minus: 50 | divided_by: 100.0 | times: image.height | round
-          assign margin_block = image.height | minus: crop_height
-          assign crop_top = margin_block | divided_by: 2.0 | round | plus: focus_vertical_shift | at_least: 0 | at_most: margin_block
-        else
           assign crop_height = image.height
-          assign crop_width = image.height | times: aspect_ratio
-          assign focus_horizontal_shift = image.presentation.focal_point.x | minus: 50 | divided_by: 100.0 | times: image.width | round
-          assign margin_inline = image.width | minus: crop_width
-          assign crop_left = margin_inline | divided_by: 2.0 | round | plus: focus_horizontal_shift | at_least: 0 | at_most: margin_inline
+          if aspect_ratio > image.aspect_ratio
+            assign crop_height = image.width | divided_by: aspect_ratio
+            assign focus_vertical_shift = image.presentation.focal_point.y | default: 50.0 | minus: 50 | divided_by: 100.0 | times: image.height | round
+            assign margin_block = image.height | minus: crop_height
+            assign crop_top = margin_block | divided_by: 2.0 | round | plus: focus_vertical_shift | at_least: 0 | at_most: margin_block
+          else
+            assign crop_width = image.height | times: aspect_ratio
+            assign focus_horizontal_shift = image.presentation.focal_point.x | default: 50.0 | minus: 50 | divided_by: 100.0 | times: image.width | round
+            assign margin_inline = image.width | minus: crop_width
+            assign crop_left = margin_inline | divided_by: 2.0 | round | plus: focus_horizontal_shift | at_least: 0 | at_most: margin_inline
+          endif
+          echo image | image_url: width: crop_width, crop: "region", crop_width: crop_width, crop_height: crop_height, crop_left: crop_left, crop_top: crop_top | image_tag: widths: widths, loading: loading, sizes: sizes, style: "object-position: 50% 50%; object-fit: cover;"
+        else
+          assign style = "object-fit: " | append: fit | append: "; object-position: {{ image.presentation.focal_point }}"
+          echo image | image_url: width: image.width | image_tag: widths: widths, loading: loading, sizes: sizes, style: style
         endif
-        echo image | image_url: width: crop_width, crop: "region", crop_width: crop_width, crop_height: crop_height, crop_left: crop_left, crop_top: crop_top | image_tag: widths: widths, loading: loading, sizes: sizes, style: "object-position: 50% 50%; object-fit: cover;"
-      else
-        assign style = "object-fit: " | append: fit | append: ";"
-        echo image | image_url: width: image.width | image_tag: widths: widths, loading: loading, sizes: sizes, style: style
       endif
+    else
+      echo placeholder | placeholder_svg_tag
     endif
-  else
-    echo placeholder | placeholder_svg_tag
-  endif
-%}
-
+  %}
 </div>