TH-204: Meraki > Js errors show up as notification alerts

themes/meraki/assets/main.js

@@ -452,3 +452,44 @@ async function trackVariantQuantityOnCart(selectedVariantId) {
     stopLoad('#loading__cart');
   }
 }
+
+/**
+ * Fetching the total number of reviews for a specific product and displaying the average rating
+ *
+ * @param {string} productId - The product id.
+ * @param {HTMLElement} closetParent - the colsest parent of the element.
+ * @param {number} averageRating - the rating number of the product.
+ */
+async function fetchReviewsForProduct(productId, closetParent, averageRating) {
+  const generalReviewsContainers = document.querySelectorAll(`${closetParent} .yc-general-review`);
+  const generalReviewsWrappers = document.querySelectorAll(`${closetParent} .yc-general-review-wrapper`);
+  const reviewButton = document.querySelector('#addReviewBtn');
+
+  if (!generalReviewsContainers.length || !generalReviewsWrappers.length) {
+    return;
+  }
+
+  const noDataSetter = () => {
+    generalReviewsContainers.forEach(container => container.remove());
+  };
+
+  try {
+    const totalReviews = await youcanjs.product.fetchReviews(productId).data();
+
+    generalReviewsContainers.forEach(container => container.style.display = 'block');
+    generalReviewsWrappers.forEach(wrapper => wrapper.innerHTML = `
+      <li class='rating-stars'>
+        <div class="yc-reviews-stars" style="--rating: ${averageRating};" aria-label="Rating of this product is ${averageRating} out of 5" role="img"></div>
+      </li>
+      <li class='general-count'>
+        (${totalReviews?.length} ${ratings})
+      </li>
+    `);
+
+    if(reviewButton) {
+      reviewButton.style.display = 'block';
+    }
+  } catch (error) {
+    noDataSetter();
+  }
+};

themes/meraki/assets/product-column.css

@@ -1,21 +1,6 @@
 .product-home-container{
   padding:0 20px;
 }
-@media (min-width: 768px){
-  .product-home-container{
-    padding:0 50px;
-  }
-}
-@media (min-width: 992px){
-  .product-home-container{
-    padding:0 100px;
-  }
-}
-@media (min-width: 1400px){
-  .product-home-container{
-    padding:0 280px;
-  }
-}
 .product-home-container .product-block{
   display:flex;
   justify-content:center;

themes/meraki/assets/product.js

@@ -193,7 +193,7 @@ function disableActionButtons(el, isStockOut) {
     element.disabled = isStockOut;
 
     if (isStockOut) {
-      element.innerHTML = TRANSLATED_TEXT.empty_inventory;
+      element.innerHTML = ADD_TO_CART_EXPECTED_ERRORS.empty_inventory;
     } else {
       element.innerHTML = element.getAttribute('data-text');
     }
@@ -208,7 +208,9 @@ function disableActionButtons(el, isStockOut) {
 function forceResetQuantityInput(parentSection) {
   const quantityInput = parentSection.querySelector('.quantity-input');
 
-  quantityInput.value = 1;
+  if(quantityInput) {
+    quantityInput.value = 1;
+  }
 }
 
 /**

themes/meraki/snippets/add-to-cart.liquid

@@ -42,8 +42,5 @@
 </div>
 
 {% javascript %}
-  const TRANSLATED_TEXT = {
-    empty_inventory: "{{ 'errors.empty_inventory' | t }}"
-  }
   const IS_CART_SKIPED = Boolean("{{ skip_cart }}");
 {% endjavascript %}

themes/meraki/snippets/general-review.liquid

@@ -3,5 +3,3 @@
 <div class='yc-general-review'>
   <ul class='yc-general-review-wrapper'></ul>
 </div>
-
-{{ 'reviews-count.js' | asset_url | script_tag_deferred }}

themes/meraki/snippets/product-home.liquid

@@ -49,3 +49,12 @@
     </div>
   </div>
 </div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const homePageProductId = '{{ product_id }}';
+    const parentContainer = '.product-home';
+
+    fetchReviewsForProduct(homePageProductId, parentContainer, {{ product.averageRating }});
+  });
+</script>

themes/meraki/styles/product-column.scss

@@ -3,18 +3,6 @@
 .product-home-container {
   padding: 0 20px;
 
-  @include breakpoint('md') {
-    padding: 0 50px;
-  }
-
-  @include breakpoint('lg') {
-    padding: 0 100px;
-  }
-
-  @include breakpoint('xxl') {
-    padding: 0 280px;
-  }
-
   .product-block {
     display: flex;
     justify-content: center;