refactor: udpate product's page style

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">
+            <div class='w-full flex items-center flex-col mt-12'>
-                <ul class="nav nav-tabs flex justify-around" role="tablist">
+              <h1 class='text-base font-semibold text-gray-600'>
-                  {if $product.description}
+                Description
-                    <li class="nav-item text-base font-semibold text-blue-950">
+              </h1>
-                       <a
+              {block name='product_details'}
-                         class="nav-link{if $product.description} active{/if}"
+                {include file='catalog/_partials/product-details.tpl'}
-                         data-toggle="tab"
+              {/block}
-                         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>
           {/block}
         </div>