66 lines
2.5 KiB
HTML
66 lines
2.5 KiB
HTML
|
{% for product in products %}
|
||
|
|
<div
|
||
|
|
class="border-bottom row no-gutters align-items-center justify-content-center mb-3 mb-md-0 pb-3 pb-md-0"
|
||
|
|
data-controller="cart"
|
||
|
|
data-cart-variant-id="{{ product.variant_id }}"
|
||
|
|
data-cart-image="{{ product.image }}"
|
||
|
|
data-cart-title="{{ product.title }}"
|
||
|
|
data-cart-extra="{{ product.extra | join: '|' }}"
|
||
|
|
data-cart-line-item-id="{{ product.line_item.id }}">
|
||
|
|
<div class="col-12 col-md-6 col-lg-4 p-3">
|
||
|
|
<div class="d-flex align-items-center flex-wrap">
|
||
|
|
<img class="mr-3" loading="lazy" src="{{ product.image }}" alt="{{ product.title }}" />
|
||
|
|
|
||
|
|
<div class="gray-600 align-middle mt-3 mt-md-0">
|
||
|
|
<h1 class="f-3 font-weight-bold m-0">{{ product.title }}</h1>
|
||
|
|
<p class="font-weight-light m-0">{{ product.extra | join: ', ' }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-12 col-md-6 col-lg-8">
|
||
|
|
<div class="row no-gutters align-items-center">
|
||
|
|
<div class="col-12 col-lg p-3">
|
||
|
|
<p class="font-weight-light gray-600 m-0 text-center">
|
||
|
|
<strong class="d-lg-none mr-3">{{ site.cart.price }}:</strong>
|
||
|
|
<span>
|
||
|
|
{{ product.line_item.attributes.price }} {{ product.line_item.attributes.currency }}
|
||
|
|
</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-12 col-lg p-3">
|
||
|
|
<div class="form-group m-0">
|
||
|
|
<label for="cart-quantity-{{ product.variant_id }}" class="sr-only">{{ site.cart.quantity }}</label>
|
||
|
|
<input
|
||
|
|
class="form-control"
|
||
|
|
aria-describedby="cart-quantity-help-{{ production.variant_id }}"
|
||
|
|
type="number"
|
||
|
|
min="1"
|
||
|
|
data-target="cart.quantity"
|
||
|
|
value="{{ product.line_item.attributes.quantity }}" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-12 col-lg p-3">
|
||
|
|
<p class="font-weight-light gray-600 m-0 text-center">
|
||
|
|
<strong class="d-lg-none mr-3">{{ site.cart.subtotal }}:</strong>
|
||
|
|
<span data-target="cart.subtotal">
|
||
|
|
{{ product.line_item.attributes.discounted_amount }}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
{{ product.line_item.attributes.currency }}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-12 col-lg-2 text-center">
|
||
|
|
<button class="btn btn-transparent border-0 gray-600" data-action="cart#remove">
|
||
|
|
<i class="fa fa-trash-o fa-2x fa-fw"></i>
|
||
|
|
<span class="sr-only">{{ site.cart.remove }}</span>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|