Quick Order Form: Follow Figma designs (#3072)

* Quick Order Form scaffolding * [Refactoring] Replace loading spinner with snippet (#2996) * Change spinner for main-cart-items * Change spinner for cart-drawer * remove extra div and change classes * Replace spinner with snippet for pdp and fead prod * Remove unnecessary classes * Add comment for snippet * Change naming for files and css classes * Put back deleted elements * Remove unused classes * Put back loading-overlay for cases when no spinner * Chnage loading-overlay--error name * Minor change in CSS * Move loading-overlay styles to template-collection * Rename component-loading-overlay * Fix bug with overlay and spinner for facets * Remove component-loading-spinner import from files * Use spinner snippet for predictive search * Hide product count when loading for drawer filters * Address feedback. Clean-up. * Minor changes to address feedback * Fix spinner conflict with cart drawer * Address feedabck * Add missing whitespace for if tag * Quick Order Form scaffolding * Add styles to make form look according to Figma * Make sure QOL works properly * Styles for images * Remove price from product * Adjust css styles for the quick order form * Update section settings * Add filtering and search mockup * Remove settings for search and picking collections * Prevent being to added to all templates. Limit numer of the sections to 1. * Remove filter * Fix typo * Remove unnecessary styles and change px to rem * Simplify product title row * Roll back changes for quick-order-list-row * Add display flex to variant column for QOL * Remove empty row * Fix global settings for media * Add link to product title * Prevent border going over image size * Refactoring. Add hover effect while focusing. * Remove shadow from total bar * Fix visible empty space and outline for no-media * Remove unnecessary parameters for snippet * Minor changes in css * Remove hardcoded text * Update total bar count items and price * Change Product total to Subtotal. Add currency code. Fix shadow. * Change ID for quick-order-form search. Re order templates for enabled_on. --------- Co-authored-by: Sofia Matulis <[email protected]>
Shopify · Nov 16, 2023 · 4f80338 · 4f80338
1 parent 4fb2bc5
commit 4f80338
Show file tree

Hide file tree

Showing 8 changed files with 555 additions and 233 deletions.
diff --git a/assets/quick-order-form.css b/assets/quick-order-form.css
@@ -6,6 +6,14 @@
   background-color: rgba(var(--color-foreground), 0.02);
 }
 
+.quick-order-form thead th:first-child {
+  padding-left: 1rem;
+}
+
+.quick-order-form thead th:last-child {
+  padding-right: 1rem;
+}
+
 .quick-order-form .quick-order-list__table thead th {
   padding-top: 0.8rem;
   padding-bottom: 0.8rem;
@@ -20,4 +28,116 @@
 .quick-order-form .variant-item__price .price,
 .quick-order-form .variant-item__totals .price {
   font-size: 1.4rem;
-}
+}
+
+.quick-order-form a.variant-item__name {
+  text-decoration: none;
+}
+
+.quick-order-form a.variant-item__name:hover {
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+  text-decoration-thickness: 0.1rem;
+}
+
+.quick-order-form .quick-order-list__table th {
+  border: 0;
+}
+
+.quick-order-form tr.variant-item:not(.product):hover,
+.quick-order-form tr.variant-item:not(.product):focus-within {
+  background-color: rgba(var(--color-foreground), 0.02);
+}
+
+.quick-order-form tr.variant-item td.variant-item__inner {
+  display: table-cell;
+}
+
+.quick-order-form .quick-order-list__table td {
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+}
+
+.quick-order-form tr.product td {
+  min-height: calc((var(--inputs-border-width) * 2) + 5rem);
+  padding-top: 1.6rem;
+  padding-bottom: 1.6rem;
+}
+
+.quick-order-form .product-item__title--wrapper {
+  display: flex;
+}
+
+.quick-order-form .product {
+  box-shadow: inset 0rem -0.1rem 0rem 0rem rgba(var(--color-foreground), 0.08);
+}
+
+.quick-order-form tr .variant-item__image-container {
+  margin-right: 0.8rem;
+}
+
+.quick-order-form tr.product .variant-item__image-container {
+  width: 3.6rem;
+  border: min(var(--media-border-width), 1.8rem) solid rgba(var(--color-foreground),var(--media-border-opacity));
+  height: auto;
+}
+
+.quick-order-form tr:not(.product) .variant-item__image-container {
+  width: 2.6rem;
+  height: 2.6rem;
+  border: min(var(--media-border-width), 1.3rem) solid rgba(var(--color-foreground),var(--media-border-opacity));
+}
+
+.quick-order-form .variant-item__image-container--no-img {
+  display: none;
+}
+
+.quick-order-form tr .variant-item__media {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-right: 0.8rem;
+}
+
+.quick-order-form tr:not(.product) .variant-item__media {
+  width: 2.6rem;
+  height: 4rem;
+}
+
+.quick-order-form tr.product .variant-item__media {
+  width: 3.6rem;
+  height: auto;
+}
+
+.quick-order-form .field {
+  margin-bottom: 1.8rem;
+  z-index: 0;
+}
+
+.quick-order-form .field label {
+  opacity: 0.3;
+}
+
+.quick-order-form__search--wrapper {
+  display: flex;
+}
+
+.total-items {
+  white-space: nowrap;
+  line-height: calc(1 + .5 / var(--font-body-scale));
+  font-size: 1.4rem;
+  margin-left: 1.6rem;
+  margin-bottom: 1.8rem;
+  display: flex;
+  align-items: center;
+}
+
+.quick-order-form .variant-item__totals .loading__spinner {
+  padding-top: 1.5rem;
+}
+
+.product-item__inner .small-hide {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+}
diff --git a/assets/quick-order-list.css b/assets/quick-order-list.css
@@ -483,6 +483,10 @@ quick-order-list-remove-button:hover .icon-remove {
     display: table-row;
   }
 
+  .product-variant__title--wrapper {
+    display: flex;
+  }
+
   .variant-item .variant-item__price {
     text-align: right;
   }

diff --git a/assets/quick-order-list.js b/assets/quick-order-list.js
@@ -67,8 +67,7 @@ class QuickOrderList extends HTMLElement {
       add: 'ADD',
       update: 'UPDATE'
     }
-    this.id = this.dataset.id
-    this.quickOrderListId = `${this.id}`
+    this.quickOrderListId = this.dataset.id;
     this.variantItemStatusElement = document.getElementById('shopping-cart-variant-item-status');
     const form = this.querySelector('form');
 
@@ -123,7 +122,7 @@ class QuickOrderList extends HTMLElement {
       .then((response) => response.text())
       .then((responseText) => {
         const html = new DOMParser().parseFromString(responseText, 'text/html');
-        const sourceQty = html.querySelector(this.quickOrderListId);
+        const sourceQty = html.querySelector(`#${this.quickOrderListId}`);
         this.innerHTML = sourceQty.innerHTML;
       })
       .catch(e => {

diff --git a/locales/en.default.json b/locales/en.default.json
@@ -359,6 +359,12 @@
       "remove_all_items_confirmation": "Remove all {{ quantity }} items from your cart?",
       "remove_all": "Remove all",
       "cancel": "Cancel"
+    },
+    "quick_order_form": {
+      "search": "Search by product, variant or SKU",
+      "search_number_items": "{{ count }} items",
+      "line_total": "Line total",
+      "total": "Subtotal"
     }
   },
   "localization": {

diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json
@@ -2742,6 +2742,20 @@
         "name": "Quick order list"
       }
     },
+    "quick-order-form": {
+      "name": "Quick order form",
+      "settings": {
+        "show_variant_image": {
+          "label": "Show variant images"
+        },
+        "show_sku": {
+          "label": "Show SKUs"
+        }
+      },
+      "presets": {
+        "name": "Quick order form"
+      }
+    },
     "related-products": {
       "name": "Related products",
       "settings": {

diff --git a/sections/quick-order-form.liquid b/sections/quick-order-form.liquid
@@ -21,17 +21,51 @@
   }
 {%- endstyle -%}
 
-{% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
-{% # theme-check-disable %}
-{%- assign items_in_cart = cart | line_items_for: product | sum: 'quantity' -%}
-{% # theme-check-enable %}
-
 <div class="color-{{ section.settings.color_scheme }} gradient">
   <quick-order-list
     id="{{ section.id }}"
     class="quick-order-form page-width section-{{ section.id }}-padding"
     data-id="{{ section.id }}"
   >
+    <div class="quick-order-form__search--wrapper">
+      <div class="field">
+        <input
+          class="search__input field__input"
+          id="Quick-Order-Form-Search-{{ section.id }}"
+          type="search"
+          name="q"
+          value="{{ search.terms | escape }}"
+          placeholder="{{ 'sections.quick_order_form.search' | t }}"
+        >
+        <label class="field__label" for="Quick-Order-Form-Search-{{ section.id }}">
+          {{- 'sections.quick_order_form.search' | t -}}
+        </label>
+        <input name="options[prefix]" type="hidden" value="last">
+
+        <button
+          type="reset"
+          class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
+          aria-label="{{ 'general.search.reset' | t }}"
+        >
+          <svg class="icon icon-close" aria-hidden="true" focusable="false">
+            <use xlink:href="#icon-reset">
+          </svg>
+        </button>
+        <button type="submit" class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
+          <svg class="icon icon-search" aria-hidden="true" focusable="false">
+            <use xlink:href="#icon-search">
+          </svg>
+        </button>
+      </div>
+      <div class="total-items">
+        <span>
+          {{-
+            'sections.quick_order_form.search_number_items'
+            | t: count: collections['shop-all'].products.first.variants.size
+          -}}
+        </span>
+      </div>
+    </div>
     <form
       action="{{ routes.cart_update_url }}"
       class="quick-order-list__contents critical-hidden"
@@ -49,7 +83,9 @@
                 <th class="caption-with-letter-spacing" scope="col">
                   {{ 'sections.quick_order_list.product' | t }}
                 </th>
-                <th class="large-up-hide right caption-with-letter-spacing" scope="col">Line total</th>
+                <th class="large-up-hide right caption-with-letter-spacing" scope="col">
+                  {{ 'sections.quick_order_form.line_total' | t }}
+                </th>
                 <th
                   class="quick-order-list__table-heading--wide small-hide medium-hide caption-with-letter-spacing"
                   scope="col"
@@ -62,24 +98,25 @@
                 >
                   {{ 'sections.cart.headings.price' | t }}
                 </th>
-                <th class="small-hide medium-hide right caption-with-letter-spacing" scope="col">Line total</th>
+                <th class="small-hide medium-hide right caption-with-letter-spacing" scope="col">
+                  {{ 'sections.quick_order_form.line_total' | t }}
+                </th>
               </tr>
             </thead>
 
             <tbody>
-              {%- render 'quick-order-list-row',
-                item: section.settings.collection.products.first,
-                image: section.settings.collection.products.first.featured_media,
-                sku: section.settings.collection.products.first.selected_or_first_available_variant.sku,
-                variant: section.settings.collection.products.first.selected_or_first_available_variant
+              {%-
+                render 'quick-order-product-row',
+                item: collections['shop-all'].products.first,
+                image: collections['shop-all']products.first.featured_media,
               -%}
-              {%- for variant in section.settings.collection.products.first.variants -%}
-                {%- render 'quick-order-list-row',
+              {%- for variant in collections['shop-all'].products.first.variants -%}
+                {%-
+                  render 'quick-order-list-row',
                   item: variant,
                   image: variant.image,
                   sku: variant.sku,
                   variant: variant,
-                  is_variant: true
                 -%}
               {%- endfor -%}
             </tbody>
@@ -128,19 +165,16 @@
           </div>
           <div class="quick-order-list__total-items">
             <span>
-              {{ items_in_cart }}
+              {{ cart.item_count }}
             </span>
             <p class="h5">{{ 'sections.quick_order_list.total_items' | t }}</p>
           </div>
           <div class="quick-order-list-total__price">
             <div class="totals__product-total">
               <span class="totals__subtotal-value">
-                {% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
-                {% # theme-check-disable %}
-                {{ cart | line_items_for: product | sum: 'original_line_price' | money }}
-                {% # theme-check-enable %}
+                {{ cart.original_total_price | money_with_currency }}
               </span>
-              <p class="totals__subtotal h5">{{ 'sections.quick_order_list.product_total' | t }}</p>
+              <p class="totals__subtotal h5">{{ 'sections.quick_order_form.total' | t }}</p>
             </div>
             <small class="tax-note caption-large rte">
               {%- if cart.taxes_included and shop.shipping_policy.body != blank -%}
@@ -193,12 +227,29 @@
 
 {% schema %}
 {
-  "name": "Quick Order form",
+  "name": "t:sections.quick-order-form.name",
+  "limit": 1,
+  "enabled_on": {
+    "templates": ["article", "blog", "index", "list-collections", "page"]
+  },
   "settings": [
     {
-      "type": "collection",
-      "id": "collection",
-      "label": "Select collection"
+      "type": "checkbox",
+      "id": "show_image",
+      "default": false,
+      "label": "t:sections.quick-order-form.settings.show_variant_image.label"
+    },
+    {
+      "type": "checkbox",
+      "id": "show_sku",
+      "default": false,
+      "label": "t:sections.quick-order-form.settings.show_sku.label"
+    },
+    {
+      "type": "color_scheme",
+      "id": "color_scheme",
+      "label": "t:sections.all.colors.label",
+      "default": "background-1"
     },
     {
       "type": "header",