Support file upload line item properties on Product Forms and Cart No…

…tifications (#745)
Shopify · Oct 15, 2021 · 2d1c832 · 2d1c832
1 parent 3359544
commit 2d1c832
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 33 deletions.
diff --git a/assets/component-cart-items.css b/assets/component-cart-items.css
@@ -95,6 +95,7 @@
 
 .product-option {
   font-size: 1.4rem;
+  word-break: break-all;
   line-height: calc(1 + 0.5 / var(--font-body-scale));
 }
 

diff --git a/assets/global.js b/assets/global.js
@@ -149,24 +149,6 @@ function debounce(fn, wait) {
   };
 }
 
-const serializeForm = form => {
-  const obj = {};
-  const formData = new FormData(form);
-
-  for (const key of formData.keys()) {
-    const regex = /(?:^(properties\[))(.*?)(?:\]$)/;
-
-    if (regex.test(key)) {
-      obj.properties = obj.properties || {};
-      obj.properties[regex.exec(key)[2]] = formData.get(key);
-    } else {
-      obj[key] = formData.get(key);
-    }
-  }
-
-  return JSON.stringify(obj);
-};
-
 function fetchConfig(type = 'json') {
   return {
     method: 'POST',

diff --git a/assets/product-form.js b/assets/product-form.js
@@ -12,7 +12,7 @@ if (!customElements.get('product-form')) {
     onSubmitHandler(evt) {
       evt.preventDefault();
       const submitButton = this.querySelector('[type="submit"]');
-      if (submitButton.classList.contains('loading')) return; 
+      if (submitButton.classList.contains('loading')) return;
 
       this.handleErrorMessage();
       this.cartNotification.setActiveElement(document.activeElement);
@@ -23,11 +23,12 @@ if (!customElements.get('product-form')) {
 
       const config = fetchConfig('javascript');
       config.headers['X-Requested-With'] = 'XMLHttpRequest';
-      config.body = JSON.stringify({
-        ...JSON.parse(serializeForm(this.form)),
-        sections: this.cartNotification.getSectionsToRender().map((section) => section.id),
-        sections_url: window.location.pathname
-      });
+      delete config.headers['Content-Type'];
+
+      const formData = new FormData(this.form);
+      formData.append('sections', this.cartNotification.getSectionsToRender().map((section) => section.id));
+      formData.append('sections_url', window.location.pathname);
+      config.body = formData;
 
       fetch(`${routes.cart_add_url}`, config)
         .then((response) => response.json())

diff --git a/sections/cart-notification-product.liquid b/sections/cart-notification-product.liquid
@@ -12,16 +12,33 @@
       {% endif %}
       <div>
         <h3 class="cart-notification-product__name h4">{{ item.product.title | escape }}</h3>
-        {%- unless item.product.has_only_default_variant -%}
           <dl>
-            {%- for option in item.options_with_values -%}
-              <div class="product-option">
-                <dt>{{ option.name }}: </dt>
-                <dd>{{ option.value }}</dd>
-              </div>
+            {%- unless item.product.has_only_default_variant -%}
+              {%- for option in item.options_with_values -%}
+                <div class="product-option">
+                  <dt>{{ option.name }}: </dt>
+                  <dd>{{ option.value }}</dd>
+                </div>
+              {%- endfor -%}
+            {%- endunless -%}
+            {%- for property in item.properties -%}
+              {%- assign property_first_char = property.first | slice: 0 -%}
+              {%- if property.last != blank and property_first_char != '_' -%}
+                <div class="product-option">
+                  <dt>{{ property.first }}: </dt>
+                  <dd>
+                    {%- if property.last contains '/uploads/' -%}
+                      <a href="{{ property.last }}" class="link" target="_blank">
+                        {{ property.last | split: '/' | last }}
+                      </a>
+                    {%- else -%}
+                      {{ property.last }}
+                    {%- endif -%}
+                  </dd>
+                </div>
+              {%- endif -%}
             {%- endfor -%}
           </dl>
-        {%- endunless -%}
         {%- if item.selling_plan_allocation != nil -%}
           <p class="product-option">{{ item.selling_plan_allocation.selling_plan.name }}</p>
         {%- endif -%}

diff --git a/sections/main-cart-items.liquid b/sections/main-cart-items.liquid
@@ -1,5 +1,4 @@
 {{ 'component-cart.css' | asset_url | stylesheet_tag }}
-{{ 'component-cart-items.css' | asset_url | stylesheet_tag }}
 {{ 'component-totals.css' | asset_url | stylesheet_tag }}
 {{ 'component-price.css' | asset_url | stylesheet_tag }}
 {{ 'component-discounts.css' | asset_url | stylesheet_tag }}
@@ -83,7 +82,7 @@
                               <dt>{{ property.first }}: </dt>
                               <dd>
                                 {%- if property.last contains '/uploads/' -%}
-                                  <a href="{{ property.last }}" target="_blank">
+                                  <a href="{{ property.last }}" class="link" target="_blank">
                                     {{ property.last | split: '/' | last }}
                                   </a>
                                 {%- else -%}