Improvement: Rework Hn Structure

modules/blockwishlist/views/templates/components/modals/add-to-wishlist.tpl

@@ -19,7 +19,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">{l s='Add to wishlist' d='Modules.Blockwishlist.Shop'}</h5>
+          <p class="h5 modal-title">{l s='Add to wishlist' d='Modules.Blockwishlist.Shop'}</p>
           <button
             type="button"
             class="btn-close"

modules/blockwishlist/views/templates/components/modals/create.tpl

@@ -25,7 +25,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">((title))</h5>
+          <p class="h5 modal-title">((title))</p>
           <button
             type="button"
             class="btn-close"

modules/blockwishlist/views/templates/components/modals/delete.tpl

@@ -30,7 +30,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">((modalTitle))</h5>
+          <p class="h5 modal-title">((modalTitle))</p>
           <button
             type="button"
             class="btn-close"

modules/blockwishlist/views/templates/components/modals/login.tpl

@@ -20,7 +20,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">{l s='Sign in' d='Modules.Blockwishlist.Shop'}</h5>
+          <p class="h5 modal-title">{l s='Sign in' d='Modules.Blockwishlist.Shop'}</p>
           <button
             type="button"
             class="btn-close"

modules/blockwishlist/views/templates/components/modals/rename.tpl

@@ -24,7 +24,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">((title))</h5>
+          <p class="h5 modal-title">((title))</p>
           <button
             type="button"
             class="btn-close"

modules/blockwishlist/views/templates/components/modals/share.tpl

@@ -24,7 +24,7 @@
     <div class="modal-dialog modal-dialog-centered" role="document">
       <div class="modal-content">
         <div class="modal-header px-3">
-          <h5 class="modal-title">((title))</h5>
+          <p class="h5 modal-title">((title))</p>
           <button
             type="button"
             class="btn-close"

modules/productcomments/views/templates/hook/alert-modal.tpl

@@ -19,10 +19,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2>
+        <p class="h2">
           <i class="material-icons {$icon}" data-icon="{$icon}"></i>
           {$modal_title}
-        </h2>
+        </p>
       </div>
       <div class="modal-body">
         <div class="row">

modules/productcomments/views/templates/hook/confirm-modal.tpl

@@ -27,10 +27,10 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h2>
+        <p class="h2">
           <i class="material-icons {$icon}" data-icon="{$icon}"></i>
           {$modal_title}
-        </h2>
+        </p>
       </div>
       <div class="modal-body">
         <div id="{$modal_id}-message">

modules/productcomments/views/templates/hook/post-comment-modal.tpl

@@ -97,7 +97,7 @@
               {/if}
             </div>
             <div class="col-sm-4">
-              <h3>{$product.name}</h3>
+              <p class="h3">{$product.name}</p>
               {block name='product_description_short'}
                 <div itemprop="description">{$product.description_short nofilter}</div>
               {/block}

modules/ps_checkpayment/views/templates/hook/payment_return.tpl

@@ -5,8 +5,8 @@
 
 <div class="card border-1 mb-3">
   <div class="card-body">
-    <h4 class="h4">{l s='Payment information' d='Shop.Theme.Checkout'}</h4>
-    <h6 class="card-subtitle mb-3 text-muted">{l s='Pay by Check' d='Modules.Checkpayment.Shop'}</h6>
+    <p class="h4">{l s='Payment information' d='Shop.Theme.Checkout'}</p>
+    <p class="fw-bold card-subtitle mb-3 text-muted">{l s='Pay by Check' d='Modules.Checkpayment.Shop'}</p>
     {if $status === 'ok'}
       <p>
           {l s='You have chosen payment by check.' d='Modules.Checkpayment.Shop'}<br/>

modules/ps_contactinfo/ps_contactinfo-rich.tpl

@@ -3,7 +3,7 @@
  * file that was distributed with this source code.
  *}
 <div class="contact__details">
-  <h2 class="contact__title">{l s='Store information' d='Shop.Theme.Global'}</h4>
+  <p class="h2 contact__title">{l s='Store information' d='Shop.Theme.Global'}</p>
   <div class="contact__item">
     <i class="material-icons" aria-hidden="true">&#xE55F;</i>
     <div class="contact__info">{$contact_infos.address.formatted nofilter}</div>

modules/ps_facetedsearch/ps_facetedsearch.tpl

@@ -12,7 +12,7 @@
 
   <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas-faceted" aria-labelledby="faceted-offcanvas-label">
     <div class="offcanvas-header">
-      <h5 class="offcanvas-title" id="faceted-offcanvas-label">{l s='Filter By' d='Shop.Theme.Actions'}</h5>
+      <p class="h5 offcanvas-title" id="faceted-offcanvas-label">{l s='Filter By' d='Shop.Theme.Actions'}</p>
       <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
     </div>
     <div class="offcanvas-body">

modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl

@@ -5,7 +5,7 @@
 
 <div class="footer__block col-md-6 col-lg-3">
 
-  <h3 class="footer__block__title d-none d-md-flex">{l s='Information' d='Modules.Legalcompliance.Shop'}</h3>
+  <p class="footer__block__title d-none d-md-flex">{l s='Information' d='Modules.Legalcompliance.Shop'}</p>
 
   <div class="footer__block__toggle d-md-none collapsed" data-target="#footer_eu_about_us_list" data-bs-toggle="collapse">
     <span class="footer__block__title">{l s='Information' d='Modules.Legalcompliance.Shop'}</span>

modules/ps_linklist/views/templates/hook/linkblock-column.tpl

@@ -4,20 +4,16 @@
  *}
 
 {foreach $linkBlocks as $linkBlock}
-  <div class="footer__block col-md-6 col-lg-3">
+  <div class="left-block">
 
-    <p class="footer__block__title d-none d-md-flex">{$linkBlock.title}</p>
+    <p class="left-block__title">{$linkBlock.title}</p>
 
-    <div class="footer__block__toggle d-md-none collapsed" data-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
-      <span class="footer__block__title">{$linkBlock.title}</span>
-      <i class="material-icons" aria-hidden="true">arrow_drop_down</i>
-    </div>
-    <ul id="footer_sub_menu_{$linkBlock.id}" class="footer__block__content footer__block__content-list collapse">
+    <ul id="left-block__{$linkBlock.id}" class="left-block__content left-block__content--list">
       {foreach $linkBlock.links as $link}
         <li>
           <a
               id="{$link.id}-{$linkBlock.id}"
-              class="{$link.class}"
+              class="left-block__link {$link.class}"
               href="{$link.url}"
               title="{$link.description}"
               {if !empty($link.target)} target="{$link.target}" {/if}

modules/ps_shoppingcart/modal.tpl

@@ -7,10 +7,10 @@
   <div class="modal-dialog modal-lg modal-fullscreen-sm-down" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h4 class="modal-title" id="myModalLabel">
+        <p class="h4 modal-title mb-0" id="myModalLabel">
           <i class="material-icons me-1" aria-hidden="true">&#xE5CA;</i>
           {l s='Product successfully added to your shopping cart' d='Shop.Theme.Checkout'}
-        </h4>
+        </p>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"></button>
       </div>
       <div class="modal-body">
@@ -32,7 +32,7 @@
                 />
               </div>
               <div class="col-sm-8 col-md-7">
-                <h6 class="h6 product-name">{$product.name}</h6>
+                <p class="h6 product-name">{$product.name}</p>
                 <p class="product-price">{$product.price}</p>
                 {hook h='displayProductPriceBlock' product=$product type="unit_price"}
                 {foreach from=$product.attributes item="property_value" key="property"}

modules/ps_wirepayment/views/templates/hook/payment_return.tpl

@@ -5,8 +5,8 @@
 
 <div class="card border-1 mb-3">
   <div class="card-body">
-    <h4 class="h4">{l s='Payment information' d='Shop.Theme.Checkout'}</h4>
-    <h6 class="card-subtitle mb-3 text-muted">{l s='Pay by Bank Wire' d='Modules.Wirepayment.Shop'}</h6>
+    <p class="h4">{l s='Payment information' d='Shop.Theme.Checkout'}</p>
+    <p class="h6 card-subtitle mb-3 text-muted">{l s='Pay by Bank Wire' d='Modules.Wirepayment.Shop'}</p>
     {if $status === 'ok'}
       <p>
         {l s='You have chosen payment by bank transfer.' d='Modules.Wirepayment.Shop'}<br/>

modules/psgdpr/views/templates/front/customerPersonalData.tpl

@@ -24,13 +24,13 @@
 
  {block name='page_content'}
   <div class="mb-4">
-    <h2 class="fs-5">{l s='Access to my data' mod='psgdpr'}</h2>
+    <h2 class="h5">{l s='Access to my data' mod='psgdpr'}</h2>
     <p>{l s='At any time, you have the right to retrieve the data you have provided to our site. Click on "Get my data" to automatically download a copy of your personal data on a pdf or csv file.' mod='psgdpr'}</p>
     <a id="exportDataToCsv" class="btn btn-outline-primary d-block d-sm-inline-block mx-0 mb-2 mb-sm-0" target="_blank" href="{$psgdpr_csv_controller|escape:'htmlall':'UTF-8'}"><i class="material-icons" aria-hidden="true">download</i> {l s='Get my data to CSV' mod='psgdpr'}</a>
     <a id="exportDataToPdf" class="btn btn-outline-primary d-block d-sm-inline-block mx-0 mx-sm-2" target="_blank" href="{$psgdpr_pdf_controller|escape:'htmlall':'UTF-8'}"><i class="material-icons" aria-hidden="true">download</i> {l s='Get my data to PDF' mod='psgdpr'}</a>
   </div>
 
-  <h2 class="fs-5">{l s='Rectification & Erasure requests' mod='psgdpr'}</h2>
+  <h2 class="h5">{l s='Rectification & Erasure requests' mod='psgdpr'}</h2>
   <p>{l s='You have the right to modify all the personal information found in the "My Account" page. For any other request you might have regarding the rectification and/or erasure of your personal data, please contact us through our' mod='psgdpr'} <a href="{$psgdpr_contactUrl|escape:'htmlall':'UTF-8'}">{l s='contact page' mod='psgdpr'}</a>. {l s='We will review your request and reply as soon as possible.' mod='psgdpr'}</p>
 
  {literal}

src/scss/core/layout/_index.scss

@@ -2,3 +2,4 @@
 @import "header-top";
 @import "header-bottom";
 @import "footer";
+@import "left-column";

src/scss/core/layout/_left-column.scss

@@ -0,0 +1,39 @@
+$component-name: left-block;
+
+#left-column {
+  --#{$component-name}-title-color: #{$gray-800};
+  --#{$component-name}-title-size: 1.5rem;
+  --#{$component-name}-title-spacing: 1rem;
+  --#{$component-name}-subtitle-color: #{$gray-800};
+  --#{$component-name}-subtitle-size: 1rem;
+  --#{$component-name}-subtitle-spacing: 0.25rem;
+  --#{$component-name}-border-bottom: 1px solid #{$gray-200};
+}
+
+.#{$component-name} {
+  padding-bottom: 1rem;
+  margin-bottom: 2rem;
+  border-bottom: var(--#{$component-name}-border-bottom);
+
+  &__title {
+    padding: 0;
+    margin-bottom: var(--#{$component-name}-title-spacing);
+    font-size: var(--#{$component-name}-title-size);
+    font-weight: 600;
+    border: none;
+  }
+
+  &__content {
+    &--list {
+      margin-bottom: 0;
+    }
+  }
+
+  &__link {
+    display: block;
+    padding: var(--#{$component-name}-subtitle-spacing) 0;
+    font-size: var(--#{$component-name}-subtitle-size);
+    font-weight: 600;
+    color: var(--#{$component-name}-subtitle-color);
+  }
+}

src/scss/custom/components/category/_header.scss

@@ -1,10 +1,6 @@
 $component-name: block-category;
 
 .#{$component-name} {
-  h1 {
-    font-size: 2rem;
-  }
-
   #category-description {
     font-size: 1rem;
     color: var(--bs-gray-800);

src/scss/custom/modules/_contactinfo.scss

@@ -24,7 +24,7 @@
       color: var(--bs-gray-600);
     }
 
-    h2 {
+    .contact__title {
       margin-bottom: 1.5rem;
     }
   }

templates/catalog/_partials/customization-modal.tpl

@@ -2,9 +2,9 @@
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
-        <h4 class="modal-title" id="myModalLabel">
+        <p class="h5 modal-title" id="myModalLabel">
           {l s='Product customization' d='Shop.Theme.Catalog'}
-        </h4>
+        </p>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"></button>
       </div>
       <div class="modal-body">

templates/catalog/_partials/product-customization-modal.tpl

@@ -17,7 +17,7 @@
     <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-sm-down">
       <div class="modal-content">
         <div class="modal-header">
-          <h4 class="modal-title">{l s='Product customization' d='Shop.Theme.Checkout'}</h4>
+          <p class="h5 modal-title">{l s='Product customization' d='Shop.Theme.Checkout'}</p>
           <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"></button>
         </div>
         <div class="modal-body">
@@ -62,10 +62,10 @@
   <div class="{$componentName}__popup">
     {foreach from=$image_modals item="image_modal"}
       <div class="modal fade" id="{$image_modal['id']}" tabindex="-1" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-sm-down mw-100">
+        <div class="modal-dialog modal-dialog-scrollable modal-fullscreen-sm-down">
           <div class="modal-content">
             <div class="modal-header">
-              <h4 class="modal-title">{$image_modal['title']}</h4>
+              <p class="h5 modal-title">{$image_modal['title']}</p>
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{l s='Close' d='Shop.Theme.Global'}"></button>
             </div>
             <div class="modal-body">

templates/catalog/_partials/product-customization.tpl

@@ -7,7 +7,7 @@
   {if !$configuration.is_catalog}
     <div class="card bg-light border-1 mb-4">
       <div class="card-body px-2 px-sm-3">
-        <h5 class="card-title mb-3">{l s='Product customization' d='Shop.Theme.Catalog'}</h5>
+        <p class="h5 card-title mb-3">{l s='Product customization' d='Shop.Theme.Catalog'}</p>
         {block name='product_customization_form'}
           <form method="post" action="{$product.url}" enctype="multipart/form-data" class="mb-0">
             {foreach from=$customizations.fields item="field"}
@@ -21,7 +21,7 @@
                       </div>
                       {if $field.text !== ''}
                         <div class="mt-3">
-                          <h6 class="product-customization__message">{l s='Your customization:' d='Shop.Theme.Catalog'}</h6>
+                          <p class="h6 product-customization__message">{l s='Your customization:' d='Shop.Theme.Catalog'}</p>
                           <p class="mb-0">{$field.text}</p>
                         </div>
                       {/if}

templates/catalog/_partials/product-details.tpl

@@ -4,12 +4,12 @@
   id="product-details"
   data-product="{$product.embedded_attributes|json_encode}"
 >
-  <h5 class="info__title accordion-header" id="product-details-heading">
+  <h2 class="info__title accordion-header" id="product-details-heading">
     <button class="accordion-button {if $product.description}collapsed{/if}" type="button" data-bs-toggle="collapse" data-bs-target="#product-details-collapse" aria-expanded="{if $product.description}false{else}true{/if}"
       aria-controls="product-details-collapse">
       {l s='Product Details' d='Shop.Theme.Catalog'}
     </button>
-  </h5>
+  </h2>
   <div id="product-details-collapse" class="info__content accordion-collapse collapse {if !$product.description}show{/if}" data-bs-parent="#product-details-heading" aria-labelledby="product-details-heading">
     <div class="accordion-body">
       <ul class="product__details">
@@ -104,12 +104,12 @@
   {block name='product_features'}
     {if $product.grouped_features}
       <div class="info accordion-item" id="product-features">
-        <h5 class="info__title accordion-header" id="product-features-heading">
+        <h2 class="info__title accordion-header" id="product-features-heading">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#product-features-collapse" aria-expanded="false"
             aria-controls="product-features-collapse">
             {l s='Data sheet' d='Shop.Theme.Catalog'}
           </button>
-        </h5>
+        </h2>
         <div id="product-features-collapse" class="info__content accordion-collapse collapse" data-bs-parent="#product-features-heading" aria-labelledby="product-features-heading">
           <div class="accordion-body">
             <ul class="product__features">

templates/catalog/listing/product-list.tpl

@@ -11,7 +11,7 @@
 {block name='content'}
 
     {block name='product_list_header'}
-      <h1 id="js-product-list-header" class="h1 mb-4">{$listing.label}</h1>
+      <h1 id="js-product-list-header" class="h2 mb-4">{$listing.label}</h1>
     {/block}
 
     {hook h="displayHeaderCategory"}
@@ -40,7 +40,7 @@
 
         <div id="js-product-list">
           {capture assign="errorContent"}
-            <h4>{l s='No products available yet' d='Shop.Theme.Catalog'}</h4>
+            <p class="h4">{l s='No products available yet' d='Shop.Theme.Catalog'}</p>
             <p>{l s='Stay tuned! More products will be shown here as they are added.' d='Shop.Theme.Catalog'}</p>
           {/capture}