From 62d401aa83ff1fec5cb6a0f2d89fb9be818049ea Mon Sep 17 00:00:00 2001
From: "pawel.gaca" <pawel.gaca@brandsmanago.pl>
Date: Fri, 14 Nov 2025 12:56:55 +0100
Subject: [PATCH] =?UTF-8?q?Mo=C5=BCliwo=C5=9B=C4=87=20dodania=20opinii=20o?=
 =?UTF-8?q?=20produkcie?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md  | 17 +++++++++--------
 klasa.js   | 29 ++++++++++++++++++++++++++++-
 ramka.txt  |  1 +
 style.less | 15 +++++++++++++++
 4 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index e8e068d..7b77d12 100644
--- a/README.md
+++ b/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.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.addToCompare - Czy włączać dodawanie do porównywania
- * @property {boolean|string} options.addToBasket - Obsługa koszyka:
+ * @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.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|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.omnibusTooltip - Czy wyświetlać omnibusa w formie tooltip
+ * @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.showOpinions] - Czy wyświetlać opinie o produkcie w formie gwiazdek nad nazwą
  * 
  * @type {Hotspot[]}
  */
diff --git a/klasa.js b/klasa.js
index 220c1af..46a374f 100644
--- a/klasa.js
+++ b/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;
diff --git a/ramka.txt b/ramka.txt
index eb6f9fe..7a660ef 100644
--- a/ramka.txt
+++ b/ramka.txt
@@ -8,6 +8,7 @@
 - opinie
 - podmiana zdjęcia na hover
 - stary szablon
+- cena za kg
 
 
 
diff --git a/style.less b/style.less
index 84a1e13..d335fa2 100644
--- a/style.less
+++ b/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";
 }
\ No newline at end of file