481 lines
20 KiB
Plaintext
481 lines
20 KiB
Plaintext
{% comment %}
|
|
Variant List Row
|
|
|
|
Accepts:
|
|
- item: {Object} Variant or Product object
|
|
- sku: {String} Sku of Product or Variant (optional)
|
|
- image: {Object} Product or Variant image (optional)
|
|
Usage:
|
|
{% render 'quick-order-list-row' variant: variant %}
|
|
{% endcomment %}
|
|
|
|
{% # theme-check-disable %}
|
|
{% assign cart_qty = cart | item_count_for_variant: variant.id %}
|
|
{% # theme-check-enable %}
|
|
|
|
<tr
|
|
class="variant-item{% unless section.settings.show_image %} variant-item--no-media{% endunless %}{% if item.available and item.unit_price_measurement %} variant-item--unit-price{% endif %}"
|
|
id="Variant-{{ variant.id }}"
|
|
data-variant-id="{{ variant.id }}"
|
|
data-cart-qty="{{ cart_qty }}"
|
|
>
|
|
<td class="variant-item__inner{% unless sku and section.settings.show_sku %} variant-item__inner--no-sku{% endunless %}">
|
|
{%- if section.settings.show_image -%}
|
|
<div class="variant-item__media">
|
|
<div class="variant-item__image-container gradient global-media-settings{% unless image %} variant-item__image-container--no-img {% endunless %}">
|
|
{% if image %}
|
|
{%- assign img_height = 43 | divided_by: image.aspect_ratio | ceil -%}
|
|
{{
|
|
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: image.alt
|
|
| escape
|
|
}}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{%- endif -%}
|
|
<div class="small-hide medium-hide">
|
|
<span class="variant-item__name h4 break">{{ item.title | escape }}</span>
|
|
{%- if section.settings.show_sku -%}
|
|
<span class="variant-item__sku break">{{ sku | escape }}</span>
|
|
{%- endif -%}
|
|
</div>
|
|
</td>
|
|
|
|
<td class="variant-item__details large-up-hide">
|
|
<div class="variant-item__info">
|
|
<span class="variant-item__name h4 break">{{ item.title | escape }}</span>
|
|
{%- if section.settings.show_sku -%}
|
|
<span class="variant-item__sku break">{{ sku | escape }}</span>
|
|
{%- endif -%}
|
|
</div>
|
|
|
|
{%- assign item_price = item.price | money -%}
|
|
{%- if item.compare_at_price -%}
|
|
<dl class="variant-item__discounted-prices">
|
|
<dt class="visually-hidden">
|
|
{{ 'products.product.price.regular_price' | t }}
|
|
</dt>
|
|
<dd>
|
|
<s class="variant-item__old-price price price--end">
|
|
{{ item.compare_at_price | money }}
|
|
</s>
|
|
</dd>
|
|
<dt class="visually-hidden">
|
|
{{ 'products.product.price.sale_price' | t }}
|
|
</dt>
|
|
<dd class="price">
|
|
{%- if variant.quantity_price_breaks.size > 0 -%}
|
|
{%- liquid
|
|
assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
|
|
-%}
|
|
<price-per-item
|
|
class="variant-item__price-per-item no-js-hidden"
|
|
id="Price-Per-Item-{{ variant.id }}"
|
|
data-variant-id="{{ variant.id }}"
|
|
>
|
|
<div class="price-per-item">
|
|
{%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
|
|
{%- assign variant_price = variant.price | money -%}
|
|
<span class="price-per-item--current price">
|
|
{{- 'sections.quick_order_list.each' | t: money: variant_price -}}
|
|
</span>
|
|
{%- else -%}
|
|
{%- for price_break in volume_pricing_array -%}
|
|
{%- if cart_qty >= price_break.minimum_quantity -%}
|
|
{%- assign price_break_price = price_break.price | money -%}
|
|
<span class="price-per-item--current price">
|
|
{{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
|
|
</span>
|
|
{%- break -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
</div>
|
|
</price-per-item>
|
|
{%- else -%}
|
|
<span class="price">
|
|
{{- 'sections.quick_order_list.each' | t: money: item_price -}}
|
|
</span>
|
|
{%- endif -%}
|
|
</dd>
|
|
</dl>
|
|
{%- else -%}
|
|
{%- if variant.quantity_price_breaks.size > 0 -%}
|
|
{%- liquid
|
|
assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
|
|
-%}
|
|
<price-per-item
|
|
class="variant-item__price-per-item no-js-hidden"
|
|
id="Price-Per-Item-{{ variant.id }}"
|
|
data-variant-id="{{ variant.id }}"
|
|
>
|
|
<div class="price-per-item">
|
|
{%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
|
|
{%- assign variant_price = variant.price | money -%}
|
|
<span class="price-per-item--current price">
|
|
{{- 'sections.quick_order_list.each' | t: money: variant_price -}}
|
|
</span>
|
|
{%- else -%}
|
|
{%- for price_break in volume_pricing_array -%}
|
|
{%- if cart_qty >= price_break.minimum_quantity -%}
|
|
{%- assign price_break_price = price_break.price | money -%}
|
|
<span class="price-per-item--current price">
|
|
{{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
|
|
</span>
|
|
{%- break -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
</div>
|
|
</price-per-item>
|
|
{%- else -%}
|
|
<span class="price">
|
|
{{- 'sections.quick_order_list.each' | t: money: item_price -}}
|
|
</span>
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
|
|
{%- if item.available and item.unit_price_measurement -%}
|
|
<div class="unit-price caption">
|
|
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
|
|
{{ item.unit_price | money }}
|
|
<span aria-hidden="true">/</span>
|
|
<span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span>
|
|
{%- if item.unit_price_measurement.reference_value != 1 -%}
|
|
{{- item.unit_price_measurement.reference_value -}}
|
|
{%- endif -%}
|
|
{{ item.unit_price_measurement.reference_unit }}
|
|
</div>
|
|
{%- endif -%}
|
|
</td>
|
|
|
|
<td class="variant-item__totals right large-up-hide">
|
|
{%- render 'loading-spinner' -%}
|
|
{% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
|
|
{% # theme-check-disable %}
|
|
<span class="price">{{ cart | line_items_for: item | sum: 'original_line_price' | money }}</span>
|
|
{% # theme-check-enable %}
|
|
</td>
|
|
|
|
<td class="variant-item__quantity">
|
|
{%- liquid
|
|
assign check_against_inventory = true
|
|
if variant.inventory_management != 'shopify' or variant.inventory_policy == 'continue'
|
|
assign check_against_inventory = false
|
|
endif
|
|
if variant.quantity_rule.min > variant.inventory_quantity and check_against_inventory
|
|
assign quantity_rule_soldout = true
|
|
endif
|
|
|
|
assign has_qty_rules = false
|
|
if variant.quantity_rule.increment > 1 or variant.quantity_rule.min > 1 or variant.quantity_rule.max != null
|
|
assign has_qty_rules = true
|
|
endif
|
|
|
|
assign has_vol_pricing = false
|
|
if variant.quantity_price_breaks.size > 0
|
|
assign has_vol_pricing = true
|
|
endif
|
|
|
|
assign is_available = false
|
|
assign has_popover = false
|
|
unless variant.available == false or quantity_rule_soldout
|
|
assign is_available = true
|
|
endunless
|
|
if has_qty_rules or has_vol_pricing
|
|
assign has_popover = true
|
|
endif
|
|
-%}
|
|
<quantity-popover>
|
|
<div class="variant-item__quantity-wrapper quantity-popover-wrapper{% unless has_popover %} variant-item__quantity-wrapper--no-info{% endunless %}">
|
|
<label class="visually-hidden" for="Quantity-{{ variant.id }}">
|
|
{{ 'products.product.quantity.label' | t }}
|
|
</label>
|
|
<div class="quantity-popover-container{% if is_available and has_popover %} quantity-popover-container--hover{% endif %}{% if cart_qty == 0 %} quantity-popover-container--empty{% endif %}">
|
|
{%- if has_qty_rules or has_vol_pricing -%}
|
|
<button
|
|
type="button"
|
|
aria-expanded="false"
|
|
class="quantity-popover__info-button quantity-popover__info-button--icon-only button button--tertiary small-hide medium-hide no-js-hidden"
|
|
>
|
|
{% render 'icon-info' %}
|
|
</button>
|
|
{%- endif -%}
|
|
{%- if variant.available == false or quantity_rule_soldout -%}
|
|
<span class="variant-item__sold-out"> {{ 'products.product.sold_out' | t }} </span>
|
|
{%- else -%}
|
|
{% comment %} TODO: Remove theme check {% endcomment %}
|
|
{% # theme-check-disable %}
|
|
{% assign cart_qty = cart | item_count_for_variant: variant.id %}
|
|
{% # theme-check-enable %}
|
|
{% render 'quantity-input', variant: variant %}
|
|
{%- endif -%}
|
|
</div>
|
|
{%- if cart_qty > 0 -%}
|
|
<quick-order-list-remove-button
|
|
id="Remove-{{ variant.id }}"
|
|
data-index="{{ variant.id }}"
|
|
>
|
|
<a
|
|
href="{{ item.url_to_remove }}"
|
|
class="button button--tertiary"
|
|
aria-label="{{ 'sections.cart.remove_title' | t: title: item.title }}"
|
|
>
|
|
{% render 'icon-remove' %}
|
|
</a>
|
|
</quick-order-list-remove-button>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- if has_popover -%}
|
|
<button
|
|
type="button"
|
|
class="quantity-popover__info-button quantity-popover__info-button--icon-with-label button button--tertiary large-up-hide"
|
|
aria-expanded="false"
|
|
>
|
|
{% render 'icon-info' %}
|
|
<span>
|
|
{%- if has_vol_pricing -%}
|
|
{{ 'products.product.volume_pricing.note' | t }}
|
|
{%- elsif has_qty_rules -%}
|
|
{{ 'products.product.quantity.note' | t }}
|
|
{%- endif -%}
|
|
</span>
|
|
</button>
|
|
{%- endif -%}
|
|
{%- if has_vol_pricing or has_qty_rules -%}
|
|
<div
|
|
class="global-settings-popup quantity-popover__info"
|
|
tabindex="-1"
|
|
hidden
|
|
>
|
|
{%- if has_qty_rules == false -%}
|
|
<span class="volume-pricing-label caption">{{ 'products.product.volume_pricing.title' | t }}</span>
|
|
{%- endif -%}
|
|
<div class="quantity__rules caption no-js-hidden">
|
|
{%- if variant.quantity_rule.increment > 1 -%}
|
|
<span class="divider">
|
|
{{- 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment -}}
|
|
</span>
|
|
{%- endif -%}
|
|
{%- if variant.quantity_rule.min > 1 -%}
|
|
<span class="divider">
|
|
{{- 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min -}}
|
|
</span>
|
|
{%- endif -%}
|
|
{%- if variant.quantity_rule.max != null -%}
|
|
<span class="divider">
|
|
{{- 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max -}}
|
|
</span>
|
|
{%- endif -%}
|
|
</div>
|
|
<button
|
|
class="button-close button button--tertiary large-up-hide"
|
|
type="button"
|
|
aria-label="{{ 'accessibility.close' | t }}"
|
|
>
|
|
{%- render 'icon-close' -%}
|
|
</button>
|
|
{%- if variant.quantity_price_breaks.size > 0 -%}
|
|
<volume-pricing class="parent-display">
|
|
<ul class="list-unstyled">
|
|
<li>
|
|
<span>{{ variant.quantity_rule.min }}+</span>
|
|
{%- assign price = variant.price | money_with_currency -%}
|
|
<span>{{ 'sections.quick_order_list.each' | t: money: price }}</span>
|
|
</li>
|
|
{%- for price_break in variant.quantity_price_breaks -%}
|
|
<li>
|
|
<span>
|
|
{{- price_break.minimum_quantity -}}
|
|
<span aria-hidden="true">+</span></span
|
|
>
|
|
{%- assign price = price_break.price | money_with_currency -%}
|
|
<span> {{ 'sections.quick_order_list.each' | t: money: price }}</span>
|
|
</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
</volume-pricing>
|
|
{%- endif -%}
|
|
</div>
|
|
{%- endif -%}
|
|
<div
|
|
class="variant-item__error large-up-hide"
|
|
id="Quick-order-list-item-error-mobile-{{ variant.id }}"
|
|
role="alert"
|
|
>
|
|
<small class="variant-item__error-text"></small>
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
class="icon icon-error"
|
|
viewBox="0 0 13 13"
|
|
>
|
|
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
|
|
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
|
|
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
|
|
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
|
|
</svg>
|
|
</div>
|
|
</quantity-popover>
|
|
</td>
|
|
{%- assign item_price = item.price | money -%}
|
|
<td class="variant-item__price small-hide medium-hide">
|
|
{%- if item.compare_at_price -%}
|
|
<dl class="variant-item__discounted-prices">
|
|
<dt class="visually-hidden">
|
|
{{ 'products.product.price.regular_price' | t }}
|
|
</dt>
|
|
<dd>
|
|
<s class="variant-item__old-price price price--end">
|
|
{{ item.compare_at_price | money }}
|
|
</s>
|
|
</dd>
|
|
<dt class="visually-hidden">
|
|
{{ 'products.product.price.sale_price' | t }}
|
|
</dt>
|
|
<dd class="price">
|
|
{%- if variant.quantity_price_breaks.size > 0 -%}
|
|
{%- liquid
|
|
assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
|
|
-%}
|
|
<price-per-item
|
|
class="variant-item__price-per-item no-js-hidden"
|
|
id="Price-Per-Item-{{ variant.id }}"
|
|
data-variant-id="{{ variant.id }}"
|
|
>
|
|
<div class="price-per-item">
|
|
{%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
|
|
{%- assign variant_price = variant.price | money -%}
|
|
<span class="price-per-item--current price">
|
|
{{- 'sections.quick_order_list.each' | t: money: variant_price -}}
|
|
</span>
|
|
{%- else -%}
|
|
{%- for price_break in volume_pricing_array -%}
|
|
{%- if cart_qty >= price_break.minimum_quantity -%}
|
|
{%- assign price_break_price = price_break.price | money -%}
|
|
<span class="price-per-item--current price">
|
|
{{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
|
|
</span>
|
|
{%- break -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
</div>
|
|
</price-per-item>
|
|
{%- else -%}
|
|
<span class="price">
|
|
{{- 'sections.quick_order_list.each' | t: money: item_price -}}
|
|
</span>
|
|
{%- endif -%}
|
|
</dd>
|
|
</dl>
|
|
{%- else -%}
|
|
{%- if variant.quantity_price_breaks.size > 0 -%}
|
|
{%- liquid
|
|
assign volume_pricing_array = variant.quantity_price_breaks | sort: 'quantity' | reverse
|
|
-%}
|
|
<price-per-item
|
|
class="variant-item__price-per-item no-js-hidden"
|
|
id="Price-Per-Item-{{ variant.id }}"
|
|
data-variant-id="{{ variant.id }}"
|
|
>
|
|
<div class="price-per-item">
|
|
{%- if cart_qty < volume_pricing_array.last.minimum_quantity -%}
|
|
{%- assign variant_price = variant.price | money -%}
|
|
<span class="price-per-item--current price">
|
|
{{- 'sections.quick_order_list.each' | t: money: variant_price -}}
|
|
</span>
|
|
{%- else -%}
|
|
{%- for price_break in volume_pricing_array -%}
|
|
{%- if cart_qty >= price_break.minimum_quantity -%}
|
|
{%- assign price_break_price = price_break.price | money -%}
|
|
<span class="price-per-item--current price">
|
|
{{- 'sections.quick_order_list.each' | t: money: price_break_price -}}
|
|
</span>
|
|
{%- break -%}
|
|
{%- endif -%}
|
|
{%- endfor -%}
|
|
{%- endif -%}
|
|
</div>
|
|
</price-per-item>
|
|
{%- else -%}
|
|
<span class="price">
|
|
{{- 'sections.quick_order_list.each' | t: money: item_price -}}
|
|
</span>
|
|
{%- endif -%}
|
|
{%- endif -%}
|
|
|
|
{%- if item.available and item.unit_price_measurement -%}
|
|
<div class="unit-price caption">
|
|
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
|
|
{{ item.unit_price | money }}
|
|
<span aria-hidden="true">/</span>
|
|
<span class="visually-hidden"> {{ 'accessibility.unit_price_separator' | t }} </span>
|
|
{%- if item.unit_price_measurement.reference_value != 1 -%}
|
|
{{- item.unit_price_measurement.reference_value -}}
|
|
{%- endif -%}
|
|
{{ item.unit_price_measurement.reference_unit }}
|
|
</div>
|
|
{%- endif -%}
|
|
</td>
|
|
<td class="variant-item__totals right small-hide medium-hide">
|
|
{%- render 'loading-spinner' -%}
|
|
{% comment %} TODO: enable theme-check once `line_items_for` is accepted as valid filter {% endcomment %}
|
|
{% # theme-check-disable %}
|
|
<span class="price">{{ cart | line_items_for: item | sum: 'original_line_price' | money }}</span>
|
|
{% # theme-check-enable %}
|
|
</td>
|
|
</tr>
|
|
<tr class="small-hide medium-hide hidden desktop-row-error">
|
|
<td></td>
|
|
<td>
|
|
<div class="variant-item__error" id="Quick-order-list-item-error-desktop-{{ variant.id }}" role="alert">
|
|
<small class="variant-item__error-text"></small>
|
|
<svg
|
|
aria-hidden="true"
|
|
focusable="false"
|
|
class="icon icon-error"
|
|
viewBox="0 0 13 13"
|
|
>
|
|
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
|
|
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
|
|
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
|
|
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
|
|
</svg>
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
|
|
{%- if product.quantity_price_breaks_configured? -%}
|
|
<volume-pricing class="hidden" id="Volume-{{ variant.id }}">
|
|
<ul>
|
|
<li>
|
|
<span>{{ variant.quantity_rule.min }}</span>
|
|
{%- assign price = variant.price | money -%}
|
|
<span data-text="{{ price }}">{{ price }}</span>
|
|
</li>
|
|
{%- for price_break in variant.quantity_price_breaks -%}
|
|
{%- assign price_break_price = price_break.price | money -%}
|
|
<li>
|
|
<span>
|
|
{{- price_break.minimum_quantity -}}
|
|
</span>
|
|
<span data-text="{{ price_break_price }}">{{- price_break.price | money }}</span>
|
|
</li>
|
|
{%- endfor -%}
|
|
</ul>
|
|
</volume-pricing>
|
|
{%- endif -%}
|