chore:Add js file for customer login

Reviewed-on: brooksbingham/theme-elegance#26

_dev/elegance.css

@@ -35,3 +35,111 @@ ul {
 input[type="radio"],input[type="checkbox"] {
   @apply focus:ring-transparent;
 }
+
+.wrapper {
+  max-width: 50rem;
+  width: 100%;
+  margin: 0 auto;
+}
+.tabs {
+  position: relative;
+  height: 14.75rem;
+   
+}
+.tabs::before,
+.tabs::after {
+  content: "";
+  display: table;
+}
+.tabs::after {
+  clear: both;
+}
+.tab {
+  float: left;
+  
+}
+.tab-switch {
+  display: none;
+}
+.tab-label {
+  position: relative;
+  display: block;
+  line-height: 2.75em;
+  height: 3em;
+  padding: 0 1.618em;
+  color: #000000;
+  cursor: pointer;
+  top: 0;
+  transition: all 0.25s;
+  border-bottom: #000000;
+  width: 120px;
+  text-align: center;
+}
+.tab-label:hover {
+  top: -0.25rem;
+  transition: top 0.25s;
+  
+}
+.tab-content {
+  height: 12rem;
+  position: absolute;
+  z-index: 1;
+  top: 2.75em;
+  left: 0;
+  padding: 1.618rem;
+  background: #fff;
+  color: #2c3e50;
+  opacity: 0;
+  transition: all 0.35s;
+}
+.tab-switch:checked + .tab-label {
+  background: #fff;
+  color: #ffffff;
+  border-bottom: 0;
+  transition: all 0.35s;
+  z-index: 1;
+  top: -0.0625rem;
+  background-color: rgb(23 37 84); 
+}
+.tab-switch:checked + label + .tab-content {
+  z-index: 2;
+  opacity: 1;
+  transition: all 0.35s;
+}
+.mainBody::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+.mainBody::-webkit-scrollbar:vertical {
+  width: 11px;
+}
+.mainBody::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  border: 2px solid white; /* should match background, can't be transparent */
+  background-color: rgba(0, 0, 0, .5);
+}
+.mainBody::-webkit-scrollbar-track { 
+  background-color: #fff; 
+  border-radius: 8px; 
+} 
+.mainBody {
+  height: 250px;
+  background-color: #ddd;
+  padding: 24px;
+  overflow: scroll;  
+  border: 2px solid #000;
+}
+.pop-up{
+  display: none;
+  overflow-y:auto;
+  position: fixed; 
+  top: 50%;
+  left: 50%; 
+  transform: translate(-50%, -50%); 
+  height: 70%; 
+  background-color: white;
+  padding: 20px; z-index: 9999;
+  box-shadow: 0 0 0 9999px #000000b0;
+
+}
+
+  

assets/css/theme.css

@@ -759,6 +759,10 @@ select {
   visibility: collapse;
 }
 
+.static {
+  position: static;
+}
+
 .fixed {
   position: fixed;
 }
@@ -787,10 +791,6 @@ select {
   left: 0px;
 }
 
-.left-1\/2 {
-  left: 50%;
-}
-
 .left-\[100\%\] {
   left: 100%;
 }
@@ -866,6 +866,11 @@ select {
   margin-bottom: 0.125rem;
 }
 
+.my-12 {
+  margin-top: 3rem;
+  margin-bottom: 3rem;
+}
+
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -880,8 +885,8 @@ select {
   margin-bottom: 0.25rem;
 }
 
-.mb-16 {
+.mb-12 {
-  margin-bottom: 4rem;
+  margin-bottom: 3rem;
 }
 
 .mb-2 {
@@ -960,6 +965,10 @@ select {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .inline {
   display: inline;
 }
@@ -984,8 +993,8 @@ select {
   aspect-ratio: 342/513;
 }
 
-.aspect-square {
+.h-1\/2 {
-  aspect-ratio: 1 / 1;
+  height: 50%;
 }
 
 .h-12 {
@@ -1012,6 +1021,10 @@ select {
   height: 2rem;
 }
 
+.h-\[40px\] {
+  height: 40px;
+}
+
 .h-auto {
   height: auto;
 }
@@ -1020,6 +1033,14 @@ select {
   height: 100%;
 }
 
+.h-\[120px\] {
+  height: 120px;
+}
+
+.h-64 {
+  height: 16rem;
+}
+
 .max-h-\[40px\] {
   max-height: 40px;
 }
@@ -1044,6 +1065,10 @@ select {
   width: 3.5rem;
 }
 
+.w-2\/5 {
+  width: 40%;
+}
+
 .w-24 {
   width: 6rem;
 }
@@ -1052,6 +1077,10 @@ select {
   width: 75%;
 }
 
+.w-3\/5 {
+  width: 60%;
+}
+
 .w-32 {
   width: 8rem;
 }
@@ -1080,14 +1109,14 @@ select {
   width: 2rem;
 }
 
-.w-\[150px\] {
-  width: 150px;
-}
-
 .w-\[160px\] {
   width: 160px;
 }
 
+.w-\[220px\] {
+  width: 220px;
+}
+
 .w-full {
   width: 100%;
 }
@@ -1097,10 +1126,6 @@ select {
   width: max-content;
 }
 
-.w-px {
-  width: 1px;
-}
-
 .max-w-6xl {
   max-width: 72rem;
 }
@@ -1160,10 +1185,22 @@ select {
   cursor: pointer;
 }
 
+.select-none {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+
 .list-\[square\] {
   list-style-type: square;
 }
 
+.appearance-none {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1242,6 +1279,10 @@ select {
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -1256,6 +1297,10 @@ select {
   white-space: nowrap;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
 .rounded-lg {
   border-radius: 0.5rem;
 }
@@ -1264,10 +1309,6 @@ select {
   border-width: 1px;
 }
 
-.border-b {
-  border-bottom-width: 1px;
-}
-
 .border-t {
   border-top-width: 1px;
 }
@@ -1331,10 +1372,6 @@ select {
   border-color: rgb(252 165 165 / var(--tw-border-opacity));
 }
 
-.border-transparent {
-  border-color: transparent;
-}
-
 .bg-black\/70 {
   background-color: rgb(0 0 0 / 0.7);
 }
@@ -1359,6 +1396,16 @@ select {
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-700 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
+}
+
+.bg-green-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
+}
+
 .bg-red-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(254 226 226 / var(--tw-bg-opacity));
@@ -1369,6 +1416,10 @@ select {
   background-color: rgb(254 242 242 / var(--tw-bg-opacity));
 }
 
+.bg-transparent {
+  background-color: transparent;
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
@@ -1378,10 +1429,6 @@ select {
   stroke: #000;
 }
 
-.stroke-blue-900 {
-  stroke: #1e3a8a;
-}
-
 .stroke-gray-500 {
   stroke: #6b7280;
 }
@@ -1398,26 +1445,21 @@ select {
   stroke: inherit;
 }
 
-.stroke-2 {
-  stroke-width: 2;
-}
-
 .stroke-\[3px\] {
   stroke-width: 3px;
 }
 
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
 }
 
-.p-0 {
+.p-1 {
-  padding: 0px;
+  padding: 0.25rem;
+}
+
+.p-10 {
+  padding: 2.5rem;
 }
 
 .p-2 {
@@ -1493,6 +1535,10 @@ select {
   padding-left: 0.5rem;
 }
 
+.pl-4 {
+  padding-left: 1rem;
+}
+
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1529,6 +1575,18 @@ select {
   padding-top: 1.5rem;
 }
 
+.pl-8 {
+  padding-left: 2rem;
+}
+
+.pl-24 {
+  padding-left: 6rem;
+}
+
+.pl-28 {
+  padding-left: 7rem;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1545,6 +1603,14 @@ select {
   text-align: justify;
 }
 
+.text-start {
+  text-align: start;
+}
+
+.text-end {
+  text-align: end;
+}
+
 .text-2xl {
   font-size: 1.5rem;
   line-height: 2rem;
@@ -1607,6 +1673,10 @@ select {
   line-height: 1;
 }
 
+.leading-normal {
+  line-height: 1.5;
+}
+
 .text-blue-900 {
   --tw-text-opacity: 1;
   color: rgb(30 58 138 / var(--tw-text-opacity));
@@ -1632,6 +1702,16 @@ select {
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
 
+.text-gray-700 {
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+.text-gray-800 {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
 .text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
@@ -1675,6 +1755,10 @@ select {
   text-decoration-line: line-through;
 }
 
+.no-underline {
+  text-decoration-line: none;
+}
+
 .underline-offset-2 {
   text-underline-offset: 2px;
 }
@@ -1685,6 +1769,12 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-md {
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .shadow-xl {
   --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
@@ -1740,6 +1830,126 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   --tw-ring-color: transparent;
 }
 
+.wrapper {
+  max-width: 50rem;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.tabs {
+  position: relative;
+  height: 14.75rem;
+}
+
+.tabs::before,
+.tabs::after {
+  content: "";
+  display: table;
+}
+
+.tabs::after {
+  clear: both;
+}
+
+.tab {
+  float: left;
+}
+
+.tab-switch {
+  display: none;
+}
+
+.tab-label {
+  position: relative;
+  display: block;
+  line-height: 2.75em;
+  height: 3em;
+  padding: 0 1.618em;
+  color: #000000;
+  cursor: pointer;
+  top: 0;
+  transition: all 0.25s;
+  border-bottom: #000000;
+  width: 120px;
+  text-align: center;
+}
+
+.tab-label:hover {
+  top: -0.25rem;
+  transition: top 0.25s;
+}
+
+.tab-content {
+  height: 12rem;
+  position: absolute;
+  z-index: 1;
+  top: 2.75em;
+  left: 0;
+  padding: 1.618rem;
+  background: #fff;
+  color: #2c3e50;
+  opacity: 0;
+  transition: all 0.35s;
+}
+
+.tab-switch:checked + .tab-label {
+  background: #fff;
+  color: #ffffff;
+  border-bottom: 0;
+  transition: all 0.35s;
+  z-index: 1;
+  top: -0.0625rem;
+  background-color: rgb(23 37 84);
+}
+
+.tab-switch:checked + label + .tab-content {
+  z-index: 2;
+  opacity: 1;
+  transition: all 0.35s;
+}
+
+.mainBody::-webkit-scrollbar {
+  -webkit-appearance: none;
+}
+
+.mainBody::-webkit-scrollbar:vertical {
+  width: 11px;
+}
+
+.mainBody::-webkit-scrollbar-thumb {
+  border-radius: 8px;
+  border: 2px solid white;
+  /* should match background, can't be transparent */
+  background-color: rgba(0, 0, 0, .5);
+}
+
+.mainBody::-webkit-scrollbar-track {
+  background-color: #fff;
+  border-radius: 8px;
+}
+
+.mainBody {
+  height: 250px;
+  background-color: #ddd;
+  padding: 24px;
+  overflow: scroll;
+  border: 2px solid #000;
+}
+
+.pop-up{
+  display: none;
+  overflow-y:auto;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  height: 70%;
+  background-color: white;
+  padding: 20px;
+  z-index: 9999;
+  box-shadow: 0 0 0 9999px #000000b0;
+}
+
 .file\:mr-4::file-selector-button {
   margin-right: 1rem;
 }
@@ -1918,26 +2128,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
 }
 
 @media not all and (min-width: 1024px) {
-  .max-lg\:hidden {
-    display: none;
-  }
-
-  .max-lg\:w-full {
-    width: 100%;
-  }
-
   .max-lg\:flex-col {
     flex-direction: column;
   }
-
-  .max-lg\:items-center {
-    align-items: center;
-  }
-
-  .max-lg\:text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
 }
 
 @media not all and (min-width: 768px) {
@@ -1953,10 +2146,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 100%;
   }
 
-  .max-md\:max-w-full {
-    max-width: 100%;
-  }
-
   .max-md\:flex-col {
     flex-direction: column;
   }
@@ -1982,17 +2171,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-left: 1rem;
   }
 
-  .max-md\:pr-2 {
-    padding-right: 0.5rem;
-  }
-
   .max-md\:text-center {
     text-align: center;
   }
-
-  .max-md\:leading-5 {
-    line-height: 1.25rem;
-  }
 }
 
 @media not all and (min-width: 640px) {
@@ -2012,14 +2193,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     position: absolute;
   }
 
-  .md\:left-1\/2 {
-    left: 50%;
-  }
-
-  .md\:mb-4 {
-    margin-bottom: 1rem;
-  }
-
   .md\:block {
     display: block;
   }
@@ -2044,6 +2217,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 33.333333%;
   }
 
+  .md\:w-1\/4 {
+    width: 25%;
+  }
+
   .md\:w-1\/6 {
     width: 16.666667%;
   }
@@ -2060,6 +2237,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 50%;
   }
 
+  .md\:w-56 {
+    width: 14rem;
+  }
+
   .md\:flex-row {
     flex-direction: row;
   }
@@ -2080,11 +2261,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     gap: 1rem;
   }
 
-  .md\:object-cover {
-    -o-object-fit: cover;
-       object-fit: cover;
-  }
-
   .md\:p-2 {
     padding: 0.5rem;
   }
@@ -2109,11 +2285,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-right: 12rem;
   }
 
-  .md\:text-3xl {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-
   .md\:text-base {
     font-size: 1rem;
     line-height: 1.5rem;
@@ -2151,8 +2322,8 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     display: none;
   }
 
-  .lg\:h-screen {
+  .lg\:h-\[90vh\] {
-    height: 100vh;
+    height: 90vh;
   }
 
   .lg\:w-1\/3 {
@@ -2175,18 +2346,22 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     width: 60%;
   }
 
-  .lg\:w-\[850px\] {
+  .lg\:w-\[450px\] {
-    width: 850px;
+    width: 450px;
+  }
+
+  .lg\:w-\[500px\] {
+    width: 500px;
+  }
+
+  .lg\:w-\[600px\] {
+    width: 600px;
   }
 
   .lg\:w-full {
     width: 100%;
   }
 
-  .lg\:max-w-\[850px\] {
-    max-width: 850px;
-  }
-
   .lg\:max-w-full {
     max-width: 100%;
   }
@@ -2220,13 +2395,24 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
     padding-bottom: 0px;
   }
 
+  .lg\:pr-11 {
+    padding-right: 2.75rem;
+  }
+
+  .lg\:pr-4 {
+    padding-right: 1rem;
+  }
+
   .lg\:pt-24 {
     padding-top: 6rem;
   }
 
-  .lg\:text-4xl {
+  .lg\:pl-28 {
-    font-size: 2.25rem;
+    padding-left: 7rem;
-    line-height: 2.5rem;
+  }
+
+  .lg\:pl-32 {
+    padding-left: 8rem;
   }
 
   .lg\:shadow-none {
@@ -2240,9 +2426,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus {
   .xl\:w-1\/4 {
     width: 25%;
   }
+}
+
   
-  .xl\:text-6xl {
-    font-size: 3.75rem;
-    line-height: 1;
-  }
-}

modules/ps_imageslider/views/templates/hook/slider.tpl

@@ -24,23 +24,11 @@
  *}
 
 {if $homeslider.slides}
-  <div id="carousel" data-ride="carousel" class="carousel slide mb-16" data-interval="{$homeslider.speed}" data-wrap="{(string)$homeslider.wrap}" data-pause="{$homeslider.pause}">
+    <a href="https://brooksbingham.com/17-custom-made">
-    <ul class="carousel-inner" role="listbox">
+      <div  class="mb-12 w-full lg:h-[90vh]" style="clip-path: inset(4px)">
-      {foreach from=$homeslider.slides item=slide name='homeslider'}
+          <video autoplay muted loop class="w-full h-auto object-cover" style="background-color: rgba(0, 0, 0, 0)">
-        <li class="carousel-item {if $smarty.foreach.homeslider.first}active{/if}" role="option" aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
+              <source src="{$urls.img_ps_url}cms/hero.mp4" type="video/mp4" >
-          <a href="{$slide.url}">
+          </video>
-            <figure class="relative h-auto lg:h-screen">
-              <img class="w-full h-full object-contain md:object-cover" src="{$slide.image_url}" alt="{$slide.legend|escape}">
-              {if $slide.title || $slide.description}
-                <figcaption class="caption absolute left-1/2 md:left-1/2 bottom-0 top-0 right-1/5 flex flex-col justify-center">
-                  <h2 class="max-md:max-w-full max-md:pr-2 max-md:leading-5 text-lg md:text-3xl lg:text-4xl xl:text-6xl font-bold mb-2 md:mb-4">{$slide.title}</h2>
-                  <div class="text-sm md:text-base font-medium">{$slide.description nofilter}</div>
-                </figcaption>
-              {/if}
-            </figure>
-          </a>
-        </li>
-      {/foreach}
-    </ul>
       </div>
+    </a>
 {/if}

modules/thobbodymeasurements/views/js/front-customer-login-after.js

@@ -0,0 +1,24 @@
+$(document).ready(function() {
+    //Check if the dialog should be shown based on the flag in local storage
+    if (!localStorage.getItem('tbm_dialog_closed')) {
+        $('#tbm-not-set-modal').modal('show');
+    }
+
+    //Handle click event for the close link
+    $('#close-tbm-modal').click(function() {
+        //Set flag in local storage when the close link is clicked
+        localStorage.setItem('tbm_dialog_closed', 'true');
+    });
+
+    //Handle click event for the "Set Measurements" button
+    $('#set-measurements-tbm-modal').click(function() {
+        //Set flag in local storage when the "Set Measurements" button is clicked
+        localStorage.setItem('tbm_dialog_closed', 'true');
+    });
+
+    //Listen for click event on logout button
+    $('.logout').click(function() {
+        //Clear the local storage item
+        localStorage.removeItem('tbm_dialog_closed');
+    });
+});

modules/thobbodymeasurements/views/js/front-set-product-measurements.js

@@ -0,0 +1,272 @@
+$(document).ready(function() {
+
+    $('#photos-completed-button').click(function(event){
+        event.preventDefault();
+
+        var accessCode = $('#product-additional-info-access-code').val();
+
+        $.ajax({
+            url: 'index.php?fc=module&module=thobbodymeasurements&controller=SetProductMeasurements&ajax=true&action=getCustomerMeasurementsForMirrorSize',
+            method: 'POST',
+            dataType: 'json',
+            headers: {
+                Accepts: "application/json",
+            },
+            data: {
+                ajax: true,
+                action: 'getCustomerMeasurementsForMirrorSize',
+                accessCode: accessCode,
+            },
+            success: function(response) {
+                console.log(response);
+                // window.location.reload();
+            },
+            error: function(xhr, status, error) {
+                console.error(xhr.responseText);
+            }
+        });
+    });
+
+       $('#set-measurements-button').click(function(event) {
+          // Prevent the default behavior of the anchor tag
+          event.preventDefault();
+      
+          // Toggle the visibility of the modal
+         $('#measurements-modal').toggle();
+        });
+        $(document).click(function(event) {
+            // Check if the click target is not within the modal
+            if (!$(event.target).closest('#measurements-modal').length && !$(event.target).is('#set-measurements-button')) {
+                // Hide the modal
+                $('#measurements-modal').hide();
+            }
+        });
+    });
+
+    $('#closebutton').click(function() {
+        $('#measurements-modal').hide();
+    });
+    
+    $('#closemirrorbutton').click(function() {
+        $('#measurements-modal').hide();
+    });
+
+
+    // Add click event handler to the "Photos Completed" button
+    $('#photos-completed-button').click(function(event) {
+        // Perform some action here
+        alert('Photos Completed button clicked!');
+    });
+      
+
+    $('#submit-measurements-button').click(function(event) {
+        event.preventDefault();
+        var measurements = [];
+
+        $('.modal-set-measurements .form-group').each(function() {
+            var attributeId = $(this).find('input').attr('id');
+            var value = $(this).find('input').val();
+            console.log("Attribute id: ",attributeId)
+            console.log("value: ",value)
+            
+
+            measurements.push({
+                "attributeId": attributeId,
+                "value": value
+            });
+        });
+        console.log("measurements: ",measurements)
+
+        var formId = $('#current_form_id').val();
+        var formLabel = $('#current_form_label').val();
+
+        var productId = $('#product-additional-info-product-id').val();
+        var categoryId = $('#product-additional-info-category-id').val();
+        var productAttributeId = $('#product-additional-info-product-attribute-id').val();
+
+        $.ajax({
+            url: 'index.php?fc=module&module=thobbodymeasurements&controller=SetProductMeasurements&ajax=true&action=saveProductMeasurements',
+            method: 'POST',
+            dataType: 'json',
+            headers: {
+                Accepts: "application/json",
+            },
+            data: {
+                ajax: true,
+                action: 'saveProductMeasurements',
+                formId: formId,
+                formLabel: formLabel,
+                measurements: JSON.stringify(measurements),
+                productId: productId,
+                categoryId: categoryId,
+                productAttributeId:  productAttributeId,
+            },
+            success: function(response) {
+                console.log(response);
+                window.location.reload();
+            },
+            error: function(xhr, status, error) {
+                console.error(xhr.responseText);
+            }
+        });
+    });
+
+    $('.add-to-cart').click( (event) => {
+        console.log("inside add to cart click...");
+
+        var productId = $('#product-additional-info-product-id').val();
+        var categoryId = $('#product-additional-info-category-id').val();
+        var productAttributeId = $('#product-additional-info-product-attribute-id').val();
+
+        if(!productId && !categoryId){
+            return;
+        }
+
+        event.preventDefault();
+        event.stopImmediatePropagation();
+
+        var formId = $('#current_form_id').val();
+        var formLabel = $('#current_form_label').val();
+        var measurements = [];
+
+        $('.modal-set-measurements .form-group').each(function() {
+            var attributeId = $(this).find('input').attr('id');
+            var value = $(this).find('input').val();
+
+            measurements.push({
+                "attributeId": attributeId,
+                "value": value
+            });
+        });
+
+        //first check if the measurements are set by the customer
+        $.ajax({
+            url: 'index.php?fc=module&module=thobbodymeasurements&controller=SetProductMeasurements&ajax=true&action=customerHasMeasurements',
+            method: 'POST',
+            dataType: 'json',
+            headers: {
+                Accepts: "application/json",
+            },
+            data: {
+                ajax: true,
+                action: 'customerHasMeasurements',
+                productId: productId,
+                categoryId: categoryId,
+            }
+        }).done(function (response){
+            console.log('has measurements response....');
+            if(!response.hasMeasurements){
+                console.log("Set measurements first...");
+                $('#measurements-modal').modal('show');
+            }else{
+                $.ajax({
+                    url: 'index.php?fc=module&module=thobbodymeasurements&controller=SetProductMeasurements&ajax=true&action=saveProductMeasurements',
+                    method: 'POST',
+                    dataType: 'json',
+                    headers: {
+                        Accepts: "application/json",
+                    },
+                    data: {
+                        ajax: true,
+                        action: 'saveProductMeasurements',
+                        formId: formId,
+                        formLabel: formLabel,
+                        measurements: JSON.stringify(measurements),
+                        productId: productId,
+                        categoryId: categoryId,
+                        productAttributeId:  productAttributeId,
+                    },
+                    success: function(response) {
+                        console.log(response);
+                        console.log("Proceed to add to cart....");
+                        console.log(event.currentTarget)
+
+                        const $form = $(event.currentTarget.form);
+                        const query = `${$form.serialize()}&add=1&action=update`;
+                        console.log("Form: ", $form.serialize());
+                        console.log("Query: ", query);
+
+                        const actionURL = $form.attr('action');
+                        console.log("actionURL: ", actionURL);
+                        const addToCartButton = $(event.currentTarget);
+
+                        addToCartButton.prop('disabled', true);
+
+                        const isQuantityInputValid = ($input) => {
+                            let validInput = true;
+
+                            $input.each((index, input) => {
+                                const $currentInput = $(input);
+                                const minimalValue = parseInt($currentInput.attr('min'), 10);
+
+                                if (minimalValue && $currentInput.val() < minimalValue) {
+                                    onInvalidQuantity($currentInput);
+                                    validInput = false;
+                                }
+                            });
+
+                            return validInput;
+                        };
+
+                        let onInvalidQuantity = ($input) => {
+                            $input
+                                .parents(prestashop.selectors.product.addToCart)
+                                .first()
+                                .find(prestashop.selectors.product.minimalQuantity)
+                                .addClass('error');
+                            $input
+                                .parent()
+                                .find('label')
+                                .addClass('error');
+                        };
+
+                        const $quantityInput = $form.find('input[min]');
+
+                        if (!isQuantityInputValid($quantityInput)) {
+                            onInvalidQuantity($quantityInput);
+                            return;
+                        }
+
+                        $.post(actionURL, query, null, 'json')
+                            .then((resp) => {
+                                console.log('Resp: ', resp);
+                                if (!resp.hasError) {
+                                    prestashop.emit('updateCart', {
+                                        reason: {
+                                            idProduct: resp.id_product,
+                                            idProductAttribute: resp.id_product_attribute,
+                                            idCustomization: resp.id_customization,
+                                            linkAction: 'add-to-cart',
+                                            cart: resp.cart,
+                                        },
+                                        resp,
+                                    });
+                                } else {
+                                    prestashop.emit('handleError', {
+                                        eventType: 'addProductToCart',
+                                        resp,
+                                    });
+                                }
+                            })
+                            .fail((resp) => {
+                                prestashop.emit('handleError', {
+                                    eventType: 'addProductToCart',
+                                    resp,
+                                });
+                            })
+                            .always(() => {
+                                setTimeout(() => {
+                                    addToCartButton.prop('disabled', false);
+                                }, 1000);
+                            });
+                    },
+                    error: function(xhr, status, error) {
+                        console.error(xhr.responseText);
+                    }
+                }); 
+            }
+        });
+    });
+
+
+

modules/thobbodymeasurements/views/templates/front/customer_account_section.tpl

@@ -0,0 +1,88 @@
+{**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ *}
+{extends file='customer/page.tpl'}
+
+{block name='page_title'}
+    {l s='thob - Manual Body Measurements' mod='thobbodymeasurements'}
+{/block}
+
+{block name='page_content'}
+<div class="bg-white-400  shadow-md">
+    <section class=" h-34 p-10 flex flex-col">
+        {if isset($selectedForm)}
+            <h2 class="text-lg font-bold">{l s='Form:' mod='thobbodymeasurements'} {$selectedForm.label_form}</h2>
+            <form action="#" method="post" class="flex flex-col items-center justify-center ">
+                {foreach from=$selectedForm.attributes item=attribute}
+                <section class="flex flex-row p-4">
+                    <div class=" flex flex-row gap-4">
+                       <div class="w-24 lg:pr-4 text-end mt-2">
+                        <label for="{$attribute.id}" class="text-base font-semibold mt-1 ">{$attribute.name}:</label>
+                        </div>
+                        <div class="lg:w-[500px]">
+                            <input
+                                type="text"
+                                id="{$attribute.id}"
+                                name="{$attribute.id}"
+                                class=" lg:w-[450px] p-2"
+                                pattern="[0-9]+"
+                                title="Please enter a positive number" 
+                                required
+                                {if isset($customerMeasurements) && isset($customerMeasurements[$attribute.id])}
+                                    value="{$customerMeasurements[$attribute.id]}"
+                                {else}
+                                    placeholder="Enter measurement"
+                                {/if}
+                            />
+                        </div>
+                        <div class="mt-1 w-24 mt-2 text-start ">
+                            {$attribute.unit}
+                        </div>
+                    </div>
+                    <input type="hidden" name="selected_form_id" id="selected_form_id" class="form-control" value="{$selectedForm.id_form}">
+                    <input type="hidden" name="selected_form_label" id="selected_form_label" class="form-control" value="{$selectedForm.label_form}">
+                </section>
+                {/foreach}
+
+                <div class="lg:pr-11">
+                    <button name="measurements_submit_form" type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light">{l s='Save Measurements' mod='thobbodymeasurements'}</button>
+                </div>
+            </form>
+        {else}
+            <form action="#" method="post" class="form-horizontal mx-auto">
+                <div class="flex lg:flex-row flex-col gap-4 justify-center">
+                    <label for="form_select" class="form-control-label col-md-3 font-medium text-lg mt-1 ">{l s='Select a Form:' mod='thobbodymeasurements'}</label>
+                    <div class="">
+                        <select name="form_select" id="form_select" class="form-control p-2 form-control-select w-[220px] h-[40px] rounded">
+                            {foreach from=$currentForms item=form}
+                                <option value="{$form.id_form}">{$form.label_form}</option>
+                            {/foreach}
+                        </select>
+                    </div>
+                </div>
+
+                <div class="lg:pl-32 p-4">
+                    <div class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light w-32">
+                        <button type="submit" class="">{l s='Select Form' mod='thobbodymeasurements'}</button>
+                    </div>
+                </div>
+            </form>
+        {/if}
+    </section>
+</div>
+{/block}

modules/thobbodymeasurements/views/templates/hook/customer_account.tpl

@@ -0,0 +1,7 @@
+
+<a class="w-full md:w-1/3 lg:w-1/5 flex flex-col p-4 border-gray-500"  id="tbm-link" href="{$front_controller}">
+  <span class="flex flex-col items-center font-semibolds text-lg">
+    <svg xmlns="http://www.w3.org/2000/svg" width=32 height=32 viewBox="0 0 32 32" id="measurements" stroke="currentColor"><path d="M29.5,1h-5A2.5,2.5,0,0,0,22,3.5V22H3.5A2.5,2.5,0,0,0,1,24.5v5A2.5,2.5,0,0,0,3.5,32h26A2.5,2.5,0,0,0,32,29.5V3.5A2.5,2.5,0,0,0,29.5,1ZM31,29.5A1.5,1.5,0,0,1,29.5,31H3.5A1.5,1.5,0,0,1,2,29.5v-5A1.5,1.5,0,0,1,3.5,23H4v3.5a.5.5,0,0,0,1,0V23H7v1.5a.5.5,0,0,0,1,0V23h2v1.5a.5.5,0,0,0,1,0V23h2v3.5a.5.5,0,0,0,1,0V23h2v1.5a.5.5,0,0,0,1,0V23h2v1.5a.5.5,0,0,0,1,0V23h2v3.5a.5.5,0,0,0,1,0V23h3.5a.5.5,0,0,0,0-1H23V20h1.5a.5.5,0,0,0,0-1H23V17h1.5a.5.5,0,0,0,0-1H23V14h3.5a.5.5,0,0,0,0-1H23V11h1.5a.5.5,0,0,0,0-1H23V8h1.5a.5.5,0,0,0,0-1H23V5h3.5a.5.5,0,0,0,0-1H23V3.5A1.5,1.5,0,0,1,24.5,2h5A1.5,1.5,0,0,1,31,3.5Z"></path></svg>
+    Body Measurements 
+  </span>
+</a>

modules/thobbodymeasurements/views/templates/hook/customer_login_after.tpl

@@ -0,0 +1,17 @@
+<div class="modal fade" id="tbm-not-set-modal" tabindex="-1" role="dialog" aria-labelledby="tbm-not-set-label" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title font-semibold" id="tbm-not-set-label">{l s='thob Body Measurements'}</h5>
+            </div>
+            <div class="modal-body p-8">
+                <p>{l s='Please fill your personal body measurements to have the best custom shopping experience.'}</p>
+            </div>
+            <div class="modal-footer text-end">
+                <a id="set-measurements-tbm-modal" href="{$front_controller}" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light">{l s='Set Measurements'}</a>
+
+                <a id="close-tbm-modal" href="" class=" hover:text-white hover:no-underline px-6 py-2  bg-gray-700 text-white text-base font-light">{l s='Close'}</a>
+            </div>
+        </div>
+    </div>
+</div>

modules/thobbodymeasurements/views/templates/hook/display_measurements_section_cart.tpl

@@ -0,0 +1,22 @@
+{if $measurements}
+      <div class="block w-full overflow-auto scrolling-touch table-striped p-1">
+        <table class="w-full max-w-full mb-4 bg-transparent">
+            <thead>
+                <tr>
+                    <th>Attribute</th>
+                    <th>Value</th>
+                    <th>Unit</th>
+                </tr>
+            </thead>
+            <tbody>
+            {foreach from=$measurements item="measurement"}
+                <tr>
+                    <td style="text-align:left;">{$measurement.label}</td>
+                    <td style="text-align:left;">{$measurement.value}</td>
+                    <td style="text-align:left;">{$measurement.unit}</td>
+                </tr>
+            {/foreach}
+            </tbody>
+        </table>
+    </div>
+{/if}

modules/thobbodymeasurements/views/templates/hook/set-measurements-button.tpl

@@ -0,0 +1,89 @@
+
+<input type="hidden" id="product-additional-info-product-id" value="{$productId}">
+<input type="hidden" id="product-additional-info-category-id" value="{$categoryId}">
+<input type="hidden" id="product-additional-info-product-attribute-id" value="{$productAttributeId}">
+<input type="hidden" id="product-additional-info-access-code" value="{$accessCode}">
+
+<a href="#" class="product-set-measurements-btn" id="set-measurements-button" data-toggle="modal" data-target="#measurements-modal">
+  Set Measurements
+</a>
+
+<!-- Modal -->
+<div class="">
+  <div class="modal modal-set-measurements lg:w-[600px] mainBody pop-up" id="measurements-modal" tabindex="-1" role="dialog" >
+    <div class="wrapper">
+      <div class="tabs">
+        <div class="tab">
+          <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
+          <label for="tab-1" class="tab-label">Custom</label>
+          
+          <div class="tab-content my-12">
+            {if isset($currentForm)}
+              <h2 class="font-semibold mb-4">{$currentForm.label_form}</h2>
+                            
+                <section class="form-fields">
+                    {foreach from=json_decode($currentForm.attributes, true) item=$attribute}
+                      <div class="mb-4 flex flex-row form-group ">
+                          <div class="w-24 pr-8">
+                          <label for="{$attribute.id}" class="form-control-label md:w-1/4 pr-4 pl-4 required">{$attribute.name}</label>
+                          </div>
+                          <div class=" js-input-column">
+                              <input 
+                                  type="text"
+                                  id="{$attribute.id}"
+                                  name="{$attribute.id}"
+                                  class=" block appearance-none md:w-56 w-24 py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded"
+                                  pattern="[0-9]+"
+                                  title="Please enter a positive number" 
+                                  required
+                                  {if isset($customerMeasurements) && isset($customerMeasurements[$attribute.id])}
+                                  value="{$customerMeasurements[$attribute.id]}"
+                                  {/if}>
+                          </div>
+                          <div class="md:w-1/4 pr-4 pl-4 form-control-comment w-24">
+                              <small class="block mt-1 text-gray-700 ">{$attribute.unit}</small>
+                          </div>
+                      </div>
+                    {/foreach}
+
+                    <input type="hidden" name="current_form_id" id="current_form_id" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.id_form}">
+                    <input type="hidden" name="current_form_label" id="current_form_label" class="block appearance-none w-full py-1 px-2 mb-1 text-base leading-normal bg-white text-gray-800 border border-gray-200 rounded" value="{$currentForm.label_form}">
+                </section>
+
+                <button type="submit" class=" hover:text-white hover:no-underline px-6 py-2 bg-blue-950 disabled:bg-gray-700 text-white text-base font-light" id="submit-measurements-button">{l s='Submit' mod='thobbodymeasurements'}</button>
+
+                
+            {else}
+              <p>No form data available.</p>
+            {/if}
+              <button type="button" class="hover:text-white hover:no-underline px-6 py-2  bg-gray-700 text-white text-base font-light" id="closebutton" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+
+        <div class="tab mb-8">
+          <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
+          <label for="tab-2" class="tab-label">Mirror</label>
+
+          <div class="tab-content gap-mb-8">
+              <div class="tab-pane mb-8" id="mirror-size-measurements" role="tabpanel" aria-labelledby="mirror-size-measurements-tab">
+                  {if $qrCode}
+                  <img src="{$qrCode}" alt="Mirror Size QR Code" class="mx-auto max-w-full h-64">
+                  <p class="mt-3"> Scan the above QR code to begin our easy 2 photo custom measurement collection.</p>
+                  <p class="mt-3"> Click on 'Photos Completed' button once your above process is finished. </p>
+                  <button type="button" class=" mt-3 mb-8 inline-block text-center select-none font-normal whitespace-no-wrap  px-6 py-2 leading-normal no-underline bg-green-500 text-white hover:green-600" id="photos-completed-button" name="photos-completed-button">Photos Completed</button>
+                  <button type="button" class=" mt-3 mb-8 hover:text-white hover:no-underline px-6 py-2  bg-gray-700 text-white text-base font-light " id="closemirrorbutton" data-dismiss="modal">Close</button>
+                  {/if}
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+ 
+
+
+
+
+ 

templates/_partials/head.tpl

@@ -90,6 +90,7 @@
     })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
 </script>
 {/literal}
+
 {literal}
 <!--Start of Tawk.to Script-->
 <script type="text/javascript">
@@ -105,6 +106,16 @@ s0.parentNode.insertBefore(s1,s0);
 </script>
 <!--End of Tawk.to Script-->
 {/literal}
+
+{literal}
+<!-- Google Tag Manager -->
+<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-5RQJPSV4');</script>
+<!-- End Google Tag Manager -->
+{/literal}
 {block name='hook_header'}
   {$HOOK_HEADER nofilter}
 {/block}

templates/catalog/_partials/product-variants.tpl

@@ -26,10 +26,10 @@
   {foreach from=$groups key=id_attribute_group item=group}
     {if !empty($group.attributes)}
     <div class="clearfix product-variants-item">
-      <span class="control-label">{$group.name}</span>
+      <span class="control-label font-semibold pr-2">{$group.name}:</span>
       {if $group.group_type == 'select'}
         <select
-          class="form-control form-control-select"
+          class="form-control form-control-select p-2 w-14"
           id="group_{$id_attribute_group}"
           data-product-attribute="{$id_attribute_group}"
           name="group[{$id_attribute_group}]">

templates/checkout/_partials/cart-detailed-product-line.tpl

@@ -41,7 +41,7 @@
             <div class="modal-body flex flex-col gap-2">
               {foreach from=$customization.fields item="field"}
                 <div class="product-customization-line row">
-                  <div class="col-sm-12 col-xs-8 value">
+                  <div class="value">
                     {if $field.type == 'text'}
                       {if (int)$field.id_module}
                         {$field.text nofilter}
@@ -69,6 +69,12 @@
         {/if}
       </div>
     </div>
+     {foreach from=$product.attributes key="attribute" item="value"}
+      <div class="product-line-info font-semibold {$attribute|lower}">
+        <span class="label">{$attribute}:</span>
+        <span class="value">{$value}</span>
+      </div>
+    {/foreach}
     <div class="flex items-center font-medium w-max">
         <input
           class="js-cart-line-product-quantity text-center w-8 border-none active:ring-0 focus:ring-0"

templates/layouts/layout-both-columns.tpl

@@ -32,6 +32,10 @@
   </head>
 
   <body id="{$page.page_name}" class="{$page.body_classes|classnames}">
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5RQJPSV4"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
 
     {block name='hook_after_body_opening_tag'}
       {hook h='displayAfterBodyOpeningTag'}
@@ -80,6 +84,25 @@
         </div>
       {/block}
 
+      {if $page.page_name == 'index'}
+        <div class="flex flex-col gap-1">
+            <div class="flex gap-1">
+                <img class="w-2/5 h-full object-cover" src="https://lh3.googleusercontent.com/fife/ALs6j_FB9UOe5crDU66z5rlYXmKdv9hdok3wxiZiBDFFHEHiUCeJ40FHLeEP8LI0qaqM1Sweydq8paOiQZF2nQ-c_KBFBIR7sn1B5Is5PxTsIJNM5Zi8lRBgCgxTnYRfOFBMzX3169bop5sgM_SI52H4r87AXuAWLc6loK8L-oz7K4BvzJGh25ZwrFNC6tllrqwan9EmD7O3Er2PrJHvi783rGS7tACw5OhhbxOh0H_vK0oWNzeYoy-0e-rXPJzOifH5wnzmqzSu58xD2wJvPZwaQAUNvEcqBSrhDwGrNv4aEWqOpW1Fu1XfecDkT_Nr3nr49LTEDBCgAmkZptPLm2drbgEYs9j7-WqPnQgaVCPLEZgjEIAkFE4iGUga9OmUrRTwKfDqt-jMPXV0VALA2tQ4QbStOD_xh3rj9BeUIFqqq2ir12C0uYcy0hL8MKUKWiTBtIsovtsx740fY6sfoX7JKvn7JRb9qk3v8pZ9zto_iX8-MCe-Svsdz-sIna5Ht3Kl65nw41hfJ8oOY3QoZCqH6BH9-2FAAWEKizOtrUMXZYQdU-sdr-vJwL5k1ub6CestPV69_F-xcpygws9LQc0Af_b4JxV1C4RTcOD4sh8Viaf_nEqpHDGkomx0XJWwJMTkWUyY_stIZSSE1jx8uLpbPqeaeq2Bgfks7FYB9otNzr6lrMI_ETI0jseoZr8piuhAzSOpv4_ET7gz0vRp6yl9JkUeuvfdU-DtJrQ0MI28m77qJ6RspQSHg4QLEEO1rzKsHRkrqS5ho-aPYFq8t2Jy9Ggu7mzQbgJ1o0_cODqYU2On5-JT0nqSqD2DEoVz6ZHW_9xLkHKoyucEMTSdnmPjl-HgR0kc_kSL7H5run-NxUXkDPj9v37bFRJgaeaD2njR7wcXUtl7OhbLHUN7XYGqhlSrWvnTTUV7s9GeUSQoOWzm4l6jY3SSMbDv0Ln5S_2j7Y6fMepiJfbNOcayhbaeH0ykE4IGPgDUMNInSYrTlzHx_xCRhSinlQterCSOpd8hDXt7M_8h_wovDa18pyoUeLb4BM8DQBRXCjbpM6GBhkqyRLSN5qfxDtiZZUeaIF4PlyTiBPwiudIxwHBsAej8juevAT6N2t7Vcji2O_lwWJDgrQWsdnrKSLeONZu_PJ1SpcLF8ay7RWX6Ja7_gQe1xZeeUU2Qb-hyZAK7yj3YHZMuKon8v-i2PjyiGc2WZt-Fn2G_8bGwvp2PmukoV8Aa4cNjWcD2ONxjWEimrwv9BpTaL2pgzsz7HequQ0A94NEsdxaVkPp4vzr1_SCgoO9k80fYIzPGbUhBr8pOF9OeeJHx09Vksgt4lKYplFMrP_jdBsDa5cfE8i1Btwn-ysnOcMA7VnrVtS18daVEN0bb-moVW8G7YbAOQsmFqf7qlod8wH7Quviaz73wiek4Q6QrAHTLTWWXlcnFaqj0wmLYNegEHfcD-mdG8GELvhTtVkm_CdjsDvuaCLWyHxLPoFdL1pbvGwX53uyiDocp_GVPyd-nnr1Dpgn5RAaqmD37GIirzT4rEp7kYOIjhy3Unt4zugTixTYeAbCOxI8kmizzUTQtZgNdzhRTdwDWJzzk6ZfLUNX4vEKe1_s4=w1920-h965" alt="" />
+                <div class="w-3/5 flex flex-col gap-1">
+                  <img class="w-full h-1/2 object-cover" src="https://lh3.googleusercontent.com/fife/ALs6j_HilfOuAQHfpAsrHpanrxCzR1LZpoVlhokZ5Z10DIjE2OadGA7R42wvkvDocUPGhqcTiYNYbdbg6D66p1YhUe4UcXZcaDpaTgVVKolpjXPWd6baghyc6mL2yKDdvS6zpDjFvGsqQ2dVAb8qtC24LT2yH5vcNRcmagzDsmG3RjixFJjQAp5B9nWoA9F3xJ5YeX_oOD06-5TuH4zfRWzUpK8wjh8bdMTyh98KuNHVbhB4cHNR-p7wWOFVBe1bpgIMLLziIigazrNIyFgjc5R4PgCIyJF0G1xACEYEhQZyjKUwnjiTZEX0lg-WY4amhxYXY1SAeAppvLBzOx09Ht2tslQnjSeDoHwx4jIX5EI0s6m-BW_lELxSICInvVdxRP3l3DcFPoA8ZWpJ8j9xQ1bTUa28RWaSeKA_u8yqKN_ITd6H2j_T9jkV4gM4R3-k3Izc3U7H4kZXMxrxv_S7aWdqPkpt9rRYltTd0wXasDQlM2825qEfTIUkUvgVu0YqRQFeVGIKVBdX7rXdosYAXW_5VbxCn1sEkAh76QYADozoc0nQXuJAEY-OXLjLmSoyoICRwXSak7MHUDa7pHthKMlYqy0Wqpwik6yL24UJoUQGUQRTFAAYPG3NNDqrQy9bYwSrplT2_Cl4FsAVO2BYpyEa3IsPyzzaqvKFFK-oIn93lVROHRSuDZeO_ioKdtZmisVSKN1RKc4_NOel6xRf1ZxIA5nMsPxJsQFMQz4KxpYCzSeJIJhjjW1b4g4iDG4Kze8JEMzDNoarzUeHyK0-r3cGdpzNYZWl1dEscZq4L6niwmWq8JYHv2o9Zuh7QiDOScQGsawHzKRAkTK8vI1j90fA4FVHXcSVNdMnwQsg--sumCcJXRmblbl1FWUeipU6wRhXzER_1O--shN3TtHa_WKEfyy83sBsT9ji9eQ3CTZDlOwKtECEkDj3-OKhfZqAQ9w4x6YjnNTCQTh2RB4PRCgGjabGgHsBNDzek6Beom-5VzJ_PNSrhVB-G9tqZNLyodQHAeBX5B_7rvTha9ma4XVe3wZsR6bGmt-zHGi6klz7rxv4sifha7WNOa_kmgV5ZQEHj53wnMfqnD1XOB3LCFdVu1H9FpaiM0nUMXgUIv_zPI013alKCsL_ZiSNEb8tTt0RX0amgUX-POWUEY8gfsdEeLJMNNrD6GfAMM6XwSxX9Qnuw_IfwTgxKg5V_aXVUxLT5NPKgzRns88qdA_u4Yqz0rWon1C3bzALYv4xw0jr1oURC3XjkJ4v8JSkh9jNrIExuHK8fUEAHgTTtYUYclC7JIK53Se-fQdv5czUXXhVGZkvj-b8TZ16E9_gFD_rXFWByb8OkKSkOei69mTYLf5SGOuFvNBC8kowAKjXXxyUTUQQ5Vwxn5fSesV04H_uf4_IVp8T-ALhVqI7knN4AJPbU4H6XZFtV0PehDbThwSoIg0js2DWvJ-0pYCfL02jM7DYicpqHKqTvhjjKtLuKDi7jLDPbbbwLnVs_i41t3GpwBMIms-V256qyuXF-xw-d-DmeUWXu2o2waTLAB0KhboAT83hweIFjCMhNqT2AZtaGxFJR9J5rylKmwq-m00JhtysviQwpb96HUVGfw=w1920-h965" alt="" />      
+                  <img class="w-full h-1/2 object-cover" src="https://lh3.googleusercontent.com/fife/ALs6j_FmpCHy35X4cxpXCOXD4BLSlUMjP7NKRmxYZavFnlOwnoPEx6U1xb0RCGPl7HC8srAlcWxMAvIpkDT5KQkG_vAUEdI2gH3IZ68GvbBfOwyFqv7vFzu1k7xb4OjTbcqxBNl9-C44xEByX61jP5K8eOr9pMCg2gJ4gH6RaJjWtqLv5gVhaKnwM8nD4BaPyXRKySgKaYY37pXCaa7P0cl3D0D5CFp7WiwbakK3hwe-EFfNuj0uxKAwj0Xt15sNr9IsSKZKQd_4qHPjT8wDHDH0xmJYVL6WaT0L-Qe5N2GkOuRtXNVXk9UUmc_YI3roK4oDDqvHbMbE8FZhMrjw_91mDD3wvTv0C2C-D36kCS8FtHUBtJiKFy118mCx2w4O0IeGnEOlPACMwES-q9b_U1X75yV4LCfWh6vpFLK4C8OwSB75DcR8hpFb-L7m94HDKf4j49_g1JH_EaMCMnjVFJlQvNxjuTQzYB11P37txt3QucmSwhQexiUhjEdJFHJCmvVkJAKJO9ntpxxV6qLgwwTGIvqwxNF12mEBGoo0Tgqa2w7fCtx0YFkvSjltn_PST1yLzsUQB10HTRG5igFtzZ0z2ofjBhLY9e45lcwYsCuH_hpAS6qaPImNWiVWYBcMz2z1U3kZzBLOgld6mJbVpoAYZGVplVTFkDDjkVrPwhetatXtFr6-q4QkKSJ8yJ2Elqy0s3cIryjFoo2qJji4kwW7e0UzRktzNawuFN-FweyV0EuvSkDfwlazJmkpYeehJ2epZ6YJITO25cTo03gNRO3c8kL9iz5YoN3VQEssoPTegZ6sYWV-DjXMJ9kJZXepd-WlIFiagLJEuJdOygJjI6rdtroUs1BY58wZ_MLUCKYW8cic5f_kI6cJTgo---o_FpBuHWTjiD-iLEK2c5OVfgbqxB54VECdYsOf0cbl60AJdDXIc8eY_o19jKiOqPqXSVvacyAvf4-Eza6wGwz1fRrjI2jt6Vj8EsSJKYhI5dswVKcsWD2QvckXr5FsbM1r2gN8-DLI68-H-aA7fLmXrp4ZBGyUDP0X1-VxG2in4j8o2VByMI-Sg1fwQCMWOvhPPhUdR2_ppy8hjXUlQfbJStQfGvkEv9IgpDneiX516073_A0GQ5O1mAzb-kOKogVIsl-i8DQDzaauGJCRj589tr13AaPItEUBOSCvIxynFA0J3k67CbivYfbWHE0_fuBAZcSoGQM4mzmx3ZbJuSaDwcLN0Xw6PjOhOX9cyoRj5eJe3TWInqBKVyY8DOCrFra87W4DRyl9T1OiGD32jKEw136N2wAFJ-GnbkXJSr_Fwungwa01AsZ-HHJbA6Og3TwfNzBsuT_ZineKnlMQ-hDy0xkg0Gt4APLfZcTnFZw-_uzmyaMfBYb5KX_KQO2GvLhfyIR27tzaPj_M1NzrZVhhYjzH0oR1XxQ7wCn0AtkNdyso_P3lXPdiY9c7wLsLuh1c7p5GPMEb_BAMgjwvmQylYWSk40BLHu-0ivmXjk6hhCxUvqA9fP-zSf9UNZKpW1QTDlUx7PILgbB_9ZU1bArxjjiNEz99oQ_2ndrIz3iDOPkA0Xs97o1O4RZ7KaIpnOL7tzcg2ZxFWVhOxuI02A=w1920-h965" alt="" />                      
+                </div>
+            </div>
+            <div class="flex flex-row-reverse gap-1">
+                <img class="w-2/5 h-full object-cover" src="https://lh3.googleusercontent.com/fife/ALs6j_GWWXzH6XKo9SddmQ2B46BJwebiUs8hUJMsrQQ2TU2Ry24jvVbRl9dHAIyx-t9n8HOpIHt-_pMeunoJ3eQTE3lIPkxX2VA84LK7E1GgGlh1GGrejtthTqqQd2vNvFr4AW1cpBAlZA2pof72ni1u5fVM97Ra-BlpFIIhc4a8bdbvep0mSGXU372sPBEHEqJ4GFqSrWRY60GY83kL83-4yIC61KvLGLrSf3QM9rOroW45JTUXQSP9VVRC8UH8xCYb5x_9eG1PNgrs4vAqh_mhMMN6HAfK3ReblqQReNvpJrJwFen4UgF66sm-FNbjhQRpOx1QXIooBMKNx-7UdiQcd18nMAM01NOms3AYs_rubcsjQOGQq4SYbt9dOhKGI80bQ_bzbhB1huaeCZw9aaOA3G0YvkBeTOHlRcH0IK1th8LTCuNbpI1RnKLvR8IEoudldsXBMBn3upLBtuoErhkhnxcV-Dow5-_xQnvwv1ieVcvmY01tNJ4h-P8CJ-574_-W8QOD4_4GKl-YgGk7qUO5UTLybG4cH7237Nx1vpsXGCPd9AZpa8uJ0iOmltLkIToVG3YkoFFZGgeg7s9VoSprcsmvqhezy-nu4YnuQpFyBzN0_F6wGZm3Xqum2EwHEzhuu8peTcNBWuDrkeSJmOdaMd6feHOKfoCfDUKeB10X_lmq5llFNiWQrI5nvlFCY9T-6qAOBvCEnGnroSgfM3LHfNIiDtScvL9cWxSrtrivlG2F2ZlhI-sYrnif0vuZpxqgRmaJ4qS7wtzkf6O_7MEd6Me9uJEVMoD5WNAOjv_1c1UL0qgUMTo9tya9XSAUeiamFNTPzuV5xk_My779hVrLypNhzDQwkbDGjSLZoYBhb-amzJ9SwuL0hSJ3xsUVVt0LYSHtUBcXhIu9Ls-KH3hldgtT8MkYN63EEKO8Iv5XwCCbE2AD-Tdfm6KsznXNpdlgMMYeagHoTRi9O3LO6q8x66Giu4xOuXbEOE0MfC4dm1ojQewQZ1ckF7qTA6MpwDh4gYJK_eT6mdjkJoIqSPkwPoolYAwCy8x2ondk-skriViZR-QkI0oKXvTBIQv364GsqGeb6nuWyhTmwEwoRQBQafmTefDKWdSQ__B_hRU__GULLVUo3p5-tpKg28KfCYacUMGNSOuLvyrPtRVJ0AXWIdR_dog_dZ0qaaUQrdXMaDQSY9Zb59-TKRupAL0u1ZSW1d59nitN4TROCHjUfgzlns0aANViS1Ifn0UAJGH47balBB5ZT2yBWRb3ZGHa779wwGgmOUdiNLM4Q8RZZp-91hVs7oet6wT-4eJQr_4y2RtBNwoASl0BVfeK24YMy0QT3jsT-xJi9NW50sCrSzc8rMwbsPwOI2EjVcWmfsgfG-9y7ps6oDVw6PDrR_IpUgf-jLxTfgPTdDWO1VIUIJdMwUVIfWKcRaKskB3n-WcMptSwVSaJmtHLfWFx8n6NJ4rpaQuz5R54Cktmlf_nYYSQjkXAmnivyhImSyGnpx4buiekpu1uCbOb1BCIPDkLhbRiFi4wHHZtLe05KuMKS9iAAYjsVFN02UU5-fM3eGrcFvrjK34UBTo7V_csvCcRd_JuGt3_S5uj64Juqg=w1920-h965" alt="" />
+                <div class="w-3/5 flex flex-col gap-1">
+                  <img class="w-full h-1/2 object-cover" src="https://lh3.googleusercontent.com/fife/ALs6j_GJ3YIq4BPGXHD8sL8q0PjZ1I-t6R8dHQHpb9hASLAnyqiIdloaXRf8965zu75PCdEZICGrjNjeMAd6bPyVQ6T2SJ6XI37ZSH5CCJBjXq0z6QVWZ0DMi0YSTTecKV4iqF_0ot6A6Mcu1622KhelOxRI13xDtcXGcTfwcE7sdlfwIuc_OGIvqNoF7W7_AcLrp2xY-2XF22YCFeWv4xHE7LvfwVSaWkUPCMIVPBG-jfUxEcQFeviM4PNUY-RBg7bO64kwUYExWD-EEa4t7sovXo9DwAFqpdm-KRU9SYSPmrv4PwFW6NtCoUDCI3-CqnxtN8TnEJP1vB5Sl4w2mxmnAFg2Duk16dqOdxDiGSBanuUfbepX9RkBs3GPZfrhZItg1XRH6ZJudF09FweapRSC5NMDndNXcPW1UQ6YSJ-kXb6yH8GXnFtmamIErXtLghzJhI4Fx5EaH5vFd1ngOxIWSh55RizkPEnisOB2LYL9JEtfWSHj_fFekQW4wknJFUJZ0OupzpHQTCq2ut5rxyl7mOGtZ4Sx20YvRM7_4cZVPRCi8ZjoEnEeOVhurF9w8-mSzhlVeuVS3pLf1b2IyYYzdVX-BIyMEYxJwj4QLy8LvDdQ3LIh-ubKOlXH4X-zC_4TNmGxyXmy9QYB_mDODIkgrhkpu0PKEYMZaIGCKF_lGI4jCOd2D8o_ydgOJvt4xoQ5-e0yhZJuf7KLDq84CU6pS_fSiA05TiXUa8zIg5rOj-7bst-af-PbAjABzXgLnlrWbiEW_tY79g8dy6Xc3uWk6WbYrUpHLtqLN3EIupoLpAmR8thHItzqMbC5q85Aw86yGpec0j3Jr5I6ObqVmbCIka-HfZYe8tHjoGV_X4kcLfaK2te536nHBlXfok0dDy2P_mnF_Q25eBd2FtrSMtE3bAghjVNXrRxh18a1aRaMw1v9qayQ0szH3QVpwsmjlnle2PPKzhoLwJUBlDkv3k31Sqd8Cg2vuVGxtwE6QtXhFBy8HB5HAGXOOOc05Q41SAt8i6akU--eUteovamG5Cjg_u4x2qzhhRQ5JP7JahUJ8CFEbtzvhiMEBN4meKN0p_2IWK5ttsbop5orjyItFDXpaY0gQLOzTDogam9JNxzqm8H07-hbUq7kcRnriXThGMcipcE4yHbQVgCnGAKe8Srkwf3RVYigw8XDgv8gnBHbT1W8r-bwxmUdX0iK71bHKLrKyP8WmWfk7TeXqDjJ4Ue4jjRgTIvxs5h5zcixL6DSv8oZSIv0LeqOQpZvE3htz_fBOgdvt-OWgej9sbV06lfCiYD9eSL8zUk3DknxTDsoUUILr83IcVkgXrxsFRB4a2X49NwkO8DeawmwyRQz74i5kbGCiikuJ1Q6OHE0kieZXGyCbpPduMy79pC40MwBFKqxSas9zzdPgLPBsgvIy9eQ33DryrYoVz_-kj_EusHefXnSdNIMVb0GyS2MdcVqm79coz5a8SvjgUcQEdHtfwVdyPj5qHCRsgORufPQDhborBvIeJbo_jocpVjUtX69Mwu3uawPFdx7CEB2K4pTYSWfafMgdmX68rlq5s1nrGBZbrDSG_loRBW0QDGVnyt7NjGvnxpfrUOHa9iBcA=w1669-h965" alt="" />      
+                  <img class="w-full h-1/2 object-cover" src="https://lh3.googleusercontent.com/fife/ALs6j_Fgd41hkyZgsKLx5jNoDU2OKnqHbQs1oa7BNli3AchkRdIJA_y7hdNUOaTW1Yoz4YDT0rT_A2STUK0n5xGhB9WGUtRBahwY3sGZQpjE-boHzaL6IngCa7MIAjPa03LPmNqTb-P1QMpagMTmCWYlbqY_SNDr78PND4I9Kyhnt1m9gfn46tahm3jVS1f1rWFt6N_DzlHgPXg5pgRcQJUKMH9Bq-63wyYqy2hRIQwR76oLogBIq88jPKd1si2DNB_02I6IT6VCl9Pvs7qtavgWKBUdibSHQHo6sJMdsTz7c0iDU5WCAd67kNuq3QljnaT4hHqydo548AeLBlij2v2hLSV1AOJja89yDx_1rScNkg1fnlmNBwQ394KTB_Ve1lOoa_vhYF4pA_0CYgDfHoDffRdZmbozQ-jDgz7l56Dj-aSBXSdy_v9fCLKpjuhlAZIZGEhW-h45ZLQ45NNfKjSNGtqOe0cWZ0-uJHJ4kfMcQBMGma40__dbKCFVUvK1djE2T-obMaWFWXrgcTQZyWnJX6qycJgdK5Ml_GScgZPKRmCMTvSPAh3h6TVbocS_teWKxFlvTiMlGcRskKvVM95QBo9gZHLfE0iYmRV9QYsHoDuSPpfUSB2AV2Qk8rZWWJZz0pfxQ_30wRZcXIaWae0GpO9kHmYoHM8WHYxZejabnFtq-JRRG1dNqYYHRIlPcYQIPnqY9RtJTjqIKloTZYcRJ2R-IepH6G9XQZYRhusDN3wYaMppUOTCouuYvjSTOXSgdsSjnT8CN5BbL68KLXEVNDn3VZhAghZ9lqnsLj0kiNKQOdj6Y0tnY5t570DjEoix1LEZI6_oXC0yxREMTLxW6M9ifYnBze625cTmPM2aC7l5HR7oxVFrLoBy9lNRmvjC4z3GzTMCvmbal9QTgFWVw1SvOorCR7Zo1GYUvu-rnQ9es1bFT7BwIUVMRy3P7EW1ne8bVA6nSbFNSFVbBzR4vvKG5Pf6W0_0n4x4yasz5HDYnI0GDl2QC4IXvnxbJZFXALQ5DpyQpPsyNI1_k9LV2dGMtY4XZeFKGNgsmpmdPli865DBBHUKfKYrkUhxFx9JEGAENOgtupO2OfoZzrQOD2elnHRLKAR4H3iXlNAEJJDmD-VItv3idDhg2skiNpCCkKh37Lan-EDrTEhvpu5ATmNl1sWUmr5-NETR7APh_hYlDJphNR0DnqoQN-G1BQbftZE-VvChI_qUWzCG_vsHcT7pFBUhP74VbhCGmWYsOmU2S7nTp_5BTDPnmAaLmj2MJWwYKb-cGla8ZMfr5t8bKZjCa2UNPjcZ2LfYyxr_sv0RBgXdazwwaVBZS8uwP-jr8IYp6_y7qX6y1KDs2QnqZQNBYvwhVeZZFoNNUodtVef6ULyEIaIpzhaJEY1Edc90q3mwYCRzcKMS-jlWHonpYDHiMj3bnI63kkleDbJ1U7PYDOHopNu1K7EkMT1-n5HoVw8apd8uj9RdE6VFAGZu2B6FgpYqflq6VdemlehIY6OhgieHf5m_OEbnO6DQtUjc7iZBOt_3ItyYNE4CY4wx6qFcMpzL7ociIVul8qN6C130Dl6qGFVm2uFeC6zRv9HyPBIUFlZaxwgb4w=w1452-h965" alt="" />                      
+                </div>
+            </div>
+        </div>
+      {/if}
+
       {block name="right_column"}
         <div id="right-column" class="col-xs-12 col-sm-4 col-md-3">
           {if $page.page_name == 'product'}