{% block masonryProducts %}
<div class="row mobile_product_row">
{% for product in masonryProducts %}
<div class="col-xs-6 col-sm-6 col-md-3 pb-5 mobile_product_box">
{# <div class="masonry-layout"> #}
<div class="masonry-product" data-product="{{product.id}}">
{# <div class="masonry-layout__panel-content"> #}
<div class="product-group">
{% if global.associationUserIsBrowsing %}
<a href="{{path('viewProductInAssociation', {'producerUrl': product.company.UrlName, 'productName': product.UrlName, 'id': product.Id, 'groupUrlName': global.associationUserIsBrowsing.urlName})}}"
{% if product.isDisplayedInAssociationOnly and global.associationUserIsBrowsing == false %} style="color: red !important;" {% endif %}
>
{% else %}
<a href="{{path('viewProduct', {'producerUrl': product.company.UrlName, 'productName': product.UrlName, 'id': product.Id })}}"
{% if product.isDisplayedInAssociationOnly and global.associationUserIsBrowsing == false %} style="color: red !important;" {% endif %}
>
{% endif %}
{% if forcedProductThumbnail is defined %}
{% set size = forcedProductThumbnail %}
{% else %}
{% set size = '250' %}
{% endif %}
{% if product.mainImage %}
<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;">
{% else %}
<img id="masonry-product-image-{{product.id}}" class="product-image" src="/assets/frontend/images/noProductPicture.jpg" style="margin-left: auto; margin-right: auto;">
{% endif %}
</a>
<div class="product-btn">
<button type="button" class="product-btn-overview"
data-toggle="modal"
data-target="#previewProduct_{{product.id}}" style="font-size: 9px;">
APERÇU RAPIDE
</button>
<button class="product-btn-like {% if global.hasFavorite(product) %}product-btn-liked {% endif %}" data-id="{{product.id}}"></button>
{% if product.isSalable %}
{% if product.isSubscribable %}
{% if product.isOnlySubscribableToType is not empty %}
<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}}">
AJOUTER AU PANIER
</div>
{% else %}
<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
</button>
<div class="dropdown-menu" style="width: 300px;text-transform: uppercase;">
<input id="qty-for-product-{{product.id}}" type="hidden" value="1">
{% if not product.isOnlySubscribable %}
<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>
{% endif %}
{% if not product.isOnlySubscribableToType or product.isOnlySubscribableToType == 2 %}
<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>
{% endif %}
{% if not product.isOnlySubscribableToType or product.isOnlySubscribableToType == 3 %}
<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>
{% endif %}
{% if not product.isOnlySubscribableToType or product.isOnlySubscribableToType == 4 %}
<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>
{% endif %}
</div>
{% endif %}
{% else %}
<div class="product-btn-add-to-cart button button-200 button-orange add-to-cart" data-type="product" data-id="{{product.id}}">
AJOUTER AU PANIER
</div>
{% endif %}
{% else %}
<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>
{% endif %}
</div>
</div>
<div class="product">
{% if product.isSalable %}
<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}}">
AU PANIER
</div>
{% endif %}
<div class="product-title underline-effect-wrapper">
<a {% if product.isDisplayedInAssociationOnly and global.associationUserIsBrowsing == false %} style="color: red !important;" {% endif %}
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>
</div>
<div class="product-subtitle">
<a href="{{path('companyStore', {'urlname': product.company.urlname, 'id':product.company.id })}}"
{% if global.associationUserIsBrowsing and (product.company.associations is empty or global.associationUserIsBrowsing.UrlName != product.company.associations[0].UrlName) %} style="color: red !important;" {% endif %}
>{{product.company.name}}</a>
</div>
<div class="product-price" style="align-items: center;">
{% if product.hasDiscount %}
<span class="" style="">
<strike>{{product.displayPrice}}</strike> {{product.displayPrice(true)}}
</span>
{% else %}
{# {{product.displayPrice}} #}
<span class="" style="">
{{ product.getPriceUnitStandard }}
</span>
{% endif %}
<br>
<span class="" style="font-size: 12px;color: gray;display: block;">
{% if product.getUnitAmount and product.isBoxOfProducts == false and product.getPricePer100gramme %}
{{product.getPricePer100gramme}}
{% endif %}
</span>
</div>
<div>
{% if product.isShippedByMaturin %}
<img style="padding-right: 15px;margin-top: 3px;" src="/images/maturinshipping.png" alt="Livraison par Maturin" title="Livraison par Maturin" class="pull-right">
{% endif %}
{% if product.subCategory is not null %}
{% if product.getOrgaCertification == true %}
<img style="padding-right: 5px;" src="/images/biosymbol.png" alt="produit biologique" title="produit biologique" class="pull-right">
{% endif %}
{% if product.conservation and product.conservation.id == 6 %}
<img style="padding-right: 5px;" src="/images/froozen.png" alt="Congelé" title="Congelé" class="pull-right">
{% elseif product.conservation and product.conservation.id == 5 %}
<img style="padding-right: 5px;" src="/images/snow.png" alt="Réfrigéré" title="Réfrigéré" class="pull-right">
{% endif %}
{% endif %}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% for product in masonryProducts %}
<!-- Product Modal -->
<div class="modal" id="previewProduct_{{product.Id}}" tabindex="-1" role="dialog"
aria-labelledby="previewModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="col-6">
{% if product.mainImage %}
<img class="modal-product-image lazyload" src="/images/none.png" data-src="{{path('getImageAsFixedWidth', {'id': product.mainImage.Id, 'width': '270'})}}">
{% else %}
<img class="modal-product-image" src="/assets/frontend/images/noProductPicture.jpg">
{% endif %}
</div>
<div class="col-6">
<div class="modal-product-title" {% if product.isDisplayedInAssociationOnly and global.associationUserIsBrowsing == false %} style="color: red !important;" {% endif %} >{{product.Name}}</div>
<div class="modal-product-subtitle">
<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>
</div>
<br><p>{{product.description | striptags | split(' ') | slice(0, 30) | join(' ')| raw }}...</p>
<div class="product-price">
{% if product.hasDiscount %}
<strike>{{product.displayPrice}}</strike> {{product.displayPrice(true)}}
{% else %}
{{product.displayPrice}}
{% endif %}
{% if product.pricings | length > 1 %}
<h5 class="font-weight-bold">
Format économique
</h5>
<ul style="color: darkgray; font-size: small;">
{% for price in product.pricings %}
<li>{{price.displayPrice}}</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% if product.isShippedByMaturin %}
{% if product.qtyReadyToShip > 0 %}
<div class="modal-product-in-stock">En inventaire</div>
{% else %}
<div class="modal-product-in-stock">Inventaire épuisé</div>
{% endif %}
{% else %}
<div class="modal-product-in-stock">Livraison indépendante</div>
{% endif %}
{% if product.isSalable %}
<div class="modal-product-amount">
{% if not product.isSubscribable %}
<div class="modal-product-amount-title">Quantité</div>
{% endif %}
<div class="row">
{% if not product.isSubscribable %}
<div class="col-12 pb-3">
<input class="form-control modal-product-btn-amount" id="qty-for-product-{{product.id}}" type="number" name="points" step="1" value="1" min="1">
</div>
{% endif %}
<div class="col-12">
{% if product.isSubscribable %}
<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
</button>
<div class="dropdown-menu" style="width: 300px;text-transform: uppercase;">
<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>
<input type="hidden" value="1" id="p-qty-s-{{product.id}}">
<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>
<input type="hidden" value="2" id="p-qty-1-{{product.id}}">
<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>
<input type="hidden" value="3" id="p-qty-2-{{product.id}}">
<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>
<input type="hidden" value="4" id="p-qty-3-{{product.id}}">
</div>
{% else %}
<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}}">
AJOUTER AU PANIER
</button>
{% endif %}
</div>
</div>
</div>
{% endif %}
<br>
<div class="modal-product-complete-list">
<a href="{{path('viewProduct', {'producerUrl': product.company.UrlName, 'productName': product.UrlName, 'id': product.id})}}">VOIR LA FICHE DU PRODUIT
<span class="modal-product-complete-list-arrow"> </span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product Modal -->
{% endfor %}
{% endblock %}
{% if products is defined and noPagination is defined %}
{% if noPagination %}
<script>
function updateLoader() {
if (document.getElementsByClassName('masonry-product').length ==
parseInt(document.getElementById('amountProducts').innerText)
&&
document.getElementById('product-loader')
) {
document.getElementById('product-loader').style.display = 'none';
}
}
updateLoader();
document.addEventListener("DOMContentLoaded", updateLoader);
</script>
{% endif %}
{% endif %}
{% if products is defined and noPagination is not defined %}
<script>
if( typeof lazyload !== 'undefined')
lazyload();
var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
if(supportsTouch){
var elems = document.querySelectorAll(".button-touch");
[].forEach.call(elems, function(el) {
el.classList.remove("d-none");
});
}
//console.log('Binding add to cart');
function updateLoader() {
if (document.getElementsByClassName('masonry-product').length ==
parseInt(document.getElementById('amountProducts').innerText)
&&
document.getElementById('product-loader')
) {
document.getElementById('product-loader').style.display = 'none';
}
}
updateLoader();
document.addEventListener("DOMContentLoaded", updateLoader);
function addToCart()
{
console.log('Masonry add to cart called');
event.preventDefault();
var type= this.getAttribute("data-type");
var id= this.getAttribute("data-id");
var quantityWidget = this.getAttribute('data-quantity');
if(quantityWidget && document.getElementById(quantityWidget)){
var quantity = document.getElementById(quantityWidget).value;
}else
var quantity = 1;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function()
{
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
var total = parseInt(document.getElementById('menu-cart-count').innerHTML);
document.getElementById('menu-cart-count').innerHTML = total+1;
document.getElementById('menu-cart-count').style.display = 'block';;
window.addToCartNotification++;
var json = JSON.parse(xmlHttp.responseText);
console.log(json);
if(document.getElementById('menu_subtotal_cart'))
document.getElementById('menu_subtotal_cart').innerHTML = json.totalCart;
if(document.getElementById('mobile_menu_subtotal_cart'))
document.getElementById('mobile_menu_subtotal_cart').innerHTML = json.totalCart;
}
}
//xmlHttp.open("post", '/API/cart/add/'+id+'/'+quantity);
var subscribe = this.getAttribute('data-subscribe');
if( subscribe )
xmlHttp.open("post", '/API/cart/add/'+id+'/'+quantity+'/'+subscribe);
else
xmlHttp.open("post", '/API/cart/add/'+id+'/'+quantity);
xmlHttp.send();
/*
$.ajax({
url: Routing.generate('addToCart', {id: id, quantity: quantity}),
method: 'POST',
dataType: 'json',
complete: _this.addedToCart
});
*/
}
var classname = document.getElementsByClassName("add-to-cart");
for (var i = 0; i < classname.length; i++) {
if(!classname[i].classList.contains("binded")){
var classString = classname[i].className;
var newClass = classString.concat(" binded");
classname[i].className = newClass;
classname[i].addEventListener('click', addToCart, false);
}
}
</script>
{# <div class="row d-none">
<div class="col-sm-12 text-center">
{% if ajax is defined %}
{{ knp_pagination_render(products, 'bundles/knp-paginator-bundle/ajaxPagination.html.twig', {}, {
'searchToken': searchToken
}) }}
{% else %}
{{ knp_pagination_render(products) }}
{% endif %}
</div>
</div> #}
<div id="paginatorDefaultPage" class="d-none">{{ knp_pagination_render(products) }}</div>
{% endif %}