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.