templates/main/default/urun_gruplari.html.twig line 1

Open in your IDE?
  1. {% extends 'main_base.html.twig' %}
  2. {% block title %}
  3.     {% if app.request.get('link') == '' and app.request.get('link2') == '' %}
  4.         {{ 'anasayfa.urungruplarikucuk'|trans }}
  5.     {% elseif app.request.get('link2') != '' %}
  6.         {{ urunGruplariDil.baslik }}
  7.     {% elseif app.request.get('link') != '' %}
  8.         {{ urunKategorileriDil.baslik }}
  9.     {% endif %}
  10. {% endblock %}
  11. {% block description %}
  12.     {% if app.request.get('link') == '' and app.request.get('link2') == '' %}
  13.         {{ 'anasayfa.urungruplarikucuk'|trans }}
  14.     {% elseif app.request.get('link2') != '' %}
  15.         {{ urunGruplariDil.baslik }}
  16.     {% elseif app.request.get('link') != '' %}
  17.         {{ urunKategorileriDil.baslik }}
  18.     {% endif %}
  19. {% endblock %}
  20. {% block content %}
  21.     <style>
  22.         .navbar__section-links__wrapper :not(.PRODUCTS) {
  23.             opacity: 0.4 !important;
  24.         }
  25.         .navbar__section-logo__wrapper-img {
  26.             filter: brightness(0) invert(1) !important;
  27.         }
  28.         .navbar__section::before {
  29.             content: "";
  30.             position: absolute;
  31.             top: 0;
  32.             right: 0;
  33.             left: 0;
  34.             bottom: 0;
  35.             background: rgba(0, 0, 0, 0.4);
  36.             z-index: -1;
  37.         }
  38.         .navbar__section::after {
  39.             content: "";
  40.             background-image: url("../../../public/assets/main/images/navbar/navbar-bg-products.jpg");
  41.             background-position: center;
  42.             background-size: cover;
  43.             position: absolute;
  44.             top: 0;
  45.             right: 0;
  46.             left: 0;
  47.             bottom: 0;
  48.             z-index: -2;
  49.         }
  50.     </style>
  51.     <style>
  52.         {#    <header>#}
  53.         {#        <div class="header-image"><img src="{{ asset('assets/main/images/productGroups.webp') }}" alt=""></div>#}
  54.         {#        <div class="header-text">#}
  55.         {#            <a href="{{ path('app_main_default') }}">#}
  56.         {#                <div class="header-logo"><img src="{{ asset('assets/main/images/elefante.svg') }}" alt=""></div>#}
  57.         {#            </a>#}
  58.         {#            <div class="header-name"><span>{{ 'anasayfa.urungruplarikucuk'|trans }}</span></div>#}
  59.         {#            <div class="header-text-line">#}
  60.         {#                <span>SINCE</span>#}
  61.         {#                <span>1995</span>#}
  62.         {#            </div>#}
  63.         {#        </div>#}
  64.         {#    </header>#}
  65.         {#    <div id="container">#}
  66.         {#        <div class="content">#}
  67.         {#            <div class="router-url">#}
  68.         {#                <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }}</a> /#}
  69.         {#                <a href="{{ path('app_main_urun_gruplari') }}">{{ 'anasayfa.urungruplarikucuk'|trans }}</a>#}
  70.         {#                {% if app.request.get('link') != '' %}#}
  71.         {#                    / <a#}
  72.         {#                        href="{{ path('app_main_urun_gruplari', {'link': urunKategorileriDil.link}) }}">{{ urunKategorileriDil.baslik }}</a>#}
  73.         {#                {% endif %}#}
  74.         {#                {% if app.request.get('link2') != '' %}#}
  75.         {#                    / <a#}
  76.         {#                        href="{{ path('app_main_urun_gruplari', {'link': urunKategorileriDil.link, 'link2': urunGruplariDil.link}) }}">{{ urunGruplariDil.baslik }}</a>#}
  77.         {#                {% endif %}#}
  78.         {#            </div>#}
  79.         {#            <div class="product-groups-wrapper">#}
  80.         {#                <div class="productgroups-nav">#}
  81.         {#                    {% for uk in urunkategorileri %}#}
  82.         {#                        {% set ukDil = uk.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
  83.         {#                        <div class="productgroups-nav-item">#}
  84.         {#                            <div class="productgroups-nav-item-header border {% if app.request.get('link') == ukDil.link %}active{% endif %}">#}
  85.         {#                                <h1>{{ ukDil.baslik }} <span>({{ uk.gruplar|filter(r => r.del == 0)|length }})</span></h1>#}
  86.         {#                                <i class="rotate-i active fas fa-chevron-down"></i>#}
  87.         {#                            </div>#}
  88.         {#                            <ul class="productgroups-nav-item-content {% if app.request.get('link') == ukDil.link %}productgroups-nav-item-content-all{% endif %}">#}
  89.         {#                                {% for grup in uk.gruplar|filter(r => r.del == 0) %}#}
  90.         {#                                    {% set grupDil = grup.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
  91.         {#                                    <li>#}
  92.         {#                                        <a href="{{ path('app_main_urun_gruplari', {'link': ukDil.link, 'link2': grupDil.link}) }}"#}
  93.         {#                                           style="color: inherit;"><p>{{ grupDil.baslik }}#}
  94.         {#                                                <span>({{ grup.urunler|filter(r => r.del == 0)|length }})</span>#}
  95.         {#                                            </p>#}
  96.         {#                                        </a>#}
  97.         {#                                    </li>#}
  98.         {#                                {% endfor %}#}
  99.         {#                            </ul>#}
  100.         {#                        </div>#}
  101.         {#                    {% endfor %}#}
  102.         {#                </div>#}
  103.         {#                <div class="productgroups">#}
  104.         {#                    {% for urun in urunler %}#}
  105.         {#                        {% set urunDil = urun.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
  106.         {#                        <div class="productgroup-item">#}
  107.         {#                            <div class="productgroups-drop-items">#}
  108.         {#                                <div class="productgroups-drop-item-off"><i class="bx bx-x"></i></div>#}
  109.         {#                                <div class="productgroups-drop-item">#}
  110.         {#                                    <div class="productgroups-drop-item-logo">#}
  111.         {#                                        <img src="{{ asset('assets/main/images/elefante.svg') }}" alt="">#}
  112.         {#                                    </div>#}
  113.         {#                                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">#}
  114.         {#                                        <symbol id="ei-arrow-left-icon" viewBox="0 0 50 50">#}
  115.         {#                                            <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>#}
  116.         {#                                            <path d="M25.3 34.7L15.6 25l9.7-9.7 1.4 1.4-8.3 8.3 8.3 8.3z"></path>#}
  117.         {#                                            <path d="M17 24h17v2H17z"></path>#}
  118.         {#                                        </symbol>#}
  119.         {#                                        <symbol id="ei-arrow-right-icon" viewBox="0 0 50 50">#}
  120.         {#                                            <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>#}
  121.         {#                                            <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>#}
  122.         {#                                            <path d="M16 24h17v2H16z"></path>#}
  123.         {#                                        </symbol>#}
  124.         {#                                    </svg>#}
  125.         {#                                    <div class="layout">#}
  126.         {#                                        <ul class="slider">#}
  127.         {#                                            {% for resim in urun.resimler|filter(r => r.del == 0) %}#}
  128.         {#                                                <li>#}
  129.         {#                                                    <div data-zoom="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}" class="zoom">#}
  130.         {#                                                        <img src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}" />#}
  131.         {#                                                    </div>#}
  132.         {#                                                </li>#}
  133.         {#                                            {% endfor %}#}
  134.         {#                                        </ul>#}
  135.         {#                                    </div>#}
  136.         {#                                </div>#}
  137.         {#                            <div class="productgroups-drop-item-content">#}
  138.         {#                                <h2 class="productgroups-drop-item-content-header">{{ urunDil.baslik }}</h2>#}
  139.         {#                                <h3 class="productgroups-drop-item-content-header-small">{{ urunDil.baslik }}</h3>#}
  140.         {#                                <div class="productgroups-drop-item-content-text">#}
  141.         {#                                    {{ urunDil.metin|raw }}#}
  142.         {#                                </div>#}
  143.         {#                            </div>#}
  144.         {#                            </div>#}
  145.         {#                            <div class="productgroup-item-image">#}
  146.         {#                                {% if urun.resimler|length > 0 %}#}
  147.         {#                                    <img src="{{ asset('uploads/urungruplari/urunler/' ~ urun.resimler|sort((a,b) => a.sira > b.sira)|first.resim) }}" alt="">#}
  148.         {#                                {% endif %}#}
  149.         {#                            </div>#}
  150.         {#                            <div class="productgroup-item-content">#}
  151.         {#                                <h3>{{ urunDil.baslik }}</h3>#}
  152.         {#                                <p>{{ urunDil.baslik2 }}</p>#}
  153.         {#                            </div>#}
  154.         {#                        </div>#}
  155.         {#                    {% endfor %}#}
  156.         {#                </div>#}
  157.         {#            </div>#}
  158.         {#        </div>#}
  159.         {#    </div> #}</style>
  160.     <div id="products">
  161.         {% include 'main/default/loader.html.twig' %}
  162.         {% include 'main/default/cookie.html.twig' %}
  163.         <div class="main-container">
  164.             <div class="products__section">
  165.                 <div class="products__section-active__page">
  166.                     <p><a href="https://technoone.net/elefante/">Elefante </a> / <a class="active"
  167.                                                                                     href="https://technoone.net/elefante/products">Products</a>
  168.                     </p>
  169.                 </div>
  170.                 <div class="products__section-description">
  171.                     {% for urunsayfasi in sayfa[0].sayfabaslikDilleri %}
  172.                         <h2>{{ urunsayfasi.baslik|raw }}</h2>
  173.                         <p>{{ urunsayfasi.title|raw }}</p>
  174.                     {% endfor %}
  175.                 </div>
  176.                 <div class="products__section-navbar__products">
  177.                     <div class="products__section-navbar__products-navbar">
  178.                         <ul class="controls">
  179.                             <button class="filter-1 active All" onclick="kategoryClicked(this)" data-filter="all">ALL
  180.                             </button>
  181.                             {% for kategori in urunkategorileri|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
  182.                                 {% for kategoriler in kategori.diller %}
  183.                                     <button class="filter-1" onclick="kategoryClicked(this)"
  184.                                             data-filter=".{{ kategoriler.baslik|upper|replace({ '½': '-', '/': '-', '%': '-','&': '-', ' ': '-', '/\W+/': '-' }) }}">
  185.                                         {{ kategoriler.baslik }}
  186.                                     </button>
  187.                                 {% endfor %}
  188.                             {% endfor %}
  189.                         </ul>
  190.                     </div>
  191.                     <div class="products__section-navbar__products-products container" id="MixItUp1">
  192.                         {% for kategori in urunkategorileri|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
  193.                             {% for kategoriDil in kategori.diller|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
  194.                                 {% for grup in kategori.gruplar|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
  195.                                     {% for urunler in grup.urunler|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
  196.                                         {% for urunlerDil in urunler.diller|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira) %}
  197.                                             <div class="products__section-navbar__products-products-product mix {{ kategoriDil.baslik|upper|replace({ '½': '-', '%': '-','&': '-', ' ': '-', '/\W+/': '-' }) }}">
  198.                                                 <div class="products__section-navbar__products-products-product-img__wrapper">
  199.                                                     {% for resim in urunler.resimler|filter(r => r.del == 0)|sort((a,b) => a.sira > b.sira)|slice(0, 2) %}
  200.                                                         <img src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}"
  201.                                                              alt="product-img">
  202.                                                     {% endfor %}
  203.                                                     <div class="products__section-navbar__products-products-product-mousetracker">
  204.                                                         <div class="products__section-navbar__products-products-product-mousetracker-x"></div>
  205.                                                         <div class="products__section-navbar__products-products-product-mousetracker-y"></div>
  206.                                                     </div>
  207.                                                     <template class="template">
  208.                                                         {% for resim in urunler.resimler|filter(r => r.del == 0) %}
  209.                                                             <img class="imgs"
  210.                                                                  src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}"
  211.                                                                  alt="product__img">
  212.                                                         {% endfor %}
  213.                                                         <h4 class="mini__title">{{ urunlerDil.baslik2|default }}</h4>
  214.                                                         <h3 class="title">{{ urunlerDil.baslik2|default }}</h3>
  215.                                                         <span class="size">{{ urunlerDil.boyut|default }}</span>
  216.                                                         <span class="weight">{{ urunlerDil.agirlik|default }}</span>
  217.                                                         <span class="metin">{{ urunlerDil.metin|default|raw }}</span>
  218.                                                         <span class="material">{{ urunlerDil.materyal|default }}</span>
  219.                                                         <span class="colorname1">{{ urunlerDil.renkAd1|default }}</span>
  220.                                                         <span class="colorkod1">{{ urunlerDil.renkKod1|default }}</span>
  221.                                                         <span class="colorname2">{{ urunlerDil.renkAd2|default }}</span>
  222.                                                         <span class="colorkod2">{{ urunlerDil.renkKod2|default }}</span>
  223.                                                         <span class="colorname3">{{ urunlerDil.renkAd3|default }}</span>
  224.                                                         <span class="colorkod3">{{ urunlerDil.renkKod3|default }}</span>
  225.                                                         <span class="colorname4">{{ urunlerDil.renkAd4|default }}</span>
  226.                                                         <span class="colorkod4">{{ urunlerDil.renkKod4|default }}</span>
  227.                                                         <span class="colorname5">{{ urunlerDil.renkAd5|default }}</span>
  228.                                                         <span class="colorkod5">{{ urunlerDil.renkKod5|default }}</span>
  229.                                                         <span class="colorname6">{{ urunlerDil.renkAd6|default }}</span>
  230.                                                         <span class="colorkod6">{{ urunlerDil.renkKod6|default }}</span>
  231.                                                     </template>
  232.                                                 </div>
  233.                                                 <h4>{{ kategoriDil.baslik|upper }}</h4>
  234.                                                 <h3>{{ urunlerDil.baslik|default }}</h3>
  235.                                             </div>
  236.                                         {% endfor %}
  237.                                     {% endfor %}
  238.                                 {% endfor %}
  239.                             {% endfor %}
  240.                         {% endfor %}
  241.                     </div>
  242.                     <div class="products__section-navbar__products-button__wrapper">
  243.                         <button class="products__section-navbar__products-button__wrapper-button"
  244.                                 onclick="AllProducts()" class="filter-1"
  245.                                 data-filter="all">All Products
  246.                         </button>
  247.                     </div>
  248.                 </div>
  249.             </div>
  250.         </div>
  251.         {% include 'main/default/new-catalogue.html.twig' %}
  252.         <div class="products__msayfabaslikl__wrapper">
  253.             <div class="products__msayfabaslikl-bg">
  254.                 <div class="products__msayfabaslikl__wrapper-title">
  255.                     <h3>White Maya Top Smocked Waist, Yoga/Harem Pants</h3>
  256.                     <div class="products__msayfabaslikl__wrapper-title-crossed__out" id="products__prossed__out">
  257.                         <div class="crossed__out-1"></div>
  258.                         <div class="crossed__out-2"></div>
  259.                     </div>
  260.                 </div>
  261.                 <div class="products__msayfabaslikl__wrapper-product__description">
  262.                     <div class="products__msayfabaslikl__wrapper-product__description-img__wrapper">
  263.                         <div class="swiper myProductsSwiper">
  264.                             <div class="swiper-wrapper">
  265.                             </div>
  266.                             <div class="products-msayfabaslikl-swiper-button-next">
  267.                                 <svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
  268.                                     <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"/>
  269.                                 </svg>
  270.                             </div>
  271.                             <div class="products-msayfabaslikl-swiper-button-prev">
  272.                                 <svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
  273.                                     <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"/>
  274.                                 </svg>
  275.                             </div>
  276.                         </div>
  277.                     </div>
  278.                     <div class="products__msayfabaslikl__wrapper-product__description-about__product">
  279.                         <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors_wrapper">
  280.                             <h4>Colours</h4>
  281.                                 <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors">
  282.                                 </div>
  283.                         </div>
  284.                         <div class="products__msayfabaslikl__wrapper-product__description-about__product-dimensions">
  285.                             <p>Size:<span class="msayfabaslikl-size"></span></p>
  286.                             <p>Weight:<span class="msayfabaslikl-weight"></span></p>
  287.                             <p>Material:<span class="msayfabaslikl-material"></span></p>
  288.                             <p>Description:<span class="msayfabaslikl-metin"></span></p>
  289.                         </div>
  290.                         <div class="products__msayfabaslikl__wrapper-product__description-about__product-logos">
  291.                             <img src="{{ asset('uploads/ayarlar/referans/' ~ ayarlar.referans) }}"
  292.                                  alt="references-logo">
  293.                         </div>
  294.                     </div>
  295.                 </div>
  296.             </div>
  297.         </div>
  298.     </div>
  299. {% endblock %}
  300. {% block body_js %}
  301.     {% include 'main/default/scripts.html.twig' %}
  302.     <script>
  303.         const products = document.querySelectorAll(".products__section-navbar__products-products-product-img__wrapper");
  304.         const productsMsayfabaslikl = document.querySelector(".products__msayfabaslikl__wrapper");
  305.         const prossedOut = document.querySelector("#products__prossed__out");
  306.         const swiperWrapper = document.querySelector(".products__msayfabaslikl__wrapper-product__description-img__wrapper .swiper .swiper-wrapper");
  307.         function initializeSwiper() {
  308.             swiper = new Swiper(".myProductsSwiper", {
  309.                 navigation: {
  310.                     nextEl: ".products-msayfabaslikl-swiper-button-next",
  311.                     prevEl: ".products-msayfabaslikl-swiper-button-prev",
  312.                 },
  313.                 autoplay: {
  314.                     delay: 4000,
  315.                     disableOnInteraction: false,
  316.                 },
  317.                 loop: true,
  318.             });
  319.         }
  320.         initializeSwiper();
  321.         products.forEach((item, index) => {
  322.             item.addEventListener("click", () => {
  323.                 swiperWrapper.innerHTML = "";
  324.                 productsMsayfabaslikl.classList.add("active");
  325.                 document.body.style.overflow = "hidden";
  326.                 const templateEl = item.closest('.products__section-navbar__products-products-product-img__wrapper').querySelector('.template');
  327.                 if (templateEl) {
  328.                     const templateClone = document.importNode(templateEl.content, true);
  329.                     const titleEl = templateClone.querySelector(".title").textContent;
  330.                     const sizeEl = templateClone.querySelector(".size").textContent;
  331.                     const weightEl = templateClone.querySelector(".weight").textContent;
  332.                     const materialEl = templateClone.querySelector(".material").textContent;
  333.                     const metinlEl = templateClone.querySelector(".metin").textContent;
  334.                     const imgs = templateClone.querySelectorAll(".imgs");
  335.                     imgs.forEach((imgItem) => {
  336.                         let swiperSlide = document.createElement("div");
  337.                         swiperSlide.classList.add("swiper-slide");
  338.                         let imgClone = imgItem.cloneNode(true);
  339.                         swiperSlide.appendChild(imgClone);
  340.                         swiperWrapper.appendChild(swiperSlide);
  341.                     });
  342.                     const msayfabasliklTitle = document.querySelector(".products__msayfabaslikl__wrapper-title h3");
  343.                     const msayfabasliklSize = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[0];
  344.                     const msayfabasliklWeight = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[1];
  345.                     const msayfabasliklMaterial = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[2];
  346.                     const msayfabasliklMetin = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[3];
  347.                     msayfabasliklTitle.textContent = titleEl;
  348.                     msayfabasliklSize.textContent = sizeEl;
  349.                     msayfabasliklWeight.textContent = weightEl;
  350.                     msayfabasliklMaterial.textContent = materialEl;
  351.                     msayfabasliklMetin.textContent = metinlEl;
  352.                     // Renkleri aktar
  353.                     const colorsModal = document.querySelector(".products__msayfabaslikl__wrapper-product__description-about__product-colors");
  354.                     colorsModal.innerHTML = ''; // Önceki renkleri temizle
  355.                     const colorNames = templateClone.querySelectorAll("[class^='colorname']");
  356.                     const colorCodes = templateClone.querySelectorAll("[class^='colorkod']");
  357.                     colorNames.forEach((colorName, index) => {
  358.                         const colorNameText = colorName.textContent;
  359.                         const colorCodeText = colorCodes[index].textContent;
  360.                         const colorItem = document.createElement("div");
  361.                         colorItem.classList.add("products__msayfabaslikl__wrapper-product__description-about__product-colors-color");
  362.                         const colorCircle = document.createElement("div");
  363.                         colorCircle.classList.add("products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle");
  364.                         colorCircle.style.backgroundColor = colorCodeText;
  365.                         const colorDescription = document.createElement("p");
  366.                         colorDescription.classList.add("products__modal__wrapper-product__description-about__product-colors-color-description");
  367.                         colorDescription.textContent = colorNameText;
  368.                         colorItem.appendChild(colorCircle);
  369.                         colorItem.appendChild(colorDescription);
  370.                         colorsModal.appendChild(colorItem);
  371.                     });
  372.                 } else {
  373.                     console.error("Template element not found!");
  374.                 }
  375.                 swiper.destroy();
  376.                 initializeSwiper();
  377.                 swiper.update();
  378.                 swiper.slideTo(0);
  379.                 swiper.autoplay.start();
  380.             });
  381.         });
  382.         prossedOut.addEventListener("click", () => {
  383.             productsMsayfabaslikl.classList.remove("active");
  384.             document.body.style.overflow = "auto";
  385.         })
  386.         const productImgMainWrapper = document.querySelectorAll(".products__section-navbar__products-products-product-img__wrapper")
  387.         const productimgsWrapper = document.querySelectorAll(".products__section-navbar__products-products-product .products__section-navbar__products-products-product-img__wrapper img")
  388.         productImgMainWrapper.forEach((item) => {
  389.             item.addEventListener("mouseover", () => {
  390.                 const secondaryImgs = item.getElementsByTagName('img');
  391.                 const specificSecondaryImg = secondaryImgs[1];
  392.                 const specificFirstImg = secondaryImgs[0];
  393.                 if (specificSecondaryImg) {
  394.                     specificSecondaryImg.classList.add("active");
  395.                 }
  396.                 if (specificSecondaryImg) {
  397.                     specificFirstImg.classList.add("remove");
  398.                 }
  399.             })
  400.             item.addEventListener("mouseleave", () => {
  401.                 const secondaryImgs = item.getElementsByTagName('img');
  402.                 const specificSecondaryImg = secondaryImgs[1];
  403.                 const specificFirstImg = secondaryImgs[0];
  404.                 if (specificSecondaryImg) {
  405.                     specificSecondaryImg.classList.remove("active");
  406.                 }
  407.                 if (specificFirstImg) {
  408.                     specificFirstImg.classList.remove("remove");
  409.                 }
  410.             })
  411.         });
  412.     </script>
  413.     <script>
  414.         document.addEventListener("DOMContentLoaded", function () {
  415.             const pageHeight = window.innerHeight;
  416.             const msayfabasliklEl = document.querySelector(".products__msayfabaslikl-bg");
  417.             if (pageHeight < 816) {
  418.                 msayfabasliklEl.classList.add("small")
  419.             } else {
  420.                 msayfabasliklEl.classList.remove("small")
  421.             }
  422.             const contentEl = document.querySelector(".products__msayfabaslikl__wrapper-product__description-about__product");
  423.             const containerEl = document.querySelector(".products__msayfabaslikl__wrapper-product__description");
  424.             /* if (pageHeight < 800) {
  425.                 contentEl.style.overflowY = 'scroll';
  426.             } else {
  427.                 contentEl.style.overflowY = 'hidden';
  428.             } */
  429.         })
  430.     </script>
  431.     <script>
  432.         const controllerBtn = document.querySelectorAll(".products__section-navbar__products-navbar .controls button");
  433.         controllerBtn.forEach((item) => {
  434.             item.addEventListener("mouseover", () => {
  435.                 item.click();
  436.             })
  437.         })
  438.         const kategoryClicked = (button) => {
  439.             const controllerBtn = document.querySelectorAll(".products__section-navbar__products-navbar .controls button");
  440.             controllerBtn.forEach((item) => {
  441.                 item.classList.remove("active");
  442.             })
  443.             button.classList.add("active");
  444.         }
  445.         var mixer = mixitup('#MixItUp1');
  446.     </script>
  447.     <script>
  448.         function AllProducts() {
  449.             document.querySelectorAll('.filter-1').forEach(item => {
  450.                 item.classList.remove('active');
  451.             });
  452.             document.querySelector('.All').classList.add('active');
  453.         }
  454.     </script>
  455. {% endblock %}