product page jquery removed, minor refacto

_dev/css/theme/utility/_dynamic-import-fix.scss

@@ -10,7 +10,7 @@
 
 //FIX TO TOAST, opacity by default
 .toast:not(.show),
-.fade:not(.show) {
+.fade:not(.show):not(.active) {
   opacity: 0;
   display: none;
 }

_dev/js/product/index.js

@@ -1,44 +1,8 @@
-import ProductGallery from '@js/product/components/ProductGallery';
+import ProductGallery from './components/ProductGallery';
+import DOMReady from "../theme/utils/DOMReady";
 
-function activateFirstProductTab() {
-  $('.product-tabs .nav .nav-item:first-child a').tab('show');
-}
-
-function handleProductDetailsToggle() {
-  const $link = $('[href="#product-details"]');
-  const $tab = $($link.attr('href'));
-
-  if ($tab.length && $link.length && $link.hasClass('active')) {
-    $tab.addClass('show active');
-  }
-}
-
-$(() => {
-  activateFirstProductTab();
+DOMReady(() => {
   const gallery = new ProductGallery();
 
   gallery.init();
-
-  prestashop.on('updatedProductCombination', (event) => {
-    gallery.init();
-
-    const { product_add_to_cart: productAddToCart } = event;
-
-    if (productAddToCart) {
-      const node = document.createElement('div');
-      node.innerHTML = productAddToCart;
-
-      const html = node.querySelector('.js-product-actions-buttons');
-
-      if (html) {
-        const productActionsElement = document.querySelector('.js-product-actions-buttons');
-
-        productActionsElement.replaceWith(html);
-      }
-    }
-  });
-
-  prestashop.on('updatedProduct', () => {
-    handleProductDetailsToggle();
-  });
 });

_dev/js/theme/components/product.js

@@ -1,6 +1,7 @@
 import prestashop from 'prestashop';
 import useCustomQuantityInput from './useCustomQuantityInput';
 import { each } from '../utils/DOMHelpers';
+import parseToHtml from "../utils/parseToHtml";
 import DOMReady from '../utils/DOMReady';
 import productEventContextSelector from '../core/product/utils/productEventContextSelector';
 
@@ -67,11 +68,11 @@ DOMReady(() => {
       const productImagesModal = document.querySelector(`${contextSelector} .js-product-images-modal`);
 
       if (productImages) {
-        productImages.replaceWith(event.product_cover_thumbnails);
+        productImages.replaceWith(parseToHtml(event.product_cover_thumbnails));
       }
 
       if (productImagesModal) {
-        productImagesModal.replaceWith(event.product_images_modal);
+        productImagesModal.replaceWith(parseToHtml(event.product_images_modal));
       }
 
       prestashop.emit('updatedProductCombination', event);

templates/catalog/_partials/product-attachments.tpl

@@ -0,0 +1,13 @@
+
+<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>

templates/catalog/_partials/product-description.tpl

@@ -0,0 +1,4 @@
+
+{cms_images_block webpEnabled=$webpEnabled}
+  <div class="product-description cms-content">{$product.description nofilter}</div>
+{/cms_images_block}

templates/catalog/_partials/product-details.tpl

@@ -1,7 +1,6 @@
-<div class="js-product-details tab-pane fade"
-     id="product-details"
-     data-product="{$product.embedded_attributes|json_encode}"
-     role="tabpanel"
+<div
+  class="js-product-details"
+  data-product="{$product.embedded_attributes|json_encode}"
   >
   {block name='product_reference'}
     {if isset($product_manufacturer->id)}

templates/catalog/_partials/product-tabs.tpl

@@ -1,87 +1,73 @@
+{$tabsList = []}
+
+{if $product.description}
+  {$tabsList[] = [
+    'id' => 'description',
+    'title' => {l s='Description' d='Shop.Theme.Catalog'},
+    'content' => {include file='catalog/_partials/product-description.tpl'}
+  ]}
+{/if}
+
+{$tabsList[] = [
+  'id' => 'product-details',
+  'title' => {l s='Product Details' d='Shop.Theme.Catalog'},
+  'content' => {include file='catalog/_partials/product-details.tpl'}
+]}
+
+{if $product.attachments}
+  {$tabsList[] = [
+    'id' => 'attachments',
+    'title' => {l s='Attachments' d='Shop.Theme.Catalog'},
+    'content' => {include file='catalog/_partials/product-attachments.tpl'}
+  ]}
+{/if}
+
+{foreach from=$product.extraContent item=extra key=extraKey}
+  {$tabsList[] = [
+    'id' => "extra-{$extraKey}",
+    'title' => $extra.title,
+    'content' => $extra.content,
+    'attr' => $extra.attr
+  ]}
+{/foreach}
+
+
 {block name='product_tabs'}
   <div class="card product-tabs">
     <div class="card-header">
       <ul class="nav nav-tabs card-header-tabs" role="tablist">
-        {if $product.description}
+        {foreach $tabsList as $tab}
           <li class="nav-item">
             <a
-              class="nav-link"
+              class="nav-link {if $tab@first}active{/if}"
               data-bs-toggle="tab"
-              href="#description"
+              href="#{$tab.id}"
+              data-bs-target="#{$tab.id}"
               role="tab"
-              aria-controls="description"
-              >{l s='Description' d='Shop.Theme.Catalog'}</a>
-          </li>
-        {/if}
-        <li class="nav-item">
-          <a
-            class="nav-link"
-            data-bs-toggle="tab"
-            href="#product-details"
-            role="tab"
-            aria-controls="product-details"
-            >{l s='Product Details' d='Shop.Theme.Catalog'}</a>
-        </li>
-        {if $product.attachments}
-          <li class="nav-item">
-            <a
-              class="nav-link"
-              data-bs-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-bs-toggle="tab"
-              href="#extra-{$extraKey}"
-              role="tab"
-              aria-controls="extra-{$extraKey}">{$extra.title}</a>
+              aria-selected="{if $tab@first}true{else}false{/if}"
+              aria-controls="{$tab.id}"
+            >
+              {$tab.title}
+            </a>
           </li>
         {/foreach}
       </ul>
     </div>
 
     <div class="card-body">
       <div class="tab-content" id="tab-content">
-        <div class="tab-pane fade in" id="description" role="tabpanel">
-          {block name='product_description'}
-            {cms_images_block webpEnabled=$webpEnabled}
-              <div class="product-description cms-content">{$product.description nofilter}</div>
-            {/cms_images_block}
-          {/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} cms-content" id="extra-{$extraKey}" role="tabpanel" {foreach $extra.attr as $key => $val} {$key}="{$val}"{/foreach}>
-          {$extra.content nofilter}
-        </div>
+        {foreach $tabsList as $tab}
+          <div
+            class="tab-pane fade {if $tab@first}show active{/if}"
+            id="{$tab.id}"
+            role="tabpanel"
+            aria-labelledby="{$tab.id}-tab"
+            {if !empty($tab.attr)}
+                {foreach $tab.attr as $key => $val} {$key}="{$val}"{/foreach}
+            {/if}
+          >
+            {$tab.content nofilter}
+          </div>
         {/foreach}
       </div>
     </div>