templates/women/category/category.twig line 1

  2. {% extends 'women/base/base_women.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.     <!-- Icons -->
  23.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/font-awesome.css') }}">
  25.     <!--Slick slider css-->
  26.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/slick.css') }}">
  27.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/slick-theme.css')}}">
  29.     <!-- Animate icon -->
  30.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
  32.     <!-- Themify icon -->
  33.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/themify-icons.css') }}">
  35.     <!-- Bootstrap css -->
  36.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/bootstrap.css') }}">
  38.     <!-- Theme css -->
  39.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style.css') }}">
  41.         <!-- Price range icon -->
  42.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/price-range.css') }}">
  43.     <style>
  44.         .list-group-item a {
  45.             color: unset !important;
  46.         }
  47.         .variant-wrap{
  48.             text-align: left !important;
  49.             right: unset !important;
  50.             width: -webkit-fill-available;
  51.             float: right;
  52.             background: #e3dfdf;
  53.             bottom: 0 !important;
  54.         }
  55.         .image-swatch li img{
  56.             margin-right: unset !important;
  57.         }
  58.         .heart-wrap {
  59.             top: 0px !important;
  60.             bottom: unset !important;
  61.         }
  63.         {# .v-swatch:hover{
  64.             border: 1px solid black;
  65.         } #}
  66.     </style>
  67. {% endblock %}
  69.  {% block main %}
  71.     <input id="category_id" name="category_id" type="text" value={{ categoryId }} class="d-none"/>
  74.     <!-- section start -->
  75.     <section class="section-b-space ratio_asos">
  76.         <div class="collection-wrapper">
  77.             <div class="container">
  78.                 <div class="row">
  79.                     <div class="collection-content col">
  80.                         <div class="page-main-content d-flex">
  81.                                     <div class="col-sm-3 col-3 collection-filter">
  82.                                         <div class="">
  83.                                             <nav aria-label="breadcrumb" class="theme-breadcrumb">
  84.                                                 <ol class="breadcrumb">
  85.                                                 {% if category.parentCategory %}
  86.                                                     {% if category.parentCategory.parentCategory %}
  87.                                                         <li class="breadcrumb-item">
  88.                                                             <a href="{{ path('app_category',{id: category.parentCategory.parentCategory.id}) }}">
  89.                                                                 {{category.parentCategory.parentCategory.name }}
  90.                                                             </a>
  91.                                                         </li>
  92.                                                     {% endif %}
  93.                                                 
  94.                                                     <li class="breadcrumb-item">
  95.                                                         <a href="{{ path('app_category',{id:category.parentCategory.id }) }}">
  96.                                                             {{category.parentCategory.name }}
  97.                                                         </a>
  98.                                                     </li>
  99.                                                 {% endif %}
  100.                                                     <li class="breadcrumb-item active" aria-current="page">{{category.name}}</li>
  101.                                                 </ol>
  102.                                             </nav>
  103.                                         </div>
  105.                                         {# <h3>{{category.name}}</h3> #}
  106.                                         {% if category.childCategory %}
  107.                                             <ul class="list-group text-uppercase">
  108.                                             {% for category in category.childCategory %}
  109.                                                 <li class="list-group-item border-0">
  110.                                                 <a href="{{ path('app_category',{id:category.id}) }}">{{category.name}}</a>
  111.                                                 </li>
  112.                                             {% endfor %}
  113.                                             </ul>
  114.                                         {% endif %}
  115.                                         <!-- side-bar colleps block stat -->
  116.                                         {# <div class="collection-filter-block">
  117.                                             <!-- brand filter start -->
  118.                                             <div class="collection-mobile-back"><span class="filter-back"><i class="fa fa-angle-left"
  119.                                                         aria-hidden="true"></i> back</span></div>
  120.                                             <div class="collection-collapse-block open">
  121.                                                 <h3 class="collapse-block-title">brand</h3>
  122.                                                 <div class="collection-collapse-block-content">
  123.                                                     <div class="collection-brand-filter">
  124.                                                         <div class="form-check collection-filter-checkbox">
  125.                                                             <input type="checkbox" class="form-check-input" id="zara">
  126.                                                             <label class="form-check-label" for="zara">zara</label>
  127.                                                         </div>
  128.                                                         <div class="form-check collection-filter-checkbox">
  129.                                                             <input type="checkbox" class="form-check-input" id="vera-moda">
  130.                                                             <label class="form-check-label" for="vera-moda">vera-moda</label>
  131.                                                         </div>
  132.                                                         <div class="form-check collection-filter-checkbox">
  133.                                                             <input type="checkbox" class="form-check-input" id="forever-21">
  134.                                                             <label class="form-check-label" for="forever-21">forever-21</label>
  135.                                                         </div>
  136.                                                         <div class="form-check collection-filter-checkbox">
  137.                                                             <input type="checkbox" class="form-check-input" id="roadster">
  138.                                                             <label class="form-check-label" for="roadster">roadster</label>
  139.                                                         </div>
  140.                                                         <div class="form-check collection-filter-checkbox">
  141.                                                             <input type="checkbox" class="form-check-input" id="only">
  142.                                                             <label class="form-check-label" for="only">only</label>
  143.                                                         </div>
  144.                                                     </div>
  145.                                                 </div>
  146.                                             </div>
  147.                                             <!-- color filter start here -->
  148.                                             <div class="collection-collapse-block open">
  149.                                                 <h3 class="collapse-block-title">colors</h3>
  150.                                                 <div class="collection-collapse-block-content">
  151.                                                     <div class="color-selector">
  152.                                                         <ul>
  153.                                                             <li class="color-1 active"></li>
  154.                                                             <li class="color-2"></li>
  155.                                                             <li class="color-3"></li>
  156.                                                             <li class="color-4"></li>
  157.                                                             <li class="color-5"></li>
  158.                                                             <li class="color-6"></li>
  159.                                                             <li class="color-7"></li>
  160.                                                         </ul>
  161.                                                     </div>
  162.                                                 </div>
  163.                                             </div>
  164.                                             <!-- size filter start here -->
  165.                                             <div class="collection-collapse-block border-0 open">
  166.                                                 <h3 class="collapse-block-title">size</h3>
  167.                                                 <div class="collection-collapse-block-content">
  168.                                                     <div class="collection-brand-filter">
  169.                                                         <div class="form-check collection-filter-checkbox">
  170.                                                             <input type="checkbox" class="form-check-input" id="hundred">
  171.                                                             <label class="form-check-label" for="hundred">s</label>
  172.                                                         </div>
  173.                                                         <div class="form-check collection-filter-checkbox">
  174.                                                             <input type="checkbox" class="form-check-input" id="twohundred">
  175.                                                             <label class="form-check-label" for="twohundred">m</label>
  176.                                                         </div>
  177.                                                         <div class="form-check collection-filter-checkbox">
  178.                                                             <input type="checkbox" class="form-check-input" id="threehundred">
  179.                                                             <label class="form-check-label" for="threehundred">l</label>
  180.                                                         </div>
  181.                                                         <div class="form-check collection-filter-checkbox">
  182.                                                             <input type="checkbox" class="form-check-input" id="fourhundred">
  183.                                                             <label class="form-check-label" for="fourhundred">xl</label>
  184.                                                         </div>
  185.                                                     </div>
  186.                                                 </div>
  187.                                             </div>
  188.                                             <!-- price filter start here -->
  189.                                             <div class="collection-collapse-block border-0 open">
  190.                                                 <h3 class="collapse-block-title">price</h3>
  191.                                                 <div class="collection-collapse-block-content">
  192.                                                     <div class="wrapper mt-3">
  193.                                                         <div class="range-slider">
  194.                                                             <input type="text" class="js-range-slider" value="" />
  195.                                                         </div>
  196.                                                     </div>
  197.                                                 </div>
  198.                                             </div>
  199.                                         </div> #}
  201.                                         <!-- side-bar banner end here -->
  202.                                     </div>
  204.                             <div id="category_content" class="collection-product-wrapper col-9 col-small-12">
  205.                                     <div class="product-top-filter">
  206.                                         <div class="row">
  207.                                             <div class="col-12">
  208.                                                 <div class="product-filter-content">
  209.                                                     <div class="search-count">
  210.                                                         <h5><span id="totalFound">{{ totalOfProducts }} </span>{{ 'Products found' | trans({},'templates') }}</h5>
  211.                                                     </div>
  212.                                                     {# <div class="collection-view">
  213.                                                         <ul>
  214.                                                             <li><i class="fa fa-th grid-layout-view"></i></li>
  215.                                                             <li><i class="fa fa-list-ul list-layout-view"></i></li>
  216.                                                         </ul>
  217.                                                     </div> #}
  218.                                                     {# <div class="collection-grid-view">
  219.                                                         <ul>
  220.                                                             <li><img src="../assets/images/icon/2.png" alt=""
  221.                                                                     class="product-2-layout-view"></li>
  222.                                                             <li><img src="../assets/images/icon/3.png" alt=""
  223.                                                                     class="product-3-layout-view"></li>
  224.                                                             <li><img src="../assets/images/icon/4.png" alt=""
  225.                                                                     class="product-4-layout-view"></li>
  226.                                                             <li><img src="../assets/images/icon/6.png" alt=""
  227.                                                                     class="product-6-layout-view"></li>
  228.                                                         </ul>
  229.                                                     </div> #}
  230.                                                     <div class="product-page-per-view">
  231.                                                         <select id="color-filter-category">
  232.                                                             <option value="">{{ 'Color' | trans({},'templates') }}</option>
  233.                                                             {% for color in colors %}
  234.                                                             <option value="{{ color.value }}">{{ color.value}}</option>
  235.                                                             {% endfor %}
  236.                                                         </select>
  237.                                                     </div>
  238.                                                     <div class="product-page-filter">
  239.                                                         <select id="size-filter-category">
  240.                                                             <option value="">{{ 'Size' | trans({},'templates') }}</option>
  241.                                                             {% for size in sizes %}
  242.                                                                 <option value="{{ size.id }}">{{ size.value }}</option>
  243.                                                             {% endfor %}
  244.                                                         </select>
  245.                                                     </div>
  246.                                                     <div class="product-page-filter">
  247.                                                         <div class="collection-collapse-block-content">
  248.                                                             <div class="wrapper mt-3">
  249.                                                                 <div class="range-slider">
  250.                                                                     <input id="price-filter-category" type="text" class="js-range-slider" value=""
  251.                                                                             data-type="double"
  252.                                                                             data-min="{{ priceRange.min_price }}"
  253.                                                                             data-max="{{ priceRange.max_price }}"
  254.                                                                             data-step="0.5"
  255.                                                                             {# data-from="{{ priceRange.min_price }}"
  256.                                                                             data-to="{{ priceRange.max_price }}" #}
  257.                                                                     />
  258.                                                                 </div>
  259.                                                             </div>
  260.                                                         </div>
  261.                                                         {# <select>
  262.                                                             <option value="">Price</option>
  263.                                                             <option value="Low to High">Low</option>
  264.                                                             <option value="Low to High">High</option>
  265.                                                         </select> #}
  266.                                                     </div>
  267.                                                 </div>
  268.                                             </div>
  269.                                         </div>
  270.                                     </div>
  271.                                 <div id="category_main" >
  272.                                     {% if products %}
  274.                                     <div class="product-wrapper-grid">
  275.                                         <div class="row margin-res">
  276.                                         
  277.                                             <div class="row">
  278.                                                 {% for product in products %}
  279.                                                 {# {{ product.firstVariantId() }} #}
  280.                                                     <div class="col-xl-4 col-6 col-grid-box">
  281.                                                         <div class="product-box">
  282.                                                             <div class="img-wrapper">
  283.                                                                 <div  class="front">
  284.                                                                     <a id="front-{{product.id}}" href="{{ path('app_product_page',{'pid': product.id, 'vid': product.firstVariantId(),gender: 'women' }) }}"><img  src="{{ product.mainImage }}"
  285.                                                                             class="img-fluid blur-up lazyload bg-img" alt=""></a>
  286.                                                                 </div>
  287.                                                                 <div  class="back">
  288.                                                                     <a id="back-{{product.id}}" href="{{ path('app_product_page',{'pid': product.id, 'vid': product.firstVariantId(),gender: 'women' }) }}"><img src="{{ product.getSecondImage() }}"
  289.                                                                             class="img-fluid blur-up lazyload bg-img" alt=""></a>
  290.                                                                 </div>
  291.                                                                 {% if product.variants|length > 1 %}
  292.                                                                     
  293.                                                                 <div class="cart-info cart-wrap variant-wrap">
  294.                                                                     <ul class="image-swatch">
  295.                                                                         {% for variant in product.variants|slice(0,4) %}
  296.                                                                         <li  class="v-swatch">
  297.                                                                             <a href="{{path('app_product_page',{'pid': product.id, 'vid': variant.id,gender: 'women'})}}">
  298.                                                                                 <img onmouseleave="category.oldImg('{{variant.product.id}}',this)" onmouseenter="category.swatchImg('{{variant.product.id}}',this)" src="{{ variant.mainImage }}" alt="" class="img-fluid blur-up lazyload">
  299.                                                                             </a>
  300.                                                                         </li>
  301.                                                                         {% endfor %}
  303.                                                                         {% if product.variants|length > 4 %}
  304.                                                                         {% set more = product.variants|length - 4 %}
  305.                                                                         <li  class="v-swatch v-swatch-more">
  306.                                                                             <a class="text-dark" href="{{ path('app_product_page',{'pid': product.id, 'vid': product.firstVariantId(),gender: 'women'}) }}">
  307.                                                                                 + {{ more }}
  308.                                                                             </a>
  309.                                                                         </li>
  310.                                                                         {% endif %}
  312.                                                                         {# <li><a href="#"><img src="../assets/images/fashion/pro/m-002.jpg" alt=""
  313.                                                                         class="img-fluid blur-up lazyload"></a></li>
  314.                                                                         <li><a href="#"><img src="../assets/images/fashion/pro/m-003.jpg" alt=""
  315.                                                                         class="img-fluid blur-up lazyload"></a></li> #}
  316.                                                                     </ul>
  317.                                                                 </div>
  318.                                                                 {% endif %}
  319.                                                                 <div class="cart-info cart-wrap heart-wrap">
  320.                                                                     <a  href="javascript:void(0)" 
  321.                                                                         title="{{ 'Add to Wishlist' | trans({},'templates') }}"
  322.                                                                         data-p-id={{ product.id }}
  323.                                                                         data-p-name={{ product.name }}
  324.                                                                         data-p-price={{ product.firstVariantPrice() }}
  325.                                                                         data-p-image={{ product.mainImage }}
  326.                                                                         data-p-api={{ product.apiId }}
  327.                                                                         onclick="addToFavoris(this)"
  328.                                                                     >
  329.                                                                     
  330.                                                                         {% if product.id in app.session.get('wishlist') %}
  331.                                                                             <i class='fa-solid fa-heart' style='color: #ff0000;'></i>
  332.                                                                         {% else %}
  333.                                                                             <i class='fa-regular fa-heart'></i>
  334.                                                                         {% endif %} 
  335.                                                                     </a>                
  336.                                                                 </div>
  337.                                                             </div>
  338.                                                             <div class="product-detail">
  339.                                                                 <div>
  340.                                                                     <a href="product-page(no-sidebar).html">
  341.                                                                         <h6>{{product.name}}</h6>
  342.                                                                     </a>
  343.                                                                     <p>{{product.description}}</p>
  344.                                                                     <h4>{{product.firstVariantPrice()}} EUR</h4>
  345.                                                                 </div>
  346.                                                             </div>
  347.                                                         </div>
  348.                                                     </div>
  349.                                                 {% endfor %}
  350.                                             </div>
  351.                                         </div>
  352.                                     </div>
  353.                                     {% else %}
  354.                                         <!-- section start -->
  355.                                         <section class="p-0">
  356.                                             <div class="container">
  357.                                                 <div class="row">
  358.                                                     <div class="col-sm-12">
  359.                                                         <div class="error-section">
  360.                                                             {# <h1>404</h1> #}
  361.                                                             <h2>{{ 'NO PRODUCTS FOUND IN THIS CATEGORY' | trans({},'templates') }}</h2>
  362.                                                             <a href="/women" class="btn btn-solid">{{ 'back to home' | trans({},'templates') }}</a>
  363.                                                         </div>
  364.                                                     </div>
  365.                                                 </div>
  366.                                             </div>
  367.                                         </section>
  368.                                         <!-- Section ends -->
  369.                                     {% endif %}
  370.                                     <div class="knp-pagination">
  371.                                             {{ knp_pagination_render(products,'pagination.twig') }} 
  372.                                     </div>
  373.                                 </div>
  374.                             </div>
  376.                             
  377.                         </div>
  378.                     </div>
  379.                 </div>
  380.             </div>
  381.         </div>
  382.     </section>
  383.     <!-- section End -->
  385.     <!-- tap to top start -->
  386.     <div class="tap-top">
  387.         <div><i class="fa fa-angle-double-up"></i></div>
  388.     </div>
  389.     <!-- tap to top end -->
  391. {% endblock %}
  392.     {% block js %}
  393.     
  395.     <!-- latest jquery-->
  396.     <script src="{{ asset('assets/js/jquery-3.3.1.min.js') }}"></script>
  398.     <!-- menu js-->
  399.     <script src="{{ asset('assets/js/menu.js') }}"></script>
  401.     <!-- lazyload js-->
  402.     <script src="{{ asset('assets/js/lazysizes.min.js') }}"></script>
  404.     <!-- slick js-->
  405.     <script src="{{ asset('assets/js/slick.js') }}"></script>
  407.     <!-- Bootstrap js-->
  408.     <script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
  410.     <!-- Bootstrap Notification js-->
  411.     <script src="{{ asset('assets/js/bootstrap-notify.min.js') }}"></script>
  413.     <!-- price range js -->
  414.     <script src="{{ asset('assets/js/price-range.js') }}"></script>
  417.     <!-- Theme js-->
  418.     <script src="{{ asset('assets/js/theme-setting.js') }}"></script>
  419.     <script src="{{ asset('assets/js/script.js') }}"></script>
  421.     <script>
  422.         function openSearch() {
  423.             document.getElementById("search-overlay").style.display = "block";
  424.         }
  426.         function closeSearch() {
  427.             document.getElementById("search-overlay").style.display = "none";
  428.         }
  430.     </script>
  431.     {# <script src="{{ asset('assets/js/collection.js') }}"></script> #}
  432.     <script src="{{ asset('assets/js/modules.js') }}"></script>
  434.     {% endblock %}