forked from brooksbingham/theme-elegance
refactor: cart page styling
parent
70768fe587
commit
c3c5380c3b
|
|
@ -13,7 +13,7 @@ a {
|
|||
}
|
||||
|
||||
a:hover {
|
||||
@apply text-blue-700;
|
||||
@apply text-blue-900;
|
||||
@apply underline;
|
||||
@apply underline-offset-2;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -655,11 +655,6 @@ video {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.my-12 {
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.my-2 {
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
|
@ -695,6 +690,10 @@ video {
|
|||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.mt-12 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.mt-16 {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
|
@ -759,6 +758,10 @@ video {
|
|||
height: 12rem;
|
||||
}
|
||||
|
||||
.h-5 {
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
|
@ -799,6 +802,10 @@ video {
|
|||
width: 12rem;
|
||||
}
|
||||
|
||||
.w-5 {
|
||||
width: 1.25rem;
|
||||
}
|
||||
|
||||
.w-6 {
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
|
@ -878,6 +885,10 @@ video {
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.items-baseline {
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -972,6 +983,10 @@ video {
|
|||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.px-2 {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
|
|
@ -1068,6 +1083,11 @@ video {
|
|||
line-height: 1.75rem;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
|
@ -1152,7 +1172,19 @@ body {
|
|||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
font-weight: 400;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
a {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
a:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(29 78 216 / var(--tw-text-opacity));
|
||||
text-decoration-line: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.icon-tabler {
|
||||
|
|
@ -1196,19 +1228,28 @@ a:hover .icon-tabler {
|
|||
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
||||
}
|
||||
|
||||
.disabled\:bg-gray-700:disabled {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(55 65 81 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-gray-950 {
|
||||
.group:hover .group-hover\:text-blue-900 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(3 7 18 / var(--tw-text-opacity));
|
||||
color: rgb(30 58 138 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sm\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sm\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
@ -1228,6 +1269,10 @@ a:hover .icon-tabler {
|
|||
width: 6rem;
|
||||
}
|
||||
|
||||
.md\:w-1\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
.md\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
|
@ -1235,6 +1280,18 @@ a:hover .icon-tabler {
|
|||
.md\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
.md\:items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
|
|
@ -1246,10 +1303,6 @@ a:hover .icon-tabler {
|
|||
right: 0px;
|
||||
}
|
||||
|
||||
.lg\:mt-36 {
|
||||
margin-top: 9rem;
|
||||
}
|
||||
|
||||
.lg\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -28,7 +28,7 @@
|
|||
{if $product.has_discount}
|
||||
<div class="product-discount">
|
||||
{hook h='displayProductPriceBlock' product=$product type="old_price"}
|
||||
<span class="regular-price line-through text-red-700/50 leading-none">{$product.regular_price}</span>
|
||||
<span class="regular-price line-through text-red-400 leading-none">{$product.regular_price}</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/block}
|
||||
|
|
|
|||
|
|
@ -23,21 +23,21 @@
|
|||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
{block name='cart_detailed_actions'}
|
||||
<div class="checkout cart-detailed-actions card-block">
|
||||
<div class="flex flex-col mt-4">
|
||||
{if $cart.minimalPurchaseRequired}
|
||||
<div class="alert alert-warning" role="alert">
|
||||
{$cart.minimalPurchaseRequired}
|
||||
</div>
|
||||
<div class="text-sm-center">
|
||||
<button type="button" class="btn btn-primary disabled" disabled>{l s='Proceed to checkout' d='Shop.Theme.Actions'}</button>
|
||||
<button type="button" class="flex-1 uppercase py-2 font-medium text-center bg-blue-900 text-gray-50" disabled>{l s='Proceed to checkout' d='Shop.Theme.Actions'}</button>
|
||||
</div>
|
||||
{elseif empty($cart.products) }
|
||||
<div class="text-sm-center">
|
||||
<button type="button" class="btn btn-primary disabled" disabled>{l s='Proceed to checkout' d='Shop.Theme.Actions'}</button>
|
||||
<button type="button" class="flex-1 uppercase py-2 font-medium text-center bg-blue-900 text-gray-50" disabled>{l s='Proceed to checkout' d='Shop.Theme.Actions'}</button>
|
||||
</div>
|
||||
{else}
|
||||
<div class="text-sm-center">
|
||||
<a href="{$urls.pages.order}" class="btn btn-primary">{l s='Proceed to checkout' d='Shop.Theme.Actions'}</a>
|
||||
<div class="flex">
|
||||
<a href="{$urls.pages.order}" class="flex-1 uppercase py-2 font-medium text-center bg-blue-900 text-gray-50">{l s='Proceed to checkout' d='Shop.Theme.Actions'}</a>
|
||||
{hook h='displayExpressCheckout'}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -22,154 +22,83 @@
|
|||
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
|
||||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
<div class="product-line-grid">
|
||||
<!-- product left content: image-->
|
||||
<div class="product-line-grid-left col-md-3 col-xs-4">
|
||||
<span class="product-image media-middle">
|
||||
<img src="{$product.cover.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- product left body: description -->
|
||||
<div class="product-line-grid-body col-md-4 col-xs-8">
|
||||
<div class="flex flex-1">
|
||||
<div class="w-40 h-40">
|
||||
<img class="object-cover w-full h-full" src="{$product.cover.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}">
|
||||
</div>
|
||||
<div class="flex flex-1 flex-col gap-4">
|
||||
<div class="product-line-info">
|
||||
<a class="label" href="{$product.url}" data-id_customization="{$product.id_customization|intval}">{$product.name}</a>
|
||||
</div>
|
||||
|
||||
<div class="product-line-info product-price h5 {if $product.has_discount}has-discount{/if}">
|
||||
<div class="flex gap-4 product-line-info product-price h5 {if $product.has_discount}has-discount{/if}">
|
||||
{if $product.has_discount}
|
||||
<div class="product-discount">
|
||||
<span class="regular-price">{$product.regular_price}</span>
|
||||
{if $product.discount_type === 'percentage'}
|
||||
<span class="discount discount-percentage">
|
||||
-{$product.discount_percentage_absolute}
|
||||
</span>
|
||||
{else}
|
||||
<span class="discount discount-amount">
|
||||
-{$product.discount_to_display}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
<span class="line-through text-red-400">{$product.regular_price}</span>
|
||||
{/if}
|
||||
<div class="current-price">
|
||||
<span class="price">{$product.price}</span>
|
||||
<span class="price font-medium">{$product.price}</span>
|
||||
{if $product.unit_price_full}
|
||||
<div class="unit-price-cart">{$product.unit_price_full}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
|
||||
{foreach from=$product.attributes key="attribute" item="value"}
|
||||
<div class="product-line-info">
|
||||
<span class="label">{$attribute}:</span>
|
||||
<span class="value">{$value}</span>
|
||||
</div>
|
||||
{/foreach}
|
||||
|
||||
{if is_array($product.customizations) && $product.customizations|count}
|
||||
<br>
|
||||
{block name='cart_detailed_product_line_customization'}
|
||||
{foreach from=$product.customizations item="customization"}
|
||||
<a href="#" data-toggle="modal" data-target="#product-customizations-modal-{$customization.id_customization}">{l s='Product customization' d='Shop.Theme.Catalog'}</a>
|
||||
<div class="modal fade customization-modal" id="product-customizations-modal-{$customization.id_customization}" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
<h4 class="modal-title">{l s='Product customization' d='Shop.Theme.Catalog'}</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
{foreach from=$customization.fields item="field"}
|
||||
<div class="product-customization-line row">
|
||||
<div class="col-sm-3 col-xs-4 label">
|
||||
{$field.label}
|
||||
</div>
|
||||
<div class="col-sm-9 col-xs-8 value">
|
||||
{if $field.type == 'text'}
|
||||
{if (int)$field.id_module}
|
||||
{$field.text nofilter}
|
||||
{else}
|
||||
{$field.text}
|
||||
{/if}
|
||||
{elseif $field.type == 'image'}
|
||||
<img src="{$field.image.small.url}">
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/foreach}
|
||||
{/block}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- product left body: description -->
|
||||
<div class="product-line-grid-right product-line-actions col-md-5 col-xs-12">
|
||||
<div class="row">
|
||||
<div class="col-xs-4 hidden-md-up"></div>
|
||||
<div class="col-md-10 col-xs-6">
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-xs-6 qty">
|
||||
{if isset($product.is_gift) && $product.is_gift}
|
||||
<span class="gift-quantity">{$product.quantity}</span>
|
||||
{else}
|
||||
<input
|
||||
class="js-cart-line-product-quantity"
|
||||
data-down-url="{$product.down_quantity_url}"
|
||||
data-up-url="{$product.up_quantity_url}"
|
||||
data-update-url="{$product.update_quantity_url}"
|
||||
data-product-id="{$product.id_product}"
|
||||
type="number"
|
||||
value="{$product.quantity}"
|
||||
name="product-quantity-spin"
|
||||
min="{$product.minimal_quantity}"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="col-md-6 col-xs-2 price">
|
||||
<span class="product-price">
|
||||
<strong>
|
||||
{if isset($product.is_gift) && $product.is_gift}
|
||||
<span class="gift">{l s='Gift' d='Shop.Theme.Checkout'}</span>
|
||||
{else}
|
||||
{$product.total}
|
||||
{/if}
|
||||
</strong>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-2 col-xs-2 text-xs-right">
|
||||
<div class="cart-line-product-actions">
|
||||
<a
|
||||
class = "remove-from-cart"
|
||||
rel = "nofollow"
|
||||
href = "{$product.remove_from_cart_url}"
|
||||
data-link-action = "delete-from-cart"
|
||||
data-id-product = "{$product.id_product|escape:'javascript'}"
|
||||
data-id-product-attribute = "{$product.id_product_attribute|escape:'javascript'}"
|
||||
data-id-customization = "{$product.id_customization|escape:'javascript'}"
|
||||
>
|
||||
{if !isset($product.is_gift) || !$product.is_gift}
|
||||
<i class="material-icons float-xs-left">delete</i>
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
{block name='hook_cart_extra_product_actions'}
|
||||
{hook h='displayCartExtraProductActions' product=$product}
|
||||
{/block}
|
||||
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="font-medium">Quanity: </span>
|
||||
<div class="ml-4">
|
||||
{if isset($product.is_gift) && $product.is_gift}
|
||||
<span class="gift-quantity">{$product.quantity}</span>
|
||||
{else}
|
||||
<input
|
||||
class="js-cart-line-product-quantity px-2 py-1"
|
||||
data-down-url="{$product.down_quantity_url}"
|
||||
data-up-url="{$product.up_quantity_url}"
|
||||
data-update-url="{$product.update_quantity_url}"
|
||||
data-product-id="{$product.id_product}"
|
||||
type="number"
|
||||
value="{$product.quantity}"
|
||||
name="product-quantity-spin"
|
||||
min="{$product.minimal_quantity}"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 flex flex-1 items-center">
|
||||
<span class="product-price text-base font-bold">
|
||||
{if isset($product.is_gift) && $product.is_gift}
|
||||
{l s='Gift' d='Shop.Theme.Checkout'}
|
||||
{else}
|
||||
{$product.total}
|
||||
{/if}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex w-24 items-center">
|
||||
<div class="cart-line-product-actions">
|
||||
<a
|
||||
class = "remove-from-cart"
|
||||
rel = "nofollow"
|
||||
href = "{$product.remove_from_cart_url}"
|
||||
data-link-action = "delete-from-cart"
|
||||
data-id-product = "{$product.id_product|escape:'javascript'}"
|
||||
data-id-product-attribute = "{$product.id_product_attribute|escape:'javascript'}"
|
||||
data-id-customization = "{$product.id_customization|escape:'javascript'}"
|
||||
>
|
||||
{if !isset($product.is_gift) || !$product.is_gift}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-trash" width="24" height="24" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
||||
<path d="M4 7l16 0"></path>
|
||||
<path d="M10 11l0 6"></path>
|
||||
<path d="M14 11l0 6"></path>
|
||||
<path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
|
||||
<path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
|
||||
</svg>
|
||||
{/if}
|
||||
</a>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
{block name='hook_cart_extra_product_actions'}
|
||||
{hook h='displayCartExtraProductActions' product=$product}
|
||||
{/block}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,13 +23,13 @@
|
|||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
{block name='cart_detailed_totals'}
|
||||
<div class="cart-detailed-totals">
|
||||
<div class="flex flex-col gap-4">
|
||||
|
||||
<div class="card-block">
|
||||
<div class="flex flex-col gap-8">
|
||||
{foreach from=$cart.subtotals item="subtotal"}
|
||||
{if $subtotal.value && $subtotal.type !== 'tax'}
|
||||
<div class="cart-summary-line" id="cart-subtotal-{$subtotal.type}">
|
||||
<span class="label{if 'products' === $subtotal.type} js-subtotal{/if}">
|
||||
<div class="flex font-medium" id="cart-subtotal-{$subtotal.type}">
|
||||
<span class="flex-1 label{if 'products' === $subtotal.type} js-subtotal{/if}">
|
||||
{if 'products' == $subtotal.type}
|
||||
{$cart.summary_string}
|
||||
{else}
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@
|
|||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
{block name='cart_detailed_product'}
|
||||
<div class="cart-overview js-cart" data-refresh-url="{url entity='cart' params=['ajax' => true, 'action' => 'refresh']}">
|
||||
<div class="relative" data-refresh-url="{url entity='cart' params=['ajax' => true, 'action' => 'refresh']}">
|
||||
{if $cart.products}
|
||||
<ul class="cart-items">
|
||||
<ul class="flex flex-col">
|
||||
{foreach from=$cart.products item=product}
|
||||
<li class="cart-item">
|
||||
<li class="flex mb-4">
|
||||
{block name='cart_detailed_product_line'}
|
||||
{include file='checkout/_partials/cart-detailed-product-line.tpl' product=$product}
|
||||
{/block}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
{block name='cart_summary_items_subtotal'}
|
||||
<div class="card-block cart-summary-line cart-summary-items-subtotal clearfix" id="items-subtotal">
|
||||
<div class="flex justify-between" id="items-subtotal">
|
||||
<span class="label">{$cart.summary_string}</span>
|
||||
<span class="value">{$cart.subtotals.products.amount}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,22 +23,18 @@
|
|||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
|
||||
<div class="card-block cart-summary-subtotals-container">
|
||||
|
||||
<div class="flex">
|
||||
{foreach from=$cart.subtotals item="subtotal"}
|
||||
{if $subtotal.value && $subtotal.type !== 'tax'}
|
||||
<div class="cart-summary-line cart-summary-subtotals" id="cart-subtotal-{$subtotal.type}">
|
||||
|
||||
<span class="label">
|
||||
<div class="flex justify-between font-medium" id="cart-subtotal-{$subtotal.type}">
|
||||
<span>
|
||||
{$subtotal.label}
|
||||
</span>
|
||||
|
||||
<span class="value">
|
||||
<span >
|
||||
{$subtotal.value}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/foreach}
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,20 +22,20 @@
|
|||
* @license https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
|
||||
* International Registered Trademark & Property of PrestaShop SA
|
||||
*}
|
||||
<div class="card-block cart-summary-totals">
|
||||
<div class="flex flex-col my-8">
|
||||
|
||||
{block name='cart_summary_total'}
|
||||
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
|
||||
<div class="cart-summary-line">
|
||||
<div class="flex justify-between font-medium">
|
||||
<span class="label">{$cart.totals.total.label} {$cart.labels.tax_short}</span>
|
||||
<span class="value">{$cart.totals.total.value}</span>
|
||||
</div>
|
||||
<div class="cart-summary-line cart-total">
|
||||
<div class="flex justify-between font-medium">
|
||||
<span class="label">{$cart.totals.total_including_tax.label}</span>
|
||||
<span class="value">{$cart.totals.total_including_tax.value}</span>
|
||||
</div>
|
||||
{else}
|
||||
<div class="cart-summary-line cart-total">
|
||||
<div class="flex justify-between font-medium">
|
||||
<span class="label">{$cart.totals.total.label} {if $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
|
||||
<span class="value">{$cart.totals.total.value}</span>
|
||||
</div>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
|
||||
{block name='cart_summary_tax'}
|
||||
{if $cart.subtotals.tax}
|
||||
<div class="cart-summary-line">
|
||||
<div class="flex justify-between font-medium">
|
||||
<span class="label sub">{l s='%label%:' sprintf=['%label%' => $cart.subtotals.tax.label] d='Shop.Theme.Global'}</span>
|
||||
<span class="value sub">{$cart.subtotals.tax.value}</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -26,26 +26,25 @@
|
|||
|
||||
{block name='content'}
|
||||
|
||||
<section id="main">
|
||||
<div class="cart-grid row">
|
||||
<section id="main" class="flex">
|
||||
<div class="flex flex-col lg:flex-row gap-8 flex-1">
|
||||
|
||||
<!-- Left Block: cart product informations & shpping -->
|
||||
<div class="cart-grid-body col-xs-12 col-lg-8">
|
||||
<div class="flex flex-col gap-4 w-full lg:w-3/5">
|
||||
|
||||
<!-- cart products detailed -->
|
||||
<div class="card cart-container">
|
||||
<div class="card-block">
|
||||
<h1 class="h1">{l s='Shopping Cart' d='Shop.Theme.Checkout'}</h1>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex-1 flex">
|
||||
<span class="w-full py-2 uppercase text-center font-medium">{l s='Shopping Cart' d='Shop.Theme.Checkout'}</span>
|
||||
</div>
|
||||
<hr class="separator">
|
||||
{block name='cart_overview'}
|
||||
{include file='checkout/_partials/cart-detailed.tpl' cart=$cart}
|
||||
{/block}
|
||||
</div>
|
||||
|
||||
{block name='continue_shopping'}
|
||||
<a class="label" href="{$urls.pages.index}">
|
||||
<i class="material-icons">chevron_left</i>{l s='Continue shopping' d='Shop.Theme.Actions'}
|
||||
<a class="py-2 uppercase font-medium border border-gray-900 text-center" href="{$urls.pages.index}">
|
||||
{l s='Continue shopping' d='Shop.Theme.Actions'}
|
||||
</a>
|
||||
{/block}
|
||||
|
||||
|
|
@ -56,10 +55,13 @@
|
|||
</div>
|
||||
|
||||
<!-- Right Block: cart subtotal & cart total -->
|
||||
<div class="cart-grid-right col-xs-12 col-lg-4">
|
||||
<div class="flex flex-col gap-4 w-full lg:w-2/5">
|
||||
<div class="flex-1 flex">
|
||||
<span class="w-full py-2 uppercase text-center font-medium">{l s='Shopping Cart' d='Shop.Theme.Checkout'}</span>
|
||||
</div>
|
||||
|
||||
{block name='cart_summary'}
|
||||
<div class="card cart-summary">
|
||||
<div class="flex flex-col">
|
||||
|
||||
{block name='hook_shopping_cart'}
|
||||
{hook h='displayShoppingCart'}
|
||||
|
|
|
|||
Loading…
Reference in New Issue