diff --git a/README.md b/README.md index fb0ec11..898c1dd 100644 --- 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 + +``` + + +
+

Top 5 produktów

+
+ +
+
+ +
+

Nowości

+
+ +
+
+ + ``` + +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.