Możliwość dodania opinii o produkcie

README.md

@@ -94,11 +94,11 @@ new IdmHotspot({
  * @property {string} query.string - Zapytanie w formacie GraphQL.
  * @property {Function} query.graphFn - Funkcja do pobierania danych.
  * @property {object} options - Ustawienia dla hotspotu (required).
- * @property {boolean} options.lazy - Czy wczytywać w trybie lazy.
+ * @property {boolean} [options.lazy] - Czy wczytywać w trybie lazy.
- * @property {boolean} options.devMode - Czy wczytywać ramki tylko dla stron z dev=true.
+ * @property {boolean} [options.devMode] - Czy wczytywać ramki tylko dla stron z dev=true.
- * @property {boolean} options.addToFavorites - Czy włączać dodawanie do ulubionych(DZIAŁA TYLKO PO ZMIANACH SZABLONOWYCH)
+ * @property {boolean} [options.addToFavorites] - Czy włączać dodawanie do ulubionych(DZIAŁA TYLKO PO ZMIANACH SZABLONOWYCH)
- * @property {boolean} options.addToCompare - Czy włączać dodawanie do porównywania
+ * @property {boolean} [options.addToCompare] - Czy włączać dodawanie do porównywania
- * @property {boolean|string} options.addToBasket - Obsługa koszyka:
+ * @property {boolean|string} [options.addToBasket] - Obsługa koszyka:
  *    - true = włącz
  *    - false = wyłącz
  *    - "range" = dodaj z zakresem
@@ -106,9 +106,10 @@ new IdmHotspot({
  *    - true = aktywny
  *    - false = nieaktywny
  *    - object = konfiguracja Swiper
- * @property {Function} options.callbackFn - Funkcja callback która dzieje się po wywołaniu wszystkiego włącznie ze swiperem
+ * @property {boolean} [options.swiperScrollbar] - Czy włączać scrollbar w swiperze - DO DZIAŁANIA WYMAGA WŁĄCZONEGO SWIPERA
- * @property {boolean} options.swiperScrollbar - Czy włączać scrollbar w swiperze - DO DZIAŁANIA WYMAGA WŁĄCZONEGO SWIPERA
+ * @property {Function} [options.callbackFn] - Funkcja callback która dzieje się po wywołaniu wszystkiego włącznie ze swiperem
- * @property {boolean} options.omnibusTooltip - Czy wyświetlać omnibusa w formie tooltip
+ * @property {boolean} [options.omnibusTooltip] - Czy wyświetlać omnibusa w formie tooltip
+ * @property {boolean} [options.showOpinions] - Czy wyświetlać opinie o produkcie w formie gwiazdek nad nazwą
  * 
  * @type {Hotspot[]}
  */

klasa.js

@@ -181,6 +181,10 @@ const IDM_PRODUCT_QUERY = `id
           iconSmallSecond
         }
       }
+      opinion{
+        rating,
+        count
+      }
       awardedParameters {
         name
         id
@@ -413,14 +417,20 @@ class IdmHotspot{
         devMode: false,
         callbackFn: ()=>{},
         omnibusTooltip: false,
-        // opinions: false
+        // switchImage: false,
+
+        // POKAZANIE
+        showOpinions: false,
+
         // DODAWANIE
         addToBasket: true, // true, false, "range"
         addToFavorites: false, // Wymaga zmian szablonowych
         addToCompare: false,
+
         // WYBÓR
         // selectSize: false,
         // selectVersion: false,
+
         // SWIPER
         swiper: true,
         swiperScrollbar: false,
@@ -561,6 +571,7 @@ class IdmHotspot{
               </strong>
           </a>
           <div class="product__content_wrapper">
+              ${this.markupOpinions(prod)}
               <a class="product__name" tabindex="0" href="${prod.link}" title="${prod.name}">${prod.name}</a>
               <div class="product__prices mb-auto ${prodExchangedData?.classes?.add?.reduce((acc,val) => acc + " " + val,"")}">
                   ${this.markupPrice(prod, prodExchangedData)}
@@ -641,6 +652,22 @@ class IdmHotspot{
 
       return labelMarkup;
   }
+
+  markupOpinions(prod){
+    if(!this.options?.showOpinions) return "";
+
+    return `<div class="product__opinions">
+      <div class="product__opinions_stars">
+        <i class="icon-star ${prod.opinion?.rating > 0.5 ? "--active" : ""}"></i>
+        <i class="icon-star ${prod.opinion?.rating > 1.5 ? "--active" : ""}"></i>
+        <i class="icon-star ${prod.opinion?.rating > 2.5 ? "--active" : ""}"></i>
+        <i class="icon-star ${prod.opinion?.rating > 3.5 ? "--active" : ""}"></i>
+        <i class="icon-star ${prod.opinion?.rating > 4.5 ? "--active" : ""}"></i>
+      </div>
+      <span class="product__opinions_score">${prod.opinion.rating.toFixed(2)} / 5.00</span>
+    </div>`
+  }
+
   markupPrice(prod, prodExchangedData){
       const price = prod.price.price[this.priceType];
       const unit = prod.unit;

ramka.txt

@@ -8,6 +8,7 @@
 - opinie
 - podmiana zdjęcia na hover
 - stary szablon
+- cena za kg
 
 
 

style.less

@@ -172,4 +172,19 @@
   &:not(.--success):hover {
     opacity: 0.6;
   }
+}
+
+
+/* opinions */
+.product__opinions{
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+.product__opinions .icon-star{
+  color: #ffbc00;
+}
+.product__opinions .icon-star:not(.--active)::before{
+  content: "\f006";
 }