mohitj
/
theme-elegance
forked from brooksbingham/theme-elegance
1
0
Fork 0
Code Pull Requests Activity

refactor: update cart summary section on checkout page

pagebuilder
abhisheks 2023-12-11 18:05:59 +05:30
parent 1b3ab1de39
commit 6a8b361951
4 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/checkout/_partials/cart-detailed-product-line.tpl
View File

@ -23,7 +23,7 @@
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
<div class="flex flex-1 gap-4 items-center"> <div class="flex max-md:flex-col flex-1 gap-4 items-center">
<div class="w-40 h-40"> <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'}"> <img class="object-cover w-full h-full" src="{$product.cover.bySize.cart_default.url}" alt="{$product.name|escape:'quotes'}">
</div> </div>
@ -44,7 +44,7 @@
</div> </div>
<div class="flex items-center w-max"> <div class="flex items-center w-max">
<input <input
class="js-cart-line-product-quantity px-2 py-1" class="js-cart-line-product-quantity px-2 py-1 w-12"
data-down-url="{$product.down_quantity_url}" data-down-url="{$product.down_quantity_url}"
data-up-url="{$product.up_quantity_url}" data-up-url="{$product.up_quantity_url}"
data-update-url="{$product.update_quantity_url}" data-update-url="{$product.update_quantity_url}"

11
templates/checkout/_partials/cart-summary-product-line.tpl
View File

@ -29,12 +29,15 @@
</a> </a>
</div> </div>
<div class="media-body"> <div class="media-body">
<span class="product-name">{$product.name}</span> <span class="product-name md:text-lg font-medium">{$product.name}</span>
<span class="product-quantity">x{$product.quantity}</span> <div class="flex items-center gap-2 max-md:mt-2">
<span class="product-price float-xs-right">{$product.price}</span> <span class="product-price font-semibold md:font-bold">{$product.price}</span>
<span>x</span>
<span class="product-quantity text-lg font-medium">{$product.quantity}</span>
</div>
{hook h='displayProductPriceBlock' product=$product type="unit_price"} {hook h='displayProductPriceBlock' product=$product type="unit_price"}
{foreach from=$product.attributes key="attribute" item="value"} {foreach from=$product.attributes key="attribute" item="value"}
<div class="product-line-info product-line-info-secondary text-muted"> <div class="hidden product-line-info product-line-info-secondary text-muted">
<span class="label">{$attribute}:</span> <span class="label">{$attribute}:</span>
<span class="value">{$value}</span> <span class="value">{$value}</span>
</div> </div>

36
templates/checkout/_partials/cart-summary-totals.tpl
View File

@ -24,24 +24,6 @@
*} *}
<div class="flex flex-col gap-2 mt-2"> <div class="flex flex-col gap-2 mt-2">
{block name='cart_summary_total'}
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
<div class="flex justify-between font-medium">
<span class="label">{$cart.totals.total.label}&nbsp;{$cart.labels.tax_short}</span>
<span class="value">{$cart.totals.total.value}</span>
</div>
<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="flex justify-between font-medium">
<span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
<span class="value">{$cart.totals.total.value}</span>
</div>
{/if}
{/block}
{block name='cart_summary_tax'} {block name='cart_summary_tax'}
{if $cart.subtotals.tax} {if $cart.subtotals.tax}
<div class="flex justify-between font-medium"> <div class="flex justify-between font-medium">
@ -51,4 +33,22 @@
{/if} {/if}
{/block} {/block}
{block name='cart_summary_total'}
{if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
<div class="flex justify-between font-medium">
<span class="label">{$cart.totals.total.label}&nbsp;{$cart.labels.tax_short}</span>
<span class="value">{$cart.totals.total.value}</span>
</div>
<div class="flex justify-between font-bold text-lg">
<span class="label">{$cart.totals.total_including_tax.label}</span>
<span class="value">{$cart.totals.total_including_tax.value}</span>
</div>
{else}
<div class="flex justify-between font-bold text-lg">
<span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
<span class="value">{$cart.totals.total.value}</span>
</div>
{/if}
{/block}
</div> </div>

26
templates/checkout/_partials/cart-summary.tpl
View File

@ -23,29 +23,29 @@
* International Registered Trademark & Property of PrestaShop SA * International Registered Trademark & Property of PrestaShop SA
*} *}
<section id="js-checkout-summary" class="card js-cart" data-refresh-url="{$urls.pages.cart}?ajax=1&action=refresh"> <section id="js-checkout-summary" class="card js-cart" data-refresh-url="{$urls.pages.cart}?ajax=1&action=refresh">
<div class="card-block"> <div class="card-block w-full flex flex-col gap-16 th-accordion">
{block name='hook_checkout_summary_top'} {block name='hook_checkout_summary_top'}
{hook h='displayCheckoutSummaryTop'} {hook h='displayCheckoutSummaryTop'}
{/block} {/block}
{block name='cart_summary_products'} {block name='cart_summary_products'}
<div class="w-full flex item-center justify-center mb-8 uppercase"> <div class="w-full flex item-center justify-center uppercase">
<span class="font-medium text-lg">Cart Summary</span> <span class="font-medium text-lg">Cart Summary</span>
</div> </div>
<div class="cart-summary-products flex items-center gap-2 w-full hidden"> <div class="cart-summary-products th-accordion-item flex flex-col gap-2 w-full">
<span>{$cart.summary_string}</> <div class="w-full flex items-center justify-between ">
<p> <span class="font-bold">{$cart.summary_string}</span>
<a href="#" data-toggle="collapse" class="flex items-center gap-2" data-target="#cart-summary-product-list"> <span data-toggle="collapse" class="th-accordion-item-trigger flex items-center font-medium cursor-pointer hover:text-blue-900 stroke-gray-500 hover:stroke-blue-900" >
{l s='show details' d='Shop.Theme.Actions'} {l s='Show details' d='Shop.Theme.Actions'}
<i class="ti ti-chevron-down"></i> <svg xmlns="http://www.w3.org/2000/svg" class="th-accordion-item-trigger-svg stroke-[3px] stroke-inherit icon icon-tabler icon-tabler-chevron-right" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>
</a> </span>
</p> </div>
{block name='cart_summary_product_list'} {block name='cart_summary_product_list'}
<div class="collapse" id="cart-summary-product-list"> <div class="th-accordion-item-content p-4 border border-gray-200" id="cart-summary-product-list">
<ul class="media-list"> <ul class="media-list w-full flex flex-col gap-4 ">
{foreach from=$cart.products item=product} {foreach from=$cart.products item=product}
<li class="media">{include file='checkout/_partials/cart-summary-product-line.tpl' product=$product}</li> <li class="media w-full flex gap-4">{include file='checkout/_partials/cart-summary-product-line.tpl' product=$product}</li>
{/foreach} {/foreach}
</ul> </ul>
</div> </div>