templates/mens/collection/collection_page.twig line 1

  1. {% extends 'mens/base/base_mens.twig' %}
  3. {% block head %}
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">
  8.     <meta name="description" content="multikart">
  9.     <meta name="keywords" content="multikart">
  10.     <meta name="author" content="multikart">
  11.     <link rel="icon" href="{{ asset('assets/images/favicon/1.png') }}" type="image/x-icon">
  12.     <link rel="shortcut icon" href="{{ asset('assets/images/favicon/1.png') }}" type="image/x-icon">
  13.     <title>SELECTWEARS</title>
  15.     <!--Google font-->
  16.     <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
  17.     <link rel="preconnect" href="https://fonts.gstatic.com">
  18.     <link href="https://fonts.googleapis.com/css2?family=Yellowtail&display=swap" rel="stylesheet">
  20.     <!-- Icons -->
  21.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/font-awesome.css') }}">
  23.     <!--Slick slider css-->
  24.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/slick.css') }}">
  25.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/slick-theme.css') }}">
  27.     <!-- Animate icon -->
  28.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/animate.css') }}">
  30.     <!-- Price range icon -->
  31.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/price-range.css') }}">
  33.     <!-- Themify icon -->
  34.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/themify-icons.css') }}">
  36.     <!-- Bootstrap css -->
  37.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/vendors/bootstrap.css') }}">
  39.     <!-- Theme css -->
  40.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style.css') }}">
  41.     <!--Plugin CSS file with desired skin-->
  42.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
  43.     
  44.     <!--jQuery-->
  45.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  46.     
  47.     <!--Plugin JavaScript file-->
  48.     <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
  49.     <style>
  50.         .top-align{
  51.             top: 0 !important
  52.         }
  54.         .product-box .image-swatch li img {
  55.             width: 50px;
  56.             height: 50px;
  57.         }
  59.     </style>
  61. </head>
  62. {% endblock %}
  63. {% block main %}
  64.     <input id="collection_id" name="collection_id" type="text" value={{ collectionId }} class="d-none"/>
  66.     <!-- section start -->
  67.     <section class="section-b-space ratio_asos">
  68.         <div class="collection-wrapper">
  69.             <div class="container">
  70.                 <div class="row">
  71.                     <div class="col-sm-2 collection-filter">
  72.                         <!-- side-bar colleps block stat -->
  73.                         <div class="collection-filter-block">
  74.                             <!-- brand filter start -->
  75.                             <div class="collection-mobile-back"><span class="filter-back"><i class="fa fa-angle-left"
  76.                                         aria-hidden="true"></i> {{ 'back' | trans({},'templates') }}</span></div>
  77.                             {# <div class="collection-collapse-block open">
  78.                                 <h3 class="collapse-block-title">brand</h3>
  79.                                 <div class="collection-collapse-block-content">
  80.                                     <div class="collection-brand-filter">
  81.                                         <div class="form-check collection-filter-checkbox">
  82.                                             <input type="checkbox" class="form-check-input" id="zara">
  83.                                             <label class="form-check-label" for="zara">zara</label>
  84.                                         </div>
  85.                                         <div class="form-check collection-filter-checkbox">
  86.                                             <input type="checkbox" class="form-check-input" id="vera-moda">
  87.                                             <label class="form-check-label" for="vera-moda">vera-moda</label>
  88.                                         </div>
  89.                                         <div class="form-check collection-filter-checkbox">
  90.                                             <input type="checkbox" class="form-check-input" id="forever-21">
  91.                                             <label class="form-check-label" for="forever-21">forever-21</label>
  92.                                         </div>
  93.                                         <div class="form-check collection-filter-checkbox">
  94.                                             <input type="checkbox" class="form-check-input" id="roadster">
  95.                                             <label class="form-check-label" for="roadster">roadster</label>
  96.                                         </div>
  97.                                         <div class="form-check collection-filter-checkbox">
  98.                                             <input type="checkbox" class="form-check-input" id="only">
  99.                                             <label class="form-check-label" for="only">only</label>
  100.                                         </div>
  101.                                     </div>
  102.                                 </div>
  103.                             </div> #}
  104.                             <!-- color filter start here -->
  105.                             <div class="collection-collapse-block open">
  106.                                 <h3 class="collapse-block-title">{{ 'colors' | trans({},'templates') }}</h3>
  107.                                 <div class="collection-collapse-block-content">
  108.                                     <div class="color-selector">
  109.                                         <select id="color-filter" class="form-control">
  110.                                             <option value=''> ---------- </option>
  111.                                             {% for color in colors %}
  112.                                                 <option value="{{ color.value }}"> {{ color.value }} </option>
  113.                                             {% endfor %}
  114.    
  115.                                         </select>
  116.                                     </div>
  117.                                 </div>
  118.                             </div>
  119.                             <!-- size filter start here -->
  120.                             <div class="collection-collapse-block border-0 open">
  121.                                 <h3 class="collapse-block-title">{{ 'size' | trans({},'templates') }}</h3>
  122.                                 <div class="collection-collapse-block-content">
  123.                                     <div class="collection-brand-filter">
  124.                                         {% for size in sizes %}
  125.                                             <div class="form-check collection-filter-checkbox">
  126.                                                 <input type="radio" class="form-check-input" id="hundred" value="{{ size.value}}" name="size">
  127.                                                 <label class="form-check-label" for="hundred">{{ size.value}}</label>
  128.                                             </div>
  129.                                         {% endfor %}
  130.                                     </div>
  131.                                 </div>
  132.                             </div>
  133.                             <!-- price filter start here -->
  134.                             <div class="collection-collapse-block border-0 open">
  135.                                 <h3 class="collapse-block-title">{{ 'price' | trans({},'templates') }}</h3>
  137.                                 <div id="slider-range-min">
  138.                                 
  139.                                 
  140.                                 </div>
  141.                                 <div class="collection-collapse-block-content">
  142.                                     <div class="wrapper mt-3">
  143.                                         <div class="range-slider">
  144.                                             <input type="text" id="price-filter" class="js-range-slider" value="" 
  145.                                                 data-type="double"
  146.                                                 data-min="0"
  147.                                                 data-max="{{ priceRange.max_price }}"
  148.                                                 data-from="{{ priceRange.min_price }}"
  149.                                                 data-to="{{ priceRange.max_price }}"
  150.                                                 data-grid="true"
  151.                                                 data-step="0.5"
  152.                                             />
  153.                                         </div>
  154.                                     </div>
  155.                                 </div>
  156.                             </div>
  157.                         </div>
  158.                         <!-- silde-bar colleps block end here -->
  159.                     </div>
  160.                     <div  class="collection-content col">
  161.                         <div class="page-main-content">
  162.                             <div class="row">
  163.                                 <div class="col-sm-12">
  164.                                     <div class="collection-product-wrapper">
  165.                                         <div class="product-top-filter">
  166.                                             <div class="row">
  167.                                                 <div class="col-xl-12">
  168.                                                     <div class="filter-main-btn"><span
  169.                                                             class="filter-btn btn btn-theme"><i class="fa fa-filter"
  170.                                                                 aria-hidden="true"></i> {{ 'Filter' | trans({},'templates') }}</span></div>
  171.                                                 </div>
  172.                                             </div>
  173.                                             <div class="row">
  174.                                                 <div class="col-12">
  175.                                                     <div class="product-filter-content">
  176.                                                         <div class="search-count">
  177.                                                             <h5>{{ 'Showing Products' | trans({},'templates') }} | 1-24 {{ 'of' | trans({},'templates') }} {{ products | length }} {{ 'Result' | trans({},'templates') }}</h5>
  178.                                                         </div>
  179.                                                         <div class="collection-view">
  180.                                                             <ul>
  181.                                                                 <li><i class="fa fa-th grid-layout-view"></i></li>
  182.                                                                 <li><i class="fa fa-list-ul list-layout-view"></i></li>
  183.                                                             </ul>
  184.                                                         </div>
  185.                                                         <div class="collection-grid-view">
  186.                                                             <ul>
  187.                                                                 <li><img src="{{ asset('assets/images/icon/2.png') }}" alt="" class="product-2-layout-view"></li>
  188.                                                                 <li><img src="{{ asset('assets/images/icon/3.png') }}" alt="" class="product-3-layout-view"></li>
  189.                                                                 <li><img src="{{ asset('assets/images/icon/4.png') }}" alt="" class="product-4-layout-view"></li>
  190.                                                                 <li><img src="{{ asset('assets/images/icon/6.png') }}" alt="" class="product-6-layout-view"></li>
  191.                                                             </ul>
  192.                                                         </div>
  193.                                                         <div class="product-page-per-view">
  194.                                                             <select>
  195.                                                                 <option value="High to low">24 {{ 'Products Per Page' | trans({},'templates') }}
  196.                                                                 </option>
  197.                                                                 <option value="Low to High">50 {{ 'Products Per Page' | trans({},'templates') }}
  198.                                                                 </option>
  199.                                                                 <option value="Low to High">100 {{ 'Products Per Page' | trans({},'templates') }}
  200.                                                                 </option>
  201.                                                             </select>
  202.                                                         </div>
  203.                                                         <div class="product-page-filter">
  204.                                                             <select>
  205.                                                                 <option value="High to low">{{ 'Sorting items' | trans({},'templates') }}</option>
  206.                                                                 <option value="Low to High">50 {{ 'Products' | trans({},'templates') }}</option>
  207.                                                                 <option value="Low to High">100 {{ 'Products' | trans({},'templates') }}</option>
  208.                                                             </select>
  209.                                                         </div>
  210.                                                     </div>
  211.                                                 </div>
  212.                                             </div>
  213.                                         </div>
  214.                                         <div id="collection_content" >
  215.                                             <div id="collection_main" class="product-wrapper-grid">
  216.                                                 <div class="row margin-res">
  217.                                                     {% if products %}
  218.                                                         {% for product in products %}
  219.                                                         <div class="col-xl-3 col-6 col-grid-box">
  220.                                                             <div class="product-box">
  221.                                                                 <div class="img-wrapper">
  222.                                                                     <div class="front">
  223.                                                                         <a href="{{ path('app_product_page',{'pid': product.id, 'vid': product.firstVariantId(),'gender': "mens" })}}">
  224.                                                                             <img 
  225.                                                                                 src="{{ product.mainImage }}" 
  226.                                                                                 class="img-fluid blur-up lazyload bg-img"
  227.                                                                                 alt=""
  228.                                                                             >
  229.                                                                         </a>
  230.                                                                     </div>
  231.                                                                     <div class="back">
  232.                                                                         <a href="{{ path('app_product_page',{'pid': product.id, vid: product.firstVariantId() ,'gender': "mens"})}}">
  233.                                                                             <img 
  234.                                                                                 src="{{ product.mainImage }}" 
  235.                                                                                 class="img-fluid blur-up lazyload bg-img"
  236.                                                                                 alt="">
  237.                                                                         </a>
  238.                                                                     </div>
  239.                                                                     <div class="cart-info cart-wrap top-align">
  240.                                                                         <a 
  241.                                                                             onclick="addToFavoris(this)" 
  242.                                                                             href="javascript:void(0)" 
  243.                                                                             title="{{ 'Add to Wishlist' | trans({},'templates') }}"
  244.                                                                             data-p-id={{ product.id }}
  245.                                                                             data-p-name={{ product.name }}
  246.                                                                             data-p-price={{ product.firstVariantPrice() }}
  247.                                                                             data-p-image={{ product.mainImage }}
  248.                                                                             data-p-api={{ product.apiId }}
  249.                                                                         >
  251.                                                                             {% if product.id in app.session.get('wishlist') %}
  252.                                                                                 <i class='fa-solid fa-heart' style='color: #ff0000;'></i>
  253.                                                                             {% else %}
  254.                                                                                 <i class='fa-regular fa-heart'></i>
  255.                                                                             {% endif %} 
  256.                                                                             
  257.                                                                         </a> 
  258.                                                                         
  259.                                                                     </div>
  260.                                                                     
  261.                                                                     <div class="cart-info cart-wrap">
  262.                                                                         <ul class="image-swatch">
  263.                                                                     {% for variant in product.variants|slice(0,4) %}
  264.                                                                     <li  class="v-swatch">
  265.                                                                         <a href="{{path('app_product_page',{'pid': variant.product.id ,'vid': variant.id,'gender': "mens"})}}">
  266.                                                                             <img 
  267.                                                                                 onmouseleave="category.oldImg('{{variant.product.id}}',this)" 
  268.                                                                                 onmouseenter="category.swatchImg('{{variant.product.id}}',this)" 
  269.                                                                                 src="{{ variant.mainImage }}" 
  270.                                                                                 alt="" 
  271.                                                                                 class="img-fluid blur-up lazyload"
  272.                                                                             >
  273.                                                                         </a>
  274.                                                                     </li>
  275.                                                                     {% endfor %}
  277.                                                                     {% if product.variants|length > 4 %}
  278.                                                                     {% set more = product.variants|length - 4 %}
  279.                                                                     <li  class="v-swatch v-swatch-more">
  280.                                                                         <a class="text-dark" href="{{ path('app_product_page',{'pid': product.id ,'vid': product.firstVariantId(),'gender': "mens" }) }}">
  281.                                                                             + {{ more }}
  282.                                                                         </a>
  283.                                                                     </li>
  284.                                                                     {% endif %}
  285.                                                                 </ul>
  286.                                                                     </div>
  287.                                                                 </div>
  288.                                                                 <div class="product-detail">
  289.                                                                     <div>
  290.                                                                         {# <div class="rating"><i class="fa fa-star"></i> <i
  291.                                                                                 class="fa fa-star"></i> <i
  292.                                                                                 class="fa fa-star"></i> <i
  293.                                                                                 class="fa fa-star"></i> <i
  294.                                                                                 class="fa fa-star"></i></div> #}
  295.                                                                         <a href="product-page(no-sidebar).html">
  296.                                                                             <h6>{{ product.name }}</h6>
  297.                                                                         </a>
  298.                                                                         <p>{{ product.description }}</p>
  299.                                                                         <h4>{{ product.firstVariantPrice() }} EUR</h4>
  300.                                                                         {# <ul class="color-variant">
  301.                                                                             {% for variant in product.variants %}
  302.                                                                                 <li class="bg-light0">{{ variant.color}}</li>
  304.                                                                             {% endfor %}
  305.                                                                             {# <li class="bg-light1"></li>
  306.                                                                             <li class="bg-light2"></li> #}
  307.                                                                         {# </ul>  #}
  310.                                                                 
  311.                                                                     </div>
  312.                                                                 </div>
  313.                                                             </div>
  314.                                                         </div>
  315.                                                         {% endfor %}
  316.                                                     {% else %}
  317.                                                         <!-- section start -->
  318.                                                             <section class="p-0">
  319.                                                                 <div class="container">
  320.                                                                     <div class="row">
  321.                                                                         <div class="col-sm-12">
  322.                                                                             <div class="error-section">
  323.                                                                                 {# <h1>404</h1> #}
  324.                                                                                 <h2>{{ 'NO PRODUCTS FOUND IN THIS COLLECTION' | trans({},'templates') }}</h2>
  325.                                                                                 <a href="/mens" class="btn btn-solid">{{ 'back to home' | trans({},'templates') }}</a>
  326.                                                                             </div>
  327.                                                                         </div>
  328.                                                                     </div>
  329.                                                                 </div>
  330.                                                             </section>
  331.                                                         <!-- Section ends -->
  332.                                                     {% endif %}
  334.                                                     {% if products %}
  335.                                                         <div class="knp-pagination">
  336.                                                             {{ knp_pagination_render(products,'pagination.twig') }} 
  337.                                                         </div>
  338.                                                     {% endif %}
  339.                                                 </div>
  340.                                             </div>
  341.                                         </div>
  342.                                     </div>
  343.                                 </div>
  344.                             </div>
  345.                         </div>
  346.                     </div>
  347.                 </div>
  348.             </div>
  349.         </div>
  350.     </section>
  351.     <!-- section End -->
  353.     <!-- Quick-view modal popup start-->
  354.     <div class="modal fade bd-example-modal-lg theme-modal" id="quick-view" tabindex="-1" role="dialog"
  355.         aria-hidden="true">
  356.         <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  357.             <div class="modal-content quick-view-modal">
  358.                 <div class="modal-body">
  359.                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span
  360.                             aria-hidden="true">&times;</span></button>
  361.                     <div class="row">
  362.                         <div class="col-lg-6 col-xs-12">
  363.                             <div class="quick-view-img"><img src="{{ asset('assets/images/pro3/1.jpg') }}" alt=""
  364.                                     class="img-fluid blur-up lazyload"></div>
  365.                         </div>
  366.                         <div class="col-lg-6 rtl-text">
  367.                             <div class="product-right">
  368.                                 <h2>Women Pink Shirt</h2>
  369.                                 <h3>$32.96</h3>
  370.                                 <ul class="color-variant">
  371.                                     <li class="bg-light0"></li>
  372.                                     <li class="bg-light1"></li>
  373.                                     <li class="bg-light2"></li>
  374.                                 </ul>
  375.                                 <div class="border-product">
  376.                                     <h6 class="product-title">product details</h6>
  377.                                     <p>Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium
  378.                                         doloremque laudantium</p>
  379.                                 </div>
  380.                                 <div class="product-description border-product">
  381.                                     <div class="size-box">
  382.                                         <ul>
  383.                                             <li class="active"><a href="javascript:void(0)">s</a></li>
  384.                                             <li><a href="javascript:void(0)">m</a></li>
  385.                                             <li><a href="javascript:void(0)">l</a></li>
  386.                                             <li><a href="javascript:void(0)">xl</a></li>
  387.                                         </ul>
  388.                                     </div>
  389.                                     <h6 class="product-title">quantity</h6>
  390.                                     <div class="qty-box">
  391.                                         <div class="input-group"><span class="input-group-prepend"><button type="button"
  392.                                                     class="btn quantity-left-minus" data-type="minus" data-field=""><i
  393.                                                         class="ti-angle-left"></i></button> </span>
  394.                                             <input type="text" name="quantity" class="form-control input-number"
  395.                                                 value="1"> <span class="input-group-prepend"><button type="button"
  396.                                                     class="btn quantity-right-plus" data-type="plus" data-field=""><i
  397.                                                         class="ti-angle-right"></i></button></span>
  398.                                         </div>
  399.                                     </div>
  400.                                 </div>
  401.                                 <div class="product-buttons"><a href="#" class="btn btn-solid">add to cart</a> <a
  402.                                         href="#" class="btn btn-solid">view detail</a></div>
  403.                             </div>
  404.                         </div>
  405.                     </div>
  406.                 </div>
  407.             </div>
  408.         </div>
  409.     </div>
  410.     <!-- Quick-view modal popup end-->
  412.     <!-- tap to top start -->
  413.     <div class="tap-top">
  414.         <div><i class="fa fa-angle-double-up"></i></div>
  415.     </div>
  416.     <!-- tap to top end -->
  417. {% endblock %}
  419. {% block js %}
  420.     <!-- latest jquery-->
  421.     <script src="{{ asset('assets/js/jquery-3.3.1.min.js') }}"></script>
  423.     <!-- menu js-->
  424.     <script src="{{ asset('assets/js/menu.js') }}"></script>
  426.     <!-- lazyload js-->
  427.     <script src="{{ asset('assets/js/lazysizes.min.js') }}"></script>
  429.     <!-- price range js -->
  430.     <script src="{{ asset('assets/js/price-range.js') }}"></script>
  432.     <!-- slick js-->
  433.     <script src="{{ asset('assets/js/slick.js')}}"></script>
  435.     <!-- Bootstrap js-->
  436.     <script src="{{ asset('assets/js/bootstrap.bundle.min.js') }}"></script>
  438.     <!-- Bootstrap Notification js-->
  439.     <script src="{{ asset('assets/js/bootstrap-notify.min.js') }}"></script>
  441.     <!-- Theme js-->
  442.     <script src="{{ asset('assets/js/theme-setting.js') }}"></script>
  443.     <script src="{{ asset('assets/js/script.js') }}"></script>
  445.     <script>
  446.         function openSearch() {
  447.             document.getElementById("search-overlay").style.display = "block";
  448.         }
  450.         function closeSearch() {
  451.             document.getElementById("search-overlay").style.display = "none";
  452.         }
  453.     </script>
  455.         <script src="{{ asset('assets/js/modules.js') }}"></script>
  457. {% endblock %}