Add the Quick order list section to your theme code

{%#theme-check-disable%}{%-assignitems_in_cart=车|line_items_for:product|sum:'quantity'-%}{%#theme-check-enable%}
 {{部分.id}}" > 
{{routes.车_update_url}}" class="quick-order-list__contents critical-hidden" method="post" id="QuickOrderList" > 
 
 {%-ifproduct.has_only_default_variant-%}{%#theme-check-disable%}{%assign车_qty=车|item_count_for_variant:product.selected_or_first_available_variant.id%}{%#theme-check-enable%}{{product.selected_or_first_available_variant.id}}" data-variant-id="{{product.selected_or_first_available_variant.id}}" data-cart-qty="{{车_qty}}" > {%-assignitem_price=product.selected_or_first_available_variant.price|money-%}{%-else-%}{%-forvariantinproduct.variants-%}{%#theme-check-disable%}{%assign车_qty=车|item_count_for_variant:variant.id%}{%#theme-check-enable%}{{variant.id}}" data-variant-id="{{variant.id}}" data-cart-qty="{{车_qty}}" > {%-assignitem_price=variant.price|money-%}{%-endfor-%}{%-endif-%}
 
 Quick Order List 
 
 
 
{%-ifproduct.has_only_default_variant-%}Product{%-else-%}Variant{%-endif-%}
 
{%-ifproduct.has_only_default_variant-%}Product subtotal{%-else-%}Variant total{%-endif-%}
 
 Quantity 
 
 Price 
 
{%-ifproduct.has_only_default_variant-%}Product subtotal{%-else-%}Variant total{%-endif-%}
 
 
 
 
 
{%unlessproduct.featured_media%}variant-item__image-container--no-img{%endunless%}">{%ifproduct.featured_media%}{%-assignimg_height=43|divided_by:product.featured_media.aspect_ratio|ceil-%}{{product.featured_media|image_url:width:86|image_tag:loading:'lazy',fetchpriority:'low',decoding:'async',class:'variant-item__image',width:43,height:img_height,widths:'86',alt:product.featured_media.alt|escape}}{%endif%}
 
 
 {{product.title|escape}}{%-ifproduct.sku-%}{{product.selected_or_first_available_variant.sku|escape}}{%-endif-%}
 
 
 
 {{variant.title|escape}}{%-ifproduct.selected_or_first_available_variant.sku-%}{{product.selected_or_first_available_variant.sku|escape}}{%-endif-%}
{%-assignitem_price=product.selected_or_first_available_variant.price|money-%}{%-ifproduct.selected_or_first_available_variant.compare_at_price-%}
 
 Regular price 
 
 {{product.selected_or_first_available_variant.compare_at_price|money}} 
 
 Sale price 
 
 {{item_price}}/ea  
 
{%-else-%}{{item_price}}/ea {%-endif-%}{%-ifproduct.selected_or_first_available_variant.availableandproduct.selected_or_first_available_variant.unit_price_measurement-%}
 Unit price{{product.selected_or_first_available_variant.unit_price|money}}/  per {%-ifproduct.selected_or_first_available_variant.unit_price_measurement.reference_value!=1-%}{{-product.selected_or_first_available_variant.unit_price_measurement.reference_value-}}{%-endif-%}{{product.selected_or_first_available_variant.unit_price_measurement.reference_unit}}
{%-endif-%}
 
{%-render'loading-overlay'-%}{%comment%}TODO: enable theme-check once `line_items_for` is accepted as valid filter{%endcomment%}{%#theme-check-disable%}{{车|line_items_for:product.selected_or_first_available_variant|sum:'original_line_price'|money}}{%#theme-check-enable%}
 
  
 {{variant.id}}"> Quantity  
{%-ifproduct.selected_or_first_available_variant.available==false-%}< span class = " variant-item__sold-out h4”>卖完了{%-else-%}{%comment%}TODO: Remove theme check{%endcomment%}{%#theme-check-disable%}{%assign车_qty=车|item_count_for_variant:product.selected_or_first_available_variant.id%}{%#theme-check-enable%}{%render'quantity-input',variant:product.selected_or_first_available_variant%}{%-endif-%}
{%-if车_qty>0-%}{{product.selected_or_first_available_variant.id}}" data-index="{{product.selected_or_first_available_variant.id}}" > {{product.selected_or_first_available_variant.url_to_remove}}" class="button button--tertiary" aria-label="Remove{{variant.title}}" >{%render'icon-remove'%} {%-endif-%}
 
{{product.selected_or_first_available_variant.id}}" role="alert" > {%render'icon-error'%}
  
{%-ifvariant.compare_at_price-%}
 
 Regular price 
 
 {{product.selected_or_first_available_variant.compare_at_price|money}} 
 
 Sale price 
 
 {{item_price}}/ea  
 
{%-else-%}{{item_price}}/ea {%-endif-%}{%-ifproduct.selected_or_first_available_variant.availableandproduct.selected_or_first_available_variant.unit_price_measurement-%}
 Unit price{{variant.unit_price|money}}/  per {%-ifproduct.selected_or_first_available_variant.unit_price_measurement.reference_value!=1-%}{{-product.selected_or_first_available_variant.unit_price_measurement.reference_value-}}{%-endif-%}{{product.selected_or_first_available_variant.unit_price_measurement.reference_unit}}
{%-endif-%}
 
{%-render'loading-overlay'-%}{%comment%}TODO: enable theme-check once `line_items_for` is accepted as valid filter{%endcomment%}{%#theme-check-disable%}{{车|line_items_for:product.selected_or_first_available_variant|sum:'original_line_price'|money}}{%#theme-check-enable%}
 
 
 
 
 
{{variant.id}}" role="alert"> {%render'icon-error'%}
 
 
 
 
 
 
{%unlessvariant.image%}variant-item__image-container--no-img{%endunless%}">{%ifvariant.image%}{%-assignimg_height=43|divided_by:variant.image.aspect_ratio|ceil-%}{{variant.image|image_url:width:86|image_tag:loading:'lazy',fetchpriority:'low',decoding:'async',class:'variant-item__image',width:43,height:img_height,widths:'86',alt:variant.image.alt|escape}}{%endif%}
 
 
 {{variant.title|escape}}{%-ifvariant.sku-%}{{variant.sku|escape}}{%-endif-%}
 
 
 
 {{variant.title|escape}}{%-ifvariant.sku-%}{{variant.sku|escape}}{%-endif-%}
{%-assignitem_price=variant.price|money-%}{%-ifvariant.compare_at_price-%}
 
 Regular price 
 
 {{variant.compare_at_price|money}} 
 
 Sale price 
 
 {{item_price}}/ea  
 
{%-else-%}{{item_price}}/ea {%-endif-%}{%-ifvariant.availableandvariant.unit_price_measurement-%}
 Unit price{{variant.unit_price|money}}/  per {%-ifvariant.unit_price_measurement.reference_value!=1-%}{{-variant.unit_price_measurement.reference_value-}}{%-endif-%}{{variant.unit_price_measurement.reference_unit}}
{%-endif-%}
 
{%-render'loading-overlay'-%}{%comment%}TODO: enable theme-check once `line_items_for` is accepted as valid filter{%endcomment%}{%#theme-check-disable%}{{车|line_items_for:variant|sum:'original_line_price'|money}}{%#theme-check-enable%}
 
  
 {{variant.id}}"> Quantity  
{%-ifvariant.available==false-%}Sold out{%-else-%}{%comment%}TODO: Remove theme check{%endcomment%}{%#theme-check-disable%}{%assign车_qty=车|item_count_for_variant:variant.id%}{%#theme-check-enable%}{%render'quantity-input',variant:variant%}{%-endif-%}
{%-if车_qty>0-%}{{variant.id}}" data-index="{{variant.id}}" > {{variant.url_to_remove}}" class="button button--tertiary" aria-label="Remove{{variant.title}}" >{%render'icon-remove'%} {%-endif-%}
 
{{variant.id}}" role="alert" > {%render'icon-error'%}
  
{%-ifvariant.compare_at_price-%}
 
 Regular price 
 
 {{variant.compare_at_price|money}} 
 
 Sale price 
 
 {{item_price}}/ea  
 
{%-else-%}{{item_price}}/ea {%-endif-%}{%-ifvariant.availableandvariant.unit_price_measurement-%}
 Unit price{{variant.unit_price|money}}/  per {%-ifvariant.unit_price_measurement.reference_value!=1-%}{{-variant.unit_price_measurement.reference_value-}}{%-endif-%}{{variant.unit_price_measurement.reference_unit}}
{%-endif-%}
 
{%-render'loading-overlay'-%}{%comment%}TODO: enable theme-check once `line_items_for` is accepted as valid filter{%endcomment%}{%#theme-check-disable%}{{车|line_items_for:variant|sum:'original_line_price'|money}}{%#theme-check-enable%}
 
 
 
 
 
{{variant.id}}" role="alert"> {%render'icon-error'%}
 
 
 
 
 
 
  
 
 
 Loading... 
 
{%-ifproduct.has_only_default_variantorproduct.variants.size==1-%}{%comment%}Populated by JS{%endcomment%}{%-else-%}
 
 
 
 {{routes.车_url}}" class="quick-order-list__button button button--secondary small-hide medium-hide" > View cart  
{%-render'loading-overlay'-%} {%render'icon-remove'%}Remove all   
 
  {%-render'icon-checkmark'-%}   {%comment%}Populated by JS{%endcomment%} 
 
 
{{items_in_cart}}
 
Total items
 
 
  
 
{%comment%}TODO: enable theme-check once `line_items_for` is accepted as valid filter{%endcomment%}{%#theme-check-disable%}{{车|line_items_for:product|sum:'original_line_price'|money}}{%#theme-check-enable%}
 
Product subtotal
 
 {%-if车.taxes_includedandshop.shipping_policy.body!=blank-%}Tax included. {{shop.shipping_policy.url}}">Shipping and discounts calculated at checkout.{%-elsif车.taxes_included-%}Tax included and shipping and discounts calculated at checkout{%-elsifshop.shipping_policy.body!=blank-%}Taxes, Discounts and {{shop.shipping_policy.url}}">shipping calculated at checkout{%-else-%}Taxes, discounts and shipping calculated at checkout{%-endif-%} 
 
 
 {{routes.车_url}}" class="quick-order-list__button button button--secondary button--full-width" > View cart  
{%-render'loading-overlay'-%} {%render'icon-remove'%}Remove all   
 
  {%-render'icon-checkmark'-%}   {%comment%}Populated by JS{%endcomment%} 
 
 
  Remove all{{items_in_cart}}items from your cart?    Remove all     Cancel   
 
{%-endif-%}  

classQuickOrderListRemoveButtonextendsHTMLElement{constructor(){super();this.addEventListener('click',(event)=>{event.preventDefault();constquickOrderList=this.closest('quick-order-list');quickOrderList.updateQuantity(this.dataset.index,0);});}}customElements.define('quick-order-list-remove-button',QuickOrderListRemoveButton);classQuickOrderListRemoveAllButtonextendsHTMLElement{constructor(){super();constallVariants=Array.from(document.querySelectorAll('[data-variant-id]'));constitems={}lethasVariantsInCart=false;this.quickOrderList=this.closest('quick-order-list');allVariants.forEach((variant)=>{const车Qty=parseInt(variant.dataset.车Qty);if(车Qty>0){hasVariantsInCart=true;items[parseInt(variant.dataset.variantId)]=0;}});if(!hasVariantsInCart){this.classList.add('hidden');}this.actions={confirm:'confirm',remove:'remove',取消:'取消'}this.addEventListener('click',(event)=>{event.preventDefault();if(this.dataset.action===this.actions.confirm){this.toggleConfirmation(false,true);}elseif(this.dataset.action===this.actions.remove){this.quickOrderList.updateMultipleQty(items);this.toggleConfirmation(true,false);}elseif(this.dataset.action===this.actions.取消){this.toggleConfirmation(true,false);}});}toggleConfirmation(showConfirmation,showInfo){this.quickOrderList.querySelector('.quick-order-list-total__confirmation').classList.toggle('hidden',showConfirmation);this.quickOrderList.querySelector('.quick-order-list-total__info').classList.toggle('hidden',showInfo)}}customElements.define('quick-order-list-remove-all-button',QuickOrderListRemoveAllButton);classQuickOrderListextendsHTMLElement{constructor(){super();this.车=document.querySelector('车-drawer');this.actions={add:'ADD',update:'UPDATE'}this.quickOrderListId='quick-order-list'this.variantItemStatusElement=document.getElementById('shopping-cart-variant-item-status');constform=this.querySelector('form');form.addEventListener('submit',this.onSubmit.bind(this));constdebouncedOnChange=debounce((event)=>{this.onChange(event);},ON_CHANGE_DEBOUNCE_TIMER);this.addEventListener('change',debouncedOnChange.bind(this));}车UpdateUnsubscriber=undefined;onSubmit(event){event.preventDefault();}connectedCallback(){this.车UpdateUnsubscriber=subscribe(PUB_SUB_EVENTS.车Update,(event)=>{if(event.source===this.quickOrderListId){return;}// If its another section that made the updatethis.onCartUpdate();});this.部分Id=this.dataset.id;}disconnectedCallback(){if(this.车UpdateUnsubscriber){this.车UpdateUnsubscriber();}}onChange(event){constinputValue=parseInt(event.target.value);const车Quantity=parseInt(event.target.dataset.车Quantity);constindex=event.target.dataset.index;constname=document.activeElement.getAttribute('name');constquantity=inputValue-车Quantity;if(车Quantity>0){this.updateQuantity(index,inputValue,name,this.actions.update);}else{this.updateQuantity(index,quantity,name,this.actions.add);}}onCartUpdate(){fetch(`${window.location.pathname}?section_id=${this.部分Id}`).then((response)=>response.text()).then((responseText)=>{consthtml=newDOMParser().parseFromString(responseText,'text/html');constsourceQty=html.querySelector(this.quickOrderListId);this.innerHTML=sourceQty.innerHTML;}).catch(e=>{console.error(e);});}getSectionsToRender(){return[{id:this.quickOrderListId,部分:document.getElementById(this.quickOrderListId).dataset.id,selector:'.js-contents'},{id:'车-icon-bubble',部分:'车-icon-bubble',selector:'.shopify-section'},{id:'quick-order-list-live-region-text',部分:'车-live-region-text',selector:'.shopify-section'},{id:'quick-order-list-total',部分:document.getElementById(this.quickOrderListId).dataset.id,selector:'.quick-order-list__total'},{id:'CartDrawer',selector:'#CartDrawer',部分:'车-drawer'}];}renderSections(parsedState){this.getSectionsToRender().forEach((部分=>{const部分Element=document.getElementById(部分.id);if(部分Element&&部分Element.parentElement&&部分Element.parentElement.classList.contains('drawer')){parsedState.items.length>0?部分Element.parentElement.classList.remove('is-empty'):部分Element.parentElement.classList.add('is-empty');setTimeout(()=>{document.querySelector('#CartDrawer-Overlay').addEventListener('click',this.车.close.bind(this.车));});}constelementToReplace=部分Element&&部分Element.querySelector(部分.selector)?部分Element.querySelector(部分.selector):部分Element;if(elementToReplace){elementToReplace.innerHTML=this.getSectionInnerHTML(parsedState.部分s[部分.部分],部分.selector);}}));}updateMultipleQty(items){this.querySelector('.variant-remove-total .loading-overlay').classList.remove('hidden');constbody=JSON.stringify({updates:items,部分s:this.getSectionsToRender().map((部分)=>部分.部分),部分s_url:window.location.pathname});this.updateMessage();this.setErrorMessage();fetch(`${routes.车_update_url}`,{...fetchConfig(),...{body}}).then((response)=>{returnresponse.text();}).then((state)=>{constparsedState=JSON.parse(state);this.renderSections(parsedState);}).catch(()=>{this.setErrorMessage('There was an error while updating your cart. Please try again.');}).finally(()=>{this.querySelector('.variant-remove-total .loading-overlay').classList.add('hidden');});}updateQuantity(id,quantity,name,action){this.toggleLoading(id,true);letrouteUrl=routes.车_change_url;letbody=JSON.stringify({quantity,id,部分s:this.getSectionsToRender().map((部分)=>部分.部分),部分s_url:window.location.pathname});letfetchConfigType;if(action===this.actions.add){fetchConfigType='javascript';routeUrl=routes.车_add_url;body=JSON.stringify({items:[{quantity:parseInt(quantity),id:parseInt(id)}],部分s:this.getSectionsToRender().map((部分)=>部分.部分),部分s_url:window.location.pathname});}this.updateMessage();this.setErrorMessage();fetch(`${routeUrl}`,{...fetchConfig(fetchConfigType),...{body}}).then((response)=>{returnresponse.text();}).then((state)=>{constparsedState=JSON.parse(state);constquantityElement=document.getElementById(`Quantity-${id}`);constitems=document.querySelectorAll('.variant-item');if(parsedState.description||parsedState.errors){constvariantItem=document.querySelector(`[id^="Variant-${id}"] .variant-item__totals.small-hide .loading-overlay`);variantItem.classList.add('loading-overlay--error');this.resetQuantityInput(id,quantityElement);if(parsedState.errors){this.updateLiveRegions(id,parsedState.errors);}else{this.updateLiveRegions(id,parsedState.description);}return;}this.classList.toggle('is-empty',parsedState.item_count===0);this.renderSections(parsedState);lethasError=false;constcurrentItem=parsedState.items.find((item)=>item.variant_id===parseInt(id));constupdatedValue=currentItem?currentItem.quantity:undefined;if(updatedValue&&updatedValue!==quantity){this.updateError(updatedValue,id);hasError=true;}constvariantItem=document.getElementById(`Variant-${id}`);if(variantItem&&variantItem.querySelector(`[name="${name}"]`)){variantItem.querySelector(`[name="${name}"]`).focus();}publish(PUB_SUB_EVENTS.车Update,{source:this.quickOrderListId,车Data:parsedState});if(hasError){this.updateMessage();}elseif(action===this.actions.add){this.updateMessage(parseInt(quantity))}elseif(action===this.actions.update){this.updateMessage(parseInt(quantity-quantityElement.dataset.车Quantity))}else{this.updateMessage(-parseInt(quantityElement.dataset.车Quantity))}}).catch((error)=>{this.querySelectorAll('.loading-overlay').forEach((overlay)=>overlay.classList.add('hidden'));this.resetQuantityInput(id);console.error(error);this.setErrorMessage('There was an error while updating your cart. Please try again.');}).finally(()=>{this.toggleLoading(id);});}resetQuantityInput(id,quantityElement){constinput=quantityElement??document.getElementById(`Quantity-${id}`);input.value=input.getAttribute('value');}setErrorMessage(message=null){this.errorMessageTemplate=this.errorMessageTemplate??document.getElementById(`QuickOrderListErrorTemplate-${this.部分Id}`).cloneNode(true);consterrorElements=document.querySelectorAll('.quick-order-list-error');errorElements.forEach((errorElement)=>{errorElement.innerHTML='';if(!message)return;constupdatedMessageElement=this.errorMessageTemplate.cloneNode(true);updatedMessageElement.content.querySelector('.quick-order-list-error-message').innerText=message;errorElement.appendChild(updatedMessageElement.content);});}updateMessage(quantity=null){constmessages=this.querySelectorAll('.quick-order-list__message-text');consticons=this.querySelectorAll('.quick-order-list__message-icon');if(quantity===null||isNaN(quantity)){messages.forEach(message=>message.innerHTML='');icons.forEach(icon=>icon.classList.add('hidden'));return;}constisQuantityNegative=quantity<0;constabsQuantity=Math.abs(quantity);consttextTemplate=isQuantityNegative?(absQuantity===1?`${absQuantity}item removed`:`${absQuantity}items removed`):(quantity===1?`${absQuantity}item added`:`${absQuantity}items added`)messages.forEach((msg)=>msg.innerHTML=textTemplate);if(!isQuantityNegative){icons.forEach((i)=>i.classList.remove('hidden'));}}updateError(updatedValue,id){letmessage='';if(typeofupdatedValue==='undefined'){message='There was an error while updating your cart. Please try again.';}else{message=`You can only add${updatedValue}of this item to your cart.`;}this.updateLiveRegions(id,message);}updateLiveRegions(id,message){constvariantItemErrorDesktop=document.getElementById(`Quick-order-list-item-error-desktop-${id}`);constvariantItemErrorMobile=document.getElementById(`Quick-order-list-item-error-mobile-${id}`);if(variantItemErrorDesktop){variantItemErrorDesktop.querySelector('.variant-item__error-text').innerHTML=message;variantItemErrorDesktop.closest('tr').classList.remove('hidden');}if(variantItemErrorMobile)variantItemErrorMobile.querySelector('.variant-item__error-text').innerHTML=message;this.variantItemStatusElement.setAttribute('aria-hidden',true);const车Status=document.getElementById('quick-order-list-live-region-text');车Status.setAttribute('aria-hidden',false);setTimeout(()=>{车Status.setAttribute('aria-hidden',true);},1000);}getSectionInnerHTML(html,selector){returnnewDOMParser().parseFromString(html,'text/html').querySelector(selector).innerHTML;}toggleLoading(id,enable){constquickOrderList=document.getElementById(this.quickOrderListId);constquickOrderListItems=this.querySelectorAll(`#Variant-${id}.loading-overlay`);if(enable){quickOrderList.classList.add('quick-order-list__container--disabled');[...quickOrderListItems].forEach((overlay)=>overlay.classList.remove('hidden'));document.activeElement.blur();this.variantItemStatusElement.setAttribute('aria-hidden',false);}else{quickOrderList.classList.remove('quick-order-list__container--disabled');quickOrderListItems.forEach((overlay)=>overlay.classList.add('hidden'));}}}customElements.define('quick-order-list',QuickOrderList);