templates/mens/category/category.twig line 1

  2. {% extends 'mens/base/base_mens.twig' %}
  4. {% block head %}
  5.     {# {{ encore_entry_link_tags('app_product') }} #}
  6.     {# {% include 'front_end/product/styles.html.twig' %} #}
  7.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  9.     <meta name="viewport" content="width=device-width,initial-scale=1">
  10.     <meta name="description" content="multikart">
  11.     <meta name="keywords" content="multikart">
  12.     <meta name="author" content="multikart">
  13.     <link rel="icon" href="{{ asset('assets/images/favicon/1.png') }}" type="image/x-icon">
  14.     <link rel="shortcut icon" href="{{ asset('assets/images/favicon/1.png') }}" type="image/x-icon">
  15.     <title>SELECTWEARS</title>
  17.     <!--Google font-->
  18.     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
  19.     <link rel="preconnect" href="https://fonts.gstatic.com">
  20.     <link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
  22.     <!--Slick slider css-->
  23.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/slick.css') }}">
  24.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/slick-theme.css')}}">
  26.     <!-- Animate icon -->
  27.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
  29.     <!-- Themify icon -->
  30.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/themify-icons.css') }}">
  32.     <!-- Bootstrap css -->
  33.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/bootstrap.css') }}">
  35.     <!-- Theme css -->
  36.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style.css') }}">
  38.     <!-- Icons -->
  39.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  41.     {# <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/font-awesome.css') }}"> #}
  43.         <!-- Price range icon -->
  44.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/price-range.css') }}">
  45.     <style>
  46.         .list-group-item a {
  47.             color: unset !important;
  48.         }
  49.         .variant-wrap{
  50.             text-align: left !important;
  51.             right: unset !important;
  52.             width: -webkit-fill-available;
  53.             float: right;
  54.             background: #e3dfdf;
  55.             bottom: 0 !important;
  56.         }
  57.         .image-swatch li img{
  58.             margin-right: unset !important;
  59.         }
  60.         .heart-wrap {
  61.             top: 0px !important;
  62.             bottom: unset !important;
  63.         }
  65.         .product-box .image-swatch li img {
  66.             width: 60px;
  67.             height: 60px;
  68.         }
  70.         .variant-wrap {
  71.             background: #e3dfdf6e;
  72.         }
  73.         {# .v-swatch:hover{
  74.             border: 1px solid black;
  75.         } #}
  76.     </style>
  77. {% endblock %}
  79.  {% block main %}
  81.     <input id="category_id" name="category_id" type="text" value={{ categoryId }} class="d-none"/>
  83.     <!-- section start -->
  84.     <section class="section-b-space ratio_asos">
  85.         <div class="collection-wrapper">
  86.             <div class="container">
  87.                 <div class="row">
  88.                     <div class="collection-content col">
  89.                         <div class="page-main-content d-flex">
  90.                                     <div class="col-sm-2 col-2 collection-filter">
  91.                                         <div class="">
  92.                                             <nav aria-label="breadcrumb" class="theme-breadcrumb">
  93.                                                 <ol class="breadcrumb">
  94.                                                 {% if category.parentCategory %}
  95.                                                     {% if category.parentCategory.parentCategory %}
  96.                                                         <li class="breadcrumb-item">
  97.                                                             <a href="{{ path('app_category',{id: category.parentCategory.parentCategory.id}) }}">
  98.                                                                 {{category.parentCategory.parentCategory.name }}
  99.                                                             </a>
  100.                                                         </li>
  101.                                                     {% endif %}
  102.                                                 
  103.                                                     <li class="breadcrumb-item">
  104.                                                         <a href="{{ path('app_category',{id:category.parentCategory.id }) }}">
  105.                                                             {{category.parentCategory.name }}
  106.                                                         </a>
  107.                                                     </li>
  108.                                                 {% endif %}
  109.                                                     <li class="breadcrumb-item active" aria-current="page">{{category.name}}</li>
  110.                                                 </ol>
  111.                                             </nav>
  112.                                         </div>
  114.                                         {# <h3>{{category.name}}</h3> #}
  115.                                         {% if category.childCategory %}
  116.                                             <ul class="list-group text-uppercase">
  117.                                             {% for category in category.childCategory %}
  118.                                                 <li class="list-group-item border-0">
  119.                                                 <a href="{{ path('app_category',{id:category.id}) }}">{{category.name}}</a>
  120.                                                 </li>
  121.                                             {% endfor %}
  122.                                             </ul>
  123.                                         {% endif %}
  124.                                     </div>
  126.                             <div id="category_content" class="collection-product-wrapper col-10 col-small-12">
  127.                                     <div class="product-top-filter">
  128.                                         <div class="row">
  129.                                             <div class="col-12">
  130.                                                 <div class="product-filter-content">
  131.                                                     <div class="search-count">
  132.                                                         <h5><span id="totalFound">{{ totalOfProducts }} </span>{{ 'Products found' | trans({},'templates') }}</h5>
  133.                                                     </div>
  134.                                                     <div class="product-page-per-view">
  135.                                                         <select id="color-filter-category">
  136.                                                             <option value="">{{ 'Color' | trans({},'templates') }}</option>
  137.                                                             {% for color in colors %}
  138.                                                             <option value="{{ color.value }}">{{ color.value}}</option>
  139.                                                             {% endfor %}
  140.                                                         </select>
  141.                                                     </div>
  142.                                                     <div class="product-page-filter">
  143.                                                         <select id="size-filter-category">
  144.                                                             <option value="">{{ 'Size' | trans({},'templates') }}</option>
  145.                                                             {% for size in sizes %}
  146.                                                                 <option value="{{ size.value }}">{{ size.value }}</option>
  147.                                                             {% endfor %}
  148.                                                         </select>
  149.                                                     </div>
  150.                                                     <div class="product-page-filter">
  151.                                                         <div class="collection-collapse-block-content">
  152.                                                             <div class="wrapper mt-3">
  153.                                                                 <div class="range-slider">
  154.                                                                     <input id="price-filter-category" type="text" class="js-range-slider" value=""
  155.                                                                             data-type="double"
  156.                                                                             data-min="{{ priceRange.min_price }}"
  157.                                                                             data-max="{{ priceRange.max_price }}"
  158.                                                                             data-step="0.5"
  159.                                                                             {# data-from="{{ priceRange.min_price }}"
  160.                                                                             data-to="{{ priceRange.max_price }}" #}
  161.                                                                     />
  162.                                                                 </div>
  163.                                                             </div>
  164.                                                         </div>
  165.                                                         {# <select>
  166.                                                             <option value="">Price</option>
  167.                                                             <option value="Low to High">Low</option>
  168.                                                             <option value="Low to High">High</option>
  169.                                                         </select> #}
  170.                                                     </div>
  171.                                                 </div>
  172.                                             </div>
  173.                                         </div>
  174.                                     </div>
  175.                                 <div id="category_main" >
  177.                                 {% if products %}
  178.                                 <div class="product-wrapper-grid">
  179.                                     <div class="row margin-res">
  180.                                     
  181.                                         <div class="row">
  182.                                         {% for product in products %}
  183.                                         {# {{ product.firstVariantId() }} #}
  184.                                             <div class="col-xl-4 col-6 col-grid-box">
  185.                                                 <div class="product-box">
  186.                                                     <div class="img-wrapper">
  187.                                                         <div  class="front">
  188.                                                             <a id="front-{{product.id}}" href="{{ path('app_product_page',{'pid': product.id, 'vid': product.firstVariantId(),'gender': "mens" }) }}">
  189.                                                             <img  src="{{ product.mainImage }}"
  190.                                                                     class="img-fluid blur-up lazyload bg-img" alt=""></a>
  191.                                                         </div>
  192.                                                         <div  class="back">
  193.                                                             <a id="back-{{product.id}}" href="{{ path('app_product_page',{'pid': product.id ,'vid': product.firstVariantId(),'gender': "mens" }) }}">
  194.                                                             <img src="{{ product.mainImage }}" class="img-fluid blur-up lazyload bg-img" alt="">
  195.                                                             </a>
  196.                                                         </div>
  197.                                                         {% if product.variants|length > 1 %}
  198.                                                             
  199.                                                         <div class="cart-info cart-wrap variant-wrap">
  200.                                                             <ul class="image-swatch">
  201.                                                                 {% for variant in product.variants|slice(0,4) %}
  202.                                                                 <li  class="v-swatch">
  203.                                                                     <a href="{{path('app_product_page',{'pid': product.id,'vid': variant.id,gender: "mens"})}}">
  204.                                                                         <img 
  205.                                                                             onmouseleave="category.oldImg('{{variant.product.id}}',this)" 
  206.                                                                             onmouseenter="category.swatchImg('{{variant.product.id}}',this)" 
  207.                                                                             src="{{ variant.mainImage }}"
  208.                                                                             alt="" 
  209.                                                                             class="img-fluid blur-up lazyload">
  210.                                                                     </a>
  211.                                                                 </li>
  212.                                                                 {% endfor %}
  214.                                                                 {% if product.variants|length > 4 %}
  215.                                                                 {% set more = product.variants|length - 4 %}
  216.                                                                 <li  class="v-swatch  v-swatch-more">
  217.                                                                     <a class="text-dark" href="{{ path('app_product_page',{'pid': product.id,'vid': product.firstVariantId(),'gender': "mens" }) }}">
  218.                                                                         + {{ more }}
  219.                                                                     </a>
  220.                                                                 </li>
  221.                                                                 {% endif %}
  223.                                                                 {# <li><a href="#"><img src="../assets/images/fashion/pro/m-002.jpg" alt=""
  224.                                                                 class="img-fluid blur-up lazyload"></a></li>
  225.                                                                 <li><a href="#"><img src="../assets/images/fashion/pro/m-003.jpg" alt=""
  226.                                                                 class="img-fluid blur-up lazyload"></a></li> #}
  227.                                                             </ul>
  228.                                                         </div>
  229.                                                         {% endif %}
  230.                                                         <div class="cart-info cart-wrap heart-wrap">
  231.                                                             <a  href="javascript:void(0)" 
  232.                                                                 title="{{ 'Add to Wishlist' | trans({},'templates') }}"
  233.                                                                 data-p-id={{ product.id }}
  234.                                                                 data-p-name={{ product.name }}
  235.                                                                 data-p-price={{ product.firstVariantPrice() }}
  236.                                                                 data-p-image={{ product.mainImage }}
  237.                                                                 data-p-api={{ product.apiId }}
  238.                                                                 onclick="addToFavoris(this)"
  239.                                                             >
  240.                                                                 {% if product.id in app.session.get('wishlist') %}
  241.                                                                 <i class='fa-solid fa-heart' style='color: #ff0000;'></i>
  242.                                                                 {% else %}
  243.                                                                     <i class="ti-heart" aria-hidden="true"></i>
  244.                                                                 {% endif %}
  245.                                                             </a>                
  246.                                                         </div>
  247.                                                     </div>
  248.                                                     <div class="product-detail">
  249.                                                         <div>
  250.                                                             <a href="product-page(no-sidebar).html">
  251.                                                                 <h6>{{product.name}}</h6>
  252.                                                             </a>
  253.                                                             <p>{{product.description}}</p>
  254.                                                             <h4>{{product.firstVariantPrice()}} EUR</h4>
  255.                                                         </div>
  256.                                                     </div>
  257.                                                 </div>
  258.                                             </div>
  259.                                         {% endfor %}
  260.                                         </div>
  261.                                     </div>
  262.                                 </div>
  263.                                 {% else %}
  264.                                     <!-- section start -->
  265.                                             <section class="p-0">
  266.                                                 <div class="container">
  267.                                                     <div class="row">
  268.                                                         <div class="col-sm-12">
  269.                                                             <div class="error-section">
  270.                                                                 {# <h1>404</h1> #}
  271.                                                                 <h2>{{ 'NO PRODUCTS FOUND IN THIS CATEGORY' | trans({},'templates') }}</h2>
  272.                                                                 <a href="/mens" class="btn btn-solid">{{ 'back to home' | trans({},'templates') }}</a>
  273.                                                             </div>
  274.                                                         </div>
  275.                                                     </div>
  276.                                                 </div>
  277.                                             </section>
  278.                                     <!-- Section ends -->
  279.                                 {% endif %}
  280.                                 <div class="knp-pagination">
  281.                                     {{ knp_pagination_render(products,'pagination.twig') }} 
  282.                                 </div> 
  283.                                 </div>
  284.                             </div>
  286.                             
  287.                         </div>
  288.                     </div>
  289.                 </div>
  290.             </div>
  291.         </div>
  292.     </section>
  293.     <!-- section End -->
  295.     <!-- tap to top start -->
  296.     <div class="tap-top">
  297.         <div><i class="fa fa-angle-double-up"></i></div>
  298.     </div>
  299.     <!-- tap to top end -->
  301. {% endblock %}
  302.     {% block js %}
  303.     
  305.     <!-- latest jquery-->
  306.     <script src="{{ asset('assets/js/jquery-3.3.1.min.js') }}"></script>
  308.     <!-- menu js-->
  309.     <script src="{{ asset('assets/js/menu.js') }}"></script>
  311.     <!-- lazyload js-->
  312.     <script src="{{ asset('assets/js/lazysizes.min.js') }}"></script>
  314.     <!-- slick js-->
  315.     <script src="{{ asset('assets/js/slick.js') }}"></script>
  317.     <!-- Bootstrap js-->
  318.     <script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
  320.     <!-- Bootstrap Notification js-->
  321.     <script src="{{ asset('assets/js/bootstrap-notify.min.js') }}"></script>
  323.     <!-- price range js -->
  324.     <script src="{{ asset('assets/js/price-range.js') }}"></script>
  327.     <!-- Theme js-->
  328.     <script src="{{ asset('assets/js/theme-setting.js') }}"></script>
  329.     <script src="{{ asset('assets/js/script.js') }}"></script>
  331.     <script>
  332.         function openSearch() {
  333.             document.getElementById("search-overlay").style.display = "block";
  334.         }
  336.         function closeSearch() {
  337.             document.getElementById("search-overlay").style.display = "none";
  338.         }
  340.     </script>
  341.     {# <script src="{{ asset('assets/js/collection.js') }}"></script> #}
  342.     <script src="{{ asset('assets/js/modules.js') }}"></script>
  344.     {% endblock %}