templates/mens/product/product_page.twig line 1

  1. {% extends 'mens/base/base_mens.twig' %}
  3. {% block head %}
  4.     {# {{ encore_entry_link_tags('app_product') }} #}
  5.     {% include 'mens/product/styles.html.twig' %}
  6.     <style>
  7.     .image-swatch li img {
  8.         width: 60px;
  9.         height: 60px;
  10.         cursor: pointer;
  11.     }
  12.     .breadcrumb-item+.breadcrumb-item::before {
  13.         float: left;
  14.         padding-right: .5rem;
  15.         color: #6c757d;
  16.         content: "›";
  17.     }
  19.     .product-right .price-detail span {
  20.         font-size: 22px;
  21.         padding-left: 0px;
  22.     }
  24.     .product-shipping-info{
  25.         display: grid;
  26.         grid-gap: 30px;
  27.     }
  29.     .product-right .product-count {
  30.         padding: 15px 15px;
  31.         border: 1px solid #eee;
  32.         background-color: #ffff;
  33.     }
  35.     .p-btn-circle {
  36.         border-radius: 100px;
  37.     }
  38.     </style>
  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" />
  40.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/slick/slick.css') }}">
  41.     <link rel="stylesheet" type="text/css" href="{{ asset('assets/slick/slick-theme.css') }}">
  43. {% endblock %}
  46. {% block breadcrumb %}
  47.     <div class="breadcrumb-section">
  48.         <div class="container">
  49.             <div class="row">
  50.                 <div class="col-sm-12">
  51.                     <nav aria-label="breadcrumb" class="theme-breadcrumb">
  52.                         <ol class="breadcrumb justify-content-lg-start">
  53.                             <li class="breadcrumb-item d-mobile-none"><a href="/">{{ 'Home' | trans({},'templates') }}</a></li>
  54.                             <li class="breadcrumb-item d-mobile-none"><a href="/">{{ product.name }}</a></li>
  55.                             <li class="breadcrumb-item active" aria-current="page">{{ variant.name }}</li>
  56.                         </ol>
  57.                     </nav>
  58.                 </div>
  59.             </div>
  60.         </div>
  61.     </div>
  62. {% endblock %}
  64. {% block main %}
  66.     {#  ****************** List Variables ******************  #}
  67.     <script>
  68.         let maxProductInStock //Add maximum product in stock
  69.     </script>
  71.     {#  ****************** List Variables ******************  #}
  72.         <!-- section start -->
  73.         <section>
  74.             <div class="collection-wrapper">
  75.                 <div class="container">
  76.                     <div class="row">
  77.                         <div class="col-lg-1 col-sm-2 col-xs-12">
  78.                             <div class="row">
  79.                                 <div class="col-12 p-0">
  80.                                     <div class="slider-right-nav">
  81.                                         {% if variant.images is defined %}
  82.                                             {% for image in variant.images %}
  83.                                                 <div>
  84.                                                     <img src="{{image}}" alt="{{ variant.name }}"
  85.                                                          class="img-fluid blur-up lazyload">
  86.                                                 </div>
  87.                                             {% endfor %}
  88.                                         {% endif %}
  89.                                     </div>
  90.                                 </div>
  91.                             </div>
  92.                         </div>
  93.                         <div class="col-lg-5 col-sm-10 col-xs-12 order-up">
  94.                             <div class="product-right-slick">
  96.                                 {% if variant.images is defined %}
  97.                                             {% for image in variant.images %}
  98.                                                 <div>
  99.                                                     <img src="{{image}}" alt="{{ variant.name }}"
  100.                                                          class="img-fluid blur-up lazyload image_zoom_cls-{{ loop.index }}">
  101.                                                 </div>
  102.                                             {% endfor %}
  103.                                 {% endif %}
  104.                             </div>
  105.                         </div>
  106.                         <div class="col-lg-6 rtl-text">
  107.                             <div class="product-right">
  108.                                 {# Product title #}
  109.                                 <h2 class="product-name">{{ variant.name }}</h2>
  111.                                 <h3 class="price-detail text-stroke"><span class="product-price">{{ variant.getRetailPrice()}} EUR</span></h3>
  113.                                 <span class="text-uppercase">{{ 'Color' | trans({},'templates') }} : <strong id="colorSwatch">Red</strong></span>
  114.                                 <ul class="image-swatch mt-2">
  115.                                     {% for option in options %}
  116.                                         {% set foo = 'bar' %}
  117.                                         {# {% if option.productVariant.id == variant.id %} #}
  118.                                             <li 
  119.                                                 data-color="{{option.value}}"
  120.                                                 onmouseover="product.swatchColor('{{option.value}}')"
  121.                                                 {# onmouseenter="product.swatchImage('/uploads/tbint/{{ option.productVariant.apiId}}/{{ option.productVariant.mainImage}}')"  #}
  122.                                                 {% if option.productVariant.id == variant.id %}class="active"{%endif%}
  123.                                             >
  124.                                             <a href="{{ path('app_product_page',{'pid': product.id,'vid': option.productVariant.id,'gender': "mens"}) }}"><img src="{{ option.productVariant.mainImage}}" alt="" class="img-fluid blur-up lazyload"></a>
  125.                                             </li>
  126.                                         {# {% endif %} #}
  127.                                     {% endfor %}
  128.                                 </ul>
  129.                                 <div id="selectSize" class="addeffect-section product-description border-product">
  130.                                     <h6 class="product-title size-text">{{ 'select size' | trans({},'templates') }} </h6>
  131.                                     <div class="modal fade" id="sizemodal" tabindex="-1" role="dialog"
  132.                                          aria-labelledby="exampleModalLabel" aria-hidden="true">
  133.                                         <div class="modal-dialog modal-dialog-centered" role="document">
  134.                                             <div class="modal-content">
  135.                                                 <div class="modal-header">
  136.                                                     <h5 class="modal-title" id="exampleModalLabel">Sheer
  137.                                                         Straight Kurta</h5>
  138.                                                     <button type="button" class="btn-close" data-bs-dismiss="modal"
  139.                                                             aria-label="Close"><span aria-hidden="true">&times;</span></button>
  140.                                                 </div>
  141.                                                 <div class="modal-body"><img src="{{ asset('assets/images/size-chart.jpg')}}" alt=""
  142.                                                                              class="img-fluid blur-up lazyload"></div>
  143.                                             </div>
  144.                                         </div>
  145.                                     </div>
  147.                                     <h6 class="size-select error-message">{{ 'please select size' | trans({},'templates') }}</h6>
  148.                                         <div class="size-box">
  149.                                             <ul>
  150.                                                 {% for size in sizeOptions %}
  151.                                                         <li onclick="product.selectCurrent('{{size.productVariant.id}}',this)">
  152.                                                             <div id="v-info" data-id="{{size.productVariant.id}}" data-name="{{size.productVariant.name}}" data-price="{{size.productVariant.price}}" data-image="{{size.productVariant.mainImage}}">
  153.                                                              </div>
  154.                                                         <a href="javascript:void(0)">{{ size.value }}</a>
  155.                                                         </li>
  156.                                                 {% endfor %}
  157.                                             </ul>
  158.                                         </div>
  160.                                 </div>
  161.                                 <div class="product-buttons">
  162.                                     {% if variant.quantity == 0 %}
  163.                                         <div  id="cartEffect" class="btn p-btn-circle hover-solid btn-animation product">
  164.                                             <h6 class="product-title text-danger">{{ 'SOLD OUT' | trans({},'templates') }}</h6>
  165.                                         </div>
  166.                                     {% else %}
  167.                                         <div onclick="product.addToCart()" id="cartEffect" class="btn p-btn-circle btn-solid hover-solid btn-animation product">
  168.                                             <i class="fa fa-shopping-cart me-1" aria-hidden="true"></i> {{ 'add to cart' | trans({},'templates') }}
  169.                                         </div>
  170.                                     {% endif %}
  174.                                     <a href="#" data-p-id="{{ variant.product.id }}" onclick="addToFavoris(this,'fa-2xl')" class="btn btn-solid p-btn-circle">
  175.                                     
  176.                                         {% if variant.product.id in app.session.get('wishlist') %}
  177.                                             <i class='fa-solid fa-heart fa-2xl' style='color: #ff0000;'></i>
  178.                                         {% else %}
  179.                                             <i class='fa-regular fa-heart fa-2xl'></i>
  180.                                         {% endif %}
  181.                                     
  182.                                     </a>
  183.                                 </div>
  184.                                 <div class="product-count">
  185.                                     <ul class="product-shipping-info">
  186.                                         <li>
  187.                                             <i class="fa-solid fa-truck fa-2xl me-1"></i>
  188.                                             <span class="lang">{{ 'Free shipping on qualifying orders' | trans({},'templates') }}</span>
  189.                                         </li>
  190.                                         <li>
  191.                                             {# <img src="/assets/images/icon/truck.png" class="img-fluid" alt="image"> #}
  192.                                             <i class="fa-solid fa-box fa-2xl me-1"></i>
  193.                                             <span class="lang">{{ 'Free Returns' | trans({},'templates') }} </span>
  194.                                         </li>
  195.                                     </ul>
  196.                                 </div>
  197.                                 {# <div class="border-product">
  198.                                     <h6 class="product-title">Sales Ends In</h6>
  199.                                     <div class="timer">
  200.                                         <p id="demo"></p>
  201.                                     </div>
  202.                                 </div> #}
  203.                                 <div class="border-product">
  204.                                     <div class="row product-accordion">
  205.                                         <div class="col-sm-12">
  206.                                             <div class="accordion theme-accordion" id="accordionExample">
  207.                                                 {% if variant.description %}
  208.                                                 <div class="card">
  209.                                                     <div class="card-header" id="headingOne">
  210.                                                         <h5 class="mb-0"><button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">{{ 'product description' | trans({},'templates') }}</button></h5>
  211.                                                     </div>
  212.                                                     <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
  213.                                                         <div class="card-body">
  214.                                                             <p><p>{{ variant.description|raw }}</p></p>
  215.                                                         </div>
  216.                                                     </div>
  217.                                                 </div>
  218.                                                 {% endif %}
  220.                                                 {% if variant.composition %}
  221.                                                 <div class="card">
  222.                                                     <div class="card-header" id="headingThree">
  223.                                                         <h5 class="mb-0"><button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">{{ 'Material' | trans({},'templates')}}</button></h5>
  224.                                                     </div>
  225.                                                     <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample" style="">
  226.                                                         <div class="card-body">
  227.                                                             <p>{{ variant.composition | raw }}</p>
  228.                                                         </div>
  229.                                                     </div>
  230.                                                 </div>
  231.                                                 {% endif %}
  233.                                                 <div class="card">
  234.                                                     <div class="card-header" id="headingThree">
  235.                                                         <h5 class="mb-0"><button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">{{ 'Size & Fit' | trans({},'templates') }}</button></h5>
  236.                                                     </div>
  237.                                                     <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample" style="">
  238.                                                         <div class="card-body">
  239.                                                             <h6 class="product-title size-text"><span><a href="" data-bs-toggle="modal"
  240.                                                                                              data-bs-target="#sizemodal">{{ 'sizechart' | trans({},'templates') }}</a></span></h6>
  241.                                                         </div>
  242.                                                     </div>
  243.                                                 </div>
  244.                                                  <div class="card">
  245.                                                     <div class="card-header" id="headingThree">
  246.                                                         <h5 class="mb-0"><button class="btn btn-link collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">{{ 'Care Guide' | trans({},'templates') }}</button></h5>
  247.                                                     </div>
  248.                                                     <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample" style="">
  249.                                                         <div class="card-body">
  250.                                                             <p>{{ 'Material' | trans({},'templates')}}</p>
  251.                                                         </div>
  252.                                                     </div>
  253.                                                 </div>
  254.                                             </div>
  255.                                         </div>
  256.                                     </div>
  257.                                 </div>
  258.                                 <div class="border-product">
  259.                                     <h6 class="product-title">{{ 'share it' | trans({},'templates') }}</h6>
  260.                                     <div class="product-icon">
  261.                                         <ul class="product-social">
  262.                                             <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
  263.                                             <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
  264.                                             <li><a href="#"><i class="fab fa-twitter"></i></a></li>
  265.                                             <li><a href="#"><i class="fab fa-instagram"></i></a></li>
  266.                                             <li><a href="#"><i class="fa fa-rss"></i></a></li>
  267.                                         </ul>
  268.                                     </div>
  269.                                 </div>
  270.                             </div>
  271.                         </div>
  272.                     </div>
  273.                 </div>
  274.             </div>
  275.         </section>
  276.         <!-- Section ends -->
  278.         <div id="info" data-local={{ app.request.locale }} data-apiId={{ variant.apiId }} data-id="{{variant.id}}" data-name="{{variant.name}}" data-price="{{variant.price}}" data-image="{{variant.mainImage}}">
  279.         </div>
  281.         <!-- product section start -->
  282.         {% if relatedProducts %}
  283.         <section class="section-b-space ratio_asos">
  284.             <div class="container">
  285.                 <div class="row">
  286.                     <div class="col-12 product-related">
  287.                         <h2>{{ 'You might also like' | trans({},'templates') }}</h2>
  288.                     </div>
  289.                 </div>
  290.                 <div class="row autoplay search-product">
  291.                 {% for relatedProduct in relatedProducts %}
  292.                         
  293.                     <div class="col-xl-3 col-md-4 col-6">
  294.                         <div class="product-box p-1">
  295.                             <div class="img-wrapper">
  296.                                 <div class="front">
  297.                                     <a href="{{ path("app_product_page",{pid: relatedProduct.id, vid:relatedProduct.firstVariantId(),'gender': "mens"}) }}"><img src="{{ relatedProduct.mainImage }}"
  298.                                                      class="img-fluid blur-up lazyload bg-img" alt=""></a>
  299.                                 </div>
  300.                                 <div class="back">
  301.                                     <a href="{{ path("app_product_page",{pid: relatedProduct.id, vid:relatedProduct.firstVariantId,'gender': "mens"}) }}"><img src="{{ relatedProduct.getSecondImage()}}"
  302.                                                      class="img-fluid blur-up lazyload bg-img" alt=""></a>
  303.                                 </div>
  304.                                 <div class="cart-info cart-wrap">
  305.                                     <button onclick="product.addRelatedToCart(this)"
  306.                                             data-id="{{relatedProduct.firstVariantId()}}"
  307.                                             data-price="{{relatedProduct.firstVariantPrice()}}"
  308.                                             data-name="{{relatedProduct.name}}"
  309.                                             data-image="{{relatedProduct.mainImage}}"
  310.                                             {# data-bs-toggle="modal" data-bs-target="#addtocart" #}
  311.                                             title="Add to cart"
  312.                                     >
  313.                                     </button>
  314.                                      <a href="javascript:void(0)" data-p-id="{{ relatedProduct.id }}" onclick="addToFavoris(this)" title="{{ 'Add to Wishlist' | trans({},'templates') }}"><i class="ti-heart" aria-hidden="true"></i></a>
  315.                                 </div>
  316.                             </div>
  317.                             <div class="product-detail">
  318.                                 {# <div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i> <i
  319.                                             class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
  320.                                 </div> #}
  321.                                 <a href="{{ path("app_product_page",{pid: relatedProduct.id, vid:relatedProduct.firstVariantId(),'gender': "mens"}) }}">
  322.                                     <h6>{{ relatedProduct.name }}</h6>
  323.                                 </a>
  324.                                 <h4>{{ relatedProduct.firstVariantPrice() }} EUR</h4>
  325.                                 {# <ul class="color-variant">
  326.                                     <li class="bg-light0"></li>
  327.                                     <li class="bg-light1"></li>
  328.                                     <li class="bg-light2"></li>
  329.                                 </ul> #}
  330.                             </div>
  331.                         </div>
  332.                     </div>
  333.                 {% endfor %}
  334.                     </div>
  335.                 </div>
  336.             </div>
  337.         </section>
  338.         {% endif %}
  339.         <!-- product section end -->
  343.         <!-- tap to top start -->
  344.         <div class="tap-top">
  345.             <div><i class="fa fa-angle-double-up"></i></div>
  346.         </div>
  347.         <!-- tap to top end -->
  351. {% endblock %}
  353.  {% block newsletter %}
  354.                 {% include 'front_end/base/newsletter.twig' %}
  355. {% endblock %}
  357. {% block js %}
  358.         <script src="{{ asset('assets/js/product.js') }}"></script>
  359.         {% include 'mens/product/scripts.html.twig' %}
  360.         <script type="text/javascript" src="{{ asset('assets/slick/slick.min.js') }}"></script>
  361.         <script type="text/javascript">
  362.                 $('.autoplay').slick({
  363.                         slidesToShow: 4,
  364.                         slidesToScroll: 1,
  365.                         autoplay: true,
  366.                         autoplaySpeed: 2000,
  367.                 });
  368.         </script>
  369.         <script src="{{ asset('assets/js/modules.js') }}"></script>
  370. {% endblock %}