From 16d5b7f54ce55efed8134b21d5ec7a9695086f2a Mon Sep 17 00:00:00 2001 From: abhisheks <abhisheks@consultbop.com> Date: Wed, 22 Nov 2023 16:21:29 +0530 Subject: [PATCH] refactor: udpate product's page style --- templates/catalog/product.tpl | 107 ++++++---------------------------- 1 file changed, 18 insertions(+), 89 deletions(-) diff --git a/templates/catalog/product.tpl b/templates/catalog/product.tpl index bad319d..976f1d1 100644 --- a/templates/catalog/product.tpl +++ b/templates/catalog/product.tpl @@ -66,10 +66,15 @@ {/block} </section> {/block} - <div class="flex flex-col w-full"> + <div class="flex flex-col w-full gap-2"> {block name='page_header_container'} {block name='page_header'} - <h1 class="text-2xl font-normal" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1> + <div class='flex flex-col'> + <h1 class="text-2xl font-normal" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1> + {if $product.description_short} + <span class='text-sm'>{$product.description_short nofilter}</span> + {/if} + </div> {/block} {/block} {block name='product_prices'} @@ -77,9 +82,6 @@ {/block} <div class="product-information"> - {block name='product_description_short'} - {/block} - {if $product.is_customizable && count($product.customizations.fields)} {block name='product_customization'} {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations} @@ -114,14 +116,14 @@ {include file='catalog/_partials/product-discounts.tpl'} {/block} - {block name='product_add_to_cart'} - {include file='catalog/_partials/product-add-to-cart.tpl'} - {/block} - {block name='product_additional_info'} {include file='catalog/_partials/product-additional-info.tpl'} {/block} + {block name='product_add_to_cart'} + {include file='catalog/_partials/product-add-to-cart.tpl'} + {/block} + {* Input to refresh product HTML removed, block kept for compatibility with themes *} {block name='product_refresh'}{/block} </form> @@ -134,86 +136,13 @@ {/block} {block name='product_tabs'} - <div class="tabs flex flex-col gap-4 mt-16"> - <ul class="nav nav-tabs flex justify-around" role="tablist"> - {if $product.description} - <li class="nav-item text-base font-semibold text-blue-950"> - <a - class="nav-link{if $product.description} active{/if}" - data-toggle="tab" - href="#description" - role="tab" - aria-controls="description" - {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a> - </li> - {/if} - <li class="nav-item text-base font-semibold text-gray-500"> - <a - class="nav-link{if !$product.description} active{/if}" - data-toggle="tab" - href="#product-details" - role="tab" - aria-controls="product-details" - {if !$product.description} aria-selected="true"{/if}>{l s='Product Details' d='Shop.Theme.Catalog'}</a> - </li> - {if $product.attachments} - <li class="nav-item"> - <a - class="nav-link" - data-toggle="tab" - href="#attachments" - role="tab" - aria-controls="attachments">{l s='Attachments' d='Shop.Theme.Catalog'}</a> - </li> - {/if} - {foreach from=$product.extraContent item=extra key=extraKey} - <li class="nav-item"> - <a - class="nav-link" - data-toggle="tab" - href="#extra-{$extraKey}" - role="tab" - aria-controls="extra-{$extraKey}">{$extra.title}</a> - </li> - {/foreach} - </ul> - - <div class="tab-content" id="tab-content"> - <div class="tab-pane fade in{if $product.description} active{/if}" id="description" role="tabpanel"> - {block name='product_description'} - <div class="product-description">{$product.description nofilter}</div> - {/block} - </div> - - {block name='product_details'} - {include file='catalog/_partials/product-details.tpl'} - {/block} - - {block name='product_attachments'} - {if $product.attachments} - <div class="tab-pane fade in" id="attachments" role="tabpanel"> - <section class="product-attachments"> - <p class="h5 text-uppercase">{l s='Download' d='Shop.Theme.Actions'}</p> - {foreach from=$product.attachments item=attachment} - <div class="attachment"> - <h4><a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}">{$attachment.name}</a></h4> - <p>{$attachment.description}</p - <a href="{url entity='attachment' params=['id_attachment' => $attachment.id_attachment]}"> - {l s='Download' d='Shop.Theme.Actions'} ({$attachment.file_size_formatted}) - </a> - </div> - {/foreach} - </section> - </div> - {/if} - {/block} - - {foreach from=$product.extraContent item=extra key=extraKey} - <div class="tab-pane fade in {$extra.attr.class}" id="extra-{$extraKey}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}> - {$extra.content nofilter} - </div> - {/foreach} - </div> + <div class='w-full flex items-center flex-col mt-12'> + <h1 class='text-base font-semibold text-gray-600'> + Description + </h1> + {block name='product_details'} + {include file='catalog/_partials/product-details.tpl'} + {/block} </div> {/block} </div>