{% extends "front/"~ app.request.server.get('APP_THEME') ~"/base.html.twig" %}
{% set parametre = ParametreSite() %}
{% block preload %}
{% if post.image is defined and post.image is not empty %}
{% if post.image %}
<link rel="preload" as="image" href="{{asset_image(post.image)}}" />
{% endif %}
{% endif %}
{% if galleries is defined and galleries is not empty %}
{% for item in galleries %}
{% if item.path is defined %}
<link rel="preload" as="image" href="{{asset_image_gallery(item.path)}}" />
{% endif %}
{% endfor %}
{% endif %}
{% endblock %}
{% block stylesheets %}
{{parent()}}
{% if modele_galerie[0].type == 4 %}
<link rel="stylesheet" type="text/css" href="{{asset('templates/front/theme1/assets/plugins/flexslider/flexslider.css')}}" media="screen" >
{% endif %}
{% if modele_galerie[0].type == 10 %}
<link rel="stylesheet" type="text/css" href="{{asset('templates/front/theme1/assets/plugins/pana-accordion-master/accordion.css')}}" media="screen" >
{% endif %}
{% if custom_style is defined and custom_style is not empty %}
<style>
{{custom_style|raw}}
</style>
{% endif %}
{% endblock %}
{% block body %}
{% set position_image = post.positionimage %}
{% set class_position = "" %}
{% if post.positionimage == 2 %}
{% set class_position = "float-md-left mb-2 mr-md-3" %}
{% elseif post.positionimage == 3 %}
{% set class_position = "float-md-right mb-2 ml-md-3" %}
{% endif %}
<div class="page_product">
{% if post.imageBandeau %}
{% set imagebandeau = asset_image(post.imageBandeau,'medium',['files1920','files1920','files1200']) %}
{% elseif parametre.imageBandeau %}
{% set imagebandeau = asset('uploads/images/' ~ parametre.imageBandeau) %}
{% else %}
{% set imagebandeau = '' %}
{% endif %}
<div class="{{imagebandeau != ''?'image-bandeau':'mt-5'}} text-center">
{% if imagebandeau != '' %}
<img class="lazyload" alt="{{post.imagebandeaualt is not empty ? post.imagebandeaualt|raw : post.titre}}" title="{{post.imagebandeaualt is not empty ? post.imagebandeaualt|raw : post.titre}}" src="{{imagebandeau}}" />
{% endif %}
<div class="cnt-bandeau text-center">
<div class="breadcrumb-style-default">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="inner text-center">
{% if breadcrumb is defined and breadcrumb is not empty %}
{{ include ('front/'~ app.request.server.get('APP_THEME') ~'/partials/breadcrumb.html.twig')}}
<h1 class="page-title">{{breadcrumb|last.name}}</h1>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid {{categories_tree is defined and categories_tree is not empty?'':'wrapper'}} mt-3">
<div class="row gx-5 py-2">
{% if categories_tree is defined and categories_tree is not empty %}
<div class="col-sm-12 col-md-3 {{show_filter_categorie is defined and show_filter_categorie == true ?'':'d-none'}}">
{{ include ('front/'~ app.request.server.get('APP_THEME') ~'/partials/product/_sidebar.html.twig')}}
</div>
{% endif %}
<div class="col-sm-12 col-md-{{show_filter_categorie is defined and show_filter_categorie == true?'9':'12'}} bloc-content-produit">
<div class="row">
<div class="col-sm-12 col-lg-6">
{% if not (modele_galerie[0].type == 4 and galleries|length > 1) %}
<div class="image-product">
{% if post.image and post.image is not empty %}
<a href="{{asset_image(post.image,'medium')}}" data-fancybox="image" tirle="{{post.imagealt is not empty ? post.imagealt|raw : post.titre}}" >
<img class="img-fluid" data-srcset="{{asset_image(post.image,'medium')}}" src="{{asset_image(post.image,'medium')}}" alt="{{post.imagealt is not empty ? post.imagealt|raw : post.titre}}" />
</a>
{% elseif galleries is defined and galleries is not empty %}
<a href="{{asset_image_gallery(galleries[0].path)}}" data-fancybox="image" tirle="{{galleries[0].titre is not empty ? galleries[0].titre|raw : post.titre}}" >
<img class="img-fluid" data-srcset="{{asset_image_gallery(galleries[0].path)}}" src="{{asset_image_gallery(galleries[0].path)}}" alt="{{galleries[0].titre is not empty ? galleries[0].titre|raw : post.titre}}" />
</a>
{% elseif parametre.imageVide is defined and parametre.imageVide is not empty %}
<a href="{{asset('/uploads/images/'~ parametre.imageVide)}}" data-fancybox="image" tirle="{{post.titre}}" >
<img class="img-fluid" data-srcset="{{asset('/uploads/images/'~ parametre.imageVide)}}" src="{{asset('/uploads/images/'~ parametre.imageVide)}}" alt="{{post.titre}}" />
</a>
{% endif %}
{% if post.disponibiliteproduit %}
<span class="disponible">{{'disponible'|upper}}</span>
{% endif %}
</div>
{% else %}
{% if galleries and galleries is not empty and template_model_gallerie is defined and template_model_gallerie is not empty %}
<div class="image-product">
{% if (post.image is defined and post.image == null) %}
{% set galleries = galleries|slice(1) %}
{% endif %}
{{ include(template_from_string(template_model_gallerie)) }}
{% if post.disponibiliteproduit %}
<span class="disponible">{{'disponible'|upper}}</span>
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
<div class="col-sm-12 col-lg-6 mt-lg-0 mt-4">
{% if post.image and post.image is not empty and imagebandeau == '' %}
<h1 class="page-title">{{breadcrumb|last.name}}</h1>
{% endif %}
{% if param_post is defined and param_post.actiftags and post.tags %}
<div class="tags-product my-2">
{% for tag in post.tags|split(',') %}
<span class="badge p-2 m-1">{{tag}}</span>
{% endfor %}
</div>
{% endif %}
{% if post.content is not empty and post.content != " " %}
{{post.content|raw}}
{% endif %}
{% if post.prixproduit %}
<div class="price_product"> Prix : <span>{{post.prixproduit}}</span> € </div>
{% endif %}
{% if post.referanceproduit %}
<div class="ref_product"> Réf : <strong>{{post.referanceproduit}} </strong></div>
{% endif %}
{% if champsPersonnalisesPost is defined and champsPersonnalisesPost is not empty %}
<div class="autre_info">
{% for item in champsPersonnalisesPost %}
<div class="item d-flex">
<div class="label"> {{item.label}} : </div>
<div class="value"> {{item.value}}</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if post.prixproduit is not empty %}
{% if post.typepost.parametrepost[0] is defined and post.typepost.parametrepost[0].actifpanier == true %}
<div class="input-quantite">
<label>Quantité :</label>
<input type="number" class="form-control quantite" value="1" min="1" name="qte" />
</div>
{% endif %}
{% endif %}
{% if post.typepost.parametrepost[0] is defined and (post.typepost.parametrepost[0].actifpanier == true or post.typepost.parametrepost[0].buttoninteresse != "") %}
<div class="d-flex mt-3 boutons-panier">
{% if post.prixproduit is not empty and post.typepost.parametrepost[0].actifpanier == true %}
<button title="Ajouter au panier" class="btn btn-add-panier">Ajouter au panier</button>
{% endif %}
{% if post.typepost.parametrepost[0].buttoninteresse != "" and slug_page_contact('page-contact') != null %}
<a href="{{path('page',{slug:slug_page_contact('page-contact')})}}?product={{post.slug}}" class="btn btn-interesse">{{post.typepost.parametrepost[0].buttoninteresse}}</a>
{% endif %}
</div>
{% endif %}
</div>
{% if post.produitsinfo is defined and post.produitsinfo is not empty %}
<div class="col-md-12">
<div class="product-tabs">
<ul class="tabs">
{% for key,item in post.produitsinfo %}
<li class="tab-link {{key == 0?'current':''}}" data-tab="tab-{{key + 1}}">{{item.titre|upper}}</li>
{% endfor %}
</ul>
<div class="">
{% for key,item in post.produitsinfo %}
<div id="tab-{{key + 1}}" class="tab-content {{key == 0?'current':''}}">{{item.text|raw}}</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
{% if post.datachampspersonalizer != null and unserialize(post.datachampspersonalizer) %}
{% for item in unserialize(post.datachampspersonalizer) %}
{% if item.fieldName == 'maps' %}
{{ include ('front/'~ app.request.server.get('APP_THEME') ~'/produits/_maps_html.twig',{map_data: item.value}, with_context = false)}}
{% endif %}
{% endfor %}
{% endif %}
<div class="col-sm-12">
{% if post.typelien == null %}
{% if categorieTree is defined and categorieTree[0] is defined %}
<div class="text-center py-2">
<a href="{{path('page',{slug:categorieTree[0].slug})}}" class="btn btn-cms py-3 px-5 mt-3 btn-plus">Retour à la liste {{categorieTree[0].titre}}</a>
</div>
{% endif %}
{% elseif post.typelien != 1 %}
{% if post.typelien == '4' %}
<div class="text-center py-2">
<a href="javascript:void(0)" onclick="window.location.href = 'tel:{{post.telephone}}';" class="btn btn-cms py-3 px-5 mt-3 btn-plus">{{post.titrelien}}</a>
</div>
{% elseif post.typelien == '2' %}
<div class="text-center py-2">
<a href="{{slug_link_interne(post.lieninterne)}}" class="btn btn-cms py-3 px-5 mt-3 btn-plus">{{post.titrelien}}</a>
</div>
{% elseif post.typelien == '3' %}
<div class="text-center py-2">
<a href="{{post.lienexterne}}" target="_blank" class="btn btn-cms py-3 px-5 mt-3 btn-plus">{{post.titrelien}}</a>
</div>
{% endif %}
{% endif %}
{% if docs and docs is not empty %}
<div class="col-md-12 bloc-docs d-flex justify-content-center">
{% for doc in docs %}
<a class="btn-back-pulse m-2" href="{{doc.location ~ doc.path ~ '/' ~ doc.fileName}}" title="{{doc.titre}}" target="_blank"><i class="fa fa-file-pdf-o mr-2"></i>{{doc.titre}}</a>
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% if galleries and galleries is not empty and template_model_gallerie is defined and template_model_gallerie is not empty and modele_galerie[0].type != 4 %}
{% if (post.image is defined and post.image == null) %}
{% set galleries = galleries|slice(1) %}
{% endif %}
{{ include(template_from_string(template_model_gallerie)) }}
{% endif %}
{% if post.urlvideo is not empty %}
<div class="container-fluid wrapper mt-3">
<div class="col-md-12 mt-1">
<div class="video">
{% set id_video_externe = post.urlvideo|extract_v %}
<a class="video-thumbnail m-0" href="{{post.urlvideo}}" data-fancybox="video">
<img src="https://img.youtube.com/vi/{{id_video_externe}}/maxresdefault.jpg" class="img-fluid" alt=""/>
</a>
</div>
</div>
</div>
{% endif %}
{% if blocs is defined %}
{% for bloc in blocs.Bloc %}
{% if is_mobile() and bloc.mobile == true %}
{{ include ('front/'~ app.request.server.get('APP_THEME') ~'/bloc/bloc.html.twig',{
bloc: bloc,
}, with_context = false)}}
{% endif %}
{% if is_full_view() and is_mobile() == false and bloc.desktop == true %}
{{ include ('front/'~ app.request.server.get('APP_THEME') ~'/bloc/bloc.html.twig',{
bloc: bloc,
}, with_context = false)}}
{% endif %}
{% endfor %}
{% endif %}
{% if produit_related is defined and produit_related is not empty %}
<section class="">
<div class="container-fluid mt-3">
<div class="row gx-5 py-2">
<div class="col-sm-12 text-center">
{% if post.typepost.parametrepost[0] is defined %}
<h2 class="sub-title wow">{{post.typepost.parametrepost[0].titreblocproduitrelated}}</h2>
{% endif %}
</div>
<div class="col-sm-12">
<div class="list_blocs pos1">
<div class="blocs">
<section class="results dynam-affichage affichage1 type_affiche3 ">
{% for item in produit_related %}
{% set duree = 0.1 %}
{% set prix = "" %}
{% if item.prixproduit is defined %}
{% set prix = item.prixproduit %}
{% endif %}
{% set image_item = item.image != null? asset_image(item.image): null %}
{% if image_item == null %}
{% set filteredItems = resultats_first_images_produits|filter(p => p.id == item.id) %}
{% for first_gallerie_image in filteredItems %}
{% set image_item = first_gallerie_image.galleries_first_image != null? asset_image_gallery(first_gallerie_image.galleries_first_image): null %}
{% endfor %}
{% endif %}
{% set image_item = image_item != null? image_item :asset('uploads/images/' ~ parametre.imagevide) %}
<div class="article wow zoomIn animated" {% if prix is not empty and (param_post is defined and param_post.actifprixliste is defined and param_post.actifprixliste == 1) %}data-prix="{{prix}}"{% endif %} data-wow-delay="{{duree}}s" style="visibility: visible; animation-delay: 0.1s; animation-name: zoomIn;">
<span class="article-image lazyloaded" style="background-image: url({{image_item}}); background-size: cover; background-position: center center; background-repeat: no-repeat;"> </span>
<span class="article-cnt">
{% if GetCategory(item.defaultcategorie) %}
<a class="article-titre" href="{{path('page_sous_categorie',{categorie1:GetCategory(item.defaultcategorie).slugurl,categorie2:item.slug})}}" title="{{item.title|raw}}">{{item.title|raw}}</a>
{% endif %}
{% if prix is not empty and (param_post is defined and param_post.actifprixliste is defined and param_post.actifprixliste == 1) %}
<span class="article-prix">{{prix}} €</span>
{% endif %}
{% if item.isshowresume == 1 %}
{% if item.summary is not empty %}
<span class="article-txt">
{{item.summary|raw}}
</span>
{% else %}
<span class="article-txt">
{% if item.content != "" %}
{{cutTextAffichage(item.content,'affichage1',false)|raw}}
{% endif %}
</span>
{% endif %}
{% endif %}
{% if GetCategory(item.defaultcategorie) %}
<span class="article-bts">
<button class="article-plus btn-fade" onclick="window.open('{{path('page_sous_categorie',{categorie1:GetCategory(item.defaultcategorie).slugurl,categorie2:item.slug})}}', '_self');" title="En savoir plus">En savoir plus</button>
</span>
{% endif %}
</span>
</div>
{% set duree = duree + 0.2 %}
{% endfor %}
</section>
</div>
</div>
</div>
</div>
</div>
</section>
{% endif %}
</div>
{% if post.typepost.parametrepost[0] is defined and post.typepost.parametrepost[0].actifpanier == true %}
<div id="ModalAjoutPanier" class="modal modal_cart">
<!-- Modal content -->
<div class="modal-content">
<div class='top_prod'>Votre produit a été ajouté avec succès<span class="close">×</span></div>
<div class="modal_content bg_bot">
<div id="name_produit2">Produit : <span></span> </div>
<div class="prix_vente2">Prix : <span></span> €</div>
<button title="Continuer mes achats" class="btn-continuer link_addSelection_detail2" id="addthis_selection2">Continuer mes achats</button>
{% set espace_client = 1 %}
{% if espace_client %}
<button onclick="window.location.href = '/espace-client/login'" title="Ajouter à ma commande" class="btn-back-pulse link_addSelection_detail" id="addthis_selection22">Je termine ma commande</button>
{% else %}
<button onclick="window.location.href = '/contact'" title="Ajouter à ma commande" class="btn-back-pulse link_addSelection_detail" id="addthis_selection22">Je termine ma commande</button>
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endblock %}
{% block javascripts %}
{{parent()}}
{% if post.typepost.parametrepost[0] is defined and post.typepost.parametrepost[0].actifpanier == true %}
<script>
$(document).ready(function() {
var modal = document.getElementById('ModalAjoutPanier');
var closeBtn = modal.getElementsByClassName("close");
var continuerBtn = modal.getElementsByClassName("link_addSelection_detail2");
$('.btn-add-panier').click(function() {
var productId = {{ post.id }};
var qte = $('.quantite').val();
$.ajax({
url: '/panier/add/'+escape(productId)+'/'+escape(qte),
type: 'POST',
dataType: 'JSON',
success: function(response) {
var panier = response.panier;
updatePanier(panier);
if(response.success){
var titre_produit = $('.page-title').text();
var prix_produit = $('.price_product span').text();
$('#name_produit2 span').text(titre_produit);
$('.prix_vente2 span').text(prix_produit);
modal.style.display = "block";
}
},
error: function(xhr, status, error) {
console.log(error); // Affichez l'erreur pour le débogage
}
});
});
function closeModal() {
modal.style.display = "none";
}
$(closeBtn).click(closeModal);
$(continuerBtn).click(closeModal);
});
</script>
{% endif %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
{% if modele_galerie[0].type == 4 %}
<script src="{{asset('templates/front/theme1/assets/plugins/flexslider/jquery.flexslider.js')}}" ></script>
<script>
if ($(".sx_flexslider").length) {
$('.flex-carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 150,
asNavFor: '.flex-slider'
});
$('.flex-slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: ".flex-carousel"
});
}
</script>
{% endif %}
{% if modele_galerie[0].type == 10 %}
<script src="{{asset('templates/front/theme1/assets/plugins/pana-accordion-master/pana-accordion.js')}}" ></script>
<script>
if ($(window).width() > 767){
accordion.init({
id: 'accordion',
autoPlay:false,
extpand:1,
expandWidth: $(window).width() - (($(window).width() / 4) * 2),
itemWidth: $(window).width() / 4,
});
}
if(window.innerWidth < 992){
var prk_panel_event="click";
} else {
var prk_panel_event="hover";
}
if(window.innerWidth >= 991){
/* Height de bloc_header_bottom */
var pos = 62;
$( "#sx-accordion .panel-counter" ).each(function() {
$(this).css({ top: pos });
pos = pos + 153;
});
}
if ( $( "#sx-accordion" ).length ) {
var headerH = $('header').outerHeight();
var heightHead = headerH+'px';
var heightcarousel = 'calc(100vh - '+heightHead+')';
$('#sx-accordion').accordionSlider({
width:'100%',
height: heightcarousel,
shadow: true,
autoplay:false,
mouseDelay:100,
openPanelDuration:500,
closePanelDuration:500,
closePanelsOnMouseOut: true,
//mouseWheelTarget: 'page',
startPanel:-1,
maxOpenedPanelSize:'60%',
openPanelOn:prk_panel_event,
panelOverlap:false,
mouseWheel: false,
panelOpenComplete: function(event) {
},
panelClick: function(event) {
},
breakpoints: {
767: {
height: 508,
maxOpenedPanelSize:'50%',
orientation: 'vertical',
touchSwipe: false
}
}
});
}
</script>
{% endif %}
<script>
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
</script>
{% endblock %}