{%- if request.page_type != 'cart' and settings.cart_type == 'drawer' -%}
{%- if request.page_type == 'cart' -%}
{{ 'cart.css' | asset_url | stylesheet_tag }}
{%- else -%}
<link
rel="stylesheet"
href="{{ 'cart.css' | asset_url }}"
media="print"
fetchpriority="low"
onload="this.media='all'"
>
{%- endif -%}
<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
{%- if linklists['gift-wrapping'].links != blank and linklists['gift-wrapping'].links.first.type == 'product_link' -%}
<script src="{{ 'gift-wrapping.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<cart-drawer
id="CartDrawer"
class="drawer cart-drawer drawer--right"
data-section-id="{{ section.id }}"
shopify-design-mode
hidden
>
<div class="fixed-overlay" aria-controls="CartDrawer"></div>
<div class="drawer__inner color-{{ settings.overlay_color_scheme }}">
<div id="CartDrawer-{{ section.id }}" class="drawer__content flex flex-col h-full w-full">
<div class="drawer__header">
{%- if section.settings.cart_message != blank -%}
<div class="cart-drawer__message color-{{ section.settings.cart_mess_color_scheme }} text-{{ section.settings.cart_message_alignment }}">
{{ section.settings.cart_message }}
</div>
{%- endif -%}
<div class="drawer__header-inner cart-drawer__header flex items-center justify-between gap-3">
<h2 class="drawer__heading h4">
<span>{{ 'general.cart.title' | t }}</span>
<cart-count
class="cart-count cart-count--blank"
aria-label="{{ 'general.cart.cart_count' | t: count: cart.item_count | escape }}"
{% if cart == empty %}
hidden
{% endif %}
data-type="blank"
>
(
{%- if cart.item_count < 100 -%}
{{- cart.item_count -}}
{%- else -%}
99+
{%- endif -%}
)
</cart-count>
</h2>
<button
class="drawer__close-btn z-1 static"
aria-controls="CartDrawer"
type="button"
aria-label="{{ 'accessibility.close' | t }}"
>
{% render 'icon-close', size: 'large' %}
</button>
</div>
</div>
<div
id="CartDrawerEmpty-{{ section.id }}"
class="drawer__body flex-grow v-scrollable{% if cart != empty %} hidden{% endif %}"
>
<div class="cart-drawer__empty text-center flex flex-col gap-6 md:gap-8">
<div class="grid gap-3">
<p class="h4">{{ 'sections.cart.empty' | t }}</p>
{%- if settings.cart_empty_message != blank -%}
<div class="rte text-subtext">{{ settings.cart_empty_message }}</div>
{%- endif -%}
</div>
{%- if settings.collection_list != blank -%}
{% liquid
assign card_has_bg = false
if settings.collection_card_color_scheme != settings.overlay_color_scheme
assign card_has_bg = true
endif
%}
<ul class="recommendation-collection f-grid" role="list">
{%- for collection in settings.collection_list -%}
{% liquid
if collection.image
assign featured_image = collection.image
elsif collection.metafields.foxtheme.collection_in_cart.value != blank
assign featured_image = collection.metafields.foxtheme.collection_in_cart.value
else
assign featured_image = collection.products.first.featured_media.preview_image
endif
%}
<li class="recommendation-collection-item">
{% render 'card-collection',
collection: collection,
has_bg: card_has_bg,
featured_image: featured_image,
card_style: 'card',
color_scheme: settings.collection_card_color_scheme,
image_ratio: settings.collection_image_ratio,
image_width: 'full',
heading_size: 'h6 font-body-bolder',
classes: 'text-left'
%}
</li>
{%- endfor -%}
</ul>
{%- endif -%}
<a class="btn btn--primary self-center" href="{{ routes.all_products_collection_url }}">
<span class="btn__text">{{- 'general.cart.continue_shopping' | t -}}</span>
</a>
</div>
</div>
<div class="drawer__body flex-grow v-scrollable flex flex-col">
<div class="foxkit-cart-countdown-hook"></div>
<div class="foxkit-cart-goal-hook"></div>
{%- liquid
if section.settings.show_free_shipping_goal and settings.free_shipping_minimum_amount != blank
assign minimum_amount = settings.free_shipping_minimum_amount | remove: ' '
render 'free-shipping-goal', minimum_amount: minimum_amount, classes: 'w-full'
endif
-%}
<div
id="CartDrawerBody-{{ section.id }}"
class="flex flex-col gap-6 flex-grow{% if cart == empty %} hidden{% endif %}"
>
{%- liquid
if linklists['gift-wrapping'].links != blank and linklists['gift-wrapping'].links.first.type == 'product_link'
assign gift_wrapping = linklists['gift-wrapping'].links.first
assign gift_wrap_id = gift_wrapping.object.variants.first.id
assign gift_wraps_in_cart = 0
for item in cart.items
if item.id == gift_wrap_id
assign gift_wraps_in_cart = item.quantity
break
endif
endfor
assign items_in_cart = cart.item_count | minus: gift_wraps_in_cart
endif
-%}
<cart-items class="flex-grow">
<ul role="list" class="flex flex-col gap-6">
{%- for item in cart.items -%}
{%- liquid
if item.variant.inventory_management != blank and item.variant.inventory_policy == 'deny'
assign item_max_quantity = item.variant.inventory_quantity
endif
assign is_gift_wrap_item = false
if gift_wrap_id != null and item.id == gift_wrap_id
assign is_gift_wrap_item = true
endif
-%}
{%- capture cart_item -%}
<li id="CartDrawer-Item-{{ item.index | plus: 1 }}" class="cart-item flex flex-col" data-variant-id="{{ item.variant_id }}" data-handle="{{ item.product.handle }}" data-quantity="{{ item.quantity }}" data-price="{{ item.original_price }}">
<div class="cart-item__product flex items-start gap-3">
{%- if item.image -%}
<a class="cart-item__media blocks-radius media-wrapper" href="{{ item.url }}" tabindex="-1" aria-label="{{ item.title }}">
{{- item.image
| image_url: width: item.image.width
| image_tag:
loading: 'lazy',
widths: '80, 100, 160, 200',
sizes: '(max-width: 767px) 80px, 100px',
is: 'image-lazy'
-}}
</a>
{%- endif -%}
<div class="cart-item__details flex-grow flex flex-col gap-3">
<div class="flex justify-between gap-3">
<div class="grid flex-1">
<div class="block"><a href="{{ item.url }}" class="cart-item__title text-pcard-title reversed-link">{{- item.product.title | escape -}}</a></div>
{%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != null -%}
<div class="cart-item__options">
{%- if item.product.has_only_default_variant == false -%}
{%- assign last_index = item.options_with_values.size | minus: 1 -%}
{%- for option in item.options_with_values -%}
<span class="cart-item__option-value text-sm text-subtext">
{{ option.value }}{% unless forloop.index0 == last_index %}, {% endunless %}
</span>
{%- endfor -%}
{%- endif -%}
{%- for property in item.properties -%}
{%- assign property_first_char = property.first | slice: 0 -%}
{%- if property.last != blank and property_first_char != '_' -%}
<div class="flex gap-1 text-sm text-subtext">
<dt>{{ property.first }}: </dt>
<dd>
{%- if property.last contains '/uploads/' -%}
<a href="{{ property.last }}" class="link" target="_blank" aria-describedby="a11y-new-window-message">
{{- property.last | split: '/' | last -}}
</a>
{%- else -%}
{{- property.last -}}
{%- endif -%}
</dd>
</div>
{%- endif -%}
{%- endfor -%}
{%- if item.selling_plan_allocation != null -%}
<p class="text-sm text-subtext">{{ item.selling_plan_allocation.selling_plan.name }}</p>
{%- endif -%}
</div>
{%- endif -%}
</div>
<a id="Loader-{{ section.id }}-{{ item.index | plus: 1 }}"{% unless is_gift_wrap_item %} is="cart-remove-item"{% else %} is="gift-wrap-remove-item"{% endunless %} class="cart-item__remove flex items-center justify-center relative btn-remove" href="{{ item.url_to_remove }}" data-index="{{ item.index | plus: 1 }}" aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}">
<span class="flex">
{%- render 'icon-close', size: 'small' -%}
</span>
{% render 'loading-spinner' %}
</a>
</div>
<div class="cart-item__action cart-item__action flex items-center justify-between gap-3">
{%- liquid
assign has_qty_rules = false
if item.variant.quantity_rule.increment > 1 or item.variant.quantity_rule.min > 1 or item.variant.quantity_rule.max != null
assign has_qty_rules = true
endif
assign has_vol_pricing = false
if item.variant.quantity_price_breaks.size > 0
assign has_vol_pricing = true
endif
-%}
{%- if has_qty_rules or has_vol_pricing -%}
{%- capture qty_rules_vol_pricing -%}
{%- if has_qty_rules -%}
<div
class="quantity__rules text-sm"
>
{%- if item.variant.quantity_rule.increment > 1 -%}
<span class="divider">
{{-
'products.product.quantity.multiples_of'
| t: quantity: item.variant.quantity_rule.increment
-}}
</span>
{%- endif -%}
{%- if item.variant.quantity_rule.min > 1 -%}
<span class="divider">
{{-
'products.product.quantity.minimum_of'
| t: quantity: item.variant.quantity_rule.min
-}}
</span>
{%- endif -%}
{%- if item.variant.quantity_rule.max != null -%}
<span class="divider">
{{-
'products.product.quantity.maximum_of'
| t: quantity: item.variant.quantity_rule.max
-}}
</span>
{%- endif -%}
</div>
{%- endif -%}
{%- if has_vol_pricing -%}
{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
<volume-pricing class="block parent-display blocks-radius-md" id="Volume-{{ section.id }}">
<span class="caption block">{{ 'products.product.volume_pricing.title' | t }}</span>
<ul class="list-unstyled">
<li class="blocks-radius-md">
<span>{{ item.variant.quantity_rule.min }}+</span>
{%- liquid
if settings.currency_code_enabled
assign price = item.variant.price | money_with_currency
else
assign price = item.variant.price | money
endif
-%}
<span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
</li>
{%- for price_break in item.variant.quantity_price_breaks -%}
<li class="blocks-radius-md">
<span>
{{- price_break.minimum_quantity -}}
<span aria-hidden="true">+</span>
</span>
{%- liquid
if settings.currency_code_enabled
assign price_break_price = price_break.price | money_with_currency
else
assign price_break_price = price_break.price | money
endif
-%}
<span>{{ 'sections.quick_order_list.each' | t: money: price_break_price }}</span>
</li>
{%- endfor -%}
</ul>
</volume-pricing>
{%- endif -%}
{%- endcapture -%}
{%- endif -%}
<div class="flex items-center gap-2">
{%- unless is_gift_wrap_item -%}
<quantity-input class="cart-quantity quantity self-end">
<label class="visually-hidden" for="Quantity-{{ section.id }}-{{ item.index | plus: 1 }}">{{ 'products.product.quantity.label' | t }}</label>
<button type="button" name="minus" class="quantity__button" aria-label="{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}">
<svg width="16" height="16" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.6875 7H12.3125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<input class="quantity__input"
type="number"
name="updates[]"
value="{{ item.quantity }}"
id="Quantity-{{ section.id }}-{{ item.index | plus: 1 }}"
aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
step="{{ item.variant.quantity_rule.increment }}"
size="2"
inputmode="numeric"
autocomplete="off"
data-index="{{ item.index | plus: 1 }}"
data-quantity-variant-id="{{ item.variant.id }}"
data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
min="0"
data-min="{{ item.variant.quantity_rule.min }}"
{% if item.variant.quantity_rule.max != null %}
max="{{ item.variant.quantity_rule.max }}"
{% endif %}
/>
<button type="button" name="plus" class="quantity__button" aria-label="{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}">
<svg width="16" height="16" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.6875 7H12.3125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.5 2.1875V11.8125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</quantity-input>
{%- else -%}
<div class="cart-quantity quantity cart-quantity-gift-wrap self-end">
<label class="visually-hidden" for="Quantity-{{ section.id }}-{{ item.index | plus: 1 }}"></label>
<button type="button" name="minus" class="quantity__button hidden" disabled aria-label="{{ 'products.product.quantity.decrease' | t: product: item.product.title | escape }}">
<svg width="16" height="16" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.6875 7H12.3125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<input
class="quantity__input"
disabled
type="text"
name="updates[]"
value="{{ item.quantity }}"
id="Quantity-{{ section.id }}-{{ item.index | plus: 1 }}"
inputmode="numeric"
autocomplete="off"
aria-label="{{ 'products.product.quantity.input_label' | t: product: item.product.title | escape }}"
data-index="{{ item.index | plus: 1 }}"
data-quantity-variant-id="{{ item.variant.id }}"
data-cart-quantity="{{ cart | item_count_for_variant: item.variant.id }}"
size="2"
min="0"
data-min="{{ item.variant.quantity_rule.min }}"
{% if item.variant.quantity_rule.max != null %}
max="{{ item.variant.quantity_rule.max }}"
{% endif %}
step="{{ item.variant.quantity_rule.increment }}"
/>
<button type="button" name="plus" disabled class="quantity__button hidden" aria-label="{{ 'products.product.quantity.increase' | t: product: item.product.title | escape }}">
<svg width="16" height="16" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.6875 7H12.3125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.5 2.1875V11.8125" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
{%- endunless -%}
{% if has_qty_rules or has_vol_pricing %}
<button class="btn btn--plain volume-pricing-toggle" aria-controls="VolumnPricing-{{ section.id }}-{{ item.key }}">
<svg class="icon icon-info icon--medium" viewBox="0 0 25 24" stroke="currentColor" fill="none" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" d="M12.5 16V11M13 8C13 8.27614 12.7761 8.5 12.5 8.5C12.2239 8.5 12 8.27614 12 8M13 8C13 7.72386 12.7761 7.5 12.5 7.5C12.2239 7.5 12 7.72386 12 8M13 8H12M22.5 12C22.5 17.5228 18.0228 22 12.5 22C6.97715 22 2.5 17.5228 2.5 12C2.5 6.47715 6.97715 2 12.5 2C18.0228 2 22.5 6.47715 22.5 12Z"></path>
</svg>
</button>
<cart-addon-modal class="drawer cart-addons-drawer drawer--bottom" id="VolumnPricing-{{ section.id }}-{{ item.key }}" hidden>
<div class="fixed-overlay absolute" aria-controls="VolumnPricing-{{ section.id }}-{{ item.key }}"></div>
<div class="drawer__inner v-scrollable">
<button aria-controls="VolumnPricing-{{ section.id }}-{{ item.key }}" aria-label="{{ 'accessibility.close' | t }}" class="drawer__close-btn z-1">
{%- render 'icon-close' -%}
</button>
<div class="drawer__content cart-addons-drawer__content grid gap-5">
<div>
<h4>{{ item.product.title | escape }}</h4>
{% if item.product.has_only_default_variant == false %}
<div class="flex gap-1">
{% for option in item.options_with_values %}
<span class="text-sm text-subtext">{{ option.value }}{% unless forloop.index0 == last_index %},{% endunless %}</span>
{% endfor %}
</div>
{% endif %}
</div>
<div class="grid gap-3">
{{ qty_rules_vol_pricing }}
</div>
</div>
</div>
</cart-addon-modal>
{% endif %}
</div>
<div class="cart-item__prices text-right flex flex-col gap-2">
{%- if item.line_level_discount_allocations != blank -%}
<ul class="cart-item__discounts discounts list-unstyled flex justify-end flex-wrap gap-1" role="list" aria-label="{{ 'customer.order.discount' | t }}">
{%- for discount_allocation in item.line_level_discount_allocations -%}
<li class="discount text-sm-extra font-body-bold inline-flex items-center">
{% render 'icon-discount' %}
<span>{{ discount_allocation.discount_application.title }}</span>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
<div>
<div class="price font-body-bolder{% if item.original_price != item.final_price %} price--on-sale{% endif %}">
{%- liquid
assign money_price = item.original_price | money
if settings.currency_code_enabled
assign money_price = item.original_price | money_with_currency
endif
-%}
{%- if item.original_price != item.final_price -%}
<span class="visually-hidden">{{ 'products.product.price.regular_price' | t }}</span>
<s class="font-body text-sm text-subtext">{{ money_price }}</s>
<span class="visually-hidden">{{ 'products.product.price.sale_price' | t }}</span>
<span class="price__regular">
{%- liquid
if settings.currency_code_enabled
echo item.final_price | money_with_currency
else
echo item.final_price | money
endif
-%}
</span>
{%- else -%}
{{- money_price -}}
{%- endif -%}
</div>
{%- if item.variant.available and item.unit_price_measurement -%}
<div>
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
<span class="unit-price flex items-center text-sm font-body text-subtext">
{%- liquid
capture unit_price_base_unit
if item.variant.unit_price_measurement
if item.variant.unit_price_measurement.reference_value != 1
echo item.variant.unit_price_measurement.reference_value
endif
echo item.variant.unit_price_measurement.reference_unit
endif
endcapture
-%}
({{ item.variant.unit_price | money }}
<span aria-hidden="true">/</span>
<span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span>
{{ unit_price_base_unit }})
</span>
</div>
{%- endif -%}
</div>
</div>
</div>
</div>
</div>
{% liquid
assign collections = ''
for collection in item.product.collections
assign collections = collections | append: collection.id | append: ','
endfor
%}
<foxkit-incart-upsell
data-collections="{{ collections | remove_last: ',' }}"
data-product-title="{{ item.product.title }}"
data-product-id="{{ item.product_id }}"
></foxkit-incart-upsell>
</li>
{%- endcapture -%}
{%- liquid
unless is_gift_wrap_item
echo cart_item
else
assign cart_gift_wrap_item = cart_item
endunless
-%}
{%- endfor -%}
{%- liquid
if cart_gift_wrap_item
echo cart_gift_wrap_item
endif
-%}
</ul>
</cart-items>
{%- if section.settings.enable_cart_recommendations and cart != empty -%}
{%- liquid
assign first_product_id = cart.items.first.product_id
if cart_gift_wrap_item
if first_product_id == gift_wrapping.object.id
if cart.items.size > 1
assign first_product_id = cart.items[1].product_id
endif
endif
endif
-%}
{%- render 'cart-drawer-products-recommendation',
color_scheme: section.settings.cart_recommendations_color_scheme,
section_id: section.id,
product_id: first_product_id,
heading: section.settings.cart_recommendations_heading,
limit: section.settings.cart_recommendations_limit,
layout: section.settings.cart_recommendations_layout,
products_recommendations: section.settings.cart_recommendations_products
-%}
{%- endif -%}
</div>
</div>
<div
id="CartDrawerFooter-{{ section.id }}"
class="drawer__footer cart-drawer__footer grid gap-3{% if cart == empty %} hidden{% endif %}"
>
<div class="drawer__footer-head grid gap-4">
{%- render 'gift-wrapping',
section_id: section.id,
gift_wrapping: gift_wrapping,
gift_wrap_id: gift_wrap_id,
gift_wraps_in_cart: gift_wraps_in_cart,
items_in_cart: items_in_cart,
class: 'text-sm'
-%}
{%- if section.settings.show_cart_note or section.settings.show_shipping_rates_calculator or section.settings.show_cart_coupon -%}
<div is="swipe-wrapper" class="cart-drawer__addons min-w-0 swipe--with-shadow">
<div class="swipe__element swipe-all disable-scroll-snap">
<div class="swipe-all__inner">
<div class="inline-flex flex-nowrap gap-2">
{%- if section.settings.show_cart_note -%}
<button
type="button"
class="btn btn--secondary btn--small font-body flex gap-2 items-center justify-center"
aria-controls="CartNote-{{ section.id }}"
aria-expanded="false"
>
<span class="btn__text flex gap-1 items-center">
{{ 'general.cart.note.title' | t }}
{%- render 'icon-caret-right', size: 'extra-small' -%}
</span>
</button>
<cart-addon-modal
id="CartNote-{{ section.id }}"
class="drawer cart-addons-drawer drawer--bottom"
hidden
>
<div class="fixed-overlay absolute" aria-controls="CartNote-{{ section.id }}"></div>
<div class="drawer__inner">
<button
aria-controls="CartNote-{{ section.id }}"
class="drawer__close-btn z-1"
aria-label="{{ 'accessibility.close' | t }}"
>
{%- render 'icon-close' -%}
</button>
<div class="drawer__content cart-addons-drawer__content grid gap-5">
<h5>{{ 'general.cart.note.title' | t }}</h5>
<cart-note class="flex flex-col items-start gap-5">
<div class="form-field w-full">
<textarea
name="note"
class="form-control form-control--textarea"
rows="5"
placeholder="{{ 'general.cart.note.caption' | t }}"
id="CartNoteForm-{{ section.id }}"
>{{ cart.note }}</textarea>
<label class="visually-hidden" for="CartNoteForm-{{ section.id }}">
{{- 'general.cart.note.title' | t -}}
</label>
</div>
<button
class="btn btn--primary w-full"
type="button"
aria-controls="CartNote-{{ section.id }}"
aria-expanded="false"
>
<span class="btn__text">{{ 'general.cart.note.button' | t }}</span>
</button>
</cart-note>
</div>
</div>
</cart-addon-modal>
{%- endif -%}
{%- if section.settings.show_shipping_rates_calculator -%}
<button
type="button"
class="btn btn--secondary btn--small font-body flex gap-2 items-center justify-center"
aria-controls="ShippingCalculator-{{ section.id }}"
aria-expanded="false"
>
<span class="btn__text flex gap-1 items-center">
{{ 'general.cart.shipping_calculator.title' | t }}
{%- render 'icon-caret-right', size: 'extra-small' -%}
</span>
</button>
<calculate-shipping
id="ShippingCalculator-{{ section.id }}"
class="drawer cart-addons-drawer drawer--bottom"
hidden
data-show="fasle"
>
<div class="fixed-overlay absolute" aria-controls="ShippingCalculator-{{ section.id }}"></div>
<div class="drawer__inner cart-addons-drawer__inner flex flex-col w-full h-full">
<button
aria-controls="ShippingCalculator-{{ section.id }}"
aria-label="{{ 'accessibility.close' | t }}"
class="drawer__close-btn z-1"
>
{%- render 'icon-close' -%}
</button>
<div class="drawer__content v-scrollable cart-addons-drawer__content flex flex-col gap-4">
<h5>{{ 'general.cart.shipping_calculator.title' | t }}</h5>
<form
class="grid gap-4"
action="{{ routes.cart_url }}"
method="POST"
novalidate
is="shipping-calculator"
>
<country-province
class="grid gap-4"
{% if shop.customer_accounts_enabled and customer %}
data-country="{{ customer.default_address.country }}"
{%- if customer.default_address.province != '' %}
data-province="{{ customer.default_address.province }}"
{%- endif -%}
{% endif %}
>
<div class="form-field reset-spacing">
<label class="form-label" for="ShippingCalculatorCountry-{{ section.id }}">
{{- 'customer.addresses.country' | t -}}
</label>
<div class="select">
<select
name="address[country]"
class="form-control form-control--select"
autocomplete="country"
id="ShippingCalculatorCountry-{{ section.id }}"
>
<template>{{- all_country_option_tags -}}</template>
</select>
{%- render 'icon-caret-down', size: '2xs' -%}
</div>
</div>
<div class="form-field reset-spacing" hidden>
<label class="form-label" for="ShippingCalculatorProvince-{{ section.id }}">
{{- 'customer.addresses.province' | t -}}
</label>
<div class="select">
<select
name="address[province]"
class="form-control form-control--select"
autocomplete="address-level1"
id="ShippingCalculatorProvince-{{ section.id }}"
></select>
{%- render 'icon-caret-down', size: '2xs' -%}
</div>
</div>
</country-province>
<div class="form-field">
<label class="form-label" for="ShippingCalculatorZip-{{ section.id }}">
{{- 'customer.addresses.zip' | t -}}
</label>
<input
name="address[zip]"
class="form-control form-control--input"
type="text"
autocapitalize="characters"
autocomplete="postal-code"
placeholder=" "
id="ShippingCalculatorZip-{{ section.id }}"
{% if shop.customer_accounts_enabled and customer %}
value="{{ customer.default_address.zip }}"
{% endif %}
>
</div>
<div class="form-submit">
<button class="btn btn--primary w-full" type="submit">
<span class="btn__text">{{ 'general.cart.shipping_calculator.button' | t }}</span>
{%- render 'loading-spinner' -%}
</button>
</div>
<div class="grid gap-3 form__message"></div>
</form>
</div>
</div>
</calculate-shipping>
{%- endif -%}
{%- if section.settings.show_cart_coupon -%}
{%- assign cart_coupon_modal_id = 'CartCoupon-' | append: section.id -%}
<button
type="button"
class="btn btn--secondary btn--small font-body flex gap-2 items-center justify-center"
aria-controls="{{ cart_coupon_modal_id }}"
aria-expanded="false"
>
<span class="btn__text flex gap-1 items-center">
{{ 'general.cart.coupon.title' | t }}
{%- render 'icon-caret-right', size: 'extra-small' -%}
</span>
</button>
<cart-addon-modal
id="{{ cart_coupon_modal_id }}"
class="drawer cart-addons-drawer drawer--bottom"
hidden
>
<div class="fixed-overlay absolute" aria-controls="{{ cart_coupon_modal_id }}"></div>
<div class="drawer__inner">
<button
aria-controls="{{ cart_coupon_modal_id }}"
class="drawer__close-btn z-1"
aria-label="{{ 'accessibility.close' | t }}"
>
{%- render 'icon-close' -%}
</button>
<div class="drawer__content cart-addons-drawer__content grid gap-5">
<h5>{{ 'general.cart.coupon.title' | t }}</h5>
<form
is="cart-discount"
class="cart-discount__form flex flex-col items-start gap-5"
action="{{ routes.cart_url }}"
method="POST"
>
<div class="form-field w-full">
<label class="visually-hidden" for="CartCouponForm-{{ section.id }}">
{{- 'general.cart.coupon.title' | t -}}
</label>
<input
id="CartCouponForm-{{ section.id }}"
class="form-control"
name="discount"
placeholder="{{ 'general.cart.coupon.caption' | t }}"
required
aria-required="true"
>
</div>
<div class="form-submit w-full">
<button class="btn btn--primary w-full" type="submit">
<span class="btn__text">{{ 'general.cart.coupon.button' | t }}</span>
{%- render 'loading-spinner' -%}
</button>
</div>
<div class="form__message w-full alert alert--error blocks-radius grid gap-2"></div>
</form>
</div>
</div>
</cart-addon-modal>
{%- endif -%}
</div>
</div>
</div>
</div>
{%- endif -%}
</div>
<div class="drawer__footer-body">
<div class="grid gap-5">
<div class="grid gap-1">
{%- liquid
assign discount_codes = cart.cart_level_discount_applications | where: 'type', 'discount_code' | map: 'title'
assign cart_items_has_discount = false
for item in cart.items
for allocation in item.line_level_discount_allocations
if allocation.discount_application.type == 'discount_code'
assign cart_items_has_discount = true
endif
endfor
endfor
-%}
{%- if cart.cart_level_discount_applications.size > 0 or cart_items_has_discount -%}
<ul
class="cart__discounts discounts list-unstyled flex flex-wrap gap-1"
role="list"
aria-label="{{ 'customer.order.discount' | t }}"
>
{%- for discount in cart.cart_level_discount_applications -%}
<li
class="discount text-sm-extra font-body-bold flex items-center"
data-discount-code="{{ discount.title }}"
>
{% render 'icon-discount' %}
<span>{{- discount.title -}}</span>
<span class="font-body-bold">(-{{ discount.total_allocated_amount | money }})</span>
<button
is="cart-discount-remove"
type="button"
aria-label="{{ 'general.cart.coupon.remove' | t: code: discount.title }}"
class="btn btn--inherit btn-remove"
>
{% render 'icon-close', size: 'extra-small' %}
{%- render 'loading-spinner' -%}
</button>
</li>
{%- endfor -%}
{%- if cart_items_has_discount -%}
{%- for item in cart.items -%}
{%- for allocation in item.line_level_discount_allocations -%}
{%- liquid
unless allocation.discount_application.type == 'discount_code'
continue
endunless
assign discount = allocation.discount_application
assign is_displayed = discount_codes | has: discount.title
if is_displayed
continue
endif
assign discount_codes = item.line_level_discount_allocations | slice: forloop.index0 | map: 'discount_application' | map: 'title' | concat: discount_codes
-%}
<li
class="discount text-sm-extra font-body-bold flex items-center"
data-discount-code="{{ discount.title }}"
>
{% render 'icon-discount' %}
<span>{{- discount.title -}}</span>
<span class="font-body-bold">(-{{ discount.total_allocated_amount | money }})</span>
<button
is="cart-discount-remove"
type="button"
aria-label="{{ 'general.cart.coupon.remove' | t: code: discount.title }}"
class="btn btn--inherit btn-remove"
>
{% render 'icon-close', size: 'extra-small' %}
{%- render 'loading-spinner' -%}
</button>
</li>
{%- endfor -%}
{%- endfor -%}
{%- endif -%}
</ul>
{%- endif -%}
<div class="totals flex justify-between h5 items-center">
<span class="totals__subtotal">
{{- 'sections.cart.estimated_total' | t -}}
</span>
<span class="totals__subtotal-value">
{{- cart.total_price | money_with_currency -}}
</span>
</div>
<div class="tax-note text-sm-extra">
{%- liquid
if cart.taxes_included and shop.shipping_policy.body != blank
echo 'sections.cart.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url
elsif cart.taxes_included
echo 'sections.cart.taxes_included_but_shipping_at_checkout' | t
elsif shop.shipping_policy.body != blank
echo 'sections.cart.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url
else
echo 'sections.cart.taxes_and_shipping_at_checkout' | t
endif
-%}
</div>
</div>
<form action="{{ routes.cart_url }}" method="POST" novalidate class="drawer__footer-buttons flex gap-2">
<a href="{{ routes.cart_url }}" class="btn btn--secondary">
<span class="btn__text">{{ 'general.cart.view_empty_cart' | t }}</span>
</a>
<button class="btn btn--primary flex-grow" type="submit" name="checkout">
<span class="btn__text">{{ 'sections.cart.checkout' | t }}</span>
</button>
</form>
</div>
</div>
</div>
</div>
</div>
</cart-drawer>
{%- endif -%}
{% schema %}
{
"name": "t:sections.cart-drawer.name",
"settings": [
{
"type": "header",
"content": "t:general.general.name"
},
{
"type": "checkbox",
"id": "show_cart_note",
"label": "t:sections.cart-drawer.settings.show_cart_note.label",
"default": true
},
{
"type": "checkbox",
"id": "show_shipping_rates_calculator",
"label": "t:sections.cart-drawer.settings.show_shipping_rates_calculator.label"
},
{
"type": "checkbox",
"id": "show_cart_coupon",
"label": "t:sections.cart-drawer.settings.show_cart_coupon.label",
"default": true
},
{
"type": "checkbox",
"id": "show_free_shipping_goal",
"label": "t:sections.cart-drawer.settings.show_free_shipping_goal.label",
"default": true,
"info": "t:settings_schema.cart.settings.free_shipping_minimum_amount.info"
},
{
"type": "header",
"content": "t:sections.cart-drawer.settings.cart_recommendations.header.content"
},
{
"type": "paragraph",
"content": "t:sections.cart-drawer.settings.cart_recommendations.paragraph.content"
},
{
"type": "checkbox",
"id": "enable_cart_recommendations",
"label": "t:sections.cart-drawer.settings.cart_recommendations.enable.label",
"default": true
},
{
"type": "color_scheme",
"id": "cart_recommendations_color_scheme",
"label": "t:general.colors.label",
"default": "scheme-1"
},
{
"type": "text",
"id": "cart_recommendations_heading",
"label": "t:general.heading.label",
"default": "You may also like"
},
{
"type": "range",
"id": "cart_recommendations_limit",
"label": "t:general.grid.product_limit.label",
"min": 1,
"max": 10,
"step": 1,
"default": 3
},
{
"type": "product_list",
"id": "cart_recommendations_products",
"label": "t:sections.cart-drawer.settings.cart_recommendations.product_list.label"
},
{
"type": "select",
"id": "cart_recommendations_layout",
"label": "t:sections.main-product.blocks.complementary_products.settings.layout.label",
"default": "grid",
"options": [
{
"value": "grid",
"label": "t:sections.main-product.blocks.complementary_products.settings.layout.options__1.label"
},
{
"value": "horizontal-list",
"label": "t:sections.main-product.blocks.complementary_products.settings.layout.options__2.label"
}
]
},
{
"type": "header",
"content": "t:sections.cart-drawer.settings.cart_message.header.content"
},
{
"type": "color_scheme",
"id": "cart_mess_color_scheme",
"label": "t:general.colors.label",
"default": "scheme-inverse"
},
{
"type": "text",
"id": "cart_message",
"label": "t:general.message.label"
},
{
"type": "select",
"id": "cart_message_alignment",
"label": "t:general.text_alignment.label",
"options": [
{
"value": "left",
"label": "t:general.text_alignment.options__1.label"
},
{
"value": "center",
"label": "t:general.text_alignment.options__2.label"
},
{
"value": "right",
"label": "t:general.text_alignment.options__3.label"
}
],
"default": "center"
}
]
}
{% endschema %}
Pastebin
Retrouvez, créez et partagez vos snippets en temps réel.