templates/frontend/productMasonry.html.twig line 1

Open in your IDE?
  1. {% block masonryProducts %}
  2.   <div class="row mobile_product_row">
  3.     {% for product in masonryProducts %}
  4.     <div class="col-xs-6 col-sm-6 col-md-3 pb-5 mobile_product_box">
  5.       {# <div class="masonry-layout"> #}
  6.         <div class="masonry-product" data-product="{{product.id}}">
  7.             {# <div class="masonry-layout__panel-content"> #}
  8.                 <div class="product-group">
  9.                     {% if global.associationUserIsBrowsing %}
  10.                         <a href="{{path('viewProductInAssociation', {'producerUrl': product.company.UrlName, 'productName': product.UrlName, 'id': product.Id, 'groupUrlName': global.associationUserIsBrowsing.urlName})}}"
  11.                                 {% if product.isDisplayedInAssociationOnly and global.associationUserIsBrowsing == false  %}  style="color: red !important;" {% endif %}
  12.                         >
  13.                         {% else %}
  14.                         <a href="{{path('viewProduct', {'producerUrl': product.company.UrlName, 'productName': product.UrlName, 'id': product.Id })}}"
  15.                                 {% if product.isDisplayedInAssociationOnly and global.associationUserIsBrowsing == false  %}  style="color: red !important;" {% endif %}
  16.                         >
  17.                         {% endif %}
  18.                         {% if forcedProductThumbnail is defined %}
  19.                             {% set size = forcedProductThumbnail %}
  20.                         {% else %}
  21.                             {% set size = '250' %}
  22.                         {% endif %}
  23.                         {% if product.mainImage %}
  24.                             <img id="masonry-product-image-{{product.id}}" class="product-image lazyload" src="/images/none.png" data-src="{{path('getImageAsCroppedThumb', {'id': product.mainImage.Id, 'height': size, 'width': size})}}"   style="margin-left: auto; margin-right: auto;">
  25.                         {% else %}
  26.                             <img id="masonry-product-image-{{product.id}}"  class="product-image" src="/assets/frontend/images/noProductPicture.jpg" style="margin-left: auto; margin-right: auto;">
  27.                         {% endif %}
  28.                     </a>
  29.                     <div class="product-btn">
  30.                         <button type="button" class="product-btn-overview"
  31.                                               data-toggle="modal"
  32.                                               data-target="#previewProduct_{{product.id}}" style="font-size: 9px;">
  33.                             APERÇU RAPIDE
  34.                         </button>
  35.                         <button class="product-btn-like {% if global.hasFavorite(product) %}product-btn-liked {% endif %}" data-id="{{product.id}}"></button>
  36.                         {% if product.isSalable %}
  37.                             {% if product.isSubscribable %}
  38.                                 {% if product.isOnlySubscribableToType is not empty %}
  39.                                     <div class="product-btn-add-to-cart 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}}">
  40.                                         AJOUTER AU PANIER
  41.                                     </div>
  42.                                 {% else %}
  43.                                     <button style="background-color: #f0632f;color: white;width:fit-content;" class="product-btn-add-to-cart button button-200 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">AJOUTER AU PANIER
  44.                                     </button>
  45.                                     <div class="dropdown-menu" style="width: 300px;text-transform: uppercase;">
  46.                                         <input id="qty-for-product-{{product.id}}" type="hidden" value="1">
  47.                                         {% if not product.isOnlySubscribable %}
  48.                                             <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>
  49.                                         {% endif %}
  50.                                         {% if not product.isOnlySubscribableToType or product.isOnlySubscribableToType == 2 %}
  51.                                             <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>
  52.                                         {% endif %}
  53.                                         {% if not product.isOnlySubscribableToType or product.isOnlySubscribableToType == 3 %}
  54.                                             <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>
  55.                                         {% endif %}
  56.                                         {% if not product.isOnlySubscribableToType or product.isOnlySubscribableToType == 4 %}
  57.                                             <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>
  58.                                         {% endif %}
  59.                                     </div>
  60.                                 {% endif %}
  61.                             {% else %}
  62.                                 <div class="product-btn-add-to-cart button button-200 button-orange add-to-cart" data-type="product" data-id="{{product.id}}">
  63.                                     AJOUTER AU PANIER
  64.                                 </div>
  65.                             {% endif %}
  66.                         {% else %}
  67.                             <a href="{{path('viewProduct', {'producerUrl':product.company.UrlName, 'productName': product.UrlName, 'id': product.Id})}}"  class="button button-200 button-orange product-btn-add-to-cart" style="background-color: white!important;color: black!important;">VOIR LE DÉTAIL</a>
  68.                         {% endif %}
  69.                     </div>
  70.                 </div>
  71.                 <div class="product">
  72.                     {% if product.isSalable %}
  73.                         <div class="button button-orange add-to-cart button-touch d-none d-none-btn-add-to-cart" data-type="product" data-id="{{product.id}}">
  74.                             AU PANIER
  75.                         </div>
  76.                     {% endif %}
  77.                     <div class="product-title underline-effect-wrapper">
  78.                         <a  {% if product.isDisplayedInAssociationOnly and global.associationUserIsBrowsing == false %}  style="color: red !important;" {% endif %}
  79.                                 class="underline-effect underline-effect-h1 underline-effect-black" href="{{path('viewProduct', {'producerUrl': product.company.UrlName, 'productName': product.UrlName, 'id': product.id})}}">{{product.Name}}</a>
  80.                     </div>
  81.                     <div class="product-subtitle">
  82.                         <a href="{{path('companyStore', {'urlname': product.company.urlname, 'id':product.company.id })}}"
  83.                                 {% if global.associationUserIsBrowsing and (product.company.associations is empty or global.associationUserIsBrowsing.UrlName != product.company.associations[0].UrlName) %}  style="color: red !important;" {% endif %}
  84.                         >{{product.company.name}}</a>
  85.                     </div>
  86.                     <div class="product-price" style="align-items: center;">
  87.                         {% if product.hasDiscount %}
  88.                             <span class="" style="">
  89.                                 <strike>{{product.displayPrice}}</strike> {{product.displayPrice(true)}}
  90.                             </span>
  91.                         {% else %}
  92.                             {# {{product.displayPrice}} #}
  93.                             <span class="" style="">
  94.                              {{ product.getPriceUnitStandard }}
  95.                               </span>
  96.                         {% endif %}
  97.                         <br>
  98.                          <span class="" style="font-size: 12px;color: gray;display: block;">
  99.                             {% if product.getUnitAmount and product.isBoxOfProducts == false and product.getPricePer100gramme %}
  100.                                 {{product.getPricePer100gramme}}
  101.                             {% endif %}
  102.                          </span>
  103.                     </div>
  104.                       <div>
  105.                             {% if product.isShippedByMaturin %}
  106.                                 <img style="padding-right: 15px;margin-top: 3px;" src="/images/maturinshipping.png" alt="Livraison par Maturin" title="Livraison par Maturin" class="pull-right">
  107.                             {% endif %}
  108.                             {% if product.subCategory is not null  %}
  109.                                 {% if product.getOrgaCertification == true %} 
  110.                                     <img style="padding-right: 5px;" src="/images/biosymbol.png" alt="produit biologique" title="produit biologique" class="pull-right">
  111.                                 {% endif %} 
  112.                                 {% if product.conservation and product.conservation.id == 6 %}
  113.                                     <img style="padding-right: 5px;" src="/images/froozen.png" alt="Congelé" title="Congelé" class="pull-right">
  114.                                 {% elseif product.conservation and product.conservation.id == 5 %}
  115.                                     <img style="padding-right: 5px;" src="/images/snow.png" alt="Réfrigéré" title="Réfrigéré" class="pull-right">
  116.                                 {% endif %}
  117.                             {% endif %}
  118.                         </div>
  119.                 </div>
  120.             </div>
  121.         </div>
  122.     {% endfor %}
  123.   </div>
  124.   {% for product in masonryProducts %}
  125.       <!-- Product Modal -->
  126.       <div class="modal" id="previewProduct_{{product.Id}}" tabindex="-1" role="dialog"
  127.                                                                           aria-labelledby="previewModalTitle" aria-hidden="true">
  128.           <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
  129.               <div class="modal-content">
  130.                   <div class="modal-body">
  131.                       <div class="row">
  132.                           <div class="col-6">
  133.                               {% if product.mainImage %}
  134.                                   <img class="modal-product-image lazyload" src="/images/none.png" data-src="{{path('getImageAsFixedWidth', {'id': product.mainImage.Id, 'width': '270'})}}">
  135.                               {% else %}
  136.                                   <img class="modal-product-image" src="/assets/frontend/images/noProductPicture.jpg">
  137.                               {% endif %}
  138.                           </div>
  139.                           <div class="col-6">
  140.                               <div class="modal-product-title" {% if product.isDisplayedInAssociationOnly and global.associationUserIsBrowsing == false %}  style="color: red !important;" {% endif %} >{{product.Name}}</div>
  141.                               <div class="modal-product-subtitle">
  142.                                   <a {% if product.isDisplayedInAssociationOnly and global.associationUserIsBrowsing == false %}  style="color: red !important;" {% endif %} href="{{path('companyStore', {'urlname': product.company.urlname, 'id':product.company.id })}}">{{product.company.name}}</a>
  143.                               </div>
  144.                               <br><p>{{product.description | striptags | split(' ') | slice(0, 30) | join(' ')| raw }}...</p>
  145.                           <div class="product-price">
  146.                               {% if product.hasDiscount %}
  147.                                   <strike>{{product.displayPrice}}</strike> {{product.displayPrice(true)}}
  148.                               {% else %}
  149.                                   {{product.displayPrice}}
  150.                               {% endif %}
  151.                               {% if product.pricings | length > 1 %}
  152.                                   <h5 class="font-weight-bold">
  153.                                       Format économique
  154.                                   </h5>
  155.                                   <ul style="color: darkgray; font-size: small;">
  156.                                       {% for price in product.pricings %}
  157.                                           <li>{{price.displayPrice}}</li>
  158.                                       {% endfor %}
  159.                                   </ul>
  160.                               {% endif %}
  161.                           </div>
  162.                           {% if product.isShippedByMaturin %}
  163.                               {% if product.qtyReadyToShip > 0 %}
  164.                                   <div class="modal-product-in-stock">En inventaire</div>
  165.                               {% else %}
  166.                                   <div class="modal-product-in-stock">Inventaire épuisé</div>
  167.                               {% endif %}
  168.                           {% else %}
  169.                               <div class="modal-product-in-stock">Livraison indépendante</div>
  170.                           {% endif %}
  171.                           {% if product.isSalable %}
  172.                               <div class="modal-product-amount">
  173.                                   {% if not product.isSubscribable %}
  174.                                       <div class="modal-product-amount-title">Quantité</div>
  175.                                   {% endif %}
  176.                                   <div class="row">
  177.                                   {% if not product.isSubscribable %}
  178.                                       <div class="col-12 pb-3">
  179.                                           <input class="form-control modal-product-btn-amount" id="qty-for-product-{{product.id}}" type="number" name="points" step="1" value="1" min="1">
  180.                                       </div>
  181.                                   {% endif %}
  182.                                     <div class="col-12">
  183.                                           {% if product.isSubscribable %}
  184.                                               <button style="background-color: #f0632f;color: white;white-space: nowrap;" class="button button-200 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">AJOUTER AU PANIER
  185.                                               </button>
  186.                                               <div class="dropdown-menu" style="width: 300px;text-transform: uppercase;">
  187.                                                   <a class="dropdown-item add-to-cart" href="#" data-type="product" data-id="{{product.id}}" data-quantity="p-qty-s-{{product.id}}">Une seul fois</a>
  188.                                                   <input type="hidden" value="1" id="p-qty-s-{{product.id}}">
  189.                                                   <a class="dropdown-item add-to-cart" href="#" data-type="product" data-id="{{product.id}}" data-quantity="p-qty-1-{{product.id}}">Abonnement hebdomadaire</a>
  190.                                                   <input type="hidden" value="2" id="p-qty-1-{{product.id}}">
  191.                                                   <a class="dropdown-item add-to-cart" href="#" data-type="product" data-id="{{product.id}}" data-quantity="p-qty-2-{{product.id}}">Abonnement bi-mensuel</a>
  192.                                                   <input type="hidden" value="3" id="p-qty-2-{{product.id}}">
  193.                                                   <a class="dropdown-item add-to-cart" href="#" data-type="product" data-id="{{product.id}}" data-quantity="p-qty-3-{{product.id}}">Abonnement mensuel</a>
  194.                                                   <input type="hidden" value="4" id="p-qty-3-{{product.id}}">
  195.                                               </div>
  196.                                           {% else %}
  197.                                               <button class="modal-product-btn-add-to-cart button button-200 button-orange add-to-cart" data-type="product" data-id="{{product.id}}" data-quantity="qty-for-product-{{product.id}}">
  198.                                                   AJOUTER AU PANIER
  199.                                               </button>
  200.                                           {% endif %}
  201.                                       </div>
  202.                                   </div>
  203.                               </div>
  204.                           {% endif %}
  205.                               <br>
  206.                               <div class="modal-product-complete-list">
  207.                                   <a href="{{path('viewProduct', {'producerUrl': product.company.UrlName, 'productName': product.UrlName, 'id': product.id})}}">VOIR LA FICHE DU PRODUIT
  208.                                       <span class="modal-product-complete-list-arrow"> </span>
  209.                                   </a>
  210.                               </div>
  211.                           </div>
  212.                       </div>
  213.                   </div>
  214.                 </div>
  215.               </div>
  216.           </div>
  217.       <!-- Product Modal -->
  218.   {% endfor %}
  219. {% endblock %}
  220. {% if products is defined and noPagination is defined %}
  221.   {% if noPagination %}
  222.     <script>
  223.         function updateLoader() {
  224.             if (document.getElementsByClassName('masonry-product').length ==
  225.                 parseInt(document.getElementById('amountProducts').innerText)
  226.                 &&
  227.                 document.getElementById('product-loader')
  228.             ) {
  229.                 document.getElementById('product-loader').style.display = 'none';
  230.             }
  231.         }
  232.         updateLoader();
  233.         document.addEventListener("DOMContentLoaded", updateLoader);
  234.     </script>
  235.   {% endif %}
  236. {% endif %}
  237. {% if products is defined and noPagination is not defined %}
  238.     <script>
  239.         if( typeof lazyload !== 'undefined')
  240.             lazyload();
  241.         var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
  242.         if(supportsTouch){
  243.             var elems = document.querySelectorAll(".button-touch");
  244.             [].forEach.call(elems, function(el) {
  245.                 el.classList.remove("d-none");
  246.             });
  247.         }
  248.         //console.log('Binding add to cart');
  249.         function updateLoader() {
  250.             if (document.getElementsByClassName('masonry-product').length ==
  251.                 parseInt(document.getElementById('amountProducts').innerText)
  252.                 &&
  253.                 document.getElementById('product-loader')
  254.             ) {
  255.                 document.getElementById('product-loader').style.display = 'none';
  256.             }
  257.         }
  258.         updateLoader();
  259.         document.addEventListener("DOMContentLoaded", updateLoader);
  260.         function addToCart()
  261.         {
  262.             console.log('Masonry add to cart called');
  263.             event.preventDefault();
  264.             var type= this.getAttribute("data-type");
  265.             var id= this.getAttribute("data-id");
  266.             var quantityWidget = this.getAttribute('data-quantity');
  267.             if(quantityWidget && document.getElementById(quantityWidget)){
  268.                 var quantity = document.getElementById(quantityWidget).value;
  269.             }else
  270.                 var quantity = 1;
  271.             var xmlHttp = new XMLHttpRequest();
  272.             xmlHttp.onreadystatechange = function()
  273.             {
  274.                 if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
  275.                 {
  276.                     var total = parseInt(document.getElementById('menu-cart-count').innerHTML);
  277.                     document.getElementById('menu-cart-count').innerHTML = total+1;
  278.                     document.getElementById('menu-cart-count').style.display = 'block';;
  279.                     window.addToCartNotification++;
  280.                     var json = JSON.parse(xmlHttp.responseText);
  281.                     console.log(json);
  282.                     if(document.getElementById('menu_subtotal_cart'))
  283.                         document.getElementById('menu_subtotal_cart').innerHTML = json.totalCart;
  284.                     if(document.getElementById('mobile_menu_subtotal_cart'))
  285.                         document.getElementById('mobile_menu_subtotal_cart').innerHTML = json.totalCart;
  286.                 }
  287.             }
  288.             //xmlHttp.open("post", '/API/cart/add/'+id+'/'+quantity);
  289.             var subscribe = this.getAttribute('data-subscribe');
  290.             if( subscribe )
  291.                 xmlHttp.open("post", '/API/cart/add/'+id+'/'+quantity+'/'+subscribe);
  292.             else
  293.                 xmlHttp.open("post", '/API/cart/add/'+id+'/'+quantity);
  294.             xmlHttp.send();
  295.             /*
  296.             $.ajax({
  297.                 url: Routing.generate('addToCart', {id: id, quantity: quantity}),
  298.                 method: 'POST',
  299.                 dataType: 'json',
  300.                 complete: _this.addedToCart
  301.             });
  302.              */
  303.         }
  304.         var classname = document.getElementsByClassName("add-to-cart");
  305.         for (var i = 0; i < classname.length; i++) {
  306.             if(!classname[i].classList.contains("binded")){
  307.                 var classString = classname[i].className;
  308.                 var newClass = classString.concat(" binded");
  309.                 classname[i].className = newClass;
  310.                 classname[i].addEventListener('click', addToCart, false);
  311.             }
  312.         }
  313.     </script>
  314.     {# <div class="row d-none">
  315.         <div class="col-sm-12 text-center">
  316.             {% if ajax is defined %}
  317.              {{ knp_pagination_render(products, 'bundles/knp-paginator-bundle/ajaxPagination.html.twig', {}, { 
  318.                     'searchToken': searchToken
  319.                 }) }}
  320.             {% else %}
  321.                 {{ knp_pagination_render(products) }}
  322.             {% endif %}
  323.         </div>
  324.     </div> #}
  325.     
  326.     <div id="paginatorDefaultPage" class="d-none">{{ knp_pagination_render(products) }}</div>
  327.     
  328.        
  329. {% endif %}