templates/frontend/product.html.twig line 1

Open in your IDE?
  1. {% extends 'frontend/base.html.twig' %}
  2. {% block JS %}
  3. <script src="https://use.fontawesome.com/874ad7ad81.js"></script>
  4. <!-- Menu principale(mobile)-->
  5. <!-- Optional JavaScript -->
  6. <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  7. <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  8. <script type="text/javascript" src="/assets/frontend/js/jquery.photoswipe-global.js"></script>
  9. <script type="text/javascript" src="/assets/frontend/js/photoswipe.min.js"></script>
  10. <script type="text/javascript" src="/assets/frontend/js/photoswipe-ui-default.js"></script>
  11. <script type="text/javascript" src="/assets/frontend/js/jquery.photoswipe-global.js"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
  13.         integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
  14.         crossorigin="anonymous"></script>
  15. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
  16.         integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
  17.         crossorigin="anonymous"></script>
  18. <script type="text/javascript" src="/assets/frontend/js/owl.carousel.min.js"></script>
  19. <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
  20. <script type="text/javascript" src="/assets/frontend/js/jquery.mmenu.js"></script>
  21. <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
  22. <script type="text/javascript">
  23.     $(function() {
  24.         $('#menu').mmenu();
  26.         $('.endless_container').infiniteScroll({
  27.             path: '.page-next',
  28.             append: '.endless_page',
  29.             history: false,
  30.         });
  32.         $('.endless_container').on( 'request.infiniteScroll', function( event, path, fetchPromise ) {
  33.                 console.log(`Loading page: ${path}`);
  34.                 $('#product-loader').show();
  35.                 });
  36.                  
  37.                 $('.endless_container').on( 'append.infiniteScroll', function( event, body, path, items, response ) {
  38.                 console.log(`Appended ${items.length} items on ${path}`);
  39.                 $('#product-loader').hide();
  40.                 });
  41.     });
  42. </script>
  43. {#
  44. {% if global.displayStarterKits %}
  45. <script src="/assets/shared/plugins/slick-modal-css3-powered-popups/src/demos/js/carousel_slider.js"></script>
  46. <script src="/assets/shared/plugins/slick-modal-css3-powered-popups/src/plugin/js/jquery.slickmodal.min.js"></script>
  47. <script type="text/javascript">
  48.     $(function() {
  49.         $('.carouselSlider').SlickModals({
  50.             restrict_cookieDays: '1',
  51.             restrict_showAfterVisits: 1,
  52.             restrict_showAfterVisitsResetWhenShown: false,
  53.             popup_type: 'exit',
  54.             popup_animation: 'zoomIn',
  55.             popup_css: {
  56.                 'width': '480px',
  57.                 'height': {% if global.starterKits | length > 2 %}'480px'{% else %}'400px'{% endif %},
  58.                 'background': '#fff',
  59.                 'padding': '40px',
  60.                 'margin': '0'
  61.             },
  62.             overlay_css: {
  63.                 'background': 'rgba(0,0,0,0.3)'
  64.             },
  65.             mobile_breakpoint: '480px',
  66.             mobile_position: 'center',
  67.             mobile_css: {
  68.                 'width': '100%',
  69.                 'height': {% if global.starterKits | length > 2 %}'480px'{% else %}'400px'{% endif %},
  70.                 'background': '#fff',
  71.                 'padding': '30px',
  72.                 'margin': '0'
  73.             },
  74.             callback_afterVisible: function () {
  75.                 sm_carouselSlider('.carouselSlider');
  76.             }
  77.         });
  78.     });
  79. </script>
  80. {% endif %}
  81. #}
  82. <script type="text/javascript" src="/assets/frontend/js/main.js"></script>
  83. <script type="text/javascript" src="/assets/frontend/js/registration.js"></script>
  84. <script type="text/javascript" src="/assets/frontend/js/region-currency-lang-select.js"></script>
  85. <script type="text/javascript" src="/assets/frontend/js/custom-select.js"></script>
  86. <script src="{{ asset('build/frontend/category.js') }}"></script>
  87. {% endblock %}
  88. {% block title %}{{product.name}}, {{product.brandName}} | {{product.company.name}}{% endblock %}
  89. {% block metaDescription %}{{product.description | striptags | slice(0, 160) |raw }}{% endblock %}
  90. {% block CSS %}
  91.     {{ block('CSS', 'frontend/category.html.twig') }}
  92.     <link href="/assets/frontend/css/jquery.mmenu.css" rel="stylesheet" type="text/css" media="all">
  93.     <!-- Bootstrap CSS -->
  94.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
  95.                            integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  96.     <link rel="stylesheet" href="/assets/frontend/css/owl.carousel.min.css">
  97.     <link href="/assets/frontend/css/styles.css?ver={{global.cssVersion}}" rel="stylesheet" type="text/css" media="all">
  99.     <!-- Add the slick-theme.css if you want default styling -->
  100.     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
  101.     <!-- Add the slick-theme.css if you want default styling -->
  102.     <link rel="stylesheet" type="text/css"
  103.                            href="https://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
  105.     <!-- Add photoswipe -->
  106.     <link rel="stylesheet" type="text/css" href="/assets/frontend/css/photoswipe.css"/>
  107.     <link rel="stylesheet" type="text/css" href="/assets/frontend/css/default-skin.css"/>
  109.     <style>
  110.     .product-btn-like {
  111.         right: 25px!important;
  112.     }
  113.     </style>
  114. {% endblock %}
  116. {% block content %}
  117. <div class="product" id="product">
  118.     <div class="product-info" style="padding-bottom: 20px;">
  119.         <div class="row">
  120.             <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 {% if product.mainImage is empty %}d-none{% endif %} d-xl-block  d-lg-block d-md-block">
  121.                 <div class="">
  122.                     <div class="row">
  123.                         <div id="product-thumbnail1" class="col-sm-12" style="padding-bottom: 10px;text-align: center;overflow:hidden;">
  124.                             <img src="{{path('getImageAsThumb', {'id': product.mainImage.Id, 'height': '600', 'width': '600'})}}" alt="product name">
  125.                         </div>
  126.                     </div>
  127.                     <div class="row">
  129.                         {#
  130.                         <ul class="gallery-thumb">
  131.                             {% for img in product.images %}
  132.                             <li>
  133.                                 <a href="#product-thumbnail-{{img.id}}">
  134.                                     <img src="{{path('getImageAsCroppedThumb', {'id': img.id, 'height': '100', 'width': '100'})}} " alt="product name">
  135.                                 </a>
  136.                             </li>
  137.                             {% endfor %}
  138.                         </ul>
  139.                         #}
  140.                         <div class="col-md-12" {% if product.images | length <= 1 %}style="display:none;"{% endif %}>
  141.                             <div class="slider-wrap">
  142.                                 <div class="slider-naw-container">
  143.                                     <!--<div class="slider-nav">-->
  144.                                     <!--<div class="prev-slider-products-categories"><i class="fa fa-angle-left" aria-hidden="true"></i></div>-->
  145.                                     <!--<div class="next-slider-products-categories"><i class="fa fa-angle-right" aria-hidden="true"></i></div>-->
  146.                                     <!--</div>-->
  147.                                 </div>
  149.                                 <div class="photoswipe-gallery" data-pswp-uid="1">
  150.                                     <div id="categories-gallery" class="categories-slider owl-carousel product-gallery">
  151.                                         <!--<div id="categories-gallery" class="categories-slider owl-carousel">-->
  153.                                         {% for image in product.images %}
  154.                                         <a class="categories-slider__item item"
  155.                                            href="{{path('getImage', {'id': image.Id})}}" data-size="{{image.Width}}x{{image.Height}}"
  156.                                                                                          data-med="{{path('getImage', {'id': image.Id})}}"
  157.                                                                                          data-med-size="{{image.Width}}x{{image.Height}}" data-author="">
  158.                                             <img src="{{path('getImageAsCroppedThumb', {'id': image.Id, 'height': '100', 'width': '100' })}}" alt="">
  159.                                             <figure style="display:none;">{{image.description}}</figure>
  161.                                         </a>
  162.                                         {% endfor %}
  163.                                         </div>
  165.                                         <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  167.                                             <!-- Background of PhotoSwipe.
  168.                                                 It's a separate element, as animating opacity is faster than rgba(). -->
  169.                                                 <div class="pswp__bg"></div>
  171.                                                 <!-- Slides wrapper with overflow:hidden. -->
  172.                                                 <div class="pswp__scroll-wrap">
  174.                                                     <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
  175.                                                     <!-- don't modify these 3 pswp__item elements, data is added later on. -->
  176.                                                     <div class="pswp__container">
  177.                                                         <div class="pswp__item"></div>
  178.                                                         <div class="pswp__item"></div>
  179.                                                         <div class="pswp__item"></div>
  180.                                                     </div>
  182.                                                     <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
  183.                                                     <div class="pswp__ui pswp__ui--hidden">
  185.                                                         <div class="pswp__top-bar">
  187.                                                             <!--  Controls are self-explanatory. Order can be changed. -->
  189.                                                             <div class="pswp__counter"></div>
  191.                                                             <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
  193.                                                             <button class="pswp__button pswp__button--share" title="Share"></button>
  195.                                                             <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
  197.                                                             <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
  199.                                                             <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
  200.                                                             <!-- element will get class pswp__preloader--active when preloader is running -->
  201.                                                             <div class="pswp__preloader">
  202.                                                                 <div class="pswp__preloader__icn">
  203.                                                                     <div class="pswp__preloader__cut">
  204.                                                                         <div class="pswp__preloader__donut"></div>
  205.                                                                     </div>
  206.                                                                 </div>
  207.                                                             </div>
  208.                                                         </div>
  210.                                                         <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
  211.                                                             <div class="pswp__share-tooltip"></div>
  212.                                                         </div>
  214.                                                         <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
  215.                                                         </button>
  217.                                                         <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
  218.                                                         </button>
  220.                                                         <div class="pswp__caption">
  221.                                                             <div class="pswp__caption__center"></div>
  222.                                                         </div>
  224.                                                     </div>
  225.                                                 </div>
  226.                                         </div>
  227.                                     </div>
  228.                                 </div>
  229.                             </div>
  230.                         </div>
  231.                     </div>
  232.                 </div>
  233.                 <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
  234.                     <div class="product-board">
  235.                         <p class="product-subtitle-brand">
  236.                         <ul class="breadcrumb breadcrump-product">
  237.                             {% for b in product.breadCrumpTrail | reverse %}
  238.                                 <li><a href="/categorie{{b.fullUrlPath}}">{{b.name}}</a></li>
  239.                             {% endfor %}
  240.                         </ul>
  241.                         </p>
  242.                         <p class="section-title section-title-left product-big-title" {% if product.isDisplayedInAssociationOnly and global.associationUserIsBrowsing == false %}  style="color: red !important;" {% endif %}>
  243.                             {{product.name}}
  244.                             {% if product.alimentsDuQuebec %}
  245.                                 {% if product.alimentsDuQuebecCertification == "0" %}
  246.                                     <img src="/assets/frontend/images/alimentsDuQuebec/basic.png" style="margin-left: 20px;float: right; max-height: 100px;">
  247.                                 {% elseif product.alimentsDuQuebecCertification == "1" %}
  248.                                     <img src="/assets/frontend/images/alimentsDuQuebec/prepared.png" style="margin-left: 20px;float: right; max-height: 100px;">
  249.                                 {% elseif product.alimentsDuQuebecCertification == "2" %}
  250.                                     <img src="/assets/frontend/images/alimentsDuQuebec/bio_basic.png" style="margin-left: 20px;float: right; max-height: 100px;">
  251.                                 {% elseif product.alimentsDuQuebecCertification == "3" %}
  252.                                     <img src="/assets/frontend/images/alimentsDuQuebec/bio_prepared.png" style="margin-left: 20px;float: right; max-height: 100px;">
  253.                                 {% else %}
  254.                                     <img src="/assets/frontend/images/alimentsDuQuebec/basic.png" style="margin-left: 20px;float: right; max-height: 100px;">
  255.                                 {% endif %}
  256.                             {% endif %}
  257.                             {% if product.isPrixLaureat %}
  258.                                 <img src="/assets/frontend/images/LOGO-PI-2020-Laureat-FR.jpg" style="margin-left: 20px;float: right; max-height: 100px;">
  259.                             {% endif %}
  260.                         </p>
  262.                         <div class="product-show-details">
  263.                             {% if product.brandName %}
  264.                                 <p class="product-subtitle-brand">
  265.                                     {{product.brandName}}
  266.                                 </p>
  267.                             {% endif %}
  268.                             <p class="product-subtitle">
  269.                                 <a href="{{path('companyStore', {'urlname': product.company.urlname, 'id':product.company.id })}}">
  270.                                     {{product.company.name}}
  271.                                 </a>
  272.                             </p>
  273.                             {% if product.certifications | length > 0 %}
  274.                                 {% for certification in product.certifications %}
  275.                                     <p class="product-subtitle-certification">{{certification.name}}</p>
  276.                                 {% endfor %}
  277.                             {% endif %}
  278.                             <div class="product-price">
  279.                                 {% if product.hasDiscount %}
  280.                                     <strike>{{product.displayPrice}}</strike> {{product.displayPrice(true)}}
  281.                                 {% else %}
  282.                                     {# {{product.displayPrice}} #}
  283.                                      {{ product.getPriceUnitStandard }}
  284.                                      <br>
  285.                                    <span style="font-size: 12px;color: gray;">
  286.                                         {% if product.getUnitAmount and product.isBoxOfProducts == false and product.getPricePer100gramme %}
  287.                                             {{product.getPricePer100gramme}}
  288.                                         {% endif %}
  289.                                     </span>
  290.                                 {% endif %}
  292.                                 {% if product.frontpageVariations %}
  293.                                 <br/>
  294.                                 <h5 class="font-weight-bold" style="color:darkgray;">
  295.                                     Autre(s) format(s)
  296.                                 </h5>
  297.                                 <ul style="color: darkgray; font-size: small;">
  298.                                     {% for variation in product.frontpageVariations %}
  299.                                         <li><a href="{{variation.fullUrl}}">{{variation.nameWithDetails}}</a></li>
  300.                                     {% endfor %}
  301.                                 </ul>
  302.                                 {% endif %}
  303.                             </div>
  305.                             <p class="product-values">{{ product.isShippedByMaturin  ? '' : '' }}</p>
  307.                             {% if product.isShippedByMaturin %}
  308.                                 {% if product.qtyReadyToShip > 0 and product.isSalable %}
  309.                                     <p class="product-values">{#{{product.qtyReadyToShip}}#} Disponible</p>
  310.                                 {% else %}
  311.                                     <p class="product-values">Inventaire épuisé</p>
  312.                                 {% endif %}
  313.                             {% else %}
  314.                                 {% if global.getAssociationUserIsBrowsing %}
  315.                                     <p class="product-values">*** Cueillette au marché ***</p>
  316.                                 {% else %}
  317.                                     {% if independentDelivery %}<p class="product-values">***Livraison indépendante***</p>{% endif %}
  318.                                 {% endif %}
  319.                             {% endif %}
  321.                             {% if product.isShippedByMaturin %}
  322.                                 <img src="/images/maturinshipping.png" alt="Livraison par Maturin" title="Livraison par Maturin">
  323.                                 Préparation par Maturin<br>
  325.                                 {% if product.qtyReadyToShip > 0 %}
  327.                                     {% set route = global.estimationShippingRoute(product)  %}
  329.                                     {% if route['route'] is not null and not route['route'].isPuro %}
  330.                                         <span class="product-values">
  331.                                             Recevez-le {{route['date'] | localizeddate('medium', 'none', null, '-7', 'EEEE d MMMM')}}  entre 12h et 21h
  332.                                         </span>
  333.                                     {% else %}
  334.                                         <span class="product-values">
  335.                                             Recevez-le entre {{route['date'] | localizeddate('medium', 'none', null, '-7', 'EEEE d MMMM')}}
  336.                                             et {{global.add48hToDate(route['date']) | localizeddate('medium', 'none', null, '-7', 'EEEE d MMMM')}}  entre 12h et 21h
  337.                                         </span>
  338.                                     {% endif %}
  340.                                     {% if product.isJustInTime %}
  341.                                         <br>
  342.                                         Ceci est un produit frais cueillie/préparé spécialement pour vous. Pour être livré la semaine suivante, vous devez <strong>passer votre commande avant le dimanche à minuit</strong>, les produits étant cueillies/préparés les lundis et livrés du Mardi au vendredi.
  343.                                         <br>
  344.                                     {% endif %}
  345.                                 {% endif %}
  346.                                 <br>
  347.                                 <br>
  348.                             {% else %}
  349.                                 <ul>
  350.                                     {% for delivery in product.deliveryMethods %}
  351.                                         <li style="list-style-type: none;">{{delivery.displayPrice}}</li>
  352.                                     {% endfor %}
  353.                                 </ul>
  354.                             {% endif %}
  355.                         </div>
  356.                         <div class="product-quantity">
  357.                             {% if product.isSalable %}
  358.                                 <p class="product-quantity-title">Quantité</p>
  359.                                 <div class="product-quantity-value">
  360.                                     {% if product.isSubscribable %}
  361.                                         {% if product.isOnlySubscribableToType is not empty %}
  362.                                             <input class="form-control modal-product-btn-amount" id="qty-for-product-{{product.id}}" type="number" name="points" step="1" value="1" min="1">
  363.                                             <button class="button button-200 button-orange add-to-cart" data-type="product" data-id="{{product.id}}" data-quantity="qty-for-product-{{product.id}}" data-subscribe="{{product.isOnlySubscribable}}">AJOUTER AU PANIER</button>
  364.                                         {% else %}
  365.                                             <input class="form-control modal-product-btn-amount" id="qty-for-product-{{product.id}}" type="number" name="points" step="1" value="1" min="1">
  366.                                             <button style="background-color: #f0632f;color: white;" class="button dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">AJOUTER AU PANIER
  367.                                             </button>
  368.                                             <div class="dropdown-menu" style="width: 300px;text-transform: uppercase;">
  369.                                                 {% if not product.isOnlySubscribable %}
  370.                                                     <a class="dropdown-item add-to-cart" href="#" data-type="product" data-id="{{product.id}}" data-quantity="qty-for-product-{{product.id}}">Sans abonnement</a>
  371.                                                 {% endif %}
  372.                                                 {% if not product.isOnlySubscribableToType or product.isOnlySubscribableToType == 2 %}
  373.                                                     <a class="dropdown-item add-to-cart" href="#" data-type="product" data-id="{{product.id}}" data-quantity="qty-for-product-{{product.id}}" data-subscribe="2">Abonnement hebdomadaire</a>
  374.                                                 {% endif %}
  375.                                                 {% if not product.isOnlySubscribableToType or product.isOnlySubscribableToType == 3 %}
  376.                                                     <a class="dropdown-item add-to-cart" href="#" data-type="product" data-id="{{product.id}}" data-quantity="qty-for-product-{{product.id}}" data-subscribe="3">Abonnement bi-mensuel</a>
  377.                                                 {% endif %}
  378.                                                 {% if not product.isOnlySubscribableToType or product.isOnlySubscribableToType == 4 %}
  379.                                                     <a class="dropdown-item add-to-cart" href="#" data-type="product" data-id="{{product.id}}" data-quantity="qty-for-product-{{product.id}}" data-subscribe="4">Abonnement mensuel</a>
  380.                                                 {% endif %}
  381.                                             </div>
  382.                                         {% endif %}
  383.                                     {% else %}
  384.                                         <input class="form-control modal-product-btn-amount" id="qty-for-product-{{product.id}}" type="number" name="points" step="1" value="1" min="1">
  385.                                         <button class="button button-200 button-orange add-to-cart" data-type="product" data-id="{{product.id}}" data-quantity="qty-for-product-{{product.id}}">AJOUTER AU PANIER</button>
  386.                                     {% endif %}
  387.                                 </div>
  388.                             {% endif %}
  389.                             <br>
  390.                         </div>
  391.                         <button class="button button-200 button-black m-b-20 product-like no-modification" style="white-space: nowrap; margin-top: -20px; width: 300px;" data-id="{{product.id}}">AJOUTER AUX FAVORIS</button>
  392.                         {% if global.isAllowedToModify(product) %}
  393.                         <a href="{{path('adminEditProduct', {'id': product.id})}}" class="button button-200 button-white m-b-20 no-modification" style="white-space: nowrap; margin-top: -10px; width: 300px;display: block;">EDITER CE PRODUIT</a>
  394.                         {% endif %}
  395.                         {% if product.description %}
  396.                             <p>
  397.                                 {{product.description | raw}}
  398.                                 {% if product.nutritionFactImage is not empty %}
  399.                                     <br>
  400.                                     <a href="{{path('getImage', {'id': product.nutritionFactImage.id})}}" target="_blank" >Voir la fiche nutritionnelle </a>
  401.                                 {% else %}
  402.                                     {% if product.nutritionFact is not empty %}
  403.                                         <br>
  404.                                         <a href="{{path('getNutritionFactImage', {'id': product.id})}}" target="_blank" >Voir la fiche nutritionnelle </a>
  405.                                     {% endif %}
  406.                                 {% endif %}
  408.                             </p>
  409.                         {% endif %}
  410.                     </div>
  411.                     <hr>
  412.                     {% if product.listOfIngredients is not empty %}
  413.                         <h5 style="margin-bottom: 0px;"><strong>Ingrédients</strong></h5>
  414.                         {{product.listOfIngredients |raw }} {#| striptags('<b><i><ul><li><a><ol><strong><em>') | raw }} #}
  415.                     {% endif %}
  417.                     <h5 style="margin-bottom: 0px;"><strong>Conservation</strong></h5>
  418.                     <p>{% if product.conservation %}{{product.conservation.name}}{% endif %}</p>
  420.                     {% if product.region is not empty %}
  421.                         <h5 style="margin-bottom: 0px;"><strong>Région</strong></h5><p>{{product.region.name}}</p>
  422.                     {% else %}
  423.                         <h5 style="margin-bottom: 0px;"><strong>Région</strong></h5><p>{{product.company.origin}}</p>
  424.                     {% endif %}
  426.                     {% if product.recipes %}
  427.                         <h5 style="margin-bottom: 0px;"><strong>Recettes</strong></h5>
  428.                         <p>{{product.recipes | raw}}</p>
  429.                     {% endif %}
  431.                     {% if product.advices %}
  432.                         <h5 style="margin-bottom: 0px;"><strong>Conseils</strong></h5>
  433.                         <p>{{product.advices | raw}}</p>
  434.                     {% endif %}
  435.                     <hr>
  436.                     <div class="modal-product-complete-list" style="padding-top: 0px;">
  437.                         <a href="{{path('companyStore', {'urlname': product.company.UrlName, 'id': product.company.id})}}">VOIR LES PRODUITS DU PRODUCTEUR</a>
  438.                         <span class="modal-product-complete-list-arrow"></span>
  439.                     </div>
  440.                 </div>
  441.             </div>
  442.         </div>
  443.     </div>
  444. </div>
  445. </div>
  447. {% if productsUserMayLike | length > 0 %}
  448. <section class="section-4 no-background" style="margin-top: 0px;">
  449.     <div class="row" style="margin-left: 0px;margin-right: 0px;">
  450.         <div class="col-sm-12 col-12">
  451.             <div class="section-title section-title-line">Produits suggérés</div>
  452.             <div class="products-wrap" style="margin-right: auto; margin-left: auto;text-align: left;">
  453.                 {% set masonryProducts = productsUserMayLike | slice(0, 4) %}
  454.                 {{block('masonryProducts', 'frontend/productMasonry.html.twig')}}
  455.             </div>
  456.         </div>
  457.     </div>
  458. </section>
  459. {% endif %}
  461. <div class="section-title section-title-line m-t-10">Continuer à magasiner dans {{categoryToUse.name}}</div>
  462. {% set forcedProductThumbnail = '300' %}
  463. {{ block('section_category_stats', 'frontend/category.html.twig') }}
  464. {{ block('section_masonry_products', 'frontend/category.html.twig') }}
  465. <!--Main content-->
  466. <div class="divider m-r-l-10"></div>
  468. <!--Sign in/ Registration modal-->
  469. <div class="modal fade" id="registrModal" tabindex="-1" role="dialog">
  470.     <div class="modal-dialog" role="document">
  471.         <div class="modal-content">
  472.             <ul class="nav nav-pills" id="pills-tab" role="tablist">
  473.                 <li class="nav-item">
  474.                     <a class="nav-link active" id="pills-register-tab" data-toggle="pill"
  475.                                                                        href="#pills-register"
  476.                                                                        role="tab" aria-controls="pills-register"
  477.                                                                                   aria-selected="true">S'inscrire</a>
  478.                 </li>
  479.                 <li class="nav-item">
  480.                     <a class="nav-link" id="pills-login-tab" data-toggle="pill" href="#pills-login"
  481.                                                                                 role="tab" aria-controls="pills-login" aria-selected="false">Se connecter</a>
  482.                 </li>
  483.             </ul>
  484.             <div class="tab-content" id="pills-tabContent">
  485.                 <div class="tab-pane fade show active" id="pills-register" role="tabpanel"
  486.                                                                            aria-labelledby="pills-register-tab">
  487.                     <div class="container">
  488.                         <button type="button" class="btn-registr-modal-colose">
  489.                         </button>
  490.                         <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12 col-12 m-0-auto">
  491.                             <div class="row">
  492.                                 <p class="registr-top-text m--30">Pour enregistrer des articles ou recevoir
  493.                                 des
  494.                                 bulletins d'information,
  495.                                 des
  496.                                 alertes ou
  497.                                 des recommandations - tout est gratuit.</p>
  498.                             </div>
  499.                             <div class="row">
  500.                                 <button class="button button-300 button-fb">
  501.                                     <span class="button-icon fb-icon"><i class="fa fa-facebook"
  502.                                                                          aria-hidden="true"></i></span>
  503.                                     Se connecter avec Facebook
  504.                                 </button>
  505.                                 <button class="button button-300 button-g">
  506.                                     <span class="button-icon g-icon"><img
  507.                                           src="/assets/frontend/images/icons/google-icon.png"
  508.                                           alt=""></span>
  509.                                     Se connecter avec Google
  510.                                 </button>
  511.                             </div>
  512.                             <form id="registrForm">
  513.                                 <div class="row">
  514.                                     <h5 class="section-title-line">OU</h5>
  515.                                     <input type="text" placeholder="Prénom"
  516.                                                        class="form-control registr-form-control">
  517.                                     <input type="email" placeholder="Courriel"
  518.                                                         class="form-control registr-form-control">
  519.                                     <span class="email-incorrect">E-mail incorrect</span>
  520.                                     <input type="password" placeholder="Mot de passe"
  521.                                                            class="form-control registr-form-control">
  522.                                     <input type="password" placeholder="Confirmer le mot de passe"
  523.                                                            class="form-control registr-form-control">
  524.                                 </div>
  525.                                 <div class="row">
  526.                                     <button class="button button-full-width button-orange">S'INSCRIRE
  527.                                     </button>
  528.                                 </div>
  529.                             </form>
  530.                             <div class="row">
  531.                                 <p class="registr-bottom-text">
  532.                                 En cliquant sur S'inscrire, vous acceptez de respecter les <span><a
  533.                                                                                                      href="#">Conditions
  534.                                                                                                      d'utilisation</a></span> et le <span><a
  535.                                                                                                                                               href="#">Les Règlements</a></span>
  536.                                                                                              concernant la confidentialité
  537.                                                                                              de Maturin.
  538.                                 </p>
  539.                             </div>
  540.                         </div>
  541.                     </div>
  542.                 </div>
  543.                 <div class="tab-pane fade" id="pills-login" role="tabpanel"
  544.                                                             aria-labelledby="pills-login-tab">
  545.                     <div class="container">
  546.                         <button type="button" class="btn-registr-modal-close">
  547.                         </button>
  548.                         <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12 col-12 m-0-auto">
  549.                             <div class="row">
  550.                                 <p class="registr-top-text m-0-auto">Se connecter pour démarrer votre
  551.                                 boutique</p>
  552.                             </div>
  553.                             <div class="row">
  554.                                 <button class="button button-300 button-fb">
  555.                                     <span class="button-icon fb-icon"><i class="fa fa-facebook"
  556.                                                                          aria-hidden="true"></i></span>
  557.                                     Se connecter avec Facebook
  558.                                 </button>
  559.                                 <button class="button button-300 button-g">
  560.                                     <span class="button-icon g-icon"><img
  561.                                           src="/assets/frontend/images/icons/google-icon.png"
  562.                                           alt=""></span>
  563.                                     Se connecter avec Google
  564.                                 </button>
  565.                             </div>
  566.                             <form id="loginForm">
  567.                                 <div class="row">
  568.                                     <h5 class="section-title-line">OU</h5>
  569.                                     <input id="login-email" type="email" placeholder="Courriel"
  570.                                                                          class="form-control registr-form-control">
  571.                                     <span class="email-incorrect">E-mail incorrect</span>
  572.                                     <input id="login-password" type="password" placeholder="Mot de passe"
  573.                                                                                class="form-control registr-form-control">
  574.                                 </div>
  575.                                 <div class="row rester-connecté">
  576.                                     <div class="col-xl-6 col-lg-6 col-md-6 ol-sm-6 col-6">
  577.                                         <div class="form-group form-check">
  578.                                             <input type="checkbox" class="form-check-input"
  579.                                                                    id="exampleCheck1">
  580.                                             <label class="form-check-label" for="exampleCheck1">Rester
  581.                                                 connecté</label>
  582.                                         </div>
  583.                                     </div>
  584.                                     <div class="col-xl-6 col-lg-6 col-md-6 ol-sm-6 col-6 text-right no-padding-left">
  585.                                         <a href="#" class="orange-link">Mot de passe oublié?</a>
  586.                                     </div>
  587.                                 </div>
  588.                                 <div class="row">
  589.                                     <button class="button button-full-width button-orange"
  590.                                             id="btn-se-connecter">SE CONNECTER
  591.                                     </button>
  592.                                 </div>
  593.                             </form>
  594.                             <div class="row no-padding">
  595.                                 <p class="registr-bottom-text">
  596.                                 Vous n’avez pas de compte? <span><a
  597.                                                                        href="#">Inscrivez-vous maintenant.</a></span>
  598.                                 </p>
  599.                             </div>
  600.                         </div>
  601.                     </div>
  602.                 </div>
  603.             </div>
  604.         </div>
  605.     </div>
  606. </div>
  607. <!--Sign in/ Registration modal-->
  609. <!-- Product Modal -->
  610. <div class="modal fade" id="previewModal" tabindex="-1" role="dialog"
  611.                                                         aria-labelledby="previewModalTitle" aria-hidden="true">
  612.     <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
  613.         <div class="modal-content">
  614.             <div class="modal-body">
  615.                 <div class="row">
  616.                     <div class="col-6">
  617.                         <img class="modal-product-image" src="images/product_8_preview.png">
  618.                     </div>
  619.                     <div class="col-6">
  621.                         <div class="modal-product-title">NOM DU PRODUIT</div>
  622.                         <div class="modal-product-subtitle">Nom de la compagnie</div>
  623.                         <div class="modal-product-rating">
  624.                             <ul class="rating" data-rating="4">
  625.                                 <li class="Arad5fQEnoZlv9E59d"><a title="Super boring"
  626.                                                                   class="rate starOn"
  627.                                                                   id="1"><i
  628.                                                                   class="fa fa-star" aria-hidden="true"></i></a>
  629.                                 </li>
  630.                                 <li class="Arad5fQEnoZlv9E59d"><a title="Boring"
  631.                                                                   class="rate starOn"
  632.                                                                   id="2"><i
  633.                                                                   class="fa fa-star" aria-hidden="true"></i></a>
  634.                                 </li>
  635.                                 <li class="Arad5fQEnoZlv9E59d"><a title="Nice"
  636.                                                                   class="rate starOn"
  637.                                                                   id="3"><i
  638.                                                                   class="fa fa-star" aria-hidden="true"></i></a>
  639.                                 </li>
  640.                                 <li class="Arad5fQEnoZlv9E59d"><a title="Cool"
  641.                                                                   class="rate starOn"
  642.                                                                   id="4"><i
  643.                                                                   class="fa fa-star" aria-hidden="true"></i></a>
  644.                                 </li>
  645.                                 <li class="Arad5fQEnoZlv9E59d"><a title="Super cool!"
  646.                                                                   class="rate star"
  647.                                                                   id="5"><i
  648.                                                                   class="fa fa-star" aria-hidden="true"></i></a>
  649.                                 </li>
  650.                             </ul>
  651.                             <span>(12)</span>
  652.                         </div>
  653.                         <div class="modal-product-price">9,95 CA$</div>
  654.                         <div class="modal-product-in-stock">7 en inventaire</div>
  657.                         <div class="modal-product-amount">
  658.                             <div class="modal-product-amount-title">Quantité</div>
  659.                             <div class="row">
  660.                                 <div class="col-3 no-padding-right">
  661.                                     <input class="form-control modal-product-btn-amount" type="number"
  662.                                                                                          name="points" step="1" value="1"
  663.                                                                                                                 min="1">
  664.                                 </div>
  665.                                 <div class="col-6 no-padding-left">
  666.                                     <button class="modal-product-btn-add-to-cart button button-200 button-orange">
  667.                                         AJOUTER AU PANIER
  668.                                     </button>
  669.                                 </div>
  670.                             </div>
  671.                             {#
  672.                             <button class="modal-product-btn-product-list button button-200 button-black">
  673.                                 LISTE DE SOUHAIT
  674.                             </button>
  675.                             #}
  676.                         </div>
  678.                         {#
  679.                         <div class="modal-product-social-icons">
  680.                             <span class="modal-product-social-icons-title">Partagez:</span>
  681.                             <i class="fa fa-facebook" aria-hidden="true"></i>
  682.                             <i class="fa fa-twitter" aria-hidden="true"></i>
  683.                             <i class="fa fa-pinterest-p" aria-hidden="true"></i>
  684.                             <i class="fa fa-google-plus" aria-hidden="true"></i>
  685.                             <p class="modal-product-social-icon-email"></p>
  686.                         </div>
  687.                         #}
  688.                         <div class="modal-product-complete-list">
  689.                             <a href="#">VOIR LA FICHE DU PRODUIT
  690.                                 <span class="modal-product-complete-list-arrow"> </span>
  691.                             </a>
  692.                         </div>
  694.                     </div>
  695.                 </div>
  696.             </div>
  697.         </div>
  698.     </div>
  699. </div>
  700. <!-- Product Modal -->
  702. <!--Modifiez vos paramètres-->
  703. <div class="modal fade" id="modifiezVosParamètres" tabindex="-1" role="dialog">
  704.     <div class="modal-dialog" role="document">
  705.         <div class="modal-content">
  706.             <div class="modal-body">
  707.                 <div class="container">
  708.                     <div class="row">
  709.                         <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
  710.                             <div class="modifiezVosParamètres">
  711.                                 <div class="modifiezVosParamètres-title">Modifiez vos paramètres</div>
  712.                                 <div class="modifiezVosParamètres-description">Paramètrez votre région, la
  713.                                     devise et votre langue
  714.                                     que vous utilisez.
  715.                                 </div>
  716.                                 <div class="modifiezVosParamètres-select-wrapper">
  717.                                     <form>
  718.                                         <div class="form-group">
  719.                                             <label for="regionSelect">Région</label>
  720.                                             <div class="select-wrapper">
  721.                                                 <select name="region" class="form-control form-control-lg"
  722.                                                                       id="regionSelect">
  723.                                                     <option value="Lidsa">Lorem ipsum dolor sit amet
  724.                                                     (Lidsa)
  725.                                                     </option>
  726.                                                     <option value="Ca">Consectetur adipiscing elit (Ca)
  727.                                                     </option>
  728.                                                     <option value="Vsl">Vivamus sagittis lacus (Vsl)
  729.                                                     </option>
  730.                                                     <option value="Qc" selected>Québec (Qc)</option>
  731.                                                     <option value="Pavm">Placerat ac vitae metus (Pavm)
  732.                                                     </option>
  733.                                                     <option value="Pf">Praesent faucibus magna sit amet
  734.                                                     (Pf)
  735.                                                     </option>
  736.                                                     <option value="Sd">Sollicitudin dignissim (Sd)</option>
  737.                                                     <option value="Pd">Pellentesque dictum leo non ex (Pd)
  738.                                                     </option>
  739.                                                     <option value="Fn">Fringillaullamcorper nisi varius.
  740.                                                     (Fn)
  741.                                                     </option>
  742.                                                     <option value="Ve">Vestibulum euismod diam in (Ve)
  743.                                                     </option>
  744.                                                     <option value="Lf">Lorem feugiat, (Lf)</option>
  745.                                                     <option value="Sl">Sed laoreet (Sl)</option>
  746.                                                     <option value="Fv">Felis volutpat. (Fv)</option>
  747.                                                     <option value="Li">Lorem ipsum dolor sit amet (li)
  748.                                                     </option>
  749.                                                     <option value="Cae">Consectetur adipiscing elit (Cae)
  750.                                                     </option>
  751.                                                 </select>
  752.                                             </div>
  753.                                         </div>
  754.                                         <div class="form-group">
  755.                                             <label for="currencySelect">Devise</label>
  756.                                             <div class="select-wrapper">
  757.                                                 <select name="currency" class="form-control form-control-lg"
  758.                                                                         id="currencySelect"
  759.                                                                         size="1">
  760.                                                     <option value="$(CAD)" selected>$ Dollar canadien
  761.                                                     (CAD)
  762.                                                     </option>
  763.                                                     <option value="$(USD)">$ United States Dollar (USD)
  764.                                                     </option>
  765.                                                     <option value="€(EUR)">€ Euro (EUR)</option>
  766.                                                 </select>
  767.                                             </div>
  768.                                         </div>
  769.                                         <div class="form-group">
  770.                                             <label for="langSelect">Langue</label>
  771.                                             <div class="select-wrapper">
  772.                                                 <select name="lang" class="form-control form-control-lg"
  773.                                                                     id="langSelect">
  774.                                                     <option value="Français" selected>Français</option>
  775.                                                     <option value="English">English</option>
  776.                                                 </select>
  777.                                             </div>
  778.                                         </div>
  779.                                         <button type="button" data-dismiss="modal" aria-label="Close"
  780.                                                                                    class="btn button-black modifiezVosParamètres-btn-close">
  781.                                             CANCEL
  782.                                         </button>
  783.                                         <button type="submit"
  784.                                                 class="btn button-orange modifiezVosParamètres-btn-save">
  785.                                             SAVE
  786.                                         </button>
  787.                                     </form>
  788.                                 </div>
  789.                             </div>
  790.                         </div>
  791.                     </div>
  792.                 </div>
  793.             </div>
  794.         </div>
  795.     </div>
  796. </div>
  797. <!--Modifiez vos paramètres-->
  798. </div>
  799. </div>
  800. </div>
  802. {% endblock %}