114 lines
4.9 KiB
PHP
114 lines
4.9 KiB
PHP
<div class="table-responsive">
|
|
<table class="table table-borderless shopping-cart-table">
|
|
<thead>
|
|
<tr>
|
|
<th>{{ trans('storefront::cart.table.image') }}</th>
|
|
<th>{{ trans('storefront::cart.table.product_name') }}</th>
|
|
<th>{{ trans('storefront::cart.table.unit_price') }}</th>
|
|
<th>{{ trans('storefront::cart.table.quantity') }}</th>
|
|
<th>{{ trans('storefront::cart.table.line_total') }}</th>
|
|
<th>
|
|
<button class="btn-remove" @click="clearCart">
|
|
<i class="las la-times"></i>
|
|
</button>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
<tr v-for="cartItem in cart.items" :key="cartItem.id">
|
|
<td>
|
|
<a :href="productUrl(cartItem)" class="product-image">
|
|
<img
|
|
:src="baseImage(cartItem)"
|
|
:class="{ 'image-placeholder': !hasBaseImage(cartItem) }"
|
|
:alt="cartItem.product.name"
|
|
>
|
|
</a>
|
|
</td>
|
|
|
|
<td>
|
|
<a
|
|
:href="productUrl(cartItem)"
|
|
class="product-name"
|
|
v-text="cartItem.product.name"
|
|
>
|
|
</a>
|
|
|
|
<ul v-cloak v-if="Object.values(cartItem.variations).length !== 0" class="list-inline product-options">
|
|
<li
|
|
v-for="(variation, key, index) in cartItem.variations"
|
|
:key="index"
|
|
>
|
|
<label>@{{ variation.name }}:</label>
|
|
@{{ variation.values[0].label }}@{{ index === Object.values(cartItem.variations).length - 1 ? "" : "," }}
|
|
</li>
|
|
</ul>
|
|
|
|
<ul v-cloak v-if="Object.values(cartItem.options).length !== 0" class="list-inline product-options">
|
|
<li v-for="option in cartItem.options">
|
|
<label>@{{ option.name }}:</label> @{{ optionValues(option) }}
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
|
|
<td>
|
|
<label>{{ trans('storefront::cart.table.unit_price:') }}</label>
|
|
|
|
<span class="product-price" v-html="cartItem.unitPrice.inCurrentCurrency.formatted"></span>
|
|
</td>
|
|
|
|
<td>
|
|
<label>{{ trans('storefront::cart.table.quantity:') }}</label>
|
|
|
|
<div class="number-picker">
|
|
<div class="input-group-quantity">
|
|
<button
|
|
type="button"
|
|
class="btn btn-number btn-minus"
|
|
:disabled="cartItem.qty <= 1"
|
|
@click="updateQuantity(cartItem, cartItem.qty - 1)"
|
|
>
|
|
-
|
|
</button>
|
|
|
|
<input
|
|
type="text"
|
|
:value="cartItem.qty"
|
|
min="1"
|
|
:max="maxQuantity(cartItem)"
|
|
class="form-control input-number input-quantity"
|
|
@focus="$event.target.select()"
|
|
@input="changeQuantity(cartItem, Number($event.target.value))"
|
|
@keydown.up="updateQuantity(cartItem, cartItem.qty + 1)"
|
|
@keydown.down="updateQuantity(cartItem, cartItem.qty - 1)"
|
|
>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn btn-number btn-plus"
|
|
:disabled="isQtyIncreaseDisabled(cartItem)"
|
|
@click="updateQuantity(cartItem, cartItem.qty + 1)"
|
|
>
|
|
+
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td>
|
|
<label>{{ trans('storefront::cart.table.line_total:') }}</label>
|
|
|
|
<span class="product-price" v-html="cartItem.total.inCurrentCurrency.formatted"></span>
|
|
</td>
|
|
|
|
<td>
|
|
<button class="btn-remove" @click="removeCartItem(cartItem)">
|
|
<i class="las la-times"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|