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