{% extends 'main_base.html.twig' %}
{% block title %}
{% if app.request.get('link') == '' and app.request.get('link2') == '' %}
{{ 'anasayfa.urungruplarikucuk'|trans }}
{% elseif app.request.get('link2') != '' %}
{{ urunGruplariDil.baslik }}
{% elseif app.request.get('link') != '' %}
{{ urunKategorileriDil.baslik }}
{% endif %}
{% endblock %}
{% block description %}
{% if app.request.get('link') == '' and app.request.get('link2') == '' %}
{{ 'anasayfa.urungruplarikucuk'|trans }}
{% elseif app.request.get('link2') != '' %}
{{ urunGruplariDil.baslik }}
{% elseif app.request.get('link') != '' %}
{{ urunKategorileriDil.baslik }}
{% endif %}
{% endblock %}
{% block content %}
<style>
.navbar__section-links__wrapper :not(.PRODUCTS) {
opacity: 0.4 !important;
}
.navbar__section-logo__wrapper-img {
filter: brightness(0) invert(1) !important;
}
.navbar__section::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
z-index: -1;
}
.navbar__section::after {
content: "";
background-image: url("../../../public/assets/main/images/navbar/navbar-bg-products.jpg");
background-position: center;
background-size: cover;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -2;
}
</style>
<style>
{# <header>#}
{# <div class="header-image"><img src="{{ asset('assets/main/images/productGroups.webp') }}" alt=""></div>#}
{# <div class="header-text">#}
{# <a href="{{ path('app_main_default') }}">#}
{# <div class="header-logo"><img src="{{ asset('assets/main/images/elefante.svg') }}" alt=""></div>#}
{# </a>#}
{# <div class="header-name"><span>{{ 'anasayfa.urungruplarikucuk'|trans }}</span></div>#}
{# <div class="header-text-line">#}
{# <span>SINCE</span>#}
{# <span>1995</span>#}
{# </div>#}
{# </div>#}
{# </header>#}
{# <div id="container">#}
{# <div class="content">#}
{# <div class="router-url">#}
{# <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }}</a> /#}
{# <a href="{{ path('app_main_urun_gruplari') }}">{{ 'anasayfa.urungruplarikucuk'|trans }}</a>#}
{# {% if app.request.get('link') != '' %}#}
{# / <a#}
{# href="{{ path('app_main_urun_gruplari', {'link': urunKategorileriDil.link}) }}">{{ urunKategorileriDil.baslik }}</a>#}
{# {% endif %}#}
{# {% if app.request.get('link2') != '' %}#}
{# / <a#}
{# href="{{ path('app_main_urun_gruplari', {'link': urunKategorileriDil.link, 'link2': urunGruplariDil.link}) }}">{{ urunGruplariDil.baslik }}</a>#}
{# {% endif %}#}
{# </div>#}
{# <div class="product-groups-wrapper">#}
{# <div class="productgroups-nav">#}
{# {% for uk in urunkategorileri %}#}
{# {% set ukDil = uk.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
{# <div class="productgroups-nav-item">#}
{# <div class="productgroups-nav-item-header border {% if app.request.get('link') == ukDil.link %}active{% endif %}">#}
{# <h1>{{ ukDil.baslik }} <span>({{ uk.gruplar|filter(r => r.del == 0)|length }})</span></h1>#}
{# <i class="rotate-i active fas fa-chevron-down"></i>#}
{# </div>#}
{# <ul class="productgroups-nav-item-content {% if app.request.get('link') == ukDil.link %}productgroups-nav-item-content-all{% endif %}">#}
{# {% for grup in uk.gruplar|filter(r => r.del == 0) %}#}
{# {% set grupDil = grup.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
{# <li>#}
{# <a href="{{ path('app_main_urun_gruplari', {'link': ukDil.link, 'link2': grupDil.link}) }}"#}
{# style="color: inherit;"><p>{{ grupDil.baslik }}#}
{# <span>({{ grup.urunler|filter(r => r.del == 0)|length }})</span>#}
{# </p>#}
{# </a>#}
{# </li>#}
{# {% endfor %}#}
{# </ul>#}
{# </div>#}
{# {% endfor %}#}
{# </div>#}
{# <div class="productgroups">#}
{# {% for urun in urunler %}#}
{# {% set urunDil = urun.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
{# <div class="productgroup-item">#}
{# <div class="productgroups-drop-items">#}
{# <div class="productgroups-drop-item-off"><i class="bx bx-x"></i></div>#}
{# <div class="productgroups-drop-item">#}
{# <div class="productgroups-drop-item-logo">#}
{# <img src="{{ asset('assets/main/images/elefante.svg') }}" alt="">#}
{# </div>#}
{# <svg xmlns="http://www.w3.org/2000/svg" style="display: none">#}
{# <symbol id="ei-arrow-left-icon" viewBox="0 0 50 50">#}
{# <path d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z"></path>#}
{# <path d="M25.3 34.7L15.6 25l9.7-9.7 1.4 1.4-8.3 8.3 8.3 8.3z"></path>#}
{# <path d="M17 24h17v2H17z"></path>#}
{# </symbol>#}
{# <symbol id="ei-arrow-right-icon" viewBox="0 0 50 50">#}
{# <path d="M25 42c-9.4 0-17-7.6-17-17S15.6 8 25 8s17 7.6 17 17-7.6 17-17 17zm0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15 15-6.7 15-15-6.7-15-15-15z"></path>#}
{# <path d="M24.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"></path>#}
{# <path d="M16 24h17v2H16z"></path>#}
{# </symbol>#}
{# </svg>#}
{# <div class="layout">#}
{# <ul class="slider">#}
{# {% for resim in urun.resimler|filter(r => r.del == 0) %}#}
{# <li>#}
{# <div data-zoom="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}" class="zoom">#}
{# <img src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}" />#}
{# </div>#}
{# </li>#}
{# {% endfor %}#}
{# </ul>#}
{# </div>#}
{# </div>#}
{# <div class="productgroups-drop-item-content">#}
{# <h2 class="productgroups-drop-item-content-header">{{ urunDil.baslik }}</h2>#}
{# <h3 class="productgroups-drop-item-content-header-small">{{ urunDil.baslik }}</h3>#}
{# <div class="productgroups-drop-item-content-text">#}
{# {{ urunDil.metin|raw }}#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="productgroup-item-image">#}
{# {% if urun.resimler|length > 0 %}#}
{# <img src="{{ asset('uploads/urungruplari/urunler/' ~ urun.resimler|sort((a,b) => a.sira > b.sira)|first.resim) }}" alt="">#}
{# {% endif %}#}
{# </div>#}
{# <div class="productgroup-item-content">#}
{# <h3>{{ urunDil.baslik }}</h3>#}
{# <p>{{ urunDil.baslik2 }}</p>#}
{# </div>#}
{# </div>#}
{# {% endfor %}#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div> #}</style>
<div id="products">
{% include 'main/default/loader.html.twig' %}
{% include 'main/default/cookie.html.twig' %}
<div class="main-container">
<div class="products__section">
<div class="products__section-active__page">
<p><a href="https://technoone.net/elefante/">Elefante </a> / <a class="active"
href="https://technoone.net/elefante/products">Products</a>
</p>
</div>
<div class="products__section-description">
{% for urunsayfasi in sayfa[0].sayfabaslikDilleri %}
<h2>{{ urunsayfasi.baslik|raw }}</h2>
<p>{{ urunsayfasi.title|raw }}</p>
{% endfor %}
</div>
<div class="products__section-navbar__products">
<div class="products__section-navbar__products-navbar">
<ul class="controls">
<button class="filter-1 active All" onclick="kategoryClicked(this)" data-filter="all">ALL
</button>
{% for kategori in urunkategorileri|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
{% for kategoriler in kategori.diller %}
<button class="filter-1" onclick="kategoryClicked(this)"
data-filter=".{{ kategoriler.baslik|upper|replace({ '½': '-', '/': '-', '%': '-','&': '-', ' ': '-', '/\W+/': '-' }) }}">
{{ kategoriler.baslik }}
</button>
{% endfor %}
{% endfor %}
</ul>
</div>
<div class="products__section-navbar__products-products container" id="MixItUp1">
{% for kategori in urunkategorileri|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
{% for kategoriDil in kategori.diller|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
{% for grup in kategori.gruplar|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
{% for urunler in grup.urunler|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
{% for urunlerDil in urunler.diller|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
<div class="products__section-navbar__products-products-product mix {{ kategoriDil.baslik|upper|replace({ '½': '-', '%': '-','&': '-', ' ': '-', '/\W+/': '-' }) }}">
<div class="products__section-navbar__products-products-product-img__wrapper">
{% for resim in urunler.resimler|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira)|slice(0, 2) %}
<img src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}"
alt="product-img">
{% endfor %}
<div class="products__section-navbar__products-products-product-mousetracker">
<div class="products__section-navbar__products-products-product-mousetracker-x"></div>
<div class="products__section-navbar__products-products-product-mousetracker-y"></div>
</div>
<template class="template">
{% for resim in urunler.resimler|filter(r => r.del == 0) %}
<img class="imgs"
src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}"
alt="product__img">
{% endfor %}
<h4 class="mini__title">{{ urunlerDil.baslik2|default }}</h4>
<h3 class="title">{{ urunlerDil.baslik2|default }}</h3>
<span class="size">{{ urunlerDil.boyut|default }}</span>
<span class="weight">{{ urunlerDil.agirlik|default }}</span>
<span class="metin">{{ urunlerDil.metin|default|raw }}</span>
<span class="material">{{ urunlerDil.materyal|default }}</span>
<span class="colorname1">{{ urunlerDil.renkAd1|default }}</span>
<span class="colorkod1">{{ urunlerDil.renkKod1|default }}</span>
<span class="colorname2">{{ urunlerDil.renkAd2|default }}</span>
<span class="colorkod2">{{ urunlerDil.renkKod2|default }}</span>
<span class="colorname3">{{ urunlerDil.renkAd3|default }}</span>
<span class="colorkod3">{{ urunlerDil.renkKod3|default }}</span>
<span class="colorname4">{{ urunlerDil.renkAd4|default }}</span>
<span class="colorkod4">{{ urunlerDil.renkKod4|default }}</span>
<span class="colorname5">{{ urunlerDil.renkAd5|default }}</span>
<span class="colorkod5">{{ urunlerDil.renkKod5|default }}</span>
<span class="colorname6">{{ urunlerDil.renkAd6|default }}</span>
<span class="colorkod6">{{ urunlerDil.renkKod6|default }}</span>
</template>
</div>
<h4>{{ kategoriDil.baslik|upper }}</h4>
<h3>{{ urunlerDil.baslik|default }}</h3>
</div>
{% endfor %}
{% endfor %}
{% endfor %}
{% endfor %}
{% endfor %}
</div>
<div class="products__section-navbar__products-button__wrapper">
<button class="products__section-navbar__products-button__wrapper-button"
onclick="AllProducts()" class="filter-1"
data-filter="all">All Products
</button>
</div>
</div>
</div>
</div>
{% include 'main/default/new-catalogue.html.twig' %}
<div class="products__msayfabaslikl__wrapper">
<div class="products__msayfabaslikl-bg">
<div class="products__msayfabaslikl__wrapper-title">
<h3>White Maya Top Smocked Waist, Yoga/Harem Pants</h3>
<div class="products__msayfabaslikl__wrapper-title-crossed__out" id="products__prossed__out">
<div class="crossed__out-1"></div>
<div class="crossed__out-2"></div>
</div>
</div>
<div class="products__msayfabaslikl__wrapper-product__description">
<div class="products__msayfabaslikl__wrapper-product__description-img__wrapper">
<div class="swiper myProductsSwiper">
<div class="swiper-wrapper">
</div>
<div class="products-msayfabaslikl-swiper-button-next">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
<path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/>
</svg>
</div>
<div class="products-msayfabaslikl-swiper-button-prev">
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
<path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/>
</svg>
</div>
</div>
</div>
<div class="products__msayfabaslikl__wrapper-product__description-about__product">
<div class="products__msayfabaslikl__wrapper-product__description-about__product-colors_wrapper">
<h4>Colours</h4>
<div class="products__msayfabaslikl__wrapper-product__description-about__product-colors">
</div>
</div>
<div class="products__msayfabaslikl__wrapper-product__description-about__product-dimensions">
<p>Size:<span class="msayfabaslikl-size"></span></p>
<p>Weight:<span class="msayfabaslikl-weight"></span></p>
<p>Material:<span class="msayfabaslikl-material"></span></p>
<p>Description:<span class="msayfabaslikl-metin"></span></p>
</div>
<div class="products__msayfabaslikl__wrapper-product__description-about__product-logos">
<img src="{{ asset('uploads/ayarlar/referans/' ~ ayarlar.referans) }}"
alt="references-logo">
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block body_js %}
{% include 'main/default/scripts.html.twig' %}
<script>
const products = document.querySelectorAll(".products__section-navbar__products-products-product-img__wrapper");
const productsMsayfabaslikl = document.querySelector(".products__msayfabaslikl__wrapper");
const prossedOut = document.querySelector("#products__prossed__out");
const swiperWrapper = document.querySelector(".products__msayfabaslikl__wrapper-product__description-img__wrapper .swiper .swiper-wrapper");
function initializeSwiper() {
swiper = new Swiper(".myProductsSwiper", {
navigation: {
nextEl: ".products-msayfabaslikl-swiper-button-next",
prevEl: ".products-msayfabaslikl-swiper-button-prev",
},
autoplay: {
delay: 4000,
disableOnInteraction: false,
},
loop: true,
});
}
initializeSwiper();
products.forEach((item, index) => {
item.addEventListener("click", () => {
swiperWrapper.innerHTML = "";
productsMsayfabaslikl.classList.add("active");
document.body.style.overflow = "hidden";
const templateEl = item.closest('.products__section-navbar__products-products-product-img__wrapper').querySelector('.template');
if (templateEl) {
const templateClone = document.importNode(templateEl.content, true);
const titleEl = templateClone.querySelector(".title").textContent;
const sizeEl = templateClone.querySelector(".size").textContent;
const weightEl = templateClone.querySelector(".weight").textContent;
const materialEl = templateClone.querySelector(".material").textContent;
const metinlEl = templateClone.querySelector(".metin").textContent;
const imgs = templateClone.querySelectorAll(".imgs");
imgs.forEach((imgItem) => {
let swiperSlide = document.createElement("div");
swiperSlide.classList.add("swiper-slide");
let imgClone = imgItem.cloneNode(true);
swiperSlide.appendChild(imgClone);
swiperWrapper.appendChild(swiperSlide);
});
const msayfabasliklTitle = document.querySelector(".products__msayfabaslikl__wrapper-title h3");
const msayfabasliklSize = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[0];
const msayfabasliklWeight = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[1];
const msayfabasliklMaterial = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[2];
const msayfabasliklMetin = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[3];
msayfabasliklTitle.textContent = titleEl;
msayfabasliklSize.textContent = sizeEl;
msayfabasliklWeight.textContent = weightEl;
msayfabasliklMaterial.textContent = materialEl;
msayfabasliklMetin.textContent = metinlEl;
// Renkleri aktar
const colorsModal = document.querySelector(".products__msayfabaslikl__wrapper-product__description-about__product-colors");
colorsModal.innerHTML = ''; // Önceki renkleri temizle
const colorNames = templateClone.querySelectorAll("[class^='colorname']");
const colorCodes = templateClone.querySelectorAll("[class^='colorkod']");
colorNames.forEach((colorName, index) => {
const colorNameText = colorName.textContent;
const colorCodeText = colorCodes[index].textContent;
const colorItem = document.createElement("div");
colorItem.classList.add("products__msayfabaslikl__wrapper-product__description-about__product-colors-color");
const colorCircle = document.createElement("div");
colorCircle.classList.add("products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle");
colorCircle.style.backgroundColor = colorCodeText;
const colorDescription = document.createElement("p");
colorDescription.classList.add("products__modal__wrapper-product__description-about__product-colors-color-description");
colorDescription.textContent = colorNameText;
colorItem.appendChild(colorCircle);
colorItem.appendChild(colorDescription);
colorsModal.appendChild(colorItem);
});
} else {
console.error("Template element not found!");
}
swiper.destroy();
initializeSwiper();
swiper.update();
swiper.slideTo(0);
swiper.autoplay.start();
});
});
prossedOut.addEventListener("click", () => {
productsMsayfabaslikl.classList.remove("active");
document.body.style.overflow = "auto";
})
const productImgMainWrapper = document.querySelectorAll(".products__section-navbar__products-products-product-img__wrapper")
const productimgsWrapper = document.querySelectorAll(".products__section-navbar__products-products-product .products__section-navbar__products-products-product-img__wrapper img")
productImgMainWrapper.forEach((item) => {
item.addEventListener("mouseover", () => {
const secondaryImgs = item.getElementsByTagName('img');
const specificSecondaryImg = secondaryImgs[1];
const specificFirstImg = secondaryImgs[0];
if (specificSecondaryImg) {
specificSecondaryImg.classList.add("active");
}
if (specificSecondaryImg) {
specificFirstImg.classList.add("remove");
}
})
item.addEventListener("mouseleave", () => {
const secondaryImgs = item.getElementsByTagName('img');
const specificSecondaryImg = secondaryImgs[1];
const specificFirstImg = secondaryImgs[0];
if (specificSecondaryImg) {
specificSecondaryImg.classList.remove("active");
}
if (specificFirstImg) {
specificFirstImg.classList.remove("remove");
}
})
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const pageHeight = window.innerHeight;
const msayfabasliklEl = document.querySelector(".products__msayfabaslikl-bg");
if (pageHeight < 816) {
msayfabasliklEl.classList.add("small")
} else {
msayfabasliklEl.classList.remove("small")
}
const contentEl = document.querySelector(".products__msayfabaslikl__wrapper-product__description-about__product");
const containerEl = document.querySelector(".products__msayfabaslikl__wrapper-product__description");
/* if (pageHeight < 800) {
contentEl.style.overflowY = 'scroll';
} else {
contentEl.style.overflowY = 'hidden';
} */
})
</script>
<script>
const controllerBtn = document.querySelectorAll(".products__section-navbar__products-navbar .controls button");
controllerBtn.forEach((item) => {
item.addEventListener("mouseover", () => {
item.click();
})
})
const kategoryClicked = (button) => {
const controllerBtn = document.querySelectorAll(".products__section-navbar__products-navbar .controls button");
controllerBtn.forEach((item) => {
item.classList.remove("active");
})
button.classList.add("active");
}
var mixer = mixitup('#MixItUp1');
</script>
<script>
function AllProducts() {
document.querySelectorAll('.filter-1').forEach(item => {
item.classList.remove('active');
});
document.querySelector('.All').classList.add('active');
}
</script>
{% endblock %}