139 lines
4.2 KiB
Markdown
139 lines
4.2 KiB
Markdown
# README #
|
|
|
|
|
|
|
|
### Komponent główny ###
|
|
CMS STANDARD RWD V3 - STANDARD 1 v3
|
|
|
|
## 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
|
|
|
|
```<iaixsl:if test="navigation5/item[@id=901]/item[@ni=902]">```
|
|
```<iaixsl:if test="navigation5/item[@id=901]/item[@ni=903]">```
|
|
|
|
Zmieniamy id też w pętlach które znajdują się w kodzie xml
|
|
|
|
```<iaixsl:for-each select="navigation5/item[@id=901]/item[@ni=903]/item">```
|
|
|
|
Należy pamiętać że dodany jest link do statycznego pliku .gif zadbaj żeby link był poprawny
|
|
|
|
```<iaixsl:attribute name="src"><![CDATA[/gfx/standards/loader.gif?r=1658940521]]></iaixsl:attribute>```
|
|
|
|
|
|
### Menu 5 elementy ###
|
|
|
|
Uzupełniamy takie dane jak:
|
|
|
|
* Nazwa w menu - Wyświetla się na stronie głównej
|
|
* Nazwa pokazywana w nagłówku strony - wygeneruj automatycznie
|
|
* Ten element w menu jest - Linkiem do podanego URL, uzupełniamy url do jakiego ma nas przekierować
|
|
* Link otwieraj w - w tym samym oknie
|
|
* 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
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
<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>
|
|
|
|
<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.
|