hotspot: setHeight + callbackFN

README.md

@@ -1,6 +1,10 @@
 # Ramki rekomendacji #
 Funkcje js składające się na customowe ramki rekomendacji
 
+## UWAGI PRZEDWDROŻENIOWE ##
+- kod zawiera app_shop.fn.idmSetHeight używany do wyrównywania wysokości
+- kod zawiera app_shop.fn.idmGetOmnibusDetails który jest przerobionym kodem idosella app_shop.fn.getOmnibusDetails używanym w zwykłych ramkach rekomendacji
+
 ### Pliki ###
 - bundle.js - całość
 - 1graphQL.js - graphQL + literały
@@ -9,7 +13,7 @@ Funkcje js składające się na customowe ramki rekomendacji
 - 4init.js - obiekt z ogólnymi ustawieniami Hotspota + init swipera
 - 5ainsertHotspotHTML.js - wstawienie ramki po kodzie html
 - 5binsertHotspotObject.js - wstawienie ramki po obiekcie js
-- 6style.js - wstawienie styli na koniec body(do przeniesienia do css komponentu)
+- 6style.css - 
 
 ### Użycie ###
 1. Wstawienie całego kodu do komponentu/dodatku
@@ -75,6 +79,45 @@ idmInsertAllHTMLHotspots();
 ```
 
 
+### LISTA GLOBALNYCH FUNKCJI, ZMIENNYCH ###
+##### INIT #####
+- priceQuery
+- productQuery
+- IDM_PRODUCTS_GQL
+- IDM_HOTSPOTS_GQL
+- IDM_PRODUCT_GQL
+- IDM_HOTSPOT_ADD_TO_BASKET
+- idmHotspotTextObject
 
+#### FUNKCJE ####
+- app_shop.fn.idmGetOmnibusDetails
+- idmHandleAddToBasket
+- idmRangeMaxAlert
+- idmRangeMinAlert
+- idmQuantityButtonClick
+- idmQuantityInputChange
+- idmGetHotspotData
+- idmGetQueryData
+- idmObserveOnce
+- app_shop.fn.idmSetHeight
+
+
+#### MARKUP ####
+- idmPrepareProductsMarkup
+- idmPrepareSingleProductMarkup
+- idmPrepareHotspotImgMarkup
+- idmPrepareHotspotPriceMarkup
+- idmPrepareHotspotAddToBasketMarkup
+
+#### INIT ####
+- idmPriceType
+- idmGeneralHotspotObjData
+- idmHotspotInit
+
+#### INSERT ####
+- idmInsertHotspotElement
+- idmInsertAllHTMLHotspots
+- idmInsertHotspotObject
+- idmInsertAllObjectHotspots
 
 Created by • **[IdoMods](https://idomods.pl/)** • 2025

bundle.js

@@ -501,6 +501,31 @@ function idmObserveOnce(element, callback, options = {  root: null, rootMargin:
 
   observer.observe(element);
 }
+
+
+////////////////////////////////////////////////
+// IDM SET HEIGHT
+app_shop.fn.idmSetHeight = options => {
+	const { selector, selectors, container } = options || {}
+	if ((!selector && !selectors) || !container) return
+
+	const containerElement = document.querySelector(container)
+	if (!containerElement) return
+
+	const adjustAllHeights = itemSelector => {
+		const targets = containerElement.querySelectorAll(itemSelector)
+		if (!targets.length) return
+
+		targets.forEach(el => (el.style.minHeight = ''))
+
+		const max = Math.max(...[...targets].map(el => el.offsetHeight || 0))
+
+		targets.forEach(el => (el.style.minHeight = `${max}px`))
+	}
+
+	if (selector) adjustAllHeights(selector)
+	if (selectors?.length) selectors.forEach(adjustAllHeights)
+}
 //////////////////////////////////////////////////////////////////////////
 // Markup
 
@@ -696,7 +721,6 @@ const idmGeneralHotspotObjData = {
     }
 }
 
-
 // Funkcja inicjalizująca wybranego hotspota(addtobasket range - swiper)
 async function idmHotspotInit(id, options={}){
   try{
@@ -799,13 +823,24 @@ async function idmHotspotInit(id, options={}){
       });
       await selectedSwiper.init();
     }
+
+
+    if(typeof options?.callbackFn === "function") options?.callbackFn();
+
+    // IDM setHeight
+    app_shop.fn.idmSetHeight({
+      selectors: [
+          `#${id} .product__prices`,
+          `#${id} .product__name`,
+      ],
+      container: `#${id} .products__wrapper`,
+  });
+    console.log(`Initialized hotspot #${id}`);
   }catch(err){
     console.error(idmHotspotTextObject["Wystąpił błąd z inicjalizacją. Proszę odśwież stronę"], err);
   }
 }
 
-console.log("init")
-
 ////////////////////////////////////////////////////
 // Funkcja init ELEMENT HTML
 async function idmInsertHotspotElement(selectedContainerEl){
@@ -1010,6 +1045,7 @@ async function idmInsertHotspotObject(idmHotspotObj){
  *    - 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
  * 
  * @type {Hotspot[]}
  */
@@ -1036,6 +1072,7 @@ async function idmInsertHotspotObject(idmHotspotObj){
 //             lazy: false,
 //             addToBasket: "range",
 //             swiper: true,
+//             callbackFn: ()=>{console.log("test")}
 //             // swiper: albo true false - albo obiekt z opcjami swipera
 //         }
 //     },

ramka.txt

@@ -6,6 +6,9 @@
 - wybór rozmiaru/wersji??
 - Wybór kolorystyczny
 - AAAAA - banner na hotspocie
+- Callback FN
+- set Height
+- Pasek jak na Pasiastym Parzystnokopytnym Kosmetyku
 
 - własne klasy
 - aplikacja do zarządania dodatkiem od obiektów hotspot
@@ -15,8 +18,15 @@ Stara ramka
 - slick
 
 
+JAK ROBIĆ CALLBACKI???
+WIELE OPCJI W STYLU PRZED SWIPEREM, PO SWIPERZE
+
+
 bramka z hotspots jeszcze nie działa bad request
 
 
 
-Get-Content 1graphQL.js,2funkcje.js,3markup.js,4init.js,5ainsertHotspotHTML.js,5binsertHotspotObject.js,6style.js | Set-Content bundle.js
+Get-Content 1graphQL.js,2funkcje.js,3markup.js,4init.js,5ainsertHotspotHTML.js,5binsertHotspotObject.js | Set-Content bundle.js
+
+
+Get-Content sklad/1graphQL.js,sklad/2funkcje.js,sklad/3markup.js,sklad/4init.js,sklad/5ainsertHotspotHTML.js,sklad/5binsertHotspotObject.js | Set-Content bundle.js