templates/main/shop/show.html.twig line 1

Open in your IDE?
  1. {% extends base ~"/base.html.twig" %}
  2. {% import "macros/modal.html.twig" as modal %}
  3. {% block modal %}
  4. {{ modal.defaultLest()}}
  5. {% endblock %}
  6. {% block javascripts %}
  7. <div id="fb-root"></div>
  8. <script>(function (d, s, id) {
  9.         var js, fjs = d.getElementsByTagName(s)[0];
  10.         if (d.getElementById(id)) return;
  11.         js = d.createElement(s); js.id = id;
  12.         js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
  13.         fjs.parentNode.insertBefore(js, fjs);
  14.     }(document, 'script', 'facebook-jssdk'));</script>
  15. {% endblock %}
  17. {% block foot %}
  18. <script src="{{asset('js/article_detail.js') }}"></script>
  19. {% endblock %}
  20. {% block title %}{{ app_name }} - {{article.title}} - Boutique de vente en ligne {% endblock %}
  22. {% block favicon %}
  23. {% for item in article.images|slice(0,1) %}
  24. <link rel="shortcut icon" width="48px" height="48px" href="{{ asset('img/article/' ~ item.name ) }}">
  25. {% else %}
  26. <link rel="shortcut icon" width="48px" height="48px" href="{{ asset('img/' ~ site.logo2) }}">
  27. {% endfor %}
  28. {% endblock %}
  29. {% block main %}
  30. <main class="main">
  31.     <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
  32.         <div class="container d-flex align-items-center">
  33.             <ol class="breadcrumb">
  34.                 <li class="breadcrumb-item">
  35.                     <a href="{{ path('home') }}">{{'Home'|trans}}</a>
  36.                 </li>
  37.                 <li class="breadcrumb-item">
  38.                     <a href="{{ path('articles') }}">{{ 'Shop'|trans }}</a>
  39.                 </li>
  40.                 <li class="breadcrumb-item">
  41.                     <a href="{{path('articles_category',{
  42.                         category3_slug:article.category.category2.category3.slug,
  43.                         category2_slug:article.category.category2.slug,
  44.                         category:article.category.slug}) }}">
  45.                         {{ article.category.title }}
  46.                     </a>
  47.                 </li>
  48.                 <li class="breadcrumb-item active" aria-current="page">{{ article.title }}</li>
  49.             </ol>
  50.             <!-- End .pager-nav -->
  51.         </div>
  52.         <!-- End .container -->
  53.     </nav>
  54.     <!-- End .breadcrumb-nav -->
  56.     <div class="page-content">
  57.         {% include "includes/_alerte.html.twig" %}
  58.         <div class="container">
  59.             <div class="product-details-top">
  60.                 <div class="row">
  61.                     <div class="col-md-4">
  62.                         <div class="product-gallery">
  63.                             <figure class="product-main-image">
  64.                                 {% import "macros/etats.html.twig" as etats %}
  65.                                 {% if article.quantity <= 0 %} <span class="product-label label-out bg-danger">{{'Out of
  66.                                     Stock'|trans}}</span>
  67.                                     {% endif %}
  68.                                     {{ etats.articleLabel(article.label) }}
  69.                                     {% for item in article.images|slice(0,1) %}
  70.                                     <img id="product-zoom" src="{{ asset('img/article/' ~ item.name ) }}"
  71.                                         alt="{{ article.title }}"
  72.                                         data-zoom-image="{{ asset('img/article/' ~ item.name ) }}" alt="product image">
  74.                                     {% else %}
  75.                                     <div class="single-prd-item">
  76.                                         <img class="img-fluid" src="{{ asset('img/article/vide.png') }}"
  77.                                             alt="{{ article.title }}">
  78.                                     </div>
  79.                                     {% endfor %}
  80.                             </figure>
  81.                             <!-- End .product-main-image -->
  82.                             <div class="row">
  83.                                 <div class="col-12 product-image-thumbs">
  84.                                     {% for item in article.images %}
  85.                                     <a href="{{ asset('img/article/' ~ item.name )}}" class="product-gallery-show">
  86.                                         <div class="product-image-thumb">
  87.                                             <img src="{{ asset('img/article/' ~ item.name )}}" width="100px"
  88.                                                 alt="{{ item.name }}">
  89.                                         </div>
  90.                                     </a>
  91.                                     {% endfor %}
  92.                                 </div>
  93.                             </div>
  94.                         </div>
  95.                         <!-- End .product-gallery -->
  96.                     </div>
  97.                     {# <div class="col-md-4">
  98.                         <div class="product-gallery">
  99.                             <figure class="product-main-image">
  100.                                 {% import "macros/etats.html.twig" as etats %}
  101.                                 {% if article.quantity <= 0 %} <span class="product-label label-out bg-danger">{{'Out of
  102.                                     Stock'|trans}}</span>
  103.                                     {% else %}
  104.                                     {{ etats.articleLabel(article.label) }}
  105.                                     {% endif %}
  106.                                     {% for item in article.images|slice(0,1) %}
  107.                                     <img id="product-zoom" src="{{ asset('img/article/' ~ item.name ) }}"
  108.                                         alt="{{ article.title }}"
  109.                                         data-zoom-image="{{ asset('img/article/' ~ item.name ) }}" alt="product image">
  111.                                     {% else %}
  112.                                     <div class="single-prd-item">
  113.                                         <img class="img-fluid" src="{{ asset('img/article/vide.png') }}"
  114.                                             alt="{{ article.title }}">
  115.                                     </div>
  116.                                     {% endfor %}
  117.                             </figure>
  118.                             <!-- End .product-main-image -->
  119.                             <div class="row">
  120.                                 <div class="col-12 product-image-thumbs">
  121.                                     {% for item in article.images %}
  122.                                     <a href="{{ asset('img/article/' ~ item.name )}}" class="product-gallery-show">
  123.                                         <div class="product-image-thumb">
  124.                                             <img src="{{ asset('img/article/' ~ item.name )}}" width="100px"
  125.                                                 alt="{{ item.name }}">
  126.                                         </div>
  127.                                     </a>
  128.                                     {% endfor %}
  129.                                 </div>
  130.                             </div>
  131.                         </div>
  132.                         <!-- End .product-gallery -->
  133.                     </div> #}
  134.                     <!-- End .col-md-6 -->
  136.                     <div class="col-md-8">
  137.                         <div class="product-details sticky-content">
  138.                             <h1 class="product-title">{{ article.title }}</h1>
  139.                             <!-- End .product-title -->
  141.                             <div class="ratings-container">
  142.                                 <div class="ratings">
  143.                                     <div class="ratings-val" style="width: {{ rating(article) }}%"></div>
  144.                                     <!-- End .ratings-val -->
  145.                                 </div>
  146.                                 <!-- End .ratings -->
  147.                                 <a class="ratings-text" href="#product-accordion" id="review-link">( {{
  148.                                     article.comments|length}} {{ (article.comments|length > 1 )?
  149.                                     'Commentaires':'Commentaire' }} )</a>
  150.                             </div>
  151.                             <!-- End .rating-container -->
  153.                             <div class="product-price">
  154.                                 {% if article.reduction > 0 %}
  155.                                 <span class="new-price">{{ article.getNewPrice |price_format }} {{
  156.                                     site.current_name}}</span>
  157.                                 <span class="old-price">{{ article.formatterPrice }}</span>
  158.                                 {% else %}
  159.                                 <span class="new-price">{{ article.getNewPrice |price_format }} {{
  160.                                     site.current_name }}</span>
  161.                                 {% endif %}
  162.                             </div>
  163.                             <!-- End .product-price -->
  165.                             <div class="product-content">
  166.                                 <p>{{ article.detail }}</p>
  167.                                 
  168.                             </div>
  169.                             <!-- End .product-content -->
  171.                             <div class="row">
  172.                                 <div class="col-lg-12 my-4">
  173.                                     <small id="helpId" class="text-muted">Stock: {{ article.quantity }} </small>
  174.                                     <form class="form-row" action="{{ path('article_show_add_cart') }}" method="post">
  175.                                         {% if article.quantity > 0 %}
  176.                                         <div class="form-group col-lg-3">
  177.                                             <input type="hidden" name="article_id" value="{{ article.id }}">
  178.                                             <input type="number" class="form-control" min="1"
  179.                                                 max="{{ article.quantity }}" name="qty" value="1">
  180.                                         </div>
  181.                                         <div class="form-group col-lg-6 product-details-action">
  182.                                             <button type="submit" class="btn-product btn-cart btn" name="card-add">
  183.                                                 {{'Add to cart'|trans}}
  184.                                             </button>
  185.                                         </div>
  186.                                         {% else %}
  187.                                         <p>Le produit est en rupture de stock</p>
  188.                                         {% endif %}
  189.                                     </form>
  190.                                 </div>
  191.                             </div>
  192.                             <div class="product-details-action">
  193.                                 <div class="details-action-wrapper article-{{article.id }}">
  194.                                     {% if app.user %} {% if not isToFavoris(app.user, article) %}
  195.                                     <a href="{{ path('favoris_add',{id:article.id}) }}" data-id="{{ article.id }}"
  196.                                         class="btn-product show btn-wishlist js-favoris js-add-favoris">
  197.                                         <span>{{'add to wishlist'|trans}}</span>
  198.                                     </a>
  199.                                     {% else %}
  200.                                     <a href="{{ path('favoris_remove',{id:article.id}) }}" data-id="{{ article.id }}"
  201.                                         class="btn-product show btn-wishlist js-favoris  js-remove-favoris">
  202.                                         <span class=" text-danger">{{'remove to wishlist'|trans}}</span>
  203.                                     </a>
  204.                                     {% endif %} {% else %}
  205.                                     <a href="#" class="btn-product show btn-wishlist js-favoris js-favoris-login">
  206.                                         <span>{{'add to wishlist'|trans}}</span>
  207.                                     </a>
  208.                                     {% endif %}
  209.                                 </div>
  210.                                 <div class="details-action-wrapper">
  211.                                     <a target="_blank"
  212.                                         href="https://api.whatsapp.com/send?phone={{ site.tel_whatsapp }}&text=Salut, Je souhaite commander cet article: {{ url('articles_show', { category: article.category.slug, slug: article.slug, id: article.id}) }}"
  213.                                         class="btn-product show">
  214.                                         <span>
  215.                                             <i class="icon-whatsapp"></i> Commander Via whatsapp
  216.                                         </span>
  217.                                     </a>
  218.                                 </div>
  219.                                 <!-- End .details-action-wrapper -->
  220.                             </div>
  221.                             <!-- End .product-details-action -->
  223.                             <div class="product-details-footer">
  224.                                 <div class="product-cat">
  225.                                     <span>{{'Category'|trans}}:</span>
  226.                                     <a href="{{path('articles_category',{
  227.                                         category3_slug:article.category.category2.category3.slug,
  228.                                         category2_slug:article.category.category2.slug,
  229.                                         category:article.category.slug}) }}">{{article.category.category2.title}} |
  230.                                         {{article.category.title}}</a>
  231.                                 </div>
  232.                                 <!-- End .product-cat -->
  234.                                 {% include base ~"/shop/_social_icons.html.twig" %}
  235.                             </div>
  236.                             <!-- End .product-details-footer -->
  237.                             <div class="accordion accordion-plus product-details-accordion" id="product-accordion">
  238.                                 <div class="card card-box card-sm">
  239.                                     <div class="card-header" id="product-desc-heading">
  240.                                         <h2 class="card-title">
  241.                                             <a class="collapsed" role="button" data-toggle="collapse"
  242.                                                 href="#product-accordion-desc" aria-expanded="false"
  243.                                                 aria-controls="product-accordion-desc">
  244.                                                 Description
  245.                                             </a>
  246.                                         </h2>
  247.                                     </div>
  248.                                     <!-- End .card-header -->
  249.                                     <div id="product-accordion-desc" class="collapse"
  250.                                         aria-labelledby="product-desc-heading" data-parent="#product-accordion">
  251.                                         <div class="card-body">
  252.                                             <div class="product-desc-content">
  253.                                                 <p>{{ article.description|raw }}</p>
  254.                                             </div>
  255.                                             <!-- End .product-desc-content -->
  256.                                         </div>
  257.                                         <!-- End .card-body -->
  258.                                     </div>
  259.                                     <!-- End .collapse -->
  260.                                 </div>
  261.                                 <!-- End .card -->
  262.                                 <div class="card card-box card-sm">
  263.                                     {% if article.options is not empty %}
  264.                                     <div class="card-header" id="product-info-heading">
  265.                                         <h2 class="card-title">
  266.                                             <a class="collapsed" role="button" data-toggle="collapse"
  267.                                                 href="#product-accordion-info" aria-expanded="false"
  268.                                                 aria-controls="product-accordion-info">
  269.                                                 Information suplémentaire ({{article.options|length}})
  270.                                             </a>
  271.                                         </h2>
  272.                                     </div>
  273.                                     {% endif %}
  274.                                     <!-- End .card-header -->
  275.                                     <div id="product-accordion-info" class="collapse"
  276.                                         aria-labelledby="product-info-heading" data-parent="#product-accordion">
  277.                                         <div class="card-body">
  278.                                             <div class="product-desc-content">
  279.                                                 <div class="row">
  280.                                                     {% for item in article.options %}
  281.                                                     <div class="col-md-6 col-12 font-weight-bold">{{
  282.                                                         item.title|capitalize }}</div>
  283.                                                     <div class="col-md-6 col-12">{{ item.content }}</div>
  284.                                                     {% endfor %}
  285.                                                 </div>
  286.                                             </div>
  287.                                             <!-- End .product-desc-content -->
  288.                                         </div>
  289.                                         <!-- End .card-body -->
  290.                                     </div>
  291.                                     <!-- End .collapse -->
  292.                                 </div>
  293.                                 <!-- End .card -->
  295.                                 <div class="card card-box card-sm">
  296.                                     <div class="card-header" id="product-review-heading">
  297.                                         <h2 class="card-title">
  298.                                             <a class="" role="button" data-toggle="collapse"
  299.                                                 href="#product-accordion-review" aria-expanded="true"
  300.                                                 aria-controls="product-accordion-review">
  301.                                                 {{ (article.comments|length > 1 )?
  302.                                                 'Commentaires':'Commentaire' }} ({{ article.comments|length}})
  303.                                             </a>
  304.                                         </h2>
  305.                                     </div>
  306.                                     <!-- End .card-header -->
  307.                                     <div id="product-accordion-review" class="collapse show"
  308.                                         aria-labelledby="product-review-heading" data-parent="#product-accordion">
  309.                                         <div class="card-body">
  310.                                             <div id="load_comment" class="reviews">
  311.                                                 {% include base ~"/shop/_comment.html.twig" %}
  312.                                             </div>
  314.                                             <!-- End .reviews -->
  315.                                             {% if is_buy %} {% if not is_comment %}
  316.                                             <div class="form-comment">
  317.                                                 {{ form_start(formComment, { 'attr':{ 'id':'form_comment',
  318.                                                 'novalidate':'novalidate' } }) }}
  319.                                                 <div class="row">
  320.                                                     <div class="ratings-comment col-12 col-md-12 text-center">
  321.                                                         <a class="star star-1" href="#">
  322.                                                             <i class="icon-star" style="font-size:3rem"></i>
  323.                                                         </a>
  324.                                                         <a href="#" class="star star-2">
  325.                                                             <i class="icon-star" style="font-size:3rem"></i>
  326.                                                         </a>
  327.                                                         <a href="#" class="star star-3">
  328.                                                             <i class="icon-star" style="font-size:3rem"></i>
  329.                                                         </a>
  330.                                                         <a href="#" class="star star-4">
  331.                                                             <i class="icon-star" style="font-size:3rem"></i>
  332.                                                         </a>
  333.                                                         <a href="#" class="star star-5">
  334.                                                             <i class="icon-star" style="font-size:3rem"></i>
  335.                                                         </a>
  336.                                                         <input id="rating" type="hidden" name="rating" value="">
  337.                                                     </div>
  339.                                                     <div class="col-md-12 col-12">
  340.                                                         {{form_row(formComment.content)}}
  341.                                                     </div>
  342.                                                 </div>
  343.                                                 {% if is_granted('ROLE_CLIENT') %}
  344.                                                 <div class="text-center">
  345.                                                     <button type="submit" id="btn-add-comment"
  346.                                                         class="btn btn-primary">Evaluer</button>
  347.                                                 </div>
  348.                                                 {% endif %} {{ form_widget(formComment) }} {{ form_end(formComment) }}
  349.                                             </div>
  350.                                             {% endif %} {% endif %}
  351.                                         </div>
  352.                                         <!-- End .card-body -->
  353.                                     </div>
  354.                                     <!-- End .collapse -->
  355.                                 </div>
  356.                                 <!-- End .card -->
  357.                             </div>
  358.                             <!-- End .accordion -->
  359.                         </div>
  360.                         <!-- End .product-details -->
  361.                     </div>
  362.                     <!-- End .col-md-6 -->
  363.                 </div>
  364.                 <!-- End .row -->
  365.             </div>
  366.             <!-- End .product-details-top -->
  368.             <hr class="mt-3 mb-5">
  370.             <h2 class="title text-center mb-4">Ces produits peuvent vous intéresser</h2>
  371.             <!-- End .title text-center -->
  372.             <div class="owl-carousel owl-full carousel-equal-height carousel-with-shadow" data-toggle="owl"
  373.                 data-owl-options='{
  374.                         "nav": true,
  375.                         "dots": false,
  376.                         "margin": 20,
  377.                         "loop": false,
  378.                         "autoplay":true,
  379.                         "autoplayTimeout":4000,
  380.                         "responsive": {
  381.                             "0": {
  382.                                 "items":2
  383.                             },
  384.                             "480": {
  385.                                 "items":2
  386.                             },
  387.                             "768": {
  388.                                 "items":2
  389.                             },
  390.                             "992": {
  391.                                 "items":3
  392.                             },
  393.                             "1200": {
  394.                                 "items":5
  395.                             }
  396.                         }
  397.                     }'>
  398.                 {% for item in article_rand %}
  399.                 {% include base ~ "/home/_article.html.twig" %}
  400.                 {% endfor %}
  401.             </div>
  402.             <!-- End .owl-carousel -->
  403.         </div>
  404.         <!-- End .container -->
  405.     </div>
  406.     <!-- End .page-content -->
  407. </main>
  408. {% endblock %}