Update readme

2023-11-21 09:47:39 +01:00
parent 4ad676cc6f
commit 03608ed3e1
1 changed files with 84 additions and 1 deletions
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@
 ### Komponent główny ###
 CMS STANDARD RWD V3 - STANDARD 1 v3

-## Sposób użycia ##
+## Sposób użycia  Kafelki ##
 Należy w menu 5 /panel/navigation.php?action=menuTree&shop=1&tree=5&lang=pol uzupełnić interesujące nas elementy rozdzielając kategorie ramek na dwie podrzędne górną i dolna 
 Następnie należy w dwóch elementach uzupełnić id do elementu głównego i elementu dolnego

@@ -32,5 +32,88 @@ Uzupełniamy takie dane jak:
 * Grafika w menu - Włączona
 * Kiedy kursor jest poza linkiem - Uzupełniamy obrazek dla jednej wielkości dla komputerów tabletów i smartfonów

+### Sposób użycia ładowanie dynamicznie produktów z menu ###
+
+W kodzie XML mamy umieszczone kontenery (działaja na mobile) które wyświetlą nam dodatkowe produkty z menu
+
+```
+ 
+  <!-- KONTENER NA BESTSELLERY  -->
+  <div class="products__container products__container--bestseller">
+    <h1 class="products__title">Top 5 produktów</h1>
+    <div class="products__products">
+      <div class="products__product --last-link">
+        <a href="/Bestseller-sbestseller-pol.html" target="_self" title="Bestsellery">
+          <span>
+            Bestsellery
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+  <!-- KONTENER NA NOWOŚCI  -->
+  <div class="products__container products__container--news">
+    <h1 class="products__title">Nowości</h1>
+    <div class="products__products">
+      <div class="products__product --last-link">
+        <a href="/Nowosc-snewproducts-pol.html" target="_self" title="Nowości">
+          <span>
+            Nowości
+          </span>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  ```
+
+W a href podajemy linki gdzie ma nas przenosić przycisk
+Następnie w javascript wydzielonym podmnieniamy też linki z którego mają być zaciągane produkty
+
+```
+ app_shop.run(function(){
+    function getFiveProducts(url, container){
+      $.ajax({
+          type: "GET",
+          url: url,
+          success: (data)=>{
+              const parser = new DOMParser();
+              const allProducts = parser.parseFromString(data, "text/html").querySelectorAll(".product");
+              allProducts.forEach((prod, index)=>{
+                  if(index<5){
+                      prod.classList.add("products__product");
+                      prod.classList.remove("col-6");
+                      const image = prod.querySelector("img");
+                      image.className = '';
+                      
+                      image.onload = ()=>{
+                        setLastLinkHegiht(container, image.offsetHeight)
+                      }
+                      
+                      if(image.dataset.src) image.src = image.dataset.src;
+                      container.insertAdjacentElement("afterbegin", prod)
+                  } 
+              })
+          }
+      })
+    }
+  
+    const bestsellerContainer = document.querySelector(".products__container--bestseller .products__products");
+    const newsContainer = document.querySelector(".products__container--news .products__products");
+    getFiveProducts("https://tono.pl/Bestseller-sbestseller-pol.html", bestsellerContainer);
+    getFiveProducts("https://tono.pl/Nowosc-snewproducts-pol.html", newsContainer);
+   
+    window.addEventListener("resize", ()=>{
+      setLastLinkHegiht(bestsellerContainer, bestsellerContainer.querySelector(".product img").offsetHeight);
+      setLastLinkHegiht(newsContainer, newsContainer.querySelector(".product img").offsetHeight);
+    })
+    
+    function setLastLinkHegiht(container, height){
+      container.querySelector(".--last-link a").style.height = `${height}px`;
+    }
+  }, "all", ".products__container")
+
+  ```
+
 ## Autor ##
 Łukasz S.