templates/main/default/urun_gruplari_detay.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>
  23.         .navbar__section-links__wrapper :not(.PRODUCTS) {
  24.             opacity: 0.4 !important;
  25.         }
  27.         .navbar__section-logo__wrapper-img {
  28.             filter: brightness(0) invert(1) !important;
  29.         }
  31.         .navbar__section::before {
  32.             content: "";
  33.             position: absolute;
  34.             top: 0;
  35.             right: 0;
  36.             left: 0;
  37.             bottom: 0;
  38.             background: rgba(0, 0, 0, 0.4);
  39.             z-index: -1;
  41.         }
  43.         .navbar__section::after {
  44.             content: "";
  45.             /*background-image: url("../../../public/assets/main/images/navbar/navbar-bg-products.jpg");*/
  46.             background-image: url("https://elefante.com.tr/assets/navbar/navbar-bg-products.jpg");
  47.             background-position: center;
  48.             background-size: cover;
  50.             position: absolute;
  51.             top: 0;
  52.             right: 0;
  53.             left: 0;
  54.             bottom: 0;
  55.             z-index: -2;
  57.         }
  59.     </style>
  61.     <style>
  62.         {#    <header>#}
  63.         {#        <div class="header-image"><img src="{{ asset('assets/main/images/productGroups.webp') }}" alt=""></div>#}
  64.         {#        <div class="header-text">#}
  65.         {#            <a href="{{ path('app_main_default') }}">#}
  66.         {#                <div class="header-logo"><img src="{{ asset('assets/main/images/elefante.svg') }}" alt=""></div>#}
  67.         {#            </a>#}
  68.         {#            <div class="header-name"><span>{{ 'anasayfa.urungruplarikucuk'|trans }}</span></div>#}
  69.         {#            <div class="header-text-line">#}
  70.         {#                <span>SINCE</span>#}
  71.         {#                <span>1995</span>#}
  72.         {#            </div>#}
  73.         {#        </div>#}
  74.         {#    </header>#}
  76.         {#    <div id="container">#}
  77.         {#        <div class="content">#}
  78.         {#            <div class="router-url">#}
  79.         {#                <a href="{{ path('app_main_default') }}">{{ 'anasayfa'|trans }}</a> /#}
  80.         {#                <a href="{{ path('app_main_urun_gruplari') }}">{{ 'anasayfa.urungruplarikucuk'|trans }}</a>#}
  81.         {#                {% if app.request.get('link') != '' %}#}
  82.         {#                    / <a#}
  83.         {#                        href="{{ path('app_main_urun_gruplari', {'link': urunKategorileriDil.link}) }}">{{ urunKategorileriDil.baslik }}</a>#}
  84.         {#                {% endif %}#}
  85.         {#                {% if app.request.get('link2') != '' %}#}
  86.         {#                    / <a#}
  87.         {#                        href="{{ path('app_main_urun_gruplari', {'link': urunKategorileriDil.link, 'link2': urunGruplariDil.link}) }}">{{ urunGruplariDil.baslik }}</a>#}
  88.         {#                {% endif %}#}
  89.         {#            </div>#}
  91.         {#            <div class="product-groups-wrapper">#}
  92.         {#                <div class="productgroups-nav">#}
  93.         {#                    {% for uk in urunkategorileri %}#}
  94.         {#                        {% set ukDil = uk.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
  95.         {#                        <div class="productgroups-nav-item">#}
  96.         {#                            <div class="productgroups-nav-item-header border {% if app.request.get('link') == ukDil.link %}active{% endif %}">#}
  97.         {#                                <h1>{{ ukDil.baslik }} <span>({{ uk.gruplar|filter(r => r.del == 0)|length }})</span></h1>#}
  98.         {#                                <i class="rotate-i active fas fa-chevron-down"></i>#}
  99.         {#                            </div>#}
  100.         {#                            <ul class="productgroups-nav-item-content {% if app.request.get('link') == ukDil.link %}productgroups-nav-item-content-all{% endif %}">#}
  101.         {#                                {% for grup in uk.gruplar|filter(r => r.del == 0) %}#}
  102.         {#                                    {% set grupDil = grup.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
  103.         {#                                    <li>#}
  104.         {#                                        <a href="{{ path('app_main_urun_gruplari', {'link': ukDil.link, 'link2': grupDil.link}) }}"#}
  105.         {#                                           style="color: inherit;"><p>{{ grupDil.baslik }}#}
  106.         {#                                                <span>({{ grup.urunler|filter(r => r.del == 0)|length }})</span>#}
  107.         {#                                            </p>#}
  108.         {#                                        </a>#}
  109.         {#                                    </li>#}
  110.         {#                                {% endfor %}#}
  111.         {#                            </ul>#}
  112.         {#                        </div>#}
  113.         {#                    {% endfor %}#}
  114.         {#                </div>#}
  115.         {#                <div class="productgroups">#}
  116.         {#                    {% for urun in urunler %}#}
  117.         {#                        {% set urunDil = urun.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}#}
  118.         {#                        <div class="productgroup-item">#}
  119.         {#                            <div class="productgroups-drop-items">#}
  120.         {#                                <div class="productgroups-drop-item-off"><i class="bx bx-x"></i></div>#}
  121.         {#                                <div class="productgroups-drop-item">#}
  122.         {#                                    <div class="productgroups-drop-item-logo">#}
  123.         {#                                        <img src="{{ asset('assets/main/images/elefante.svg') }}" alt="">#}
  124.         {#                                    </div>#}
  125.         {#                                    <svg xmlns="http://www.w3.org/2000/svg" style="display: none">#}
  126.         {#                                        <symbol id="ei-arrow-left-icon" viewBox="0 0 50 50">#}
  127.         {#                                            <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>#}
  128.         {#                                            <path d="M25.3 34.7L15.6 25l9.7-9.7 1.4 1.4-8.3 8.3 8.3 8.3z"></path>#}
  129.         {#                                            <path d="M17 24h17v2H17z"></path>#}
  130.         {#                                        </symbol>#}
  131.         {#                                        <symbol id="ei-arrow-right-icon" viewBox="0 0 50 50">#}
  132.         {#                                            <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>#}
  133.         {#                                            <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>#}
  134.         {#                                            <path d="M16 24h17v2H16z"></path>#}
  135.         {#                                        </symbol>#}
  136.         {#                                    </svg>#}
  137.         {#                                    <div class="layout">#}
  138.         {#                                        <ul class="slider">#}
  139.         {#                                            {% for resim in urun.resimler|filter(r => r.del == 0) %}#}
  140.         {#                                                <li>#}
  141.         {#                                                    <div data-zoom="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}" class="zoom">#}
  142.         {#                                                        <img src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}" />#}
  143.         {#                                                    </div>#}
  144.         {#                                                </li>#}
  145.         {#                                            {% endfor %}#}
  146.         {#                                        </ul>#}
  147.         {#                                    </div>#}
  148.         {#                                </div>#}
  150.         {#                            <div class="productgroups-drop-item-content">#}
  151.         {#                                <h2 class="productgroups-drop-item-content-header">{{ urunDil.baslik }}</h2>#}
  152.         {#                                <h3 class="productgroups-drop-item-content-header-small">{{ urunDil.baslik }}</h3>#}
  153.         {#                                <div class="productgroups-drop-item-content-text">#}
  154.         {#                                    {{ urunDil.metin|raw }}#}
  155.         {#                                </div>#}
  156.         {#                            </div>#}
  157.         {#                            </div>#}
  158.         {#                            <div class="productgroup-item-image">#}
  159.         {#                                {% if urun.resimler|length > 0 %}#}
  160.         {#                                    <img src="{{ asset('uploads/urungruplari/urunler/' ~ urun.resimler|sort((a,b) => a.sira > b.sira)|first.resim) }}" alt="">#}
  161.         {#                                {% endif %}#}
  162.         {#                            </div>#}
  163.         {#                            <div class="productgroup-item-content">#}
  164.         {#                                <h3>{{ urunDil.baslik }}</h3>#}
  165.         {#                                <p>{{ urunDil.baslik2 }}</p>#}
  166.         {#                            </div>#}
  167.         {#                        </div>#}
  168.         {#                    {% endfor %}#}
  169.         {#                </div>#}
  170.         {#            </div>#}
  171.         {#        </div>#}
  172.         {#    </div> #}</style>
  173.     <div id="products">
  174.         {% include 'main/default/loader.html.twig' %}
  175.         {% include 'main/default/cookie.html.twig' %}
  176.         <div class="main-container">
  177.             <div class="products__section">
  178.                 <div class="products__section-active__pager">
  179.                     {% for uk in urunkategorileri %}
  180.                         {% for ukd in uk.diller %}
  181.                             <div class="products__section-active__page">
  182.                                 <p><a href="{{ path('app_main_default') }}">Elefante  </a>  / <a class="active" href="{{ path('app_main_urun_gruplari') }}">Products</a> /  <a class="active" href=""> {{ ukd.baslik }}</a></p>
  183.                             </div>
  185.                         {% endfor %}
  186.                     {% endfor %}   </div>
  187.                 <div class="products__section-description">
  188.                     {% for urunsayfasi in sayfa[1].sayfabaslikDilleri %}
  191.                         <h2>{{ urunsayfasi.baslik|raw }}</h2>
  192.                         <p>{{ urunsayfasi.title|raw }}</p>
  194.                     {% endfor %} </div>
  196.                 <div class="products__section-navbar__products">
  197.                     <div class="products__section-navbar__products-navbar">
  198.                         <ul class="controls">
  200. {#                            {% for uk in urunkategorileri %}#}
  201. {#                                {% for ukd in uk.diller %}#}
  202. {#                                    <button class="filter-1 active" onclick="kategoryClicked(this)"#}
  203. {#                                            data-filter=".{{ ukd.baslik|upper|replace({' ': '-'}) }}">#}
  204. {#                                        {{ ukd.baslik }}#}
  205. {#                                    </button>#}
  206. {#                                {% endfor %}#}
  208. {#                            {% endfor %}#}
  209.                         </ul>
  210.                     </div>
  211.                     <div class="products__section-navbar__products-products container" id="MixItUp1">
  212.                         {% for kategori in urunkategorileri %}
  213.                             {% for grup in kategori.gruplar %}
  214.                                 {% for urun in grup.urunler %}
  215.                                     {% set urunKategoriDil = urun.urungruplari.urunkategorileri.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
  216.                                     {% set ukDil = urun.diller|filter(d => d.dil.kisaBaslik == app.request.locale)|first %}
  217.                                     <div class="products__section-navbar__products-products-product mix {{ urunKategoriDil.baslik|upper|replace({' ': '-'}) }}">
  218.                                         <div class="products__section-navbar__products-products-product-img__wrapper">
  219.                                             {% for resim in urun.resimler|filter(r => r.del == 0)|slice(0, 2) %}
  220.                                                 <img src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}"
  221.                                                      alt="product-img">
  222.                                             {% endfor %}
  223.                                             <div class="products__section-navbar__products-products-product-mousetracker">
  224.                                                 <div class="products__section-navbar__products-products-product-mousetracker-x"></div>
  225.                                                 <div class="products__section-navbar__products-products-product-mousetracker-y"></div>
  226.                                             </div>
  227.                                             <template class="template">
  228.                                                 {% for resim in urun.resimler|filter(r => r.del == 0) %}
  229.                                                     <img class="imgs"
  230.                                                          src="{{ asset('uploads/urungruplari/urunler/' ~ resim.resim) }}"
  231.                                                          alt="product__img">
  232.                                                 {% endfor %}
  233.                                                 <h4 class="mini__title">{{ ukDil.baslik2|default }}</h4>
  234.                                                 <h3 class="title">{{ ukDil.baslik2|default }}</h3>
  235.                                                 <span class="size">{{ ukDil.boyut|default }}</span>
  236.                                                 <span class="weight">{{ ukDil.agirlik|default }}</span>
  237.                                                 <span class="material">{{ ukDil.materyal|default }}</span>
  238.                                             </template>
  239.                                         </div>
  240.                                         <h4>{{ urunKategoriDil.baslik|upper }}</h4>
  241.                                         <h3>{{ ukDil.baslik2|default }}</h3>
  242.                                     </div>
  243.                                 {% endfor %}
  244.                             {% endfor %}
  245.                         {% endfor %}
  246.                     </div>
  249.                     <div class="products__section-navbar__products-button__wrapper">
  250.                         <a href="{{ path('app_main_urun_gruplari') }}"><button class="products__section-navbar__products-button__wrapper-button"
  251.                                    onclick="AllProducts()" class="filter-1"
  252.                                    data-filter="all">All Products
  253.                             </button></a>
  254.                     </div>
  255.                 </div>
  256.             </div>
  257.         </div>
  260.         {% include 'main/default/new-catalogue.html.twig' %}
  261.         <div class="products__msayfabaslikl__wrapper">
  262.             <div class="products__msayfabaslikl-bg">
  263.                 <div class="products__msayfabaslikl__wrapper-title">
  264.                     <h3>White Maya Top Smocked Waist, Yoga/Harem Pants</h3>
  265.                     <div class="products__msayfabaslikl__wrapper-title-crossed__out" id="products__prossed__out">
  266.                         <div class="crossed__out-1"></div>
  267.                         <div class="crossed__out-2"></div>
  268.                     </div>
  269.                 </div>
  270.                 <div class="products__msayfabaslikl__wrapper-product__description">
  271.                     <div class="products__msayfabaslikl__wrapper-product__description-img__wrapper">
  272.                         <div class="swiper myProductsSwiper">
  273.                             <div class="swiper-wrapper">
  274.                             </div>
  275.                             <div class="products-msayfabaslikl-swiper-button-next">
  276.                                 <svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
  277.                                     <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"/>
  278.                                 </svg>
  279.                             </div>
  280.                             <div class="products-msayfabaslikl-swiper-button-prev">
  281.                                 <svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512">
  282.                                     <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"/>
  283.                                 </svg>
  284.                             </div>
  285.                         </div>
  286.                     </div>
  287.                     <div class="products__msayfabaslikl__wrapper-product__description-about__product">
  288.                         <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors_wrapper">
  289.                             <h4>Colours</h4>
  290.                             <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors">
  291.                                 <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
  292.                                     <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-1"></div>
  293.                                     <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
  294.                                         PH-ASR-BLACK</p>
  295.                                 </div>
  296.                                 <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
  297.                                     <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-2"></div>
  298.                                     <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
  299.                                         PH-ASR-BLACK</p>
  300.                                 </div>
  301.                                 <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
  302.                                     <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-3"></div>
  303.                                     <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
  304.                                         PH-ASR-BLACK</p>
  305.                                 </div>
  306.                                 <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
  307.                                     <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-4"></div>
  308.                                     <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
  309.                                         PH-ASR-BLACK</p>
  310.                                 </div>
  311.                                 <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
  312.                                     <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-5"></div>
  313.                                     <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
  314.                                         PH-ASR-BLACK</p>
  315.                                 </div>
  316.                                 <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color">
  317.                                     <div class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-circle circle-6"></div>
  318.                                     <p class="products__msayfabaslikl__wrapper-product__description-about__product-colors-color-description">
  319.                                         PH-ASR-BLACK</p>
  320.                                 </div>
  321.                             </div>
  322.                         </div>
  323.                         <div class="products__msayfabaslikl__wrapper-product__description-about__product-dimensions">
  324.                             <p>Size:<span class="msayfabaslikl-size"></span></p>
  325.                             <p>Weight:<span class="msayfabaslikl-weight"></span></p>
  326.                             <p>Material:<span class="msayfabaslikl-material"></span></p>
  329.                         </div>
  330.                         <div class="products__msayfabaslikl__wrapper-product__description-about__product-logos">
  331.                             <img src="{{ asset('uploads/ayarlar/referans/' ~ ayarlar.referans) }}"
  332.                                  alt="references-logo">
  333.                         </div>
  334.                     </div>
  335.                 </div>
  336.             </div>
  337.         </div>
  338.     </div>
  342. {% endblock %}
  344. {% block body_js %}
  345.     {% include 'main/default/scripts.html.twig' %}
  346.     <script>
  347.         const products = document.querySelectorAll(".products__section-navbar__products-products-product-img__wrapper");
  348.         const productsMsayfabaslikl = document.querySelector(".products__msayfabaslikl__wrapper");
  349.         const prossedOut = document.querySelector("#products__prossed__out");
  350.         const swiperWrapper = document.querySelector(".products__msayfabaslikl__wrapper-product__description-img__wrapper .swiper .swiper-wrapper");
  353.         function initializeSwiper() {
  354.             swiper = new Swiper(".myProductsSwiper", {
  355.                 navigation: {
  356.                     nextEl: ".products-msayfabaslikl-swiper-button-next",
  357.                     prevEl: ".products-msayfabaslikl-swiper-button-prev",
  358.                 },
  359.                 autoplay: {
  360.                     delay: 4000,
  361.                     disableOnInteraction: false,
  362.                 },
  363.                 loop: true,
  364.             });
  365.         }
  367.         initializeSwiper();
  370.         products.forEach((item, index) => {
  371.             item.addEventListener("click", () => {
  372.                 swiperWrapper.innerHTML = "";
  374.                 productsMsayfabaslikl.classList.add("active");
  375.                 document.body.style.overflow = "hidden";
  376.                 const templateEl = item.closest('.products__section-navbar__products-products-product-img__wrapper').querySelector('.template');
  379.                 if (templateEl) {
  380.                     const templateClone = document.importNode(templateEl.content, true);
  381.                     const titleEl = templateClone.querySelector(".title").textContent;
  382.                     let imgEl1 = templateClone.querySelectorAll(".imgs")[0];
  383.                     let imgEl2 = templateClone.querySelectorAll(".imgs")[1];
  384.                     let imgEl3 = templateClone.querySelectorAll(".imgs")[2];
  385.                     let imgEl4 = templateClone.querySelectorAll(".imgs")[3];
  386.                     const sizeEl = templateClone.querySelector(".size").textContent;
  387.                     const weightEl = templateClone.querySelector(".weight").textContent;
  388.                     const materialEl = templateClone.querySelector(".material").textContent;
  390.                     if (imgEl1) {
  391.                         imgEl1 = templateClone.querySelectorAll(".imgs")[0].src;
  392.                     }
  394.                     if (imgEl2) {
  395.                         imgEl2 = templateClone.querySelectorAll(".imgs")[1].src;
  396.                     }
  398.                     if (imgEl3) {
  399.                         imgEl3 = templateClone.querySelectorAll(".imgs")[2].src;
  400.                     }
  402.                     if (imgEl4) {
  403.                         imgEl4 = templateClone.querySelectorAll(".imgs")[3].src;
  404.                     }
  406.                     const imgs = templateClone.querySelectorAll(".imgs");
  409.                     imgs.forEach((imgItem) => {
  412.                         let swiperSlide = document.createElement("div");
  413.                         swiperSlide.classList.add("swiper-slide");
  415.                         let imgClone = imgItem.cloneNode(true);
  416.                         swiperSlide.appendChild(imgClone)
  418.                         swiperWrapper.appendChild(swiperSlide);
  421.                     })
  423.                     const msayfabasliklTitle = document.querySelector(".products__msayfabaslikl__wrapper-title h3");
  424.                     const msayfabasliklImg = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-img__wrapper .swiper .swiper-wrapper .swiper-slide img")[0];
  425.                     const msayfabasliklImg2 = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-img__wrapper .swiper .swiper-wrapper .swiper-slide img")[1];
  426.                     const msayfabasliklImg3 = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-img__wrapper .swiper .swiper-wrapper .swiper-slide img")[2];
  427.                     const msayfabasliklSize = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[0];
  428.                     const msayfabasliklWeight = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[1];
  429.                     const msayfabasliklMaterial = document.querySelectorAll(".products__msayfabaslikl__wrapper-product__description-about__product-dimensions span")[2];
  432.                     msayfabasliklTitle.textContent = titleEl;
  433.                     msayfabasliklSize.textContent = sizeEl;
  434.                     msayfabasliklWeight.textContent = weightEl;
  435.                     msayfabasliklMaterial.textContent = materialEl;
  438.                     // İlgili işlemleri yapın
  439.                 } else {
  440.                     console.error("Template element not found!");
  442.                 }
  443.                 swiper.destroy();
  444.                 initializeSwiper();
  447.                 swiper.update();
  448.                 swiper.slideTo(0);
  449.                 swiper.autoplay.start();
  452.             })
  453.         })
  455.         prossedOut.addEventListener("click", () => {
  456.             productsMsayfabaslikl.classList.remove("active");
  457.             document.body.style.overflow = "auto";
  458.         })
  460.         const productImgMainWrapper = document.querySelectorAll(".products__section-navbar__products-products-product-img__wrapper")
  461.         const productimgsWrapper = document.querySelectorAll(".products__section-navbar__products-products-product .products__section-navbar__products-products-product-img__wrapper img")
  464.         productImgMainWrapper.forEach((item) => {
  465.             item.addEventListener("mouseover", () => {
  466.                 const secondaryImgs = item.getElementsByTagName('img');
  467.                 const specificSecondaryImg = secondaryImgs[1];
  468.                 const specificFirstImg = secondaryImgs[0];
  470.                 if (specificSecondaryImg) {
  471.                     specificSecondaryImg.classList.add("active");
  473.                 }
  475.                 if (specificSecondaryImg) {
  476.                     specificFirstImg.classList.add("remove");
  477.                 }
  479.             })
  480.             item.addEventListener("mouseleave", () => {
  481.                 const secondaryImgs = item.getElementsByTagName('img');
  482.                 const specificSecondaryImg = secondaryImgs[1];
  483.                 const specificFirstImg = secondaryImgs[0];
  485.                 if (specificSecondaryImg) {
  486.                     specificSecondaryImg.classList.remove("active");
  488.                 }
  490.                 if (specificFirstImg) {
  491.                     specificFirstImg.classList.remove("remove");
  492.                 }
  493.             })
  496.         });
  498.     </script>
  499.     <script>
  500.         document.addEventListener("DOMContentLoaded", function () {
  501.             const pageHeight = window.innerHeight;
  502.             const msayfabasliklEl = document.querySelector(".products__msayfabaslikl-bg");
  504.             if (pageHeight < 816) {
  505.                 msayfabasliklEl.classList.add("small")
  506.             } else {
  507.                 msayfabasliklEl.classList.remove("small")
  508.             }
  510.             const contentEl = document.querySelector(".products__msayfabaslikl__wrapper-product__description-about__product");
  511.             const containerEl = document.querySelector(".products__msayfabaslikl__wrapper-product__description");
  513.             /* if (pageHeight < 800) {
  514.                 contentEl.style.overflowY = 'scroll';
  515.             } else {
  516.                 contentEl.style.overflowY = 'hidden';
  517.             } */
  518.         })
  521.     </script>
  522.     <script>
  523.         const controllerBtn = document.querySelectorAll(".products__section-navbar__products-navbar .controls button");
  524.         controllerBtn.forEach((item) => {
  525.             item.addEventListener("mouseover", () => {
  526.                 item.click();
  527.             })
  528.         })
  530.         const kategoryClicked = (button) => {
  531.             const controllerBtn = document.querySelectorAll(".products__section-navbar__products-navbar .controls button");
  532.             controllerBtn.forEach((item) => {
  534.                 item.classList.remove("active");
  535.             })
  537.             button.classList.add("active");
  538.         }
  541.         var mixer = mixitup('#MixItUp1');
  542.     </script>
  543.     <script>
  544.         function AllProducts() {
  545.             document.querySelectorAll('.filter-1').forEach(item => {
  546.                 item.classList.remove('active');
  547.             });
  548.             document.querySelector('.All').classList.add('active');
  549.         }
  550.     </script>
  551. {% endblock %}