From 85edb09ac38f223017b16a95fb8e9c672675724d Mon Sep 17 00:00:00 2001
From: abhisheks <abhisheks@consultbop.com>
Date: Fri, 3 Nov 2023 18:12:06 +0530
Subject: [PATCH] refactor: update product template

---
 templates/catalog/product.tpl | 36 +++++++++++------------------------
 1 file changed, 11 insertions(+), 25 deletions(-)

diff --git a/templates/catalog/product.tpl b/templates/catalog/product.tpl
index 7d374a4..69bbf25 100644
--- a/templates/catalog/product.tpl
+++ b/templates/catalog/product.tpl
@@ -52,36 +52,24 @@
   <section id="main" itemscope itemtype="https://schema.org/Product">
     <meta itemprop="url" content="{$product.url}">
 
-    <div class="row product-container">
-      <div class="col-md-6">
+    <div class="flex gap-8 flex-wrap lg:flex-nowrap">
         {block name='page_content_container'}
-          <section class="page-content" id="content">
+          <section class="flex w-full" id="content">
             {block name='page_content'}
               <!-- @todo: use include file='catalog/_partials/product-flags.tpl'} -->
               {block name='product_flags'}
-                <ul class="product-flags">
-                  {foreach from=$product.flags item=flag}
-                    <li class="product-flag {$flag.type}">{$flag.label}</li>
-                  {/foreach}
-                </ul>
               {/block}
 
               {block name='product_cover_thumbnails'}
                 {include file='catalog/_partials/product-cover-thumbnails.tpl'}
               {/block}
-              <div class="scroll-box-arrows">
-                <i class="material-icons left">&#xE314;</i>
-                <i class="material-icons right">&#xE315;</i>
-              </div>
-
             {/block}
           </section>
         {/block}
-        </div>
-        <div class="col-md-6">
+        <div class="flex flex-col w-full">
           {block name='page_header_container'}
             {block name='page_header'}
-              <h1 class="h1" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
+              <h1 class="text-2xl font-normal" itemprop="name">{block name='page_title'}{$product.name}{/block}</h1>
             {/block}
           {/block}
           {block name='product_prices'}
@@ -90,7 +78,6 @@
 
           <div class="product-information">
             {block name='product_description_short'}
-              <div id="product-description-short-{$product.id}" itemprop="description">{$product.description_short nofilter}</div>
             {/block}
 
             {if $product.is_customizable && count($product.customizations.fields)}
@@ -147,10 +134,10 @@
             {/block}
 
             {block name='product_tabs'}
-              <div class="tabs">
-                <ul class="nav nav-tabs" role="tablist">
+              <div class="tabs flex flex-col gap-4 mt-16 lg:mt-36">
+                <ul class="nav nav-tabs flex justify-around" role="tablist">
                   {if $product.description}
-                    <li class="nav-item">
+                    <li class="nav-item text-lg font-bold text-blue-950">
                        <a
                          class="nav-link{if $product.description} active{/if}"
                          data-toggle="tab"
@@ -160,7 +147,7 @@
                          {if $product.description} aria-selected="true"{/if}>{l s='Description' d='Shop.Theme.Catalog'}</a>
                     </li>
                   {/if}
-                  <li class="nav-item">
+                  <li class="nav-item text-lg font-bold text-gray-500">
                     <a
                       class="nav-link{if !$product.description} active{/if}"
                       data-toggle="tab"
@@ -235,9 +222,9 @@
 
     {block name='product_accessories'}
       {if $accessories}
-        <section class="product-accessories clearfix">
-          <p class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</p>
-          <div class="products">
+        <section class="product-accessories mt-24">
+          <p class="text-2xl font-bold">{l s='Related Products' d='Shop.Theme.Catalog'}</p>
+          <div class="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
             {foreach from=$accessories item="product_accessory"}
               {block name='product_miniature'}
                 {include file='catalog/_partials/miniatures/product.tpl' product=$product_accessory}
@@ -253,7 +240,6 @@
     {/block}
 
     {block name='product_images_modal'}
-      {include file='catalog/_partials/product-images-modal.tpl'}
     {/block}
 
     {block name='page_footer_container'}