# 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.