Init component
This commit is contained in:
Konrad Bolesławski
15
README.md
15
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
|
||||
```<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.
|
||||
|
||||
### What is this repository for? ###
|
||||
|
||||
1
javascript.js
Normal file
1
javascript.js
Normal file
@@ -0,0 +1 @@
|
||||
//empty
|
||||
300
less_css.less
Normal file
300
less_css.less
Normal 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
100
wydzielony_javascript.js
Normal 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
125
xml_xslt.xml
Normal 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>
|
||||
Reference in New Issue
Block a user