Adding line item properties to cart

kateulrick
Excursionist
14 0 4

This is my code for my product customisable template liquid

 

{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign current_variant_sale = false -%}
{% if current_variant.compare_at_price > current_variant.price %}
{%- assign current_variant_sale = true -%}
{% endif %}
{% assign featured_media = current_variant.featured_media | default: product.featured_media %}

<div class="product-template" data-section-id="{{ section.id }}" data-section-type="product-template" data-variant-id="{{ current_variant.id }}" itemscope itemtype="http://schema.org/Product">
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ featured_media | img_url: 'grande' }}">

{% comment %}
------------------------------------------------------------------------------
Product Featured Media
------------------------------------------------------------------------------
{% endcomment %}
<div class="page-width page-width--no-gutter">
{% assign variant_media_ids = '' %}

{%- unless product.has_only_default_variant -%}

{% for variant in product.variants %}
{% assign variant_media = variant.featured_media %}

{%- if variant_media -%}

{%- if variant_media_ids contains variant_media.id -%}
{% continue %}
{%- endif -%}

{% assign variant_media_ids = variant_media_ids | append: variant_media.id | append: ' ' %}
{% assign featured = false %}
{%- if featured_media == variant_media -%}
{% assign featured = true %}
{%- endif -%}

{% include 'product-preview-image' with media: variant_media, featured_media: featured, gallery_type: 'media', data_image: 'data-variant-media-image' %}
{%- endif -%}

{% endfor %}
{%- endunless -%}

{% unless featured_media and variant_media_ids contains featured_media.id %}
{% include 'product-preview-image' with media: featured_media, featured_media: true, gallery_type: 'media', data_image: 'data-variant-media-image' %}
{%- endunless -%}

{% include 'shopify-xr-button' %}
</div>

{% comment %}
------------------------------------------------------------------------------
Product Form & Description
------------------------------------------------------------------------------
{% endcomment %}
<div class="product__content page-width">
<div class="grid">
<div class="grid__item medium-up--push-one-twelfth medium-up--ten-twelfths">
<div class="product__content-header">

{% if section.settings.show_vendor %}
<span class="product__vendor text-small text-center" itemprop="brand">{{ product.vendor }}</span>
{% endif %}

<h1 class="product__title h2 text-center" itemprop="name">{{ product.title }}</h1>
<p class="product__price text-center{% if current_variant_sale %} product__price--sale{% endif %}" data-product-price aria-live="polite">

<span class="product__sale-price-label visually-hidden">{{ 'products.product.sale_price' | t }}</span>
<span class="product__regular-price-label visually-hidden">{{ 'products.product.price' | t }}</span>
<span class="product__current-price" data-regular-price>{{ current_variant.price | money }}</span>

<span class="product__compare-price-label visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product__compare-price" data-compare-price>{{ current_variant.compare_at_price | money }}</s>

{% include 'product-unit-price', variant: current_variant %}
</p>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}

</div>

<div class="product__content-main">
<div class="product__description rte" itemprop="description" class="rte">
{{ product.description }}
</div>

<div class="product__form-container" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<div class="product__form-wrapper">
<meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">

{% include 'product-form' %}

{% if section.settings.show_share_buttons %}
{% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
<div class="product__share-wrapper small--hide">
<div class="product__share">
{% include 'social-sharing', type: "product", links: 'bottom' share_title: product.title, share_permalink: product.url, share_image: featured_media %}
</div>
</div>
{% endif %}
{% endif %}
</div>
</div>

</div>
</div>
</div>
</div>

{% comment %}
------------------------------------------------------------------------------
Product Share Buttons
------------------------------------------------------------------------------
{% endcomment %}
{% if section.settings.show_share_buttons %}
{% if settings.share_facebook or settings.share_twitter or settings.share_pinterest %}
<div class="product__share-wrapper product__share-wrapper--mobile medium-up--hide">
<div class="product__share">
{% include 'social-sharing', type: 'mobile', share_title: product.title, share_permalink: product.url, share_image: featured_media %}
</div>
</div>
{% endif %}
{% endif %}


{% comment %}
------------------------------------------------------------------------------
Product Media Gallery
------------------------------------------------------------------------------
{% endcomment %}
{%- if product.media.size > 1 -%}

{% comment %}
If we are hiding variant media which are displayed at the top of the
page, then find total number media not set as a variant media or as the
featured media.

We need the total number of media to be displayed so that we know what
arrangement the media need to be positioned in, i.e. rows of 3 or 2
media.
{% endcomment %}

{%- if section.settings.hide_variant_media -%}
{% assign variant_media_ids_array = variant_media_ids | split: ' ' %}
{% assign total_media = product.media.size | minus: variant_media_ids_array.size %}
{%- else -%}
{% assign total_media = product.media.size %}
{%- endif -%}

{% comment %}
Insert images into rows of 3 and/or 2 depending on the total number of
images.
{% endcomment %}
{% assign total_modulus = total_media | modulo: 3 %}

{% if total_media == 1 %}<div class="page-width">{% endif %}

<div class="product__submedia-list product__submedia-list--r{{ total_modulus }}{% if total_media == 1 %} product__submedia-list--single{% endif %}">

{% for media in product.media %}

{% unless variant_media_ids contains media.id and section.settings.hide_variant_media %}
{% capture data_image %}
data-parent-fit="cover"
{% endcapture %}

{% include 'product-preview-image' with media, featured_media: false, gallery_type: 'submedia', data_image: data_image %}

{% endunless %}
{% endfor %}
</div>

{% if total_media == 1 %}</div>{% endif %}
{% endif %}

{% comment %}
------------------------------------------------------------------------------
Product Slideshow
------------------------------------------------------------------------------
{% endcomment %}
{% unless product.media.size == 0 %}
<div class="product-slideshow{% if product.media.size == 1 %} product-slideshow--single{% endif %} critical-hide" data-product-slideshow data-media-group aria-hidden="true">
<button class="product-slideshow__close btn btn--clear btn--square" tabindex="-1" data-product-slideshow-close>{% include 'icon-close' %}</button>

<div class="product-slideshow__content">
<div class="product-slideshow__slide-list slider" data-product-slider>
{% for media in product.media %}
{%- capture product_media_wrapper_class -%}
product-slideshow__slide slider__slide{%- if forloop.first %} slider__slide--active {%- endif -%}
{%- endcapture -%}

{% include 'media' with media,
section_type: 'slideshow',
parent_fit: 'contain',
featured_media: true,
data_image: 'data-product-slideshow-image',
product_media_wrapper_class: product_media_wrapper_class,
product_media_wrapper_data: 'data-product-slideshow-slide',
image_class: 'fade-in'
%}
{% endfor %}
</div>

{% include 'shopify-xr-button' %}

{% unless product.media.size == 1 %}
<div class="product-slideshow__controls">
<button class="product-slideshow__arrow product-slideshow__arrow--previous btn btn--secondary btn--square"
tabindex="-1"
data-product-slideshow-previous>

{% include 'icon-arrow-left' %}
<span class="visually-hidden">{{ 'general.pagination.previous' | t }}</span>
</button>

<button class="product-slideshow__arrow product-slideshow__arrow--next btn btn--secondary btn--square"
tabindex="-1"
data-product-slideshow-next>

{% include 'icon-arrow-right' %}
<span class="visually-hidden">{{ 'general.pagination.next' | t }}</span>
</button>

<div class="product-slideshow__slide-select-list">
{% for media in product.media %}
<button class="product-slideshow__slide-select {% if forloop.first %} product-slideshow__slide-select--active{% endif %}" tabindex="-1" data-product-slideshow-select="{{ forloop.index0 }}">
<span class="visually-hidden">{{ 'sections.product_template.slide' | t: number: forloop.index }}</span>
</button>
{% endfor %}
</div>
</div>
{% endunless %}
</div>
</div>
{% endunless %}

{% comment %}
------------------------------------------------------------------------------
Product Data
------------------------------------------------------------------------------
{% endcomment %}
<script type="application/json" data-product-json>
{{ product | json }}
</script>

<script type="application/json" data-model-json="{{ section.id }}">
{{ product.media | where: 'media_type', 'model' | json }}
</script>
</div>

{% schema %}
{
"name": {
"cs": "Stránky produktu",
"da": "Produktsider",
"de": "Produktseiten",
"en": "Product pages",
"es": "Páginas de productos",
"fi": "Tuotesivut",
"fr": "Pages de produits",
"hi": "उत्पाद पेज",
"it": "Pagine di prodotto",
"ja": "商品ページ",
"ko": "제품 페이지",
"nb": "Produktsider",
"nl": "Productpagina's",
"pl": "Strony produktu",
"pt-BR": "Páginas de produtos",
"pt-PT": "Páginas de produtos",
"sv": "Produktsidor",
"th": "หน้าสินค้า",
"tr": "Ürün sayfaları",
"vi": "Trang sản phẩm",
"zh-CN": "产品页面",
"zh-TW": "產品頁面"
},
"settings": [
{
"type": "checkbox",
"id": "show_quantity_selector",
"label": {
"cs": "Zobrazit výběr množství",
"da": "Vis antalsvælger",
"de": "Mengenauswahl anzeigen",
"en": "Show quantity selector",
"es": "Mostrar selector de cantidad",
"fi": "Näytä määrän valitsin",
"fr": "Afficher le sélecteur de quantité",
"hi": "मात्रा चयनकर्ता दिखाएं",
"it": "Mostra selettore quantità",
"ja": "数量セレクターを表示する",
"ko": "수량 선택기 표시",
"nb": "Vis mengdevelger",
"nl": "Hoeveelheidskiezer weergeven",
"pl": "Pokaż selektor ilości",
"pt-BR": "Exiba um seletor de quantidade",
"pt-PT": "Mostrar seletor de quantidade",
"sv": "Visa kvantitetsväljare",
"th": "แสดงตัวเลือกจำนวน",
"tr": "Adet seçiciyi göster",
"vi": "Hiển thị hộp chọn số lượng",
"zh-CN": "显示数量选择器",
"zh-TW": "顯示數量選擇器"
},
"default": false
},
{
"type": "checkbox",
"id": "show_variant_labels",
"label": {
"cs": "Zobrazit popisky variant",
"da": "Vis variantlabels",
"de": "Varianten-Etiketten anzeigen",
"en": "Show variant labels",
"es": "Mostrar etiquetas de variantes",
"fi": "Näytä vaihtoehtoiset tarrat",
"fr": "Afficher le nom des variantes",
"hi": "वेरिएंट लेबल दिखाएं",
"it": "Mostra etichette varianti",
"ja": "バリエーションのラベルを表示する",
"ko": "이형 상품 레이블 표시",
"nb": "Vis variantetiketter",
"nl": "Variantlabels weergeven",
"pl": "Pokaż etykiety wariantów",
"pt-BR": "Exibir etiquetas de variantes",
"pt-PT": "Mostrar etiquetas de variantes",
"sv": "Visa variantetiketter",
"th": "แสดงป้ายกำกับตัวเลือกสินค้า",
"tr": "Varyasyon etiketlerini göster",
"vi": "Hiển thị nhãn mẫu mã",
"zh-CN": "显示多属性标签",
"zh-TW": "顯示子類選項標籤"
},
"default": true
},
{
"type": "checkbox",
"id": "show_vendor",
"label": {
"cs": "Zobrazit dodavatele produktu",
"da": "Vis produktleverandør",
"de": "Produktanbieter anzeigen",
"en": "Show product vendor",
"es": "Mostrar proveedor del producto",
"fi": "Näytä tuotteen myyjä",
"fr": "Afficher le distributeur du produit",
"hi": "उत्पाद विक्रेता दिखाएं",
"it": "Indica fornitore prodotto",
"ja": "商品の販売元を表示する",
"ko": "제품 공급 업체 표시",
"nb": "Vis produktleverandør",
"nl": "Productleverancier weergeven",
"pl": "Pokaż dostawcę produktu",
"pt-BR": "Exiba o fornecedor do produto",
"pt-PT": "Mostrar fornecedor do produto",
"sv": "Visa produktleverantör",
"th": "แสดงผู้ขายสินค้า",
"tr": "Ürün satıcısını göster",
"vi": "Hiển thị nhà cung cấp sản phẩm",
"zh-CN": "显示产品厂商",
"zh-TW": "顯示產品廠商"
},
"default": true
},
{
"type": "checkbox",
"id": "enable_payment_button",
"label": {
"cs": "Zobrazit dynamické tlačítko pokladny",
"da": "Vis dynamisk betalingsknap",
"de": "Dynamischen Checkout Button anzeigen",
"en": "Show dynamic checkout button",
"es": "Mostrar botón de pago dinámico",
"fi": "Näytä dynaaminen kassapainike",
"fr": "Afficher le bouton de paiement dynamique",
"hi": "डायनेमिक चेकआउट बटन दिखाएं",
"it": "Mostra pulsante di check-out dinamico",
"ja": "動的チェックアウトボタンを表示する",
"ko": "동적 결제 버튼 표시",
"nb": "Vis dynamisk knapp for å gå til kassen",
"nl": "Dynamische betaalknop weergeven",
"pl": "Pokaż dynamiczny przycisk realizacji zakupu",
"pt-BR": "Exibir botão de checkout dinâmico",
"pt-PT": "Mostrar botão dinâmico de finalização da compra",
"sv": "Visa dynamiska betalningsknappar",
"th": "แสดงปุ่มชำระเงินแบบไดนามิก",
"tr": "Dinamik ödeme düğmesini göster",
"vi": "Hiển thị nút thanh toán động",
"zh-CN": "显示动态结账按钮",
"zh-TW": "顯示動態結帳按鈕"
},
"info": {
"cs": "Každý zákazník uvidí platební metodu, kterou ze všech metod dostupných v obchodě (například PayPal nebo Apple Pay) nejvíce preferuje. [Další informace](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"da": "Den enkelte kunde vil se sin foretrukne betalingsmetode blandt dem, der er tilgængelige i din butik, f.eks. PayPal eller Apple Pay. [Få mere at vide](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"de": "Jeder Kunde sieht seine bevorzugte Zahlungsmethode aus den in deinem Shop verfügbaren Zahlungsmethoden wie PayPal oder Apple Pay. [Mehr Informationen](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"en": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"es": "Cada cliente verá su forma de pago preferida entre las disponibles en tu tienda, como PayPal o Apple Pay. [Más información](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fi": "Kukin asiakas näkee ensisijaisen valintansa kauppasi tarjoamista maksutavoista, esim. PayPal tai Apple Pay. [Lisätietoja](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"fr": "Chaque client verra son moyen de paiement préféré parmi ceux qui sont proposés sur votre boutique, tels que PayPal ou Apple Pay. [En savoir plus](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"hi": "प्रत्येक ग्राहक आपके स्टोर पर उपलब्ध अपनी पसंदीदा भुगतान की विधि देखेंगे जैसे PayPal या Apple Pay. [अधिक जानें](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"it": "Ogni cliente vedrà il suo metodo di pagamento preferito tra quelli disponibili nel tuo negozio, come PayPal o Apple Pay. [Maggiori informazioni](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ja": "PayPalやApple Payなど、ストアで利用可能な希望の決済方法がお客様に表示されます。[詳細情報](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"ko": "각 고객은 PayPal 또는 Apple Pay와 같이 스토어에서 사용 가능한 지불 방법을 확인할 수 있습니다. [자세히 알아보기](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"nb": "Hver enkelt kunde vil se sin foretrukne betalingsmåte blant de som er tilgjengelig i butikken din, som PayPal eller Apple Pay. [Finn ut mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"nl": "Elke klant ziet zijn of haar beschikbare voorkeursmethode om af te rekenen, zoals PayPal of Apple Pay. [Meer informatie](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pl": "Każdy klient zobaczy swoją preferowaną metodę płatności wśród metod dostępnych w Twoim sklepie, np. PayPal lub Apple Pay. [Dowiedz się więcej ](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-BR": "Cada cliente verá a forma de pagamento preferencial dele dentre as disponíveis na loja, como PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"pt-PT": "Cada cliente irá ver o seu método de pagamento preferido entre os disponíveis na loja, como o PayPal ou Apple Pay. [Saiba mais](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"sv": "Varje kund kommer att se den föredragna betalningsmetoden från de som finns tillgängliga i din butik, till exempel PayPal eller Apple Pay. [Läs mer](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"th": "ลูกค้าแต่ละรายจะเห็นวิธีการชำระเงินที่ต้องการจากวิธีที่ใช้ได้ในร้านค้าของคุณ เช่น PayPal หรือ Apple Pay [ดูข้อมูลเพิ่มเติม](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"tr": "Her müşteri, mağazanız sunulanlar arasından tercih ettikleri ödeme yöntemini görür (ör. PayPal veya Apple Pay). [Daha fazla bilgi edinin](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"vi": "Mỗi khách hàng sẽ thấy phương thức thanh toán ưu tiên của họ trong những phương thức thanh toán được hỗ trợ tại cửa hàng như PayPal hoặc Apple Pay. [Tìm hiểu thêm](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"zh-CN": "每位客户都可在您商店提供的付款方式中看到他们的首选付款方式,例如 PayPal 或 Apple Pay。[了解详细信息](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)",
"zh-TW": "每位顧客都可以在您商店內開放使用的付款方式中看見他們偏好使用的方式,如 PayPal、Apple Pay 等。[深入瞭解](https://help.shopify.com/manual/using-themes/change-the-layout/dynamic-checkout)"
},
"default": true
},
{
"type": "checkbox",
"id": "show_share_buttons",
"label": {
"cs": "Zobrazit tlačítka pro sdílení na sociálních sítích",
"da": "Vis knapper til deling på sociale medier",
"de": "Buttons für Social Media anzeigen",
"en": "Show social sharing buttons",
"es": "Mostrar botones para compartir en redes sociales",
"fi": "Näytä sosiaalisen median jakamispainikkeet",
"fr": "Afficher les boutons de partage sur les médias sociaux",
"hi": "सोशल शेयरिंग बटन दिखाएं",
"it": "Mostra i pulsanti per la condivisione sui social",
"ja": "ソーシャルメディアでの共有ボタンを表示する",
"ko": "소셜 공유 버튼 표시",
"nb": "Vis knapper for deling på sosiale medier",
"nl": "Knoppen voor delen via social media weergeven",
"pl": "Pokaż przyciski udostępniania w mediach społecznościowych",
"pt-BR": "Exibir botões de compartilhamento em redes sociais",
"pt-PT": "Mostrar botões de partilha nas redes sociais",
"sv": "Visa knappar för delning i sociala medier",
"th": "แสดงปุ่มสำหรับแชร์ลงโซเชียล",
"tr": "Sosyal medya paylaşım düğmelerini göster",
"vi": "Hiển thị nút chia sẻ qua mạng xã hội",
"zh-CN": "显示社交分享按钮",
"zh-TW": "顯示社群分享按鈕"
},
"info": {
"cs": "Nezapomeňte povolit sdílení na sociálních sítích v obecném nastavení.",
"da": "Sørg for, at du har aktiveret deling på sociale medier under Generelle indstillinger",
"de": "Vergewissere dich, dass du in den allgemeinen Einstellungen das Teilen in sozialen Netzwerken aktiviert hast",
"en": "Make sure you have enabled social sharing in general settings",
"es": "Asegúrate de haber habilitado la opción para compartir en redes sociales en la configuración general.",
"fi": "Varmista, että olet ottanut sosiaalisen median jakamisen käyttöön yleisissä asetuksissa",
"fr": "Assurez-vous d'avoir activé le partage social dans les paramètres généraux",
"hi": "सुनिश्चित करें कि आपने सामान्य सेटिंग में सोशल शेयरिंग सक्षम किया है",
"it": "Assicurati di aver abilitato la condivisione sui social nelle impostazioni generali",
"ja": "一般設定でソーシャルメディアでの共有を有効にしていることを確認してください。",
"ko": "일반 설정에서 소셜 공유가 되었는지 확인하십시오.",
"nb": "Sørg for at du har aktivert sosial deling i generelle innstillinger",
"nl": "Zorg ervoor dat je delen via social media hebt ingeschakeld in de algemene instellingen",
"pl": "Upewnij się, że włączyłeś(-aś) udostępnianie w mediach społecznościowych w ustawieniach ogólnych",
"pt-BR": "Verifique se você habilitou o compartilhamento em redes sociais nas configurações gerais",
"pt-PT": "Certifique-se de que ativou a partilha nas redes sociais nas definições gerais",
"sv": "Se till att du har aktiverat social delning i allmänna inställningar",
"th": "ตรวจสอบให้แน่ใจว่าคุณได้เปิดใช้การแชร์บนโซเชียลในการตั้งค่าทั่วไป",
"tr": "Genel ayarlardan sosyal paylaşımı etkinleştirdiğinizden emin olun",
"vi": "Đảm bảo bạn đã bật chia sẻ qua mạng xã hội trong cài đặt chung",
"zh-CN": "确保您在“通用”设置中启用了社交分享",
"zh-TW": "請確定您已在一般設定內啟用社群分享功能"
},
"default": true
},
{
"type": "header",
"content": {
"cs": "Multimédia",
"da": "Medie",
"de": "Medien",
"en": "Media",
"es": "Elementos multimedia",
"fi": "Media",
"fr": "Médias",
"hi": "मीडिया",
"it": "Media",
"ja": "メディア",
"ko": "미디어",
"nb": "Medier",
"nl": "Media",
"pl": "Multimedia",
"pt-BR": "Mídia",
"pt-PT": "Multimédia",
"sv": "Media",
"th": "สื่อ",
"tr": "Medya",
"vi": "Phương tiện",
"zh-CN": "媒体",
"zh-TW": "媒體"
},
"info": {
"cs": "Další informace o [typech multimédií](https://help.shopify.com/manual/products/product-media)",
"da": "Få mere at vide om [media types](https://help.shopify.com/manual/products/product-media)",
"de": "Mehr Informationen über [Medientypen ](https://help.shopify.com/manual/products/product-media)",
"en": "Learn more about [media types](https://help.shopify.com/manual/products/product-media)",
"es": "Más información sobre [tipos de archivos multimedia](https://help.shopify.com/manual/products/product-media)",
"fi": "Lue lisää [mediatyypeistä](https://help.shopify.com/manual/products/product-media)",
"fr": "En savoir plus sur les [types de supports multimédia](https://help.shopify.com/manual/products/product-media)",
"hi": "[मीडिया प्रकार](https://help.shopify.com/manual/products/product-media) के बारे में और जानें",
"it": "Scopri di più sulle [tipologie di file multimediali](https://help.shopify.com/manual/products/product-media)",
"ja": "[メディアのタイプ](https://help.shopify.com/manual/products/product-media) について詳しくはこちら",
"ko": "[미디어 유형](https://help.shopify.com/manual/products/product-media)에 대해 자세히 알아보기",
"nb": "Lær mer om [medietyper](https://help.shopify.com/manual/products/product-media)",
"nl": "Meer informatie over [mediatypen](https://help.shopify.com/manual/products/product-media)",
"pl": "Dowiedz się więcej o [typach multimediów](https://help.shopify.com/manual/products/product-media)",
"pt-BR": "Saiba mais sobre [tipos de mídia](https://help.shopify.com/manual/products/product-media)",
"pt-PT": "Saiba mais sobre [media types](https://help.shopify.com/manual/products/product-media)",
"sv": "Läs mer om [mediatyper](https://help.shopify.com/manual/products/product-media)",
"th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [ประเภทของสื่อ](https://help.shopify.com/manual/products/product-media)",
"tr": "[Medya türleri](https://help.shopify.com/manual/products/product-media) hakkında daha fazla bilgi edinin",
"vi": "Tìm hiểu thêm về [loại phương tiện](https://help.shopify.com/manual/products/product-media)",
"zh-CN": "详细了解[媒体类型](https://help.shopify.com/manual/products/product-media)",
"zh-TW": "深入瞭解 [媒體類型](https://help.shopify.com/manual/products/product-media)"
}
},
{
"type": "checkbox",
"id": "enable_video_looping",
"label": {
"cs": "Povolit smyčky videa",
"da": "Aktivér looping af videoer",
"de": "Videoschleife aktivieren",
"en": "Enable video looping",
"es": "Habilitar la reproducción de video en bucle",
"fi": "Ota käyttöön videosilmukka",
"fr": "Activer le bouclage de la vidéo",
"hi": "वीडियो लूपिंग सक्षम करें",
"it": "Abilita la riproduzione in loop dei video",
"ja": "ビデオのループを有効にする",
"ko": "동영상 루프 활성화",
"nb": "Aktiver løkkeavspilling av video",
"nl": "Video-looping inschakelen",
"pl": "Włącz zapętlanie filmu",
"pt-BR": "Habilitar loop de vídeo",
"pt-PT": "Ativar ciclo de vídeo",
"sv": "Aktivera video-loopning",
"th": "เปิดใช้การวนซ้ำวิดีโอ",
"tr": "Video döngüsünü etkinleştir",
"vi": "Bật vòng lặp video",
"zh-CN": "启用视频循环",
"zh-TW": "啟用影片循環功能"
},
"default": false
},
{
"type": "checkbox",
"id": "hide_variant_media",
"label": {
"cs": "Skrýt varianty multimédií v galerii",
"da": "Skjul variantmedie i galleriet",
"de": "Medienvarianten in der Galerie ausblenden",
"en": "Hide variant media in gallery",
"es": "Ocultar elementos multimedia de variantes en la galería",
"fi": "Piilota versioiden aineisto galleriassa",
"fr": "Masquer les supports multimédia des variantes dans la galerie",
"hi": "गैलरी में वेरिएंट मीडिया छिपाएं",
"it": "Nascondi le varianti dei file nella galleria",
"ja": "ギャラリーのバリエーションメディアを非表示にする",
"ko": "갤러리의 이형 상품 미디어 숨기기",
"nb": "Skjul variantmedier i galleriet",
"nl": "Verschillende media verbergen in galerie",
"pl": "Ukryj warianty mediów w galerii",
"pt-BR": "Ocultar mídia variante na galeria",
"pt-PT": "Ocultar multimédia variante na galeria",
"sv": "Dölj variantmedia i galleriet",
"th": "ซ่อนสื่อสำหรับตัวเลือกสินค้าในแกลเลอรี",
"tr": "Galeride varyasyon medyasını gizle",
"vi": "Ẩn phương tiện mẫu mã trong bộ sưu tập ảnh",
"zh-CN": "在图库中隐藏多属性媒体",
"zh-TW": "在圖庫中隱藏子類選項多媒體檔案"
},
"default": true
}
]
}
{% endschema %}

 

0 Likes

@kateulrick 

your form sections references {% include 'product-form' %} that means it will include the code used in your product.form liquid file. it will probably be among your snippets.

The code is mode likely in that file

 

Please like and mark my post as a solution if I've helped you, thanks.
0 Likes
Tanya_Huang
Tourist
15 0 0

Hi!

I would like to revive this thread and gain some insight if possible!

Issue: line item properties is null

1. I made a copy of my product.liquid file, named product.engraved.liquid

2. In product.engraved.liquid file, I added the input fields within the <form></form> tags (generated with Shopify UI Elements Generator)

3. I'll paste my product.engraved.liquid file in the next post

Here is my page:

https://knotheory.com/products/engraved-silicone-rings-in-antique-gold-personalized-gift-for-him-and...

Any help is appreciated! Been struggling with this seemingly simple thing all day yesterday! Thanks in advance

Tanya

0 Likes
Tanya_Huang
Tourist
15 0 0
<!------- My product.engrave.liquid file ----->



{% comment %}
Assign some variable from configuration in theme customize
{% endcomment %}

{%- assign layout = settings.product_page_layout -%}
{%- if layout == 'top_gallery' -%}
{%- assign is_full_layout = true -%}
{%- assign product_image_size = '2048x' -%}
{%- else -%}
{%- assign is_full_layout = false -%}
{%- assign product_image_size = '1024x' -%}
{%- endif -%}

{%- assign gallery_type = settings.product_page_gallery_type -%}

{%- unless gallery_type == 'single_slider' or gallery_type == 'center_mode_slider' -%}
{%- assign is_single_slider = false -%}
{%- else -%}
{%- assign is_single_slider = true -%}
{%- endunless -%}

{%- assign zoom_type = settings.product_page_zoom_type -%}

{%- if settings.product_page_detail_info_position == 'inside_info_col' -%}
{%- assign detail_is_inside_col = true -%}
{%- else -%}
{%- assign detail_is_inside_col = false -%}
{%- endif -%}

{%- if settings.product_page_detail_displaying_type == 'tab' -%}
{%- assign display_detail_as_tabs = true -%}
{%- else -%}
{%- assign display_detail_as_tabs = false -%}
{%- endif -%}

{%- assign current_variant = product.selected_or_first_available_variant -%}

{% comment %}
Declare available badges for product.
Priority: % > soldout > sale(tag) > hot > new

- %: percentage of discount
- soldout: out of stock and not allow pre-order
- sale/hot/new: tags
{% endcomment %}
{%- if current_variant.compare_at_price > current_variant.price -%}
{%- assign sale_percent = available_variant.compare_at_price | minus: available_variant.price | times: 100.0 | divided_by: available_variant.compare_at_price | round: 1 -%}
{%- else -%}
{%- assign sale_percent = 0 -%}
{%- endif -%}

{%- if product.available -%}
{%- assign sold_out = false -%}
{%- else -%}
{%- assign sold_out = true -%}
{%- endif -%}

{%- assign is_hot = false -%}
{%- for tag in product.tags -%}
{%- assign tag_handle = tag | handleize -%}
{%- if tag_handle == 'hot' -%}
{%- assign is_hot = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- assign is_new = false -%}
{%- for tag in product.tags -%}
{%- assign tag_handle = tag | handleize -%}
{%- if tag_handle == 'new' -%}
{%- assign is_new = true -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- assign is_saleoff = false -%}
{%- for tag in product.tags -%}
{%- assign tag_handle = tag | handleize -%}
{%- if tag_handle == 'sale' -%}
{%- assign is_saleoff = true -%}
{%- endif -%}
{%- endfor -%}

{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}

{%- assign disable_availability = settings.product_availability_disable -%}
{%- assign disable_type = settings.product_type_disable -%}
{%- assign disable_vendor = settings.product_vendor_disable -%}
{%- assign disable_sku = settings.product_sku_disable -%}

{%- capture form_selectors -%}

{% unless product.variants.size == 1 and product.options.size == 1 and product.options.first == 'Title' and product.variants.first.title == 'Default Title' %}
{%- if settings.variant_selector_type == 'swatch' -%}
{%- for option in product.options -%}
{%- assign option_handle = option | downcase -%}
{%- unless option_handle contains 'title' -%}
{%- include 'virgo-swatch' with option, prefix: 'prodpage' -%}
{%- endunless -%}
{%- endfor -%}
{%- else -%}
<div class="product-selectors grid">
{%- for option in product.options_with_values -%}
<div class="selector-wrapper grid__item medium-up--one-half">
<label
class="swatch__title"
for="SingleOptionSelector-{{ forloop.index0 }}"
>
{{ option.name }}
</label>

<select
class="js-single-selector"
id="SingleOptionSelector-{{ forloop.index0 }}"
data-single-option-selector
data-index="option{{- option.position -}}">
{%- for value in option.values -%}
<option
value="{{ value | escape }}"
{%- if option.selected_value == value -%}
selected
{%- endif -%}
>
{{ value }}
</option>
{%- endfor -%}
</select>
</div>
{%- endfor -%}
</div>
{%- endif -%}
{%- endunless -%}

<select name="id" class="no-js" data-product-select>
{%- for variant in product.variants -%}
<option
{% if forloop.first %}
selected
{% endif %}
{% unless variant.available %}
disabled
{% endunless %}
value="{{ variant.id }}"
data-policy="{{ variant.inventory_policy | default: 'deny' }}"
data-quantity="{{ variant.inventory_quantity | default: 0 }}"
>
{{- variant.title -}}
</option>
{%- endfor -%}
</select>
{%- endcapture -%}

{% comment %}
Meta tags to define microdata for SEO
{% endcomment %}
<meta itemprop="name" content="{{ product.title }}{% unless current_variant.title == 'Default Title' %} - {{ current_variant.title }}{% endunless %}">
<meta itemprop="url" content="{{ shop.url }}{{ current_variant.url }}">
<meta itemprop="brand" content="{{ product.vendor }}">
<meta itemprop="image" content="{{ featured_image | img_url: '600x600' }}">
<meta itemprop="description" content="{{ product.description | strip_html | escape }}">

{% comment %}
---------------------------
- Main markup start here. -
---------------------------
{% endcomment %}
{% comment %}Breadcrumb{% endcomment %}
<div class="product-page__header" {% if settings.product_page_header_image %}style="background-image: url({{ settings.product_page_header_image | img_url: 'master' }});"{% endif %}>
<div class="page-width">
{% include 'breadcrumbs' %}
</div>
</div>

<div class="product-page__content js-product-container" data-enable-history-state="true" itemscope itemtype="http://schema.org/Product">
{%- unless is_full_layout -%}
<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--one-half one-whole {% if layout == 'right_side_gallery' %}medium-up--push-one-half{% endif %}">
<section class="product-gallery-wrapper">
{% include 'product-gallery' %}
</section>
</div>

<div class="grid__item medium-up--one-half one-whole {% if layout == 'right_side_gallery' %}medium-up--pull-one-half{% endif %}">
{%- endunless -%}

{%- if is_full_layout -%}
<section class="product-gallery-wrapper product-gallery-wrapper--full">
{%- if gallery_type != 'center_mode_slider' -%}
<div class="page-width">
<div class="grid">
{%- if gallery_type == 'single_slider' or gallery_type == 'syncing_slider_bottom' -%}
<div class="grid__item one-whole medium--two-thirds medium--push-one-sixth large-up--one-half large-up--push-one-quarter">
{%- else -%}
<div class="grid__item one-whole medium--four-fifths medium--push-one-tenth large-up--two-thirds large-up--push-one-sixth">
{%- endif -%}
{%- endif -%}
{% include 'product-gallery' %}
{%- if gallery_type != 'center_mode_slider' -%}
</div>
</div>
</div>
{%- endif -%}
</section>
{%- endif -%}

<section class="product-info-wrapper {% if is_full_layout %}product-info-wrapper--full{% endif %}">
{%- if is_full_layout -%}
<div class="page-width">
<div class="grid">
<div class="grid__item one-whole medium--four-fifths medium--push-one-tenth large-up--two-thirds large-up--push-one-sixth">
{%- endif -%}
<h1 class="product-info__title">{{ product.title }}</h1>
{% include 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: true %}
{% comment %}
<p>{{ product.vendor }}</p>
{% endcomment %}

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">

{%- include 'reviews-badge' -%}

<div class="product-info__price js-price-wrapper">
<span class="product-info__price--current js-current-price">
{{ current_variant.price | money }}
</span>

{% if product.compare_at_price_max > product.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="js-compare-price">
{% if is_saleoff %}
{{ current_variant.compare_at_price | money }}
{% endif %}
</s>
{% endif %}
</div>

{% unless disable_availability and disable_type and disable_vendor and disable_sku %}
<div class="product-basic-info">
{%- unless disable_availability -%}
<p class="product-basic-info__item">
<span class="label">
{{- 'products.product.availability' | t -}}:
</span>
<span class="content js-availability"></span>
</p>
{%- endunless -%}
{%- unless disable_type or product.type == blank -%}
<p class="product-basic-info__item">
<span class="label">
{{- 'products.product.type' | t -}}:
</span>
<a href="{{ product.type | url_for_type }}" class="content">
{{- product.type -}}
</a>
</p>
{%- endunless -%}
{%- unless disable_vendor or product.vendor == blank -%}
<p class="product-basic-info__item">
<span class="label">
{{- 'products.product.vendor' | t -}}:
</span>
<a href="{{ product.vendor | url_for_vendor }}" class="content">
{{- product.vendor -}}
</a>
</p>
{%- endunless -%}
{%- unless disable_sku -%}
<p class="product-basic-info__item">
<span class="label">
{{- 'products.product.sku' | t -}}:
</span>
<span class="content js-sku">
{%- if current_variant -%}
{{- current_variant.sku -}}
{%- endif -%}
</span>
</p>
{%- endunless -%}
</div>
{% endunless %}

<div class="product-form-wrapper">
{% comment %}
[dev] Change to AJAX.
{% endcomment %}
{% if settings.show_dynamic_checkout_button %}
{% form 'product', product %}
{{ form_selectors }}

<div class="product-action-wrapper js-action-wrapper">
<div class="stock out-of-stock js-out-of-stock">
<span class="stock__label">
{{- 'products.product.out_of_stock' | t -}}
</span>
</div>
<div class="stock unavailable js-unavailable">
<span class="stock__label">
{{- 'products.product.unavailable' | t -}}
</span>
</div>
<div class="stock available js-available">
<div class="input-group input-quantity clearfix">
<label class="visually-hidden" for="Quantity">{{ 'products.product.quantity' | t }}</label>
<button type="button" class="btn btn--lg quantity-button quantity-button--minus minus">
<i class="fa fa-minus"></i>
</button>
<input type="number" class="input-quantity__value no-spinner js-input-quantity" id="Quantity" name="quantity" value="1" min="1" pattern="[0-9]*">
<button type="button" class="btn btn--lg quantity-button quantity-button--plus plus">
<i class="fa fa-plus"></i>
</button>
</div>

<button
type="submit"
name="add"
class="btn btn--lg btn--add-to-cart js-virgo-add-to-cart"
data-add-to-cart
>
<span class="add" data-add-to-cart-text>
{{ 'products.product.add_to_cart' | t }}
</span>
<span class="adding">
<i class="fa fa-spinner adding"></i>
</span>
</button>

<div class="payment-divider"><span>Or</span></div>
{{ form | payment_button }}
</div>
</div>
{% endform %}
{% else %}
<form action="/cart/add" method="post" enctype="multipart/form-data">
{{ form_selectors }}

<!-- Engrave text input begin --> 
<p class="line-item-property__field">
<label for="inside-engraving">Inside Engraving:&nbsp;</label>
<input id="inside-engraving" type="text" maxlength="20" size="25" name="properties[Inside Engraving]">
</p>

<p class="line-item-property__field">
<label for="outside-engraving">Outside Engraving:&nbsp;</label>
<input id="outside-engraving" type="text" maxlength="20" size="25" name="properties[Outside Engraving]">
</p>
<!-- Engrave text input end --> 



<div class="product-action-wrapper js-action-wrapper">
<div class="stock out-of-stock js-out-of-stock">
<span class="stock__label">
{{- 'products.product.out_of_stock' | t -}}
</span>
</div>
<div class="stock unavailable js-unavailable">
<span class="stock__label">
{{- 'products.product.unavailable' | t -}}
</span>
</div>
<div class="stock available js-available">
<div class="input-group input-quantity clearfix">
<label class="visually-hidden" for="Quantity">{{ 'products.product.quantity' | t }}</label>
<button type="button" class="btn btn--lg quantity-button quantity-button--minus minus">
<i class="fa fa-minus"></i>
</button>
<input type="number" class="input-quantity__value no-spinner js-input-quantity" id="Quantity" name="quantity" value="1" min="1" pattern="[0-9]*">
<button type="button" class="btn btn--lg quantity-button quantity-button--plus plus">
<i class="fa fa-plus"></i>
</button>
</div>

<button
type="submit"
name="add"
class="btn btn--lg btn--add-to-cart js-virgo-add-to-cart"
data-add-to-cart
>
<span class="add" data-add-to-cart-text>
{{ 'products.product.add_to_cart' | t }}
</span>
<span class="adding">
<i class="fa fa-spinner adding"></i>
</span>
</button>
</div>
</div>
</form>
{% endif %}





</div>

</div>
{%- if is_full_layout -%}
</div>
</div>
</div>
{%- endif -%}
</section>

{%- unless is_full_layout -%}
{%- if detail_is_inside_col -%}
<section class="product-detail-wrapper product-detail-wrapper--inside">
{%- if display_detail_as_tabs -%}
{% section 'product-togglable-tabs' %}
{%- else -%}
{% section 'product-accordion' %}
{%- endif -%}
</section>
{%- endif -%}

{%- if settings.product_page_show_share_buttons -%}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{%- endif -%}
{%- endunless -%}
{%- unless is_full_layout -%}
</div>
{%- endunless -%}

{%- if is_full_layout -%}
<section class="product-detail-wrapper product-detail-wrapper--outside">
<div class="page-width">
<div class="grid">
<div class="grid__item one-whole medium--four-fifths medium--push-one-tenth large-up--two-thirds large-up--push-one-sixth">
{%- if display_detail_as_tabs -%}
{% section 'product-togglable-tabs' %}
{%- else -%}
{% section 'product-accordion' %}
{%- endif -%}
</div>
</div>
</div>
</section>

{% if settings.product_page_show_share_buttons %}
<div class="page-width social-sharing-wrapper--full">
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
</div>
{% endif %}
{%- else -%}
{%- unless detail_is_inside_col -%}
<div class="grid__item one-whole">
<section class="product-detail-wrapper product-detail-wrapper--outside">
{%- if display_detail_as_tabs -%}
{% section 'product-togglable-tabs' %}
{%- else -%}
{% section 'product-accordion' %}
{%- endif -%}
</section>
</div>
{%- endunless -%}
{%- endif -%}

{%- unless is_full_layout -%}
<div class="grid__item one-whole">
{%- endunless -%}
{% section 'related-product' %}
{%- unless is_full_layout -%}
</div>
{%- endunless -%}

{%- unless is_full_layout -%}
</div>
</div>
{%- endunless -%}

{% unless product.empty? %}
<script type="application/json" data-product-json>
{{ product | json }}
</script>
{% endunless %}
</div>
<script>
$(document).ready(function() {
new theme.Product('.js-product-container', {{ current_variant.id }});
})
</script>
<div id="wc_review_section" class="wc_review_main_content" data-url="{{ shop.url }}" data-handle="{{ product.handle }}" data-limit="0"></div><div class="yotpo yotpo-main-widget" data-product-id="{{ product.id }}" data-name="{{ product.title | escape }}" data-url="{{ shop.url }}{{ product.url }}" data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&amp;','%26'}}" data-description="{{ product.description | escape }}" data-price="{{ variant.price | money_without_currency }}" data-currency="{{ shop.currency }}"></div>
{% include 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, auto_install: true %}


0 Likes
Tanya_Huang
Tourist
15 0 0

This is my cart.liquid file. The only change I made was adding a cart json dump and line properties json dump. 

<!-- My cart.liquid file. The only change I made was adding a cart json dump and line item properties dump -->

<div class="page__header page__header--small" {% if settings.page_header_image %}style="background-image: url({{ settings.page_cart_header_image | img_url: 'master' }});"{% endif %}>
  <div class="page-width">
    <header class="text-center">
      <h2 class="page__title">{{ 'cart.general.title' | t }}</h2>
      {% include 'breadcrumbs' %}
    </header>
  </div>
</div>

<div class="page-width">
  {% if cart.item_count > 0 %}
  <div class="cart">
    <form action="/cart" method="post" novalidate>
      <table class="table responsive-table">
        <thead class="small--hide">
          <tr>
            <th colspan="2">{{ 'cart.label.product' | t }}</th>
            <th>{{ 'cart.label.price' | t }}</th>
            <th>{{ 'cart.label.quantity' | t }}</th>
            <th>{{ 'cart.label.total' | t }}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>

          {% for item in cart.items %}

          {% comment %}

          Cart Item Template
          =====================
          The data-label attributes on <td> elements are mobile-friendly
          helpers used for responsive-table labels
          {% endcomment %}

            <tr class="responsive-table-row">
              <td class="small-text-center" data-label="{{ 'customer.order.product' | t }}">
                <a href="{{ item.url | within: collections.all }}">
                  <img width="80" src="{{ item | img_url: '80x' }}"
                    srcset="{{ item | img_url: '80x' | split:'?' | first }} 80w,
                    {{ item | img_url: '118x150' | split:'?' | first }} 118w,
                    {{ item | img_url: '235x300' | split:'?' | first }} 235w,
                    {{ item | img_url: '768x980' | split:'?' | first }} 768w,
                    {{ item | img_url: '803x1024' | split:'?' | first }} 803w,
                    {{ item | img_url: '370x472' | split:'?' | first }} 370w,
                    {{ item | img_url: 'master' | split:'?' | first }} 870w"
                    alt="{{ item.title | escape }}" sizes="(max-width: 240px) 100vw, 240px">
                </a>
              </td>
              <td>
                           
                
                <a class="cart__item__name" href="{{ item.url }}">{{ item.product.title }}</a>
         
                
                {% unless item.variant.title contains 'Default' %}
                <dl class="cart__item__variant">
                  {% for option in item.product.options %}
                    <dt class="variant-label">{{ option }}:</dt>
                    <dd class="variant-value">{{ item.variant.options[forloop.index0] }}</dd>
                  {% endfor %}
                </dl>
                {% endunless %}

                <p class="cart__item__vendor">{{ item.vendor }}</p>

                {%- assign property_size = item.properties | size -%}
           
       <!-- line item properties dump-->         
                <strong>line_item.properties json dump:</strong>     
         {{ line_item.properties | json }}
                
                <br><br>
                
                <!-- cart dump-->         
                <strong>cart json dump:</strong>       
         {{ cart | json }}
                
                <br><br>
                
                
                {% if property_size > 0 %}
                  {% for p in item.properties %}
                    {% unless p.last == blank %}
                     {{ p.first }}:

                    {% if p.last contains '/uploads/' %}
                      <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                    {% else %}
                      {{ p.last }}
                    {% endif %}

                    {% endunless %}
                  {% endfor %}
                {% endif %}
              </td>
              <td class="text-center small--text-right" data-label="{{ 'cart.label.price' | t }}">
                {% if item.original_line_price != item.line_price %}
                  <span class="visually-hidden">{{ 'cart.label.discounted_price' | t }}</span>
                  {{ item.price | money }}
                  <span class="visually-hidden">{{ 'cart.label.original_price' | t }}</span>
                  <s>{{ item.original_price | money }}</s>
                {% else %}
                  {{ item.price | money }}
                {% endif %}
              </td>
              <td class="text-center small--text-right" data-label="{{ 'cart.label.quantity' | t }}">
                <div class="input-quantity js-quantity">
                  <button type="button" class="input-quantity__button minus">
                    {% include 'icon-minus' %}
                  </button>
                  <input type="number"
                         name="updates[]"
                         id="updates_{{ item.key }}"
                         value="{{ item.quantity }}"
                         min="0"
                         class="input-quantity__value"
                         aria-label="{{ 'cart.general.item_quantity' | t }}">
                  <button type="button" class="input-quantity__button plus">
                    {% include 'icon-plus' %}
                  </button>
                </div>
              </td>
              <td class="text-center small--text-right" data-label="{{ 'cart.label.total' | t }}">
                {{ item.line_price | money }}
              </td>
              <td class="text-center small--text-right" data-label="{{ 'cart.label.remove' | t }}">
                <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
                  {% include 'icon-close' %}
                </a>
              </td>
            </tr>

          {% endfor %}
        </tbody>
      </table>

      <div class="grid">
        <div class="grid__item large-up--one-half one-whole">
          {% if settings.cart_notes_enable %}
            <div class="cart__note">
              <label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" id="CartSpecialInstructions">{{ cart.note }}</textarea>
            </div>
          {% else %}
            &nbsp;
          {% endif %}
        </div>
        <div class="grid__item large-up--one-half one-whole">
          <div class="cart__total">
            <label class="cart__total__label">{{ 'cart.general.subtotal' | t }}</label>
            <p class="cart__total__value">{{ cart.total_price | money }}</p>
            {% if cart.total_discounts > 0 %}
              <p>{{ 'cart.general.savings' | t }} {{ cart.total_discounts | money }}</p>
            {% endif %}
            <p>{{ 'cart.general.shipping_at_checkout' | t }}</p>
          </div>
          <div class="cart__action">
            <input type="submit" name="update" class="btn btn--outline" value="{{ 'cart.general.update' | t }}">
            <input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">
          </div>
        </div>
      </div>
    </form>
  </div>
  {% else %}
    <div class="cart--empty text-center">
      {% comment %}
      Cart empty state
      {% endcomment %}
      <div class="supports-cookies">
        <div class="cart__icon">
          {% include 'icon-cart-outline' %}
        </div>
        <div class="cart__text">
          <p>{{ 'cart.general.empty' | t }}</p>
        </div>
        <a href="/collections/all" class="btn btn--outline btn--circled">{{ 'cart.general.continue_browsing' | t }}</a>
      </div>

      {% comment %}
      Cart no cookies state
      ---------------------
      Browser cookies are required to use the cart. If cookies aren't enabled in the
      browser a message is displayed prompting the user to enable them.
      {% endcomment %}
      <div class="supports-no-cookies">
        <p>{{ 'cart.general.cookies_required' | t }}</p>
      </div>
    </div>
  {% endif %}
</div>

 

0 Likes