Merge remote-tracking branch 'abhishek/main'

config/theme.yml

@@ -56,6 +56,9 @@ global_settings:
       - name: displayAfterWrapper
         title: Display after wrapper
         description: Display after wrapper
+      - name: displayCustomProductActions
+        title: Display Actions below Add to Cart
+        description: Display actions below product's add to cart button
     modules_to_hook:
       displayMainMenu:
         - ps_mainmenu
@@ -76,10 +79,6 @@ global_settings:
         - ps_facetedsearch
       displaySearch:
         - ps_searchbar
-      displayProductAdditionalInfo:
-        - ps_sharebuttons
-      displayReassurance:
-        - blockreassurance
       displayOrderConfirmation2:
         - ps_featuredproducts
       displayCrossSellingShoppingCart:

templates/catalog/_partials/product-add-to-cart.tpl

@@ -24,33 +24,29 @@
  *}
 <div class="product-add-to-cart">
   {if !$configuration.is_catalog}
-    <span class="control-label">{l s='Quantity' d='Shop.Theme.Catalog'}</span>
 
     {block name='product_quantity'}
-      <div class="product-quantity clearfix">
+      <div class="flex flex-col gap-4 my-12">
-        <div class="qty">
-          <input
-            type="number"
-            name="qty"
-            id="quantity_wanted"
-            value="{$product.quantity_wanted}"
-            class="input-group"
-            min="{$product.minimal_quantity}"
-            aria-label="{l s='Quantity' d='Shop.Theme.Actions'}"
-          >
-        </div>
-
         <div class="add">
           <button
-            class="btn btn-primary add-to-cart"
+            class="add-to-cart w-full h-12 bg-blue-950 text-white text-base font-light"
             data-button-action="add-to-cart"
             type="submit"
             {if !$product.add_to_cart_url}
               disabled
             {/if}
           >
-            <i class="material-icons shopping-cart">&#xE547;</i>
+            {l s='ADD TO CART' d='Shop.Theme.Actions'}
-            {l s='Add to cart' d='Shop.Theme.Actions'}
+          </button>
+        </div>
+
+        {hook h='displayCustomProductActions'}
+
+        <div class='customize'>
+          <button
+            class="w-full h-12 border border-blue-950 text-blue-950 text-base font-normal"
+          >
+            CUSTOMIZE
           </button>
         </div>
 

templates/catalog/_partials/product-cover-thumbnails.tpl

@@ -22,25 +22,18 @@
  * @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="images-container">
+<div class="images-container flex flex-row-reverse justify-center gap-6 flex-wrap lg:flex-nowrap">
   {block name='product_cover'}
     <div class="product-cover">
-      {if $product.cover}
+        <img class="js-qv-product-cover max-w-2xl bg-gray-100" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
-        <img class="js-qv-product-cover" src="{$product.cover.bySize.large_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
-        <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
-          <i class="material-icons zoom-in">&#xE8FF;</i>
-        </div>
-      {else}
-        <img src="{$urls.no_picture_image.bySize.large_default.url}" style="width:100%;">
-      {/if}
     </div>
   {/block}
 
   {block name='product_images'}
-    <div class="js-qv-mask mask">
+    <div class="js-qv-mask mask"" >
-      <ul class="product-images js-qv-product-images">
+      <ul class="product-images js-qv-product-images flex flex-row lg:flex-col gap-6">
         {foreach from=$product.images item=image}
-          <li class="thumb-container">
+          <li class="thumb-container w-14 md:w-24">
             <img
               class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
               data-image-medium-src="{$image.bySize.medium_default.url}"
@@ -48,7 +41,6 @@
               src="{$image.bySize.home_default.url}"
               alt="{$image.legend}"
               title="{$image.legend}"
-              width="100"
               itemprop="image"
             >
           </li>

templates/catalog/_partials/product-details.tpl

@@ -1,4 +1,4 @@
-<div class="tab-pane fade{if !$product.description} in active{/if}"
+<div class="tab-pane hidden fade{if !$product.description} in active{/if}"
      id="product-details"
      data-product="{$product.embedded_attributes|json_encode}"
      role="tabpanel"

templates/catalog/_partials/product-prices.tpl

@@ -44,7 +44,7 @@
         <meta itemprop="priceCurrency" content="{$currency.iso_code}">
 
         <div class="current-price">
-          <span itemprop="price" content="{$product.price_amount}">{$product.price}</span>
+          <span itemprop="price" class="text-2xl font-normal" content="{$product.price_amount}">{$product.price}</span>
 
           {if $product.has_discount}
             {if $product.discount_type === 'percentage'}
@@ -92,8 +92,6 @@
     <div class="tax-shipping-delivery-label">
       {if !$configuration.taxes_enabled}
         {l s='No tax' d='Shop.Theme.Catalog'}
-      {elseif $configuration.display_taxes_label}
-        {$product.labels.tax_long}
       {/if}
       {hook h='displayProductPriceBlock' product=$product type="price"}
       {hook h='displayProductPriceBlock' product=$product type="after_price"}

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="flex gap-8 flex-wrap lg:flex-nowrap">
-      <div class="col-md-6">
         {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="flex flex-col w-full">
-        <div class="col-md-6">
           {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">
+              <div class="tabs flex flex-col gap-4 mt-16 lg:mt-36">
-                <ul class="nav nav-tabs" role="tablist">
+                <ul class="nav nav-tabs flex justify-around" role="tablist">
                   {if $product.description}
-                    <li class="nav-item">
+                    <li class="nav-item text-base font-semibold 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-base font-semibold 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">
+        <section class="product-accessories mt-24">
-          <p class="h5 text-uppercase">{l s='You might also like' d='Shop.Theme.Catalog'}</p>
+          <p class="text-2xl font-bold">{l s='Related Products' d='Shop.Theme.Catalog'}</p>
-          <div class="products">
+          <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'}