From b841b84a9d69430dcd57c74aaa08a35c70202bc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Konrad=20Boles=C5=82awski?= Date: Tue, 21 Nov 2023 09:27:54 +0100 Subject: [PATCH] Init component --- README.md | 15 ++ javascript.js | 1 + less_css.less | 300 +++++++++++++++++++++++++++++++++++++++ wydzielony_javascript.js | 100 +++++++++++++ xml_xslt.xml | 125 ++++++++++++++++ 5 files changed, 541 insertions(+) create mode 100644 javascript.js create mode 100644 less_css.less create mode 100644 wydzielony_javascript.js create mode 100644 xml_xslt.xml diff --git a/README.md b/README.md index 39af52c..6a5a861 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,20 @@ # README # + + +### Komponent główny ### +CMS STANDARD RWD V3 - STANDARD 1 v3 + +## Sposób użycia ## +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 +`````` + +Należy pamiętać że dodany jest link do statycznego pliku .gif zadbaj żeby link był poprawny + +`````` + + This README would normally document whatever steps are necessary to get your application up and running. ### What is this repository for? ### diff --git a/javascript.js b/javascript.js new file mode 100644 index 0000000..b766412 --- /dev/null +++ b/javascript.js @@ -0,0 +1 @@ +//empty \ No newline at end of file diff --git a/less_css.less b/less_css.less new file mode 100644 index 0000000..78a8887 --- /dev/null +++ b/less_css.less @@ -0,0 +1,300 @@ +.menu_contener_kafelki { + display: flex; + justify-content: center; + } + .menu_kafelki { + max-width: 500px; + } + + .--sec-full{ + width: 100vw; + margin-left: -50vw; + left: 50%; + position: relative; + } + + // CAT-S + .core-sg-cat { + position: relative; + display: flex; + justify-content: center; + align-items: center; + min-height:300px; + + @media(min-width: 979px){ + min-height:540px; + } + @media(min-width: 1200px){ + min-height:300px; + } + + img { + border-radius: 10px; + } + + &-footer { + position: absolute; + bottom: 0; + left: 0; + right: 0; + + &-text { + position: relative; + color: #fff; + padding: 50px; + + &:before{ + content: "\F105"; + font-family: FontAwesome; + font-weight: normal; + font-style: normal; + text-decoration: inherit; + -webkit-font-smoothing: antialiased; + font-size: 3rem; + + position: absolute; + top: 50%; + right: 50px; + transform: translateY(-50%); + } + + &-prim { + font-size: 2.4rem; + font-weight: bold; + } + } + } + } + + // SWIPE + .core-sg-swipe-cat { + position: relative; + text-align: center; + + img { + border-radius: 10px; + } + + &-jumbo { + position: absolute; + bottom: 45%; + left: 0; + right: 0; + + &-text { + position: relative; + color: #fff; + padding: 50px; + + &-prim { + font-size: 4rem; + font-weight: bold; + } + } + } + } + + // HOVER // + .core-sg a, + .core-sg-swipe a{ + .core-sg-cat-footer, + .core-sg-swipe-cat-jumbo, + img{ + transition: all 0.5s ease-in-out; + } + + &:hover{ + .core-sg-cat-footer, + .core-sg-swipe-cat-jumbo{ + transform: translateY(-10px); + } + img{ + filter: brightness(0.5); + } + } + } + + + .products__container{ + display: none; + } + // Mobile + @media (max-width: 756px){ + #main_banner1{ + display: none; + } + .menu_contener_kafelki{ + padding: 0 1rem; + display: grid!important; + grid-template-columns: 1fr 1fr!important; + grid-template-rows: 1fr 1fr!important; + margin-top: 1rem; + .menu_kafelki{ + padding-left: 0.5rem!important; + padding-right: 0.5rem!important; + a{ + height: 100%; + display: inline-block; + .core-sg-cat{ + min-height: auto; + overflow: hidden; + height: 100%; + border-radius: 10px; + img{ + transform: scale(1.3); + } + } + } + .core-sg-cat-footer-text{ + padding: 10px; + &::before{ + right: 10%; + } + .core-sg-cat-footer-text-prim{ + font-size: 3rem; + } + .core-sg-cat-footer-text-sec{ + font-size: 2rem; + } + } + + &:last-child{ + order: -1; + a{ + overflow: hidden; + border-radius: 10px; + } + img{ + transform: scale(1.05); + } + } + } + } + + #core-sg-swipe{ + .slick-slide{ + transition: all 0.3s; + } + .slick-slide[aria-hidden="true"]{ + opacity: 0.2; + } + .slick-slide[aria-hidden="false"]{ + opacity: 1; + } + } + .core-sg-swipe-cat img{ + object-fit: cover; + width: 260px; + height: 300px; + } + .core-sg-swipe-cat-jumbo{ + bottom: 28%; + left: -2%; + } + .core-sg-swipe-cat-jumbo-text-prim{ + font-size: 3rem; + } + + .products__container{ + display: block; + .products__title{ + text-align: center; + color: #000; + font-size: 2.8rem; + margin-bottom: 3rem; + } + .products__products{ + display: grid; + grid-template-columns: 50% 50%; + gap: 1rem; + .product__icon{ + min-height: auto; + picture{ + display: flex; + } + } + .--last-link{ + a{ + text-decoration: none; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #CCC; + border-radius: 15px; + span{ + font-size: 1.6rem; + display: flex; + align-items: center; + gap: 0.8rem; + &::after{ + content: "\F105"; + font-family: FontAwesome; + font-size: 3rem; + margin-top: -0.2rem; + } + } + } + } + } + + .product{ + width: auto!important; + .product-core-wrapper.m-2{ + margin:0!important; + } + .product-core-wrapper{ + display: flex; + flex-direction: column; + } + .label_icons{ + gap: 0.5rem; + padding-bottom: 0.5rem!important; + } + .product__sizes { + order: 10; + display: flex; + gap: 0.5rem; + } + } + } + .products__container--bestseller{ + padding-bottom: 2rem; + margin-bottom: 3rem; + border-bottom: 1px solid #CCC; + .products__title{ + margin-top: 2rem; + } + } + } + @media (max-width: 650px){ + .core-sg-cat-footer-text-prim{ + font-size: 2.4rem!important; + } + .core-sg-cat-footer-text-sec{ + font-size: 1.6rem!important; + } + } + @media (max-width: 500px){ + .core-sg-swipe-cat img{ + width: 130px; + height: 150px; + } + .core-sg-swipe-cat-jumbo-text { + padding: 0; + } + .core-sg-cat-footer-text-prim{ + font-size: 2rem!important; + } + .core-sg-cat-footer-text-sec{ + font-size: 1.2rem!important; + } + + .core-sg-swipe-cat-jumbo{ + bottom: 50%; + left: 0; + transform: translateY(50%); + } + .core-sg-swipe-cat-jumbo-text-prim{ + font-size: 1.6rem; + } + } \ No newline at end of file diff --git a/wydzielony_javascript.js b/wydzielony_javascript.js new file mode 100644 index 0000000..dc149b5 --- /dev/null +++ b/wydzielony_javascript.js @@ -0,0 +1,100 @@ +$('#core-sg-swipe').slick({ + prevArrow: '', + nextArrow: '', + dotsClass: 'hotspot__dots', + lazyLoad: 'ondemand', + arrows: true, + // dots: true, + dots: false, + infinite: false, + slidesToShow: 3, + slidesToScroll: 1, + responsive: [{ + breakpoint: 1200, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + }, + }, + { + breakpoint: 979, + settings: { + slidesToShow: 2, + slidesToScroll: 2, + }, + }, + { + breakpoint: 757, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + swipeToSlide: true, + variableWidth: true, + // centerMode: true, + // centerPadding: '24vw', + // dots: false, + }, + }, + // { + // breakpoint: 550, + // settings: { + // slidesToShow: 1, + // slidesToScroll: 1, + // swipeToSlide: true, + // // centerMode: false, + // // centerPadding: '18vw', + // // dots: false, + // }, + // } + ], + }); + + app_shop.run(function(){ + if(app_shop.vars.view === 1){ + const tonoClub = document.querySelector("#main_banner1 .main_slider__item").innerHTML + const lastKafelek = document.querySelector(".menu_contener_kafelki").lastChild; + lastKafelek.innerHTML = tonoClub + } + }, "all", ".menu_contener_kafelki") + + 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") \ No newline at end of file diff --git a/xml_xslt.xml b/xml_xslt.xml new file mode 100644 index 0000000..641c731 --- /dev/null +++ b/xml_xslt.xml @@ -0,0 +1,125 @@ + + + + +
+ + + + + + + + + + +
+ + + + + +
+ + + + + + + + + + +
+
+
+
+
+
+
+ +
+ +
+ + + + + +
+ +
+ + + + + + + + + +
+

Top 5 produktów

+
+
+ + + Bestsellery + + +
+
+
+ +
+

Nowości

+
+
+ + + Nowości + + +
+
+
+ + \ No newline at end of file