Linux SRV-16 6.18.44-paas #1 SMP PREEMPT_DYNAMIC Thu Aug 13 10:08:12 UTC 2026 x86_64
/srv/data/web/vhosts/www.humitest.fr/htdocs/templates/front/product/
/srv/data/web/vhosts/www.humitest.fr/htdocs/templates/front/product/product.html.twig
 {% extends 'front/layout.html.twig' %}

{% block title %}
	{% if product.id == 155 %}
		Vous avez besoin d'une sonde thermo-hygrométrique ?
	{% elseif product.id == 130 %}
		Commandez votre kit d'étalonnage pour hygromètre !
	{% else %}
		{{ product.title}}
		-
		{{product.gammeProduct.name}}
	{% endif %}
{% endblock %}

{% block description %}
	{% if product.id == 155 %}
		Commandez dès maintenant notre sonde thermo-hygrométrique pour humitest spécial
	{% elseif product.id == 130 %}
		Besoin de calibrer votre hygromètre ? Commandez notre kit d'étalonnage  en ligne ! Livraison rapide
	{% else %}
		Découvrez le produit
		{{ product.title }}
		de la catégorie
		{{ product.gammeProduct.name }}
	{% endif %}
{% endblock %}

{% block keywords %}
	{% if product.id == 155 %}
		sonde thermo hygrométrique
	{% elseif product.id == 130 %}
		kit d'étalonnage hygromètre
	{% else %}
		{{ product.title }}
	{% endif %}
{% endblock %}

{% block content %}
	{% block banner %}{% endblock %}
	<!-- fiche produit-->

	<div class="container-fluid">

		<div class="row bg-light mt-5 pt-1">

			<div
				class="col-md-10">
				{# produit TOP  #}
				<div class="bg-light ">
					<div
						class="container px-0 px-md-5 my-5 mb-0">
						<!-- single product details -->
						<div class="small-container single-product px-0">
							<p></p>
							<p class="w-100 pt-2 pb-2 pl-2 text-uppercase" style="background-color:#f1f1f1;font-size:11px;font-family: 'Poppins', sans-serif; font-weight: 700; color: #38454e; letter-spacing: 0.2rem; margin-bottom: .5rem">
								<small>Categorie:
									<a class="a" href="{{ path('product_gamme', {'name': product.gammeProduct.name,'id': product.gammeProduct.id} ) }}">{{ product.gammeProduct.name}}</a>
									/
									{{  product.category }}
									/
									{{ product.title }}
								</small>
							</p>
							{% if product.isNewProduct == 1 %}
								<span class="badge float-right bg-warning text-dark text-uppercase mr-2">Nouveau Produit
								</span>
							{% endif %}
						</p>
						<br>
						<div class="row ml-2 mr-2 mr-md-0">
							<div class="col-2 p-0">
								{% include "front/blocks/slider-product.html.twig" %}
							</div>
							<div class="col-2">

								<h1 style="font-size: 1.75rem;">{{ product.title}}</h1>
								<h2 style="font-size: 22px">{{  product.price }}€ HT</h2>
								<hr>
								{{ form_start(form) }}
								<div class="row">
									<div class="col-sm-3 col-md-3">
										{{ form_row(form.quantity) }}
									</div>
									<div class="col-sm-9 col-md-9 " style="margin-top:-5px!important;">
										<button class="btn btn-red" style="height40px!important">
											Ajouter au panier
											<i class="fas fa-shopping-cart text-light"></i>
										</button>
									</div>
									{{ form_end(form) }}
								</div>

								<hr>
								<p>{{product.shortDesc|striptags('<br><p><strong><em>')|raw }}</p>
							</div>
						</div>
						{# tab caractéristique  #}

						{# TAB CARACTERISTIQUE MODEL 2 #}
						<div class="mt-5 w-100 mb-5 pb-5">
							<div class="accordian">
								<div class="accordian-title text-uppercase">L'humitest en action<span>
										<svg width="24px" height="24px" viewbox="0 0 24 24" aria-labelledby="plusIconTitle" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
											<title id="plusIconTitle">Plus</title>
											<path d="M20 12L4 12M12 4L12 20"/>
										</svg>
									</span>
								</div>
								<div class="" style="background-color:#f1f1f1;padding:20px">

									{% if product.humitestEnAction %}
										{{  product.humitestEnAction|striptags('<br><p><strong><em>')|raw }}
									{% else %}
										<span class="text-center">
											Aucune description disponible</span>
									{% endif %}
								</div>
							</div>
							<div class="accordian">
								<div class="accordian-title  text-uppercase">Caractéristiques detaillées<span>
										<svg width="24px" height="24px" viewbox="0 0 24 24" aria-labelledby="plusIconTitle" stroke-width="2" stroke="#000" stroke-linecap="round" stroke-linejoin="round">

											<title id="plusIconTitle">Plus</title>
											<path d="M20 12L4 12M12 4L12 20"/>
										</svg>
									</span>
								</div>
								<div class="accordian-content">
									{% if product.caracteristique %}
										{{  product.caracteristique|striptags('<h1><h2><h3><hr /><br><blockquote><strong><hr><p><table border="1"><body> <table><tbody><tr><td><strong><em><ul><li><center>')|raw }}
									{% else %}
										<span class="text-center">
											Aucune caractéristique disponible</span>
									{% endif %}
									{# ae? Litora accusamus, eligendi irure, quos occaecat aliquip odio, et! Ut arcu esse, veritatis odit posuere blanditiis! Maecenas facilisi. #}
								</div>
							</div>

							<div class="accordian">
								<div class="accordian-title  text-uppercase">Vidéo<span>
										<svg width="24px" height="24px" viewbox="0 0 24 24" aria-labelledby="plusIconTitle" stroke-width="2" stroke="#000" stroke-linecap="round" stroke-linejoin="round">

											<title id="plusIconTitle">Plus</title>
											<path d="M20 12L4 12M12 4L12 20"/>
										</svg>
									</span>
								</div>
								<div class="accordian-content">
									{% if product.linkVideo %}
										<center>
											<iframe src="{{product.linkVideo}}" width="760" height="415" frameborder="0"></iframe>
										</center>
									{% else %}
										<span class="text-center">
											Aucune vidéo disponible</span>
									{% endif %}
									{# ae? Litora accusamus, eligendi irure, quos occaecat aliquip odio, et! Ut arcu esse, veritatis odit posuere blanditiis! Maecenas facilisi. #}
								</div>
							</div>
						</div>
						{# FIN MODEL 2 #}
					</div>
				</div>
			</div>
		</div>
		{# produit SIMILAIRE  #}
		<div class="col-md-2">
			<aside class="btn-red bg-gradient rounded-3 p-4 mt-5" id="produitSimBloc" style="position: fixed;top: 100px;">
				<div class="d-flex align-items-center justify-content-between flex-column flex-xl-row text-center text-xl-start">
					<div class="mb-4 mb-xl-12">
						<div class="h5 fw-bold text-white text-uppercase text-center">Produits similaires</div>
						<!-- <div class="text-white-50">Découvrez la liste de nos références</div> <br> -->
						<div class="card-body p-0">
							{% if products %}
								{% include "front/blocks/product_similaire.html.twig" %}

							{% else %}
								<ul class="list-group list-group-flush list-unstyled">
									<li class="fw-bold mb-1">
										<div class="bg-light p-3 shadow-sm">
											<div class="row">
												<p class="text-center">Aucun produit similaire...</p>
											</div>
										</li>
									</li>
								</ul>
							{% endif %}

						</div>
					</div>
				</div>
			</aside>
		</div>
	</div>
</div>

<style>
	.product_card[quantity] {
		width: 100% !important;
	}
	.accordian-title {
		font-size: 18px;
		font-weight: bold;
		padding: 20px;
		border-bottom: 1px solid black;
		display: flex;
		justify-content: space-between;
		transition: all 0.1s linear;
		max-width: 100%;
	}
	.accordian-title span {
		transform-origin: center center;
		transition: all 0.1s linear;
		height: 24px;
	}
	.accordian-title.active span {
		transform: rotate(45deg);
		transform-origin: center center;
		transition: all 0.1s linear;
	}
	.accordian-title.active span svg {
		stroke: #f00;
	}
	.accordian-content {
		display: none;
		padding: 25px;
		background: #f1f1f1;
		max-width: 100%;
		border-bottom: 1px solid #c11823;
		/* margin:15px; */
	}
</style>{% endblock %}