Init component

This commit is contained in:
Konrad Bolesławski
2023-11-21 09:27:54 +01:00
parent 312fa94b62
commit b841b84a9d
5 changed files with 541 additions and 0 deletions

View File

@@ -1,5 +1,20 @@
# README # # 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
```<iaixsl:if test="navigation5/item[@id=901]/item[@ni=902]">```
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>```
This README would normally document whatever steps are necessary to get your application up and running. This README would normally document whatever steps are necessary to get your application up and running.
### What is this repository for? ### ### What is this repository for? ###

1
javascript.js Normal file
View File

@@ -0,0 +1 @@
//empty

300
less_css.less Normal file
View File

@@ -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;
}
}

100
wydzielony_javascript.js Normal file
View File

@@ -0,0 +1,100 @@
$('#core-sg-swipe').slick({
prevArrow: '<a class="slick-prev" href=""><i class="icon-angle-left"></i></a>',
nextArrow: '<a class="slick-next" href=""><i class="icon-angle-right"></i></a>',
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")

125
xml_xslt.xml Normal file
View File

@@ -0,0 +1,125 @@
<?xml version="1.0" encoding="UTF-8"?><iai:component><iai:componentsdata><cdata-start/>
<!--CATEGRIES-->
<iaixsl:if test="navigation5/item[@id=901]/item[@ni=902]">
<div class="row mt-md-n3 px-md-3 core-sg --sec-full menu_contener_kafelki">
<iaixsl:for-each select="navigation5/item[@id=901]/item[@ni=902]/item">
<iaixsl:variable name="core_text_prim">
<iaixsl:value-of disable-output-escaping="yes" select="substring-before(concat(@name,'--'),'--')"/>
</iaixsl:variable>
<iaixsl:variable name="core_text_sec">
<iaixsl:value-of disable-output-escaping="yes" select="substring-after(@name,'--')"/>
</iaixsl:variable>
<!--<div class="col-12 col-sm-6 col-lg-3 mb-2 p-md-2 menu_kafelki">-->
<div class="col-6 col-lg-3 mb-2 p-md-2 menu_kafelki">
<a>
<iaixsl:attribute name="href"><iaixsl:value-of disable-output-escaping="yes" select="@link"/></iaixsl:attribute>
<iaixsl:attribute name="target"><![CDATA[_self]]></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="$core_text_prim"/></iaixsl:attribute>
<div class="core-sg-cat">
<img>
<iaixsl:attribute name="src"><![CDATA[/gfx/standards/loader.gif?r=1658940521]]></iaixsl:attribute>
<iaixsl:attribute name="data-src-small"><iaixsl:value-of disable-output-escaping="yes" select="@gfx"/></iaixsl:attribute>
<iaixsl:attribute name="data-src"><iaixsl:value-of disable-output-escaping="yes" select="@gfx"/></iaixsl:attribute>
<iaixsl:attribute name="alt"><iaixsl:value-of disable-output-escaping="yes" select="$core_text_prim"/></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="$core_text_prim"/></iaixsl:attribute>
<iaixsl:attribute name="class"><![CDATA[b-lazy]]></iaixsl:attribute>
</img>
<div class="core-sg-cat-footer">
<div class="core-sg-cat-footer-text">
<div class="core-sg-cat-footer-text-prim"><iaixsl:value-of disable-output-escaping="yes" select="$core_text_prim"/></div>
<div class="core-sg-cat-footer-text-sec"><iaixsl:value-of disable-output-escaping="yes" select="$core_text_sec"/></div>
</div>
</div>
</div>
</a>
</div>
</iaixsl:for-each>
</div>
</iaixsl:if>
<!--CMS13-->
<iaixsl:if test="page/text[@id='13']">
<iaixsl:for-each select="page/text[@id='13']">
<div class="cm mb-4" id="main_cms">
<iaixsl:value-of disable-output-escaping="yes" select="body"/>
</div>
</iaixsl:for-each>
</iaixsl:if>
<!--SLIDER-->
<iaixsl:if test="navigation5/item[@id=901]/item[@ni=903]">
<div id="core-sg-swipe" class="row mt-md-n3 px-md-1 core-sg-swipe">
<iaixsl:for-each select="navigation5/item[@id=901]/item[@ni=903]/item">
<iaixsl:variable name="core_text_prim">
<iaixsl:value-of disable-output-escaping="yes" select="substring-before(concat(@name,'--'),'--')"/>
</iaixsl:variable>
<iaixsl:variable name="core_text_sec">
<iaixsl:value-of disable-output-escaping="yes" select="substring-after(@name,'--')"/>
</iaixsl:variable>
<div class="">
<a>
<iaixsl:attribute name="href"><iaixsl:value-of disable-output-escaping="yes" select="@link"/></iaixsl:attribute>
<iaixsl:attribute name="target"><![CDATA[_self]]></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="$core_text_prim"/></iaixsl:attribute>
<div class="core-sg-swipe-cat mb-2 p-3 p-md-2">
<img>
<iaixsl:attribute name="data-lazy"><iaixsl:value-of disable-output-escaping="yes" select="@gfx"/></iaixsl:attribute>
<!--<iaixsl:attribute name="src"><![CDATA[/gfx/standards/loader.gif?r=1658940521]]></iaixsl:attribute>-->
<!--<iaixsl:attribute name="data-src-small"><iaixsl:value-of disable-output-escaping="yes" select="@gfx"/></iaixsl:attribute>-->
<!--<iaixsl:attribute name="data-src"><iaixsl:value-of disable-output-escaping="yes" select="@gfx"/></iaixsl:attribute>-->
<iaixsl:attribute name="alt"><iaixsl:value-of disable-output-escaping="yes" select="$core_text_prim"/></iaixsl:attribute>
<iaixsl:attribute name="title"><iaixsl:value-of disable-output-escaping="yes" select="$core_text_prim"/></iaixsl:attribute>
<!--<iaixsl:attribute name="class"><![CDATA[b-lazy]]></iaixsl:attribute>-->
</img>
<div class="core-sg-swipe-cat-jumbo">
<div class="core-sg-swipe-cat-jumbo-text">
<div class="core-sg-swipe-cat-jumbo-text-prim"><iaixsl:value-of disable-output-escaping="yes" select="$core_text_prim"/></div>
<div class="core-sg-swipe-cat-jumbo-text-sec"><iaixsl:value-of disable-output-escaping="yes" select="$core_text_sec"/></div>
</div>
</div>
</div>
</a>
</div>
</iaixsl:for-each>
</div>
</iaixsl:if>
<!-- KONTENER NA BESTSELLERY -->
<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>
<cdata-end/></iai:componentsdata></iai:component>