var/cache/dev/twig/f2/f2ecf247f09ea21edc7b707efbc8f96b.php line 55

Open in your IDE?
  1. <?php
  3. use Twig\Environment;
  4. use Twig\Error\LoaderError;
  5. use Twig\Error\RuntimeError;
  6. use Twig\Extension\CoreExtension;
  7. use Twig\Extension\SandboxExtension;
  8. use Twig\Markup;
  9. use Twig\Sandbox\SecurityError;
  10. use Twig\Sandbox\SecurityNotAllowedTagError;
  11. use Twig\Sandbox\SecurityNotAllowedFilterError;
  12. use Twig\Sandbox\SecurityNotAllowedFunctionError;
  13. use Twig\Source;
  14. use Twig\Template;
  15. use Twig\TemplateWrapper;
  17. /* home/single-product.html.twig */
  18. class __TwigTemplate_aae7211b9c474856cd179227db62caa6 extends Template
  19. {
  20.     private Source $source;
  21.     /**
  22.      * @var array<string, Template>
  23.      */
  24.     private array $macros = [];
  26.     public function __construct(Environment $env)
  27.     {
  28.         parent::__construct($env);
  30.         $this->source = $this->getSourceContext();
  32.         $this->blocks = [
  33.             'title' => [$this, 'block_title'],
  34.             'stylesheets' => [$this, 'block_stylesheets'],
  35.             'body' => [$this, 'block_body'],
  36.         ];
  37.     }
  39.     protected function doGetParent(array $context): bool|string|Template|TemplateWrapper
  40.     {
  41.         // line 1
  42.         return "base_home.html.twig";
  43.     }
  45.     protected function doDisplay(array $context, array $blocks = []): iterable
  46.     {
  47.         $macros = $this->macros;
  48.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  49.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "home/single-product.html.twig"));
  51.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  52.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "home/single-product.html.twig"));
  54.         $this->parent = $this->load("base_home.html.twig", 1);
  55.         yield from $this->parent->unwrap()->yield($context, array_merge($this->blocks, $blocks));
  56.         
  57.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  59.         
  60.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  62.     }
  64.     // line 3
  65.     /**
  66.      * @return iterable<null|scalar|\Stringable>
  67.      */
  68.     public function block_title(array $context, array $blocks = []): iterable
  69.     {
  70.         $macros = $this->macros;
  71.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  72.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  74.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  75.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "title"));
  77.         // line 4
  78.         yield "\t";
  79.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "name", [], "any", false, false, false, 4), "html", null, true);
  80.         yield "
  81. \t| MaketOu
  82. ";
  83.         
  84.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  86.         
  87.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  89.         yield from [];
  90.     }
  92.     // line 8
  93.     /**
  94.      * @return iterable<null|scalar|\Stringable>
  95.      */
  96.     public function block_stylesheets(array $context, array $blocks = []): iterable
  97.     {
  98.         $macros = $this->macros;
  99.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  100.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  102.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  103.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "stylesheets"));
  105.         // line 9
  106.         yield "\t<style>
  107. \t\t/* Styles pour l'affichage de la boutique */
  108. \t\t.shop-info {
  109. \t\t\tpadding: 10px 0;
  110. \t\t\tborder-bottom: 1px solid #f0f0f0;
  111. \t\t\tmargin-bottom: 15px;
  112. \t\t}
  114. \t\t.shop-link {
  115. \t\t\tcolor: #ffa200;
  116. \t\t\ttext-decoration: none;
  117. \t\t\tfont-weight: 500;
  118. \t\t}
  120. \t\t.shop-link:hover {
  121. \t\t\tcolor: #e8910a;
  122. \t\t\ttext-decoration: underline;
  123. \t\t}
  125. \t\t/* Styles pour les statistiques du produit */
  126. \t\t.product-stats {
  127. \t\t\tbackground: #f8f9fa;
  128. \t\t\tpadding: 15px;
  129. \t\t\tborder-radius: 8px;
  130. \t\t\tborder: 1px solid #e9ecef;
  131. \t\t}
  133. \t\t.product-stats .stat-item {
  134. \t\t\ttext-align: center;
  135. \t\t}
  137. \t\t.product-stats .stat-number {
  138. \t\t\tdisplay: block;
  139. \t\t\tfont-size: 1.2rem;
  140. \t\t\tfont-weight: bold;
  141. \t\t\tcolor: #ffa200;
  142. \t\t}
  144. \t\t.product-stats .stat-label {
  145. \t\t\tcolor: #666;
  146. \t\t\tfont-size: 0.8rem;
  147. \t\t\ttext-transform: uppercase;
  148. \t\t\tletter-spacing: 0.5px;
  149. \t\t}
  151. \t\t/* Message de confirmation */
  152. \t\t#cart-message {
  153. \t\t\tborder: none;
  154. \t\t\tbackground: #d4edda;
  155. \t\t\tcolor: #155724;
  156. \t\t\tborder-radius: 6px;
  157. \t\t\tpadding: 12px 16px;
  158. \t\t\tmargin-top: 15px;
  159. \t\t}
  161. \t\t/* Amélioration des boutons d'actions */
  162. \t\t.card_area {
  163. \t\t\tmargin-top: 20px;
  164. \t\t\tgap: 12px;
  165. \t\t}
  167. \t\t.card_area .primary-btn {
  168. \t\t\tbackground: #ffa200;
  169. \t\t\tborder: none;
  170. \t\t\tpadding: 0 30px;
  171. \t\t\theight: 50px;
  172. \t\t\tdisplay: inline-flex;
  173. \t\t\talign-items: center;
  174. \t\t\tjustify-content: center;
  175. \t\t\tborder-radius: 8px;
  176. \t\t\tcolor: white;
  177. \t\t\tfont-weight: 600;
  178. \t\t\tfont-size: 16px;
  179. \t\t\ttransition: all 0.3s ease;
  180. \t\t\ttext-decoration: none;
  181. \t\t\tgap: 8px;
  182. \t\t\tflex: 1;
  183. \t\t\tmax-width: 250px;
  184. \t\t}
  186. \t\t.card_area .primary-btn i {
  187. \t\t\tfont-size: 20px;
  188. \t\t}
  190. \t\t.card_area .primary-btn:hover {
  191. \t\t\tbackground: #e8910a;
  192. \t\t\ttransform: translateY(-2px);
  193. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  194. \t\t\tcolor: white;
  195. \t\t}
  197. \t\t.card_area .icon_btn {
  198. \t\t\tdisplay: inline-flex;
  199. \t\t\talign-items: center;
  200. \t\t\tjustify-content: center;
  201. \t\t\twidth: 50px;
  202. \t\t\theight: 50px;
  203. \t\t\tborder-radius: 8px;
  204. \t\t\tbackground: #fff;
  205. \t\t\tcolor: #333;
  206. \t\t\tborder: 1px solid #ddd;
  207. \t\t\ttransition: all 0.3s ease;
  208. \t\t\ttext-decoration: none;
  209. \t\t}
  211. \t\t.card_area .icon_btn i {
  212. \t\t\tfont-size: 22px;
  213. \t\t}
  215. \t\t.card_area .icon_btn:hover {
  216. \t\t\tbackground: #ffa200;
  217. \t\t\tcolor: white;
  218. \t\t\tborder-color: #ffa200;
  219. \t\t\ttransform: translateY(-2px);
  220. \t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.2);
  221. \t\t}
  223. \t\t/* Styles pour la galerie moderne de produits */
  224. \t\t.product-gallery-modern {
  225. \t\t\tdisplay: flex;
  226. \t\t\tgap: 15px;
  227. \t\t\tposition: relative;
  228. \t\t\talign-items: stretch;
  229. \t\t}
  231. \t\t.thumbnails-container {
  232. \t\t\tposition: relative;
  233. \t\t\tdisplay: flex;
  234. \t\t\tflex-direction: column;
  235. \t\t\talign-items: center;
  236. \t\t\twidth: 80px;
  237. \t\t\tflex-shrink: 0;
  238. \t\t\theight: auto;
  239. \t\t}
  241. \t\t/* Les boutons sont toujours visibles (meilleur pour le mobile et l'UX) */
  242. \t\t.thumbnails-container .thumbnail-nav-btn {
  243. \t\t\ttransition: all 0.2s ease;
  244. \t\t}
  246. \t\t.product-thumbnails {
  247. \t\t\tdisplay: flex;
  248. \t\t\tflex-direction: column;
  249. \t\t\tgap: 10px;
  250. \t\t\twidth: 100%;
  251. \t\t\tflex: 1;
  252. \t\t\toverflow: hidden;
  253. \t\t\tposition: relative;
  254. \t\t}
  256. \t\t.thumbnails-wrapper {
  257. \t\t\tdisplay: flex;
  258. \t\t\tflex-direction: column;
  259. \t\t\tgap: 10px;
  260. \t\t\ttransition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  261. \t\t\twill-change: transform;
  262. \t\t}
  264. \t\t.thumbnail-nav-btn {
  265. \t\t\twidth: 30px;
  266. \t\t\theight: 30px;
  267. \t\t\tborder-radius: 50%;
  268. \t\t\tbackground: white;
  269. \t\t\tborder: 2px solid #e0e0e0;
  270. \t\t\tdisplay: flex !important;
  271. \t\t\talign-items: center;
  272. \t\t\tjustify-content: center;
  273. \t\t\tcursor: pointer;
  274. \t\t\ttransition: all 0.3s ease;
  275. \t\t\tmargin: 0;
  276. \t\t\tpadding: 0;
  277. \t\t\tcolor: #666;
  278. \t\t\tz-index: 10;
  279. \t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  280. \t\t\tposition: relative;
  281. \t\t\tflex-shrink: 0;
  282. \t\t}
  284. \t\t.thumbnail-nav-btn:hover {
  285. \t\t\tbackground: #ffa200;
  286. \t\t\tborder-color: #ffa200;
  287. \t\t\tcolor: white;
  288. \t\t\ttransform: scale(1.1);
  289. \t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.3);
  290. \t\t}
  292. \t\t.thumbnail-nav-btn:active {
  293. \t\t\ttransform: scale(0.95);
  294. \t\t}
  296. \t\t.thumbnail-nav-btn.disabled {
  297. \t\t\topacity: 0.3;
  298. \t\t\tcursor: not-allowed;
  299. \t\t\tpointer-events: none;
  300. \t\t\tfilter: grayscale(1);
  301. \t\t}
  303. \t\t.thumbnail-nav-btn i {
  304. \t\t\tfont-size: 20px;
  305. \t\t\tfont-weight: bold;
  306. \t\t}
  308. \t\t.thumbnail-item {
  309. \t\t\twidth: 80px;
  310. \t\t\theight: 80px;
  311. \t\t\tmin-width: 80px;
  312. \t\t\tmin-height: 80px;
  313. \t\t\tmax-width: 80px;
  314. \t\t\tmax-height: 80px;
  315. \t\t\tborder: 2px solid #e0e0e0;
  316. \t\t\tborder-radius: 8px;
  317. \t\t\toverflow: hidden;
  318. \t\t\tcursor: pointer;
  319. \t\t\ttransition: border-color 0.3s ease, border-width 0.3s ease, box-shadow 0.3s ease;
  320. \t\t\tposition: relative;
  321. \t\t\tbackground: #fff;
  322. \t\t\tborder-bottom: 2px solid #e0e0e0;
  323. \t\t\tflex-shrink: 0;
  324. \t\t}
  326. \t\t.thumbnail-item:hover {
  327. \t\t\tborder-color: #ffa200;
  328. \t\t\tborder-bottom-color: #ffa200;
  329. \t\t\tborder-width: 3px;
  330. \t\t\tbox-shadow: 0 0 0 2px rgba(255, 162, 0, 0.2);
  331. \t\t}
  333. \t\t.thumbnail-item.active {
  334. \t\t\tborder-color: #ffa200 !important;
  335. \t\t\tborder-bottom-color: #ffa200 !important;
  336. \t\t\tborder-width: 3px !important;
  337. \t\t\tbox-shadow: 0 0 0 2px rgba(255, 162, 0, 0.2) !important;
  338. \t\t}
  340. \t\t.thumbnail-item::after,
  341. \t\t.thumbnail-item::before {
  342. \t\t\tdisplay: none !important;
  343. \t\t\tcontent: none !important;
  344. \t\t}
  346. \t\t.thumbnail-item img {
  347. \t\t\twidth: 100%;
  348. \t\t\theight: 100%;
  349. \t\t\tobject-fit: cover;
  350. \t\t\ttransition: transform 0.3s ease;
  351. \t\t}
  353. \t\t.thumbnail-item:hover img {
  354. \t\t\ttransform: scale(1.1);
  355. \t\t}
  357. \t\t.thumbnail-item.active img {
  358. \t\t\ttransform: scale(1.1);
  359. \t\t}
  361. \t\t.product-main-image-wrapper {
  362. \t\t\tflex: 1;
  363. \t\t\tposition: relative;
  364. \t\t\tbackground: #fff;
  365. \t\t\tborder-radius: 12px;
  366. \t\t\toverflow: hidden;
  367. \t\t\tborder: 1px solid #e0e0e0;
  368. \t\t\tcursor: crosshair;
  369. \t\t}
  371. \t\t.product-main-image {
  372. \t\t\tposition: relative;
  373. \t\t\twidth: 100%;
  374. \t\t\tpadding-top: 100%;
  375. \t\t\toverflow: hidden;
  376. \t\t\tbackground: #f8f9fa;
  377. \t\t}
  379. \t\t.product-main-image img {
  380. \t\t\tposition: absolute;
  381. \t\t\ttop: 0;
  382. \t\t\tleft: 0;
  383. \t\t\twidth: 100%;
  384. \t\t\theight: 100%;
  385. \t\t\tobject-fit: contain;
  386. \t\t\ttransition: transform 0.15s ease-out;
  387. \t\t\ttransform-origin: center center;
  388. \t\t}
  390. \t\t/* Supprimer le scale basique, géré en JS */
  391. \t\t/* .product-main-image:hover img {
  392. \t\t\ttransform: scale(1.05);
  393. \t\t} */
  395. \t\t.image-overlay-icons {
  396. \t\t\tposition: absolute;
  397. \t\t\ttop: 15px;
  398. \t\t\tright: 15px;
  399. \t\t\tdisplay: flex;
  400. \t\t\tflex-direction: column;
  401. \t\t\tgap: 10px;
  402. \t\t\tz-index: 20;
  403. \t\t\tpointer-events: none;
  404. \t\t}
  406. \t\t.icon-btn {
  407. \t\t\tpointer-events: all;
  408. \t\t\twidth: 45px;
  409. \t\t\theight: 45px;
  410. \t\t\tborder-radius: 50%;
  411. \t\t\tbackground: rgba(255, 255, 255, 0.95);
  412. \t\t\tborder: none;
  413. \t\t\tdisplay: flex;
  414. \t\t\talign-items: center;
  415. \t\t\tjustify-content: center;
  416. \t\t\tpadding: 0;
  417. \t\t\tcursor: pointer;
  418. \t\t\ttransition: all 0.3s ease;
  419. \t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  420. \t\t\tcolor: #333;
  421. \t\t}
  423. \t\t.icon-btn:hover {
  424. \t\t\tbackground: #ffa200;
  425. \t\t\tcolor: white;
  426. \t\t\ttransform: scale(1.1);
  427. \t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.4);
  428. \t\t}
  430. \t\t.icon-btn i {
  431. \t\t\tfont-size: 18px;
  432. \t\t}
  434. \t\t.favorite-btn.active {
  435. \t\t\tbackground: #ff6b6b;
  436. \t\t\tcolor: white;
  437. \t\t}
  439. \t\t.image-counter {
  440. \t\t\tposition: absolute;
  441. \t\t\tbottom: 15px;
  442. \t\t\tright: 15px;
  443. \t\t\tbackground: rgba(0, 0, 0, 0.7);
  444. \t\t\tcolor: white;
  445. \t\t\tpadding: 6px 12px;
  446. \t\t\tborder-radius: 20px;
  447. \t\t\tfont-size: 13px;
  448. \t\t\tfont-weight: 600;
  449. \t\t}
  451. \t\t/* Modal de zoom d'image avec transitions modernes */
  452. \t\t.image-zoom-modal {
  453. \t\t\tdisplay: none;
  454. \t\t\tposition: fixed;
  455. \t\t\tz-index: 9999;
  456. \t\t\tleft: 0;
  457. \t\t\ttop: 0;
  458. \t\t\twidth: 100%;
  459. \t\t\theight: 100%;
  460. \t\t\tbackground: rgba(0, 0, 0, 0);
  461. \t\t\toverflow: auto;
  462. \t\t\topacity: 0;
  463. \t\t\ttransition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  464. \t\t\tbackdrop-filter: blur(0px);
  465. \t\t}
  467. \t\t.image-zoom-modal.active {
  468. \t\t\tdisplay: flex;
  469. \t\t\talign-items: center;
  470. \t\t\tjustify-content: center;
  471. \t\t\topacity: 1;
  472. \t\t\tbackground: rgba(0, 0, 0, 0.95);
  473. \t\t\tbackdrop-filter: blur(10px);
  474. \t\t}
  476. \t\t.zoom-modal-content {
  477. \t\t\tposition: relative;
  478. \t\t\tmax-width: 90%;
  479. \t\t\tmax-height: 90%;
  480. \t\t\tmargin: auto;
  481. \t\t\topacity: 0;
  482. \t\t\ttransform: scale(0.8);
  483. \t\t\ttransition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  484. \t\t}
  486. \t\t.image-zoom-modal.active .zoom-modal-content {
  487. \t\t\topacity: 1;
  488. \t\t\ttransform: scale(1);
  489. \t\t}
  491. \t\t.zoom-modal-content img {
  492. \t\t\twidth: 100%;
  493. \t\t\theight: auto;
  494. \t\t\tmax-height: 90vh;
  495. \t\t\tobject-fit: contain;
  496. \t\t\tborder-radius: 8px;
  497. \t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  498. \t\t\topacity: 0;
  499. \t\t\ttransition: opacity 0.3s ease;
  500. \t\t}
  502. \t\t.zoom-modal-content img.loaded {
  503. \t\t\topacity: 1;
  504. \t\t}
  506. \t\t/* Loader moderne */
  507. \t\t.zoom-loader {
  508. \t\t\tposition: absolute;
  509. \t\t\ttop: 50%;
  510. \t\t\tleft: 50%;
  511. \t\t\ttransform: translate(-50%, -50%);
  512. \t\t\tz-index: 1;
  513. \t\t\tdisplay: flex;
  514. \t\t\tflex-direction: column;
  515. \t\t\talign-items: center;
  516. \t\t\tjustify-content: center;
  517. \t\t}
  519. \t\t.zoom-loader-spinner {
  520. \t\t\twidth: 60px;
  521. \t\t\theight: 60px;
  522. \t\t\tborder: 4px solid rgba(255, 255, 255, 0.1);
  523. \t\t\tborder-top-color: #ffa200;
  524. \t\t\tborder-radius: 50%;
  525. \t\t\tanimation: spin 1s linear infinite;
  526. \t\t}
  528. \t\t@keyframes spin {
  529. \t\t\tto {
  530. \t\t\t\ttransform: rotate(360deg);
  531. \t\t\t}
  532. \t\t}
  534. \t\t.zoom-loader-text {
  535. \t\t\tcolor: white;
  536. \t\t\tmargin-top: 15px;
  537. \t\t\ttext-align: center;
  538. \t\t\tfont-size: 14px;
  539. \t\t\tfont-weight: 500;
  540. \t\t}
  542. \t\t.close-zoom {
  543. \t\t\tposition: absolute;
  544. \t\t\ttop: 30px;
  545. \t\t\tright: 30px;
  546. \t\t\tcolor: white;
  547. \t\t\tfont-size: 32px;
  548. \t\t\tfont-weight: 300;
  549. \t\t\tcursor: pointer;
  550. \t\t\tz-index: 10000;
  551. \t\t\twidth: 50px;
  552. \t\t\theight: 50px;
  553. \t\t\tdisplay: flex;
  554. \t\t\talign-items: center;
  555. \t\t\tjustify-content: center;
  556. \t\t\tbackground: rgba(255, 255, 255, 0.1);
  557. \t\t\tborder: 2px solid rgba(255, 255, 255, 0.2);
  558. \t\t\tborder-radius: 50%;
  559. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  560. \t\t\topacity: 0;
  561. \t\t\ttransform: scale(0.8);
  562. \t\t}
  564. \t\t.image-zoom-modal.active .close-zoom {
  565. \t\t\topacity: 1;
  566. \t\t\ttransform: scale(1);
  567. \t\t\ttransition-delay: 0.2s;
  568. \t\t}
  570. \t\t.close-zoom:hover {
  571. \t\t\tbackground: rgba(255, 162, 0, 0.9);
  572. \t\t\tborder-color: #ffa200;
  573. \t\t\ttransform: scale(1.1) rotate(90deg);
  574. \t\t\tbox-shadow: 0 4px 20px rgba(255, 162, 0, 0.4);
  575. \t\t}
  577. \t\t/* Boutons de navigation sur l'image principale */
  578. \t\t.main-image-nav {
  579. \t\t\tposition: absolute;
  580. \t\t\ttop: 0;
  581. \t\t\tbottom: 0;
  582. \t\t\tleft: 0;
  583. \t\t\tright: 0;
  584. \t\t\tdisplay: flex;
  585. \t\t\talign-items: center;
  586. \t\t\tjustify-content: space-between;
  587. \t\t\tpadding: 0 15px;
  588. \t\t\tpointer-events: none;
  589. \t\t\tz-index: 15;
  590. \t\t}
  591. \t\t.main-image-nav-btn {
  592. \t\t\tpointer-events: all;
  593. \t\t\twidth: 44px;
  594. \t\t\theight: 44px;
  595. \t\t\tborder-radius: 50%;
  596. \t\t\tbackground: rgba(255, 255, 255, 0.95);
  597. \t\t\tborder: 2px solid #e0e0e0;
  598. \t\t\tdisplay: flex;
  599. \t\t\talign-items: center;
  600. \t\t\tjustify-content: center;
  601. \t\t\tpadding: 0;
  602. \t\t\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  603. \t\t\tcolor: #333;
  604. \t\t\ttransition: all 0.2s ease;
  605. \t\t}
  606. \t\t.main-image-nav-btn:hover {
  607. \t\t\tbackground: #ffa200;
  608. \t\t\tborder-color: #ffa200;
  609. \t\t\tcolor: #fff;
  610. \t\t\ttransform: scale(1.08);
  611. \t\t}
  612. \t\t.main-image-nav-btn:active {
  613. \t\t\ttransform: scale(0.95);
  614. \t\t}
  616. \t\t/* Modal personnalisé pour remplacer les alert */
  617. \t\t.custom-alert-modal .modal-content {
  618. \t\t\tborder-radius: 12px;
  619. \t\t\tborder: none;
  620. \t\t\tbox-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  621. \t\t}
  623. \t\t.custom-alert-modal .modal-header {
  624. \t\t\tborder-bottom: none;
  625. \t\t\tpadding: 1.5rem 1.5rem 0.5rem;
  626. \t\t\tbackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  627. \t\t\tcolor: white;
  628. \t\t\tborder-radius: 12px 12px 0 0;
  629. \t\t}
  631. \t\t.custom-alert-modal .modal-header .btn-close {
  632. \t\t\tfilter: brightness(0) invert(1);
  633. \t\t\topacity: 0.8;
  634. \t\t}
  636. \t\t.custom-alert-modal .modal-header .btn-close:hover {
  637. \t\t\topacity: 1;
  638. \t\t}
  640. \t\t.custom-alert-modal .modal-body {
  641. \t\t\tpadding: 1.5rem;
  642. \t\t\ttext-align: center;
  643. \t\t}
  645. \t\t.custom-alert-modal .modal-body .alert-icon {
  646. \t\t\tfont-size: 3rem;
  647. \t\t\tmargin-bottom: 1rem;
  648. \t\t}
  650. \t\t.custom-alert-modal .modal-body .alert-icon.success {
  651. \t\t\tcolor: #28a745;
  652. \t\t}
  654. \t\t.custom-alert-modal .modal-body .alert-icon.error {
  655. \t\t\tcolor: #dc3545;
  656. \t\t}
  658. \t\t.custom-alert-modal .modal-body .alert-icon.warning {
  659. \t\t\tcolor: #ffc107;
  660. \t\t}
  662. \t\t.custom-alert-modal .modal-body .alert-icon.info {
  663. \t\t\tcolor: #17a2b8;
  664. \t\t}
  666. \t\t.custom-alert-modal .modal-body .alert-message {
  667. \t\t\tfont-size: 1.1rem;
  668. \t\t\tcolor: #333;
  669. \t\t\tmargin-bottom: 1rem;
  670. \t\t\tline-height: 1.6;
  671. \t\t}
  673. \t\t.custom-alert-modal .modal-footer {
  674. \t\t\tborder-top: none;
  675. \t\t\tpadding: 0.5rem 1.5rem 1.5rem;
  676. \t\t\tjustify-content: center;
  677. \t\t}
  679. \t\t.custom-alert-modal .modal-footer .btn {
  680. \t\t\tmin-width: 120px;
  681. \t\t\tpadding: 0.6rem 1.5rem;
  682. \t\t\tborder-radius: 8px;
  683. \t\t\tfont-weight: 500;
  684. \t\t}
  686. \t\t/* Responsive pour single-product */
  687. \t\t@media(max-width: 991.98px) {
  688. \t\t\t.product-gallery-modern {
  689. \t\t\t\tflex-direction: column;
  690. \t\t\t}
  692. \t\t\t.thumbnails-container {
  693. \t\t\t\tflex-direction: row;
  694. \t\t\t\twidth: 100%;
  695. \t\t\t\toverflow-x: auto;
  696. \t\t\t\tpadding: 10px 0;
  697. \t\t\t}
  699. \t\t\t.thumbnail-item {
  700. \t\t\t\tflex-shrink: 0;
  701. \t\t\t}
  703. \t\t\t.main-image-container {
  704. \t\t\t\twidth: 100%;
  705. \t\t\t}
  706. \t\t}
  708. \t\t@media(max-width: 768px) {
  709. \t\t\t.product-gallery-modern {
  710. \t\t\t\tflex-direction: column;
  711. \t\t\t}
  713. \t\t\t.thumbnails-container {
  714. \t\t\t\twidth: 100%;
  715. \t\t\t\tflex-direction: row;
  716. \t\t\t\talign-items: center;
  717. \t\t\t}
  719. \t\t\t.product-thumbnails {
  720. \t\t\t\tflex-direction: row;
  721. \t\t\t\twidth: 100%;
  722. \t\t\t\tmax-height: 100px;
  723. \t\t\t\toverflow-x: auto;
  724. \t\t\t\toverflow-y: hidden;
  725. \t\t\t}
  727. \t\t\t.thumbnail-item {
  728. \t\t\t\tflex-shrink: 0;
  729. \t\t\t}
  731. \t\t\t.thumbnail-nav-btn {
  732. \t\t\t\tmargin: 0 5px;
  733. \t\t\t}
  735. \t\t\t.thumbnail-nav-up {
  736. \t\t\t\torder: 1;
  737. \t\t\t}
  739. \t\t\t.product-thumbnails {
  740. \t\t\t\torder: 2;
  741. \t\t\t}
  743. \t\t\t.thumbnail-nav-down {
  744. \t\t\t\torder: 3;
  745. \t\t\t}
  747. \t\t\t.image-overlay-icons {
  748. \t\t\t\topacity: 1;
  749. \t\t\t}
  750. \t\t}
  751. \t</style>
  752. ";
  753.         
  754.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  756.         
  757.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  759.         yield from [];
  760.     }
  762.     // line 657
  763.     /**
  764.      * @return iterable<null|scalar|\Stringable>
  765.      */
  766.     public function block_body(array $context, array $blocks = []): iterable
  767.     {
  768.         $macros = $this->macros;
  769.         $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"];
  770.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  772.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"];
  773.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "block", "body"));
  775.         // line 658
  776.         yield "\t<!-- Start Banner Area -->
  777. \t<section class=\"banner-area organic-breadcrumb\">
  778. \t\t<div class=\"container\">
  779. \t\t\t<div class=\"breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end\">
  780. \t\t\t\t<div class=\"col-first\">
  781. \t\t\t\t\t<h1>Product Details Page</h1>
  782. \t\t\t\t\t<nav class=\"d-flex align-items-center\">
  783. \t\t\t\t\t\t<a href=\"index.html\">Home<span class=\"lnr lnr-arrow-right\"></span>
  784. \t\t\t\t\t\t</a>
  785. \t\t\t\t\t\t<a href=\"#\">Shop<span class=\"lnr lnr-arrow-right\"></span>
  786. \t\t\t\t\t\t</a>
  787. \t\t\t\t\t\t<a href=\"single-product.html\">product-details</a>
  788. \t\t\t\t\t</nav>
  789. \t\t\t\t</div>
  790. \t\t\t</div>
  791. \t\t</div>
  792. \t</section>
  793. \t<!-- End Banner Area -->
  795. \t<!--================Single Product Area =================-->
  796. \t<div class=\"product_image_area\">
  797. \t\t<div class=\"container\">
  798. \t\t\t<div class=\"row s_product_inner\">
  799. \t\t\t\t<div class=\"col-lg-6\">
  800. \t\t\t\t\t<div
  801. \t\t\t\t\t\tclass=\"product-gallery-modern\">
  802. \t\t\t\t\t\t<!-- Colonne de miniatures à gauche avec navigation -->
  803. \t\t\t\t\t\t<div class=\"thumbnails-container\">
  804. \t\t\t\t\t\t\t<button class=\"thumbnail-nav-btn thumbnail-nav-up\" id=\"thumbnail-nav-up\" title=\"Image précédente\">
  805. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-up\"></i>
  806. \t\t\t\t\t\t\t</button>
  807. \t\t\t\t\t\t\t<div class=\"product-thumbnails\" id=\"product-thumbnails\">
  808. \t\t\t\t\t\t\t\t<div class=\"thumbnails-wrapper\" id=\"thumbnails-wrapper\">
  809. \t\t\t\t\t\t\t\t\t";
  810.         // line 691
  811.         if ((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "images", [], "any", true, true, false, 691) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "images", [], "any", false, false, false, 691)) > 0))) {
  812.             // line 692
  813.             yield "\t\t\t\t\t\t\t\t\t\t";
  814.             $context['_parent'] = $context;
  815.             $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "images", [], "any", false, false, false, 692));
  816.             $context['loop'] = [
  817.               'parent' => $context['_parent'],
  818.               'index0' => 0,
  819.               'index'  => 1,
  820.               'first'  => true,
  821.             ];
  822.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  823.                 $length = count($context['_seq']);
  824.                 $context['loop']['revindex0'] = $length - 1;
  825.                 $context['loop']['revindex'] = $length;
  826.                 $context['loop']['length'] = $length;
  827.                 $context['loop']['last'] = 1 === $length;
  828.             }
  829.             foreach ($context['_seq'] as $context["_key"] => $context["img"]) {
  830.                 // line 693
  831.                 yield "\t\t\t\t\t\t\t\t\t\t\t<div class=\"thumbnail-item ";
  832.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "first", [], "any", false, false, false, 693)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  833.                     yield "active permanently-active";
  834.                 }
  835.                 yield "\" data-image=\"";
  836.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl($context["img"]), "html", null, true);
  837.                 yield "\" data-index=\"";
  838.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index0", [], "any", false, false, false, 693), "html", null, true);
  839.                 yield "\">
  840. \t\t\t\t\t\t\t\t\t\t\t\t<img src=\"";
  841.                 // line 694
  842.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl($context["img"]), "html", null, true);
  843.                 yield "\" alt=\"";
  844.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "name", [], "any", false, false, false, 694), "html", null, true);
  845.                 yield " - Image ";
  846.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["loop"], "index", [], "any", false, false, false, 694), "html", null, true);
  847.                 yield "\">
  848. \t\t\t\t\t\t\t\t\t\t\t</div>
  849. \t\t\t\t\t\t\t\t\t\t";
  850.                 ++$context['loop']['index0'];
  851.                 ++$context['loop']['index'];
  852.                 $context['loop']['first'] = false;
  853.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  854.                     --$context['loop']['revindex0'];
  855.                     --$context['loop']['revindex'];
  856.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  857.                 }
  858.             }
  859.             $_parent = $context['_parent'];
  860.             unset($context['_seq'], $context['_key'], $context['img'], $context['_parent'], $context['loop']);
  861.             $context = array_intersect_key($context, $_parent) + $_parent;
  862.             // line 697
  863.             yield "\t\t\t\t\t\t\t\t\t";
  864.         } else {
  865.             // line 698
  866.             yield "\t\t\t\t\t\t\t\t\t\t<div class=\"thumbnail-item active permanently-active\" data-image=\"";
  867.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/category/s-p1.jpg"), "html", null, true);
  868.             yield "\" data-index=\"0\">
  869. \t\t\t\t\t\t\t\t\t\t\t<img src=\"";
  870.             // line 699
  871.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/category/s-p1.jpg"), "html", null, true);
  872.             yield "\" alt=\"";
  873.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "name", [], "any", false, false, false, 699), "html", null, true);
  874.             yield "\">
  875. \t\t\t\t\t\t\t\t\t\t</div>
  876. \t\t\t\t\t\t\t\t\t";
  877.         }
  878.         // line 702
  879.         yield "\t\t\t\t\t\t\t\t</div>
  880. \t\t\t\t\t\t\t</div>
  881. \t\t\t\t\t\t\t<button class=\"thumbnail-nav-btn thumbnail-nav-down\" id=\"thumbnail-nav-down\" title=\"Image suivante\">
  882. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-down\"></i>
  883. \t\t\t\t\t\t\t</button>
  884. \t\t\t\t\t\t</div>
  886. \t\t\t\t\t\t<!-- Grande image principale -->
  887. \t\t\t\t\t\t<div class=\"product-main-image-wrapper\">
  888. \t\t\t\t\t\t\t<div class=\"product-main-image\">
  889. \t\t\t\t\t\t\t\t";
  890.         // line 712
  891.         if ((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "images", [], "any", true, true, false, 712) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "images", [], "any", false, false, false, 712)) > 0))) {
  892.             // line 713
  893.             yield "\t\t\t\t\t\t\t\t\t<img id=\"main-product-image\" src=\"";
  894.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((($_v0 = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "images", [], "any", false, false, false, 713)) && is_array($_v0) || $_v0 instanceof ArrayAccess ? ($_v0[0] ?? null) : null)), "html", null, true);
  895.             yield "\" alt=\"";
  896.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "name", [], "any", false, false, false, 713), "html", null, true);
  897.             yield "\">
  898. \t\t\t\t\t\t\t\t";
  899.         } else {
  900.             // line 715
  901.             yield "\t\t\t\t\t\t\t\t\t<img id=\"main-product-image\" src=\"";
  902.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl("ui/img/category/s-p1.jpg"), "html", null, true);
  903.             yield "\" alt=\"";
  904.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "name", [], "any", false, false, false, 715), "html", null, true);
  905.             yield "\">
  906. \t\t\t\t\t\t\t\t";
  907.         }
  908.         // line 717
  909.         yield "\t\t\t\t\t\t\t</div>
  911. \t\t\t\t\t\t\t<!-- Overlay avec icônes -->
  912. \t\t\t\t\t\t\t<div class=\"image-overlay-icons\">
  913. \t\t\t\t\t\t\t\t<button class=\"icon-btn zoom-btn\" onclick=\"openImageZoom()\" title=\"Agrandir l'image\">
  914. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier\"></i>
  915. \t\t\t\t\t\t\t\t</button>
  916. \t\t\t\t\t\t\t\t<button class=\"icon-btn favorite-btn\" ";
  917.         // line 724
  918.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 724)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  919.             yield " onclick=\"toggleWishlist(";
  920.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "id", [], "any", false, false, false, 724), "html", null, true);
  921.             yield ", this); return false;\" ";
  922.         } else {
  923.             yield " onclick=\"showCustomAlert('Vous devez être connecté pour ajouter aux favoris', 'warning'); return false;\" ";
  924.         }
  925.         yield " title=\"Ajouter aux favoris\" data-product-id=\"";
  926.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "id", [], "any", false, false, false, 724), "html", null, true);
  927.         yield "\">
  928. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-heart\"></i>
  929. \t\t\t\t\t\t\t\t</button>
  930. \t\t\t\t\t\t\t</div>
  932. \t\t\t\t\t\t\t<!-- Navigation sur l'image principale -->
  933. \t\t\t\t\t\t\t<div class=\"main-image-nav\">
  934. \t\t\t\t\t\t\t\t<button type=\"button\" class=\"main-image-nav-btn\" id=\"main-image-prev\" title=\"Image précédente\">
  935. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  936. \t\t\t\t\t\t\t\t</button>
  937. \t\t\t\t\t\t\t\t<button type=\"button\" class=\"main-image-nav-btn\" id=\"main-image-next\" title=\"Image suivante\">
  938. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  939. \t\t\t\t\t\t\t\t</button>
  940. \t\t\t\t\t\t\t</div>
  942. \t\t\t\t\t\t\t<!-- Indicateur d'image active -->
  943. \t\t\t\t\t\t\t<div class=\"image-counter\">
  944. \t\t\t\t\t\t\t\t<span id=\"current-image-index\">1</span>
  945. \t\t\t\t\t\t\t\t/
  946. \t\t\t\t\t\t\t\t<span id=\"total-images\">";
  947.         // line 743
  948.         yield ((Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "images", [], "any", false, false, false, 743))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "images", [], "any", false, false, false, 743)), "html", null, true)) : (1));
  949.         yield "</span>
  950. \t\t\t\t\t\t\t</div>
  951. \t\t\t\t\t\t</div>
  952. \t\t\t\t\t</div>
  953. \t\t\t\t</div>
  954. \t\t\t\t<div class=\"col-lg-5 offset-lg-1\">
  955. \t\t\t\t\t<div class=\"s_product_text\">
  956. \t\t\t\t\t\t<h3>";
  957.         // line 750
  958.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "name", [], "any", false, false, false, 750), "html", null, true);
  959.         yield "</h3>
  960. \t\t\t\t\t\t<h2>
  961. \t\t\t\t\t\t\t<span id=\"main-unit-price\">";
  962.         // line 752
  963.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "price", [], "any", false, false, false, 752), 2, ".", " "), "html", null, true);
  964.         yield "</span>
  965. \t\t\t\t\t\t\tHTG
  966. \t\t\t\t\t\t</h2>
  967. \t\t\t\t\t\t<ul class=\"list\">
  968. \t\t\t\t\t\t\t<li>
  969. \t\t\t\t\t\t\t\t<a class=\"active\" href=\"#\">
  970. \t\t\t\t\t\t\t\t\t<span>Category</span>
  971. \t\t\t\t\t\t\t\t\t:
  972. \t\t\t\t\t\t\t\t\t";
  973.         // line 760
  974.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "category", [], "any", false, false, false, 760), "name", [], "any", false, false, false, 760), "html", null, true);
  975.         yield "</a>
  976. \t\t\t\t\t\t\t</li>
  977. \t\t\t\t\t\t\t<li>
  978. \t\t\t\t\t\t\t\t<a href=\"#\">
  979. \t\t\t\t\t\t\t\t\t<span>Disponibilité</span>
  980. \t\t\t\t\t\t\t\t\t:
  981. \t\t\t\t\t\t\t\t\t";
  982.         // line 766
  983.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stockStatus", [], "any", false, false, false, 766), "html", null, true);
  984.         yield "</a>
  985. \t\t\t\t\t\t\t</li>
  986. \t\t\t\t\t\t</ul>
  987. \t\t\t\t\t\t<p>";
  988.         // line 769
  989.         yield Twig\Extension\CoreExtension::nl2br($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::striptags(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "description", [], "any", false, false, false, 769)), "html", null, true));
  990.         yield "</p>
  992. \t\t\t\t\t\t<!-- Informations sur la boutique -->
  993. \t\t\t\t\t\t<div class=\"shop-info mb-3\">
  994. \t\t\t\t\t\t\t<small class=\"text-muted\">
  995. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  996. \t\t\t\t\t\t\t\tVendu par :
  997. \t\t\t\t\t\t\t\t";
  998.         // line 776
  999.         if ((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "shop", [], "any", true, true, false, 776) && CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "shop", [], "any", false, false, false, 776))) {
  1000.             // line 777
  1001.             yield "\t\t\t\t\t\t\t\t\t<a href=\"";
  1002.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_shop_show", ["slug" => CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "shop", [], "any", false, false, false, 777), "slug", [], "any", false, false, false, 777)]), "html", null, true);
  1003.             yield "\" class=\"shop-link\">
  1004. \t\t\t\t\t\t\t\t\t\t";
  1005.             // line 778
  1006.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "shop", [], "any", false, false, false, 778), "name", [], "any", false, false, false, 778), "html", null, true);
  1007.             yield "
  1008. \t\t\t\t\t\t\t\t\t</a>
  1009. \t\t\t\t\t\t\t\t";
  1010.         } else {
  1011.             // line 781
  1012.             yield "\t\t\t\t\t\t\t\t\t<span class=\"text-muted\">Boutique inconnue</span>
  1013. \t\t\t\t\t\t\t\t";
  1014.         }
  1015.         // line 783
  1016.         yield "\t\t\t\t\t\t\t</small>
  1017. \t\t\t\t\t\t</div>
  1019. \t\t\t\t\t\t<div class=\"product_count\">
  1020. \t\t\t\t\t\t\t<label for=\"qty\">Quantité :</label>
  1021. \t\t\t\t\t\t\t<input type=\"text\" name=\"qty\" id=\"sst\" maxlength=\"12\" value=\"1\" title=\"Quantité:\" class=\"input-text qty\" max=\"";
  1022.         // line 788
  1023.         yield (((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stock", [], "any", true, true, false, 788) &&  !(null === CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stock", [], "any", false, false, false, 788)))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stock", [], "any", false, false, false, 788), "html", null, true)) : (99));
  1024.         yield "\">
  1025. \t\t\t\t\t\t\t<button onclick=\"var result = document.getElementById('sst'); var sst = result.value; if( !isNaN( sst ) && sst < ";
  1026.         // line 789
  1027.         yield (((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stock", [], "any", true, true, false, 789) &&  !(null === CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stock", [], "any", false, false, false, 789)))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stock", [], "any", false, false, false, 789), "html", null, true)) : (99));
  1028.         yield ") result.value++;return false;\" class=\"increase items-count\" type=\"button\">
  1029. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-up\"></i>
  1030. \t\t\t\t\t\t\t</button>
  1031. \t\t\t\t\t\t\t<button onclick=\"var result = document.getElementById('sst'); var sst = result.value; if( !isNaN( sst ) && sst > 1 ) result.value--;return false;\" class=\"reduced items-count\" type=\"button\">
  1032. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-down\"></i>
  1033. \t\t\t\t\t\t\t</button>
  1034. \t\t\t\t\t\t</div>
  1036. \t\t\t\t\t\t<input
  1037. \t\t\t\t\t\ttype=\"hidden\" id=\"unit-price-input\" value=\"";
  1038.         // line 798
  1039.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "price", [], "any", false, false, false, 798), 2, ".", ""), "html", null, true);
  1040.         yield "\"/>
  1042. \t\t\t\t\t\t";
  1043.         // line 801
  1044.         yield "\t\t\t\t\t\t";
  1045.         $context["tierPrices"] = [];
  1046.         // line 802
  1047.         yield "\t\t\t\t\t\t";
  1048.         if ((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "tierPrices", [], "any", true, true, false, 802) && (Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "tierPrices", [], "any", false, false, false, 802)) > 0))) {
  1049.             // line 803
  1050.             yield "\t\t\t\t\t\t\t";
  1051.             $context['_parent'] = $context;
  1052.             $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "tierPrices", [], "any", false, false, false, 803));
  1053.             foreach ($context['_seq'] as $context["_key"] => $context["tier"]) {
  1054.                 // line 804
  1055.                 yield "\t\t\t\t\t\t\t\t";
  1056.                 $context["tierPrices"] = Twig\Extension\CoreExtension::merge(($context["tierPrices"] ?? null), [["min" => CoreExtension::getAttribute($this->env, $this->source, $context["tier"], "minQty", [], "any", false, false, false, 804), "price" => CoreExtension::getAttribute($this->env, $this->source, $context["tier"], "price", [], "any", false, false, false, 804)]]);
  1057.                 // line 805
  1058.                 yield "\t\t\t\t\t\t\t";
  1059.             }
  1060.             $_parent = $context['_parent'];
  1061.             unset($context['_seq'], $context['_key'], $context['tier'], $context['_parent']);
  1062.             $context = array_intersect_key($context, $_parent) + $_parent;
  1063.             // line 806
  1064.             yield "\t\t\t\t\t\t";
  1065.         } else {
  1066.             // line 807
  1067.             yield "\t\t\t\t\t\t\t";
  1068.             // line 808
  1069.             yield "\t\t\t\t\t\t\t";
  1070.             $context["tierPrices"] = [["min" => 1, "price" => CoreExtension::getAttribute($this->env, $this->source,             // line 809
  1071. ($context["product"] ?? null), "price", [], "any", false, false, false, 809)], ["min" => 5, "price" => Twig\Extension\CoreExtension::round((CoreExtension::getAttribute($this->env, $this->source,             // line 810
  1072. ($context["product"] ?? null), "price", [], "any", false, false, false, 810) * 0.98), 2, "floor")], ["min" => 10, "price" => Twig\Extension\CoreExtension::round((CoreExtension::getAttribute($this->env, $this->source,             // line 811
  1073. ($context["product"] ?? null), "price", [], "any", false, false, false, 811) * 0.95), 2, "floor")], ["min" => 20, "price" => Twig\Extension\CoreExtension::round((CoreExtension::getAttribute($this->env, $this->source,             // line 812
  1074. ($context["product"] ?? null), "price", [], "any", false, false, false, 812) * 0.92), 2, "floor")]];
  1075.             // line 814
  1076.             yield "\t\t\t\t\t\t";
  1077.         }
  1078.         // line 815
  1079.         yield "
  1080. \t\t\t\t\t\t<div id=\"bulk-pricing\" class=\"mt-3\" data-tiers='";
  1081.         // line 816
  1082.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(json_encode(($context["tierPrices"] ?? null)), "html_attr");
  1083.         yield "'>
  1084. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center mb-2\">
  1085. \t\t\t\t\t\t\t\t<strong class=\"me-2\">Prix unitaire selon quantité :</strong>
  1086. \t\t\t\t\t\t\t\t<span id=\"unit-price-value\">";
  1087.         // line 819
  1088.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "price", [], "any", false, false, false, 819), 2, ".", " "), "html", null, true);
  1089.         yield "
  1090. \t\t\t\t\t\t\t\t\tHTG</span>
  1091. \t\t\t\t\t\t\t</div>
  1092. \t\t\t\t\t\t\t<div class=\"table-responsive\">
  1093. \t\t\t\t\t\t\t\t<table class=\"table table-sm mb-2\" style=\"border:1px solid #eee;\">
  1094. \t\t\t\t\t\t\t\t\t<thead class=\"table-light\">
  1095. \t\t\t\t\t\t\t\t\t\t<tr>
  1096. \t\t\t\t\t\t\t\t\t\t\t<th>Quantité min.</th>
  1097. \t\t\t\t\t\t\t\t\t\t\t<th>Prix unitaire (HTG)</th>
  1098. \t\t\t\t\t\t\t\t\t\t</tr>
  1099. \t\t\t\t\t\t\t\t\t</thead>
  1100. \t\t\t\t\t\t\t\t\t<tbody id=\"bulk-tier-rows\">
  1101. \t\t\t\t\t\t\t\t\t\t";
  1102.         // line 831
  1103.         $context['_parent'] = $context;
  1104.         $context['_seq'] = CoreExtension::ensureTraversable(Twig\Extension\CoreExtension::sort($this->env, ($context["tierPrices"] ?? null), function ($__a__, $__b__) use ($context, $macros) { $context["a"] = $__a__; $context["b"] = $__b__; return (CoreExtension::getAttribute($this->env, $this->source, ($context["a"] ?? null), "min", [], "any", false, false, false, 831) <=> CoreExtension::getAttribute($this->env, $this->source, ($context["b"] ?? null), "min", [], "any", false, false, false, 831)); }));
  1105.         foreach ($context['_seq'] as $context["_key"] => $context["tier"]) {
  1106.             // line 832
  1107.             yield "\t\t\t\t\t\t\t\t\t\t\t<tr data-min=\"";
  1108.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["tier"], "min", [], "any", false, false, false, 832), "html", null, true);
  1109.             yield "\">
  1110. \t\t\t\t\t\t\t\t\t\t\t\t<td>≥
  1111. \t\t\t\t\t\t\t\t\t\t\t\t\t";
  1112.             // line 834
  1113.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, $context["tier"], "min", [], "any", false, false, false, 834), "html", null, true);
  1114.             yield "</td>
  1115. \t\t\t\t\t\t\t\t\t\t\t\t<td>";
  1116.             // line 835
  1117.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, $context["tier"], "price", [], "any", false, false, false, 835), 2, ".", " "), "html", null, true);
  1118.             yield "</td>
  1119. \t\t\t\t\t\t\t\t\t\t\t</tr>
  1120. \t\t\t\t\t\t\t\t\t\t";
  1121.         }
  1122.         $_parent = $context['_parent'];
  1123.         unset($context['_seq'], $context['_key'], $context['tier'], $context['_parent']);
  1124.         $context = array_intersect_key($context, $_parent) + $_parent;
  1125.         // line 838
  1126.         yield "\t\t\t\t\t\t\t\t\t</tbody>
  1127. \t\t\t\t\t\t\t\t</table>
  1128. \t\t\t\t\t\t\t</div>
  1129. \t\t\t\t\t\t\t<div class=\"d-flex flex-wrap gap-3 align-items-baseline mb-2\">
  1130. \t\t\t\t\t\t\t\t<div>
  1131. \t\t\t\t\t\t\t\t\t<strong>Total:</strong>
  1132. \t\t\t\t\t\t\t\t\t<span id=\"total-price-value\">";
  1133.         // line 844
  1134.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "price", [], "any", false, false, false, 844), 2, ".", " "), "html", null, true);
  1135.         yield "</span>
  1136. \t\t\t\t\t\t\t\t\tHTG
  1137. \t\t\t\t\t\t\t\t</div>
  1138. \t\t\t\t\t\t\t\t<div class=\"text-success\">
  1139. \t\t\t\t\t\t\t\t\t<strong>Économies:</strong>
  1140. \t\t\t\t\t\t\t\t\t<span id=\"savings-amount\">0.00</span>
  1141. \t\t\t\t\t\t\t\t\tHTG
  1142. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(<span id=\"savings-percent\">0</span>%)
  1143. \t\t\t\t\t\t\t\t</div>
  1144. \t\t\t\t\t\t\t</div>
  1145. \t\t\t\t\t\t\t<small class=\"text-muted\">Le prix et le total s’adaptent automatiquement selon la quantité.</small>
  1146. \t\t\t\t\t\t</div>
  1148. \t\t\t\t\t\t<!-- Stock disponible -->
  1149. \t\t\t\t\t\t";
  1150.         // line 858
  1151.         if (CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stock", [], "any", true, true, false, 858)) {
  1152.             // line 859
  1153.             yield "\t\t\t\t\t\t\t<small class=\"text-muted\">Stock disponible :
  1154. \t\t\t\t\t\t\t\t";
  1155.             // line 860
  1156.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stock", [], "any", false, false, false, 860), "html", null, true);
  1157.             yield "
  1158. \t\t\t\t\t\t\t\tunités</small>
  1159. \t\t\t\t\t\t";
  1160.         }
  1161.         // line 863
  1162.         yield "
  1163. \t\t\t\t\t\t<!-- Statistiques du produit -->
  1164. \t\t\t\t\t\t";
  1165.         // line 865
  1166.         if (array_key_exists("productStats", $context)) {
  1167.             // line 866
  1168.             yield "\t\t\t\t\t\t\t<div class=\"product-stats mt-3\">
  1169. \t\t\t\t\t\t\t\t<div class=\"row text-center\">
  1170. \t\t\t\t\t\t\t\t\t<div class=\"col-4\">
  1171. \t\t\t\t\t\t\t\t\t\t<div class=\"stat-item\">
  1172. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-number\">";
  1173.             // line 870
  1174.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["productStats"] ?? null), "totalViews", [], "any", false, false, false, 870), "html", null, true);
  1175.             yield "</span>
  1176. \t\t\t\t\t\t\t\t\t\t\t<small class=\"stat-label\">Vues</small>
  1177. \t\t\t\t\t\t\t\t\t\t</div>
  1178. \t\t\t\t\t\t\t\t\t</div>
  1179. \t\t\t\t\t\t\t\t\t<div class=\"col-4\">
  1180. \t\t\t\t\t\t\t\t\t\t<div class=\"stat-item\">
  1181. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-number\">";
  1182.             // line 876
  1183.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["productStats"] ?? null), "salesCount", [], "any", false, false, false, 876), "html", null, true);
  1184.             yield "</span>
  1185. \t\t\t\t\t\t\t\t\t\t\t<small class=\"stat-label\">Ventes</small>
  1186. \t\t\t\t\t\t\t\t\t\t</div>
  1187. \t\t\t\t\t\t\t\t\t</div>
  1188. \t\t\t\t\t\t\t\t\t<div class=\"col-4\">
  1189. \t\t\t\t\t\t\t\t\t\t<div class=\"stat-item\">
  1190. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-number\">";
  1191.             // line 882
  1192.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["productStats"] ?? null), "conversionRate", [], "any", false, false, false, 882), "html", null, true);
  1193.             yield "%</span>
  1194. \t\t\t\t\t\t\t\t\t\t\t<small class=\"stat-label\">Conversion</small>
  1195. \t\t\t\t\t\t\t\t\t\t</div>
  1196. \t\t\t\t\t\t\t\t\t</div>
  1197. \t\t\t\t\t\t\t\t</div>
  1198. \t\t\t\t\t\t\t</div>
  1199. \t\t\t\t\t\t";
  1200.         }
  1201.         // line 889
  1202.         yield "
  1203. \t\t\t\t\t\t<div class=\"card_area d-flex align-items-center\">
  1204. \t\t\t\t\t\t\t<a class=\"primary-btn btn-add-to-cart\" href=\"javascript:void(0);\" id=\"add-to-cart-btn\" data-product-id=\"";
  1205.         // line 891
  1206.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "id", [], "any", false, false, false, 891), "html", null, true);
  1207.         yield "\" data-qty=\"1\">
  1208. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-cart\"></i>
  1209. \t\t\t\t\t\t\t\tAjouter au panier
  1210. \t\t\t\t\t\t\t</a>
  1211. \t\t\t\t\t\t\t<a class=\"icon_btn wishlist-btn\" href=\"#\" title=\"Ajouter aux favoris\" data-product-id=\"";
  1212.         // line 895
  1213.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "id", [], "any", false, false, false, 895), "html", null, true);
  1214.         yield "\" ";
  1215.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 895)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1216.             yield " onclick=\"toggleWishlist(";
  1217.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "id", [], "any", false, false, false, 895), "html", null, true);
  1218.             yield ", this); return false;\" ";
  1219.         } else {
  1220.             yield " onclick=\"showCustomAlert('Vous devez être connecté pour ajouter aux favoris', 'warning'); return false;\" ";
  1221.         }
  1222.         yield ">
  1223. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-heart\"></i>
  1224. \t\t\t\t\t\t\t</a>
  1225. \t\t\t\t\t\t\t<a class=\"icon_btn comparison-btn\" href=\"#\" title=\"Comparer\" data-product-id=\"";
  1226.         // line 898
  1227.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "id", [], "any", false, false, false, 898), "html", null, true);
  1228.         yield "\" onclick=\"toggleComparison(";
  1229.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "id", [], "any", false, false, false, 898), "html", null, true);
  1230.         yield ", this); return false;\">
  1231. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-sync\"></i>
  1232. \t\t\t\t\t\t\t</a>
  1233. \t\t\t\t\t\t</div>
  1235. \t\t\t\t\t\t<!-- Message de confirmation -->
  1236. \t\t\t\t\t\t<div id=\"cart-message\" class=\"alert alert-success mt-3\" style=\"display: none;\">
  1237. \t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  1238. \t\t\t\t\t\t\tProduit ajouté au panier avec succès !
  1239. \t\t\t\t\t\t</div>
  1240. \t\t\t\t\t\t<!-- ... existing code ... -->
  1241. \t\t\t\t\t</div>
  1242. \t\t\t\t</div>
  1243. \t\t\t</div>
  1244. \t\t</div>
  1245. \t</div>
  1246. \t<!--================End Single Product Area =================-->
  1248. \t<!--================Product Description Area =================-->
  1249. \t<section class=\"product_description_area\">
  1250. \t\t<div class=\"container\">
  1251. \t\t\t<ul class=\"nav nav-tabs\" id=\"myTab\" role=\"tablist\">
  1252. \t\t\t\t<li class=\"nav-item\">
  1253. \t\t\t\t\t<a class=\"nav-link active\" id=\"home-tab\" data-bs-toggle=\"tab\" href=\"#home\" role=\"tab\" aria-controls=\"home\" aria-selected=\"true\">Description</a>
  1254. \t\t\t\t</li>
  1255. \t\t\t\t<li class=\"nav-item\">
  1256. \t\t\t\t\t<a class=\"nav-link\" id=\"profile-tab\" data-bs-toggle=\"tab\" href=\"#profile\" role=\"tab\" aria-controls=\"profile\" aria-selected=\"false\">Spécifications</a>
  1257. \t\t\t\t</li>
  1258. \t\t\t\t<li class=\"nav-item\">
  1259. \t\t\t\t\t<a class=\"nav-link\" id=\"contact-tab\" data-bs-toggle=\"tab\" href=\"#contact\" role=\"tab\" aria-controls=\"contact\" aria-selected=\"false\">Commentaires</a>
  1260. \t\t\t\t</li>
  1261. \t\t\t\t<li class=\"nav-item\">
  1262. \t\t\t\t\t<a class=\"nav-link\" id=\"review-tab\" data-bs-toggle=\"tab\" href=\"#review\" role=\"tab\" aria-controls=\"review\" aria-selected=\"false\">Avis (";
  1263.         // line 930
  1264.         yield (((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", true, true, false, 930) &&  !(null === CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", false, false, false, 930)))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", false, false, false, 930), "html", null, true)) : (0));
  1265.         yield ")</a>
  1266. \t\t\t\t</li>
  1267. \t\t\t</ul>
  1268. \t\t\t<div class=\"tab-content\" id=\"myTabContent\">
  1269. \t\t\t\t<div class=\"tab-pane fade show active\" id=\"home\" role=\"tabpanel\" aria-labelledby=\"home-tab\">
  1270. \t\t\t\t\t<div class=\"description\">
  1271. \t\t\t\t\t\t";
  1272.         // line 936
  1273.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "description", [], "any", false, false, false, 936)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1274.             // line 937
  1275.             yield "\t\t\t\t\t\t\t<div class=\"product-description-content\">
  1276. \t\t\t\t\t\t\t\t";
  1277.             // line 938
  1278.             yield Twig\Extension\CoreExtension::nl2br(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "description", [], "any", false, false, false, 938));
  1279.             yield "
  1280. \t\t\t\t\t\t\t</div>
  1281. \t\t\t\t\t\t";
  1282.         } else {
  1283.             // line 941
  1284.             yield "\t\t\t\t\t\t\t<p class=\"text-muted\">Aucune description disponible pour ce produit.</p>
  1285. \t\t\t\t\t\t";
  1286.         }
  1287.         // line 943
  1288.         yield "\t\t\t\t\t</div>
  1289. \t\t\t\t</div>
  1290. \t\t\t\t<div class=\"tab-pane fade\" id=\"profile\" role=\"tabpanel\" aria-labelledby=\"profile-tab\">
  1291. \t\t\t\t\t<div class=\"specification-table\">
  1292. \t\t\t\t\t\t";
  1293.         // line 947
  1294.         if (((((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "weight", [], "any", false, false, false, 947) || CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "length", [], "any", false, false, false, 947)) || CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "width", [], "any", false, false, false, 947)) || CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "height", [], "any", false, false, false, 947)) || CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "attributes", [], "any", false, false, false, 947))) {
  1295.             // line 948
  1296.             yield "\t\t\t\t\t\t\t<div class=\"table-responsive\">
  1297. \t\t\t\t\t\t\t\t<table class=\"table\">
  1298. \t\t\t\t\t\t\t\t\t<tbody>
  1299. \t\t\t\t\t\t\t\t\t\t";
  1300.             // line 951
  1301.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "sku", [], "any", false, false, false, 951)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1302.                 // line 952
  1303.                 yield "\t\t\t\t\t\t\t\t\t\t\t<tr>
  1304. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1305. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Référence (SKU)</h5>
  1306. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1307. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1308. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>";
  1309.                 // line 957
  1310.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "sku", [], "any", false, false, false, 957), "html", null, true);
  1311.                 yield "</h5>
  1312. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1313. \t\t\t\t\t\t\t\t\t\t\t</tr>
  1314. \t\t\t\t\t\t\t\t\t\t";
  1315.             }
  1316.             // line 961
  1317.             yield "\t\t\t\t\t\t\t\t\t\t";
  1318.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "barcode", [], "any", false, false, false, 961)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1319.                 // line 962
  1320.                 yield "\t\t\t\t\t\t\t\t\t\t\t<tr>
  1321. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1322. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Code-barres</h5>
  1323. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1324. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1325. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>";
  1326.                 // line 967
  1327.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "barcode", [], "any", false, false, false, 967), "html", null, true);
  1328.                 yield "</h5>
  1329. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1330. \t\t\t\t\t\t\t\t\t\t\t</tr>
  1331. \t\t\t\t\t\t\t\t\t\t";
  1332.             }
  1333.             // line 971
  1334.             yield "\t\t\t\t\t\t\t\t\t\t";
  1335.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "brand", [], "any", false, false, false, 971)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1336.                 // line 972
  1337.                 yield "\t\t\t\t\t\t\t\t\t\t\t<tr>
  1338. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1339. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Marque</h5>
  1340. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1341. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1342. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>";
  1343.                 // line 977
  1344.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "brand", [], "any", false, false, false, 977), "name", [], "any", false, false, false, 977), "html", null, true);
  1345.                 yield "</h5>
  1346. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1347. \t\t\t\t\t\t\t\t\t\t\t</tr>
  1348. \t\t\t\t\t\t\t\t\t\t";
  1349.             }
  1350.             // line 981
  1351.             yield "\t\t\t\t\t\t\t\t\t\t";
  1352.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "category", [], "any", false, false, false, 981)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1353.                 // line 982
  1354.                 yield "\t\t\t\t\t\t\t\t\t\t\t<tr>
  1355. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1356. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Catégorie</h5>
  1357. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1358. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1359. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>";
  1360.                 // line 987
  1361.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "category", [], "any", false, false, false, 987), "name", [], "any", false, false, false, 987), "html", null, true);
  1362.                 yield "</h5>
  1363. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1364. \t\t\t\t\t\t\t\t\t\t\t</tr>
  1365. \t\t\t\t\t\t\t\t\t\t";
  1366.             }
  1367.             // line 991
  1368.             yield "\t\t\t\t\t\t\t\t\t\t";
  1369.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "weight", [], "any", false, false, false, 991)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1370.                 // line 992
  1371.                 yield "\t\t\t\t\t\t\t\t\t\t\t<tr>
  1372. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1373. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Poids</h5>
  1374. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1375. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1376. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>";
  1377.                 // line 997
  1378.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "weight", [], "any", false, false, false, 997), "html", null, true);
  1379.                 yield "
  1380. \t\t\t\t\t\t\t\t\t\t\t\t\t\tkg</h5>
  1381. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1382. \t\t\t\t\t\t\t\t\t\t\t</tr>
  1383. \t\t\t\t\t\t\t\t\t\t";
  1384.             }
  1385.             // line 1002
  1386.             yield "\t\t\t\t\t\t\t\t\t\t";
  1387.             if (((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "length", [], "any", false, false, false, 1002) || CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "width", [], "any", false, false, false, 1002)) || CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "height", [], "any", false, false, false, 1002))) {
  1388.                 // line 1003
  1389.                 yield "\t\t\t\t\t\t\t\t\t\t\t<tr>
  1390. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1391. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Dimensions</h5>
  1392. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1393. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1394. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>
  1395. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1396.                 // line 1009
  1397.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "length", [], "any", false, false, false, 1009)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1398.                     // line 1010
  1399.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1400.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "length", [], "any", false, false, false, 1010), "html", null, true);
  1401.                     yield "cm
  1402. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1403.                 }
  1404.                 // line 1012
  1405.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1406.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "width", [], "any", false, false, false, 1012)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1407.                     // line 1013
  1408.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t×
  1409. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1410.                     // line 1014
  1411.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "width", [], "any", false, false, false, 1014), "html", null, true);
  1412.                     yield "cm
  1413. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1414.                 }
  1415.                 // line 1016
  1416.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1417.                 if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "height", [], "any", false, false, false, 1016)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1418.                     // line 1017
  1419.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t×
  1420. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1421.                     // line 1018
  1422.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "height", [], "any", false, false, false, 1018), "html", null, true);
  1423.                     yield "cm
  1424. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1425.                 }
  1426.                 // line 1020
  1427.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t\t</h5>
  1428. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1429. \t\t\t\t\t\t\t\t\t\t\t</tr>
  1430. \t\t\t\t\t\t\t\t\t\t";
  1431.             }
  1432.             // line 1024
  1433.             yield "\t\t\t\t\t\t\t\t\t\t";
  1434.             if ((($tmp =  !(null === CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stock", [], "any", false, false, false, 1024))) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1435.                 // line 1025
  1436.                 yield "\t\t\t\t\t\t\t\t\t\t\t<tr>
  1437. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1438. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Stock disponible</h5>
  1439. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1440. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1441. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>";
  1442.                 // line 1030
  1443.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stock", [], "any", false, false, false, 1030), "html", null, true);
  1444.                 yield "
  1445. \t\t\t\t\t\t\t\t\t\t\t\t\t\tunité(s)</h5>
  1446. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1447. \t\t\t\t\t\t\t\t\t\t\t</tr>
  1448. \t\t\t\t\t\t\t\t\t\t";
  1449.             }
  1450.             // line 1035
  1451.             yield "\t\t\t\t\t\t\t\t\t\t";
  1452.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stockStatus", [], "any", false, false, false, 1035)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1453.                 // line 1036
  1454.                 yield "\t\t\t\t\t\t\t\t\t\t\t<tr>
  1455. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1456. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Statut</h5>
  1457. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1458. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1459. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>
  1460. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1461.                 // line 1042
  1462.                 if ((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stockStatus", [], "any", false, false, false, 1042) == "in_stock")) {
  1463.                     // line 1043
  1464.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"badge bg-success\">En stock</span>
  1465. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1466.                 } elseif ((CoreExtension::getAttribute($this->env, $this->source,                 // line 1044
  1467. ($context["product"] ?? null), "stockStatus", [], "any", false, false, false, 1044) == "out_of_stock")) {
  1468.                     // line 1045
  1469.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"badge bg-danger\">Rupture de stock</span>
  1470. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1471.                 } elseif ((CoreExtension::getAttribute($this->env, $this->source,                 // line 1046
  1472. ($context["product"] ?? null), "stockStatus", [], "any", false, false, false, 1046) == "backorder")) {
  1473.                     // line 1047
  1474.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"badge bg-warning\">Sur commande</span>
  1475. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1476.                 } else {
  1477.                     // line 1049
  1478.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1479.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "stockStatus", [], "any", false, false, false, 1049), "html", null, true);
  1480.                     yield "
  1481. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1482.                 }
  1483.                 // line 1051
  1484.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t\t</h5>
  1485. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1486. \t\t\t\t\t\t\t\t\t\t\t</tr>
  1487. \t\t\t\t\t\t\t\t\t\t";
  1488.             }
  1489.             // line 1055
  1490.             yield "\t\t\t\t\t\t\t\t\t\t";
  1491.             if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "isDigital", [], "any", false, false, false, 1055)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1492.                 // line 1056
  1493.                 yield "\t\t\t\t\t\t\t\t\t\t\t<tr>
  1494. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1495. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Type</h5>
  1496. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1497. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  1498. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>
  1499. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"badge bg-info\">Produit digital</span>
  1500. \t\t\t\t\t\t\t\t\t\t\t\t\t</h5>
  1501. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  1502. \t\t\t\t\t\t\t\t\t\t\t</tr>
  1503. \t\t\t\t\t\t\t\t\t\t";
  1504.             }
  1505.             // line 1067
  1506.             yield "\t\t\t\t\t\t\t\t\t\t";
  1507.             if ((($tmp =  !Twig\Extension\CoreExtension::testEmpty(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "attributes", [], "any", false, false, false, 1067))) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1508.                 // line 1068
  1509.                 yield "\t\t\t\t\t\t\t\t\t\t\t";
  1510.                 $context['_parent'] = $context;
  1511.                 $context['_seq'] = CoreExtension::ensureTraversable(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "attributes", [], "any", false, false, false, 1068));
  1512.                 foreach ($context['_seq'] as $context["key"] => $context["value"]) {
  1513.                     // line 1069
  1514.                     yield "\t\t\t\t\t\t\t\t\t\t\t\t<tr>
  1515. \t\t\t\t\t\t\t\t\t\t\t\t\t<td>
  1516. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<h5>";
  1517.                     // line 1071
  1518.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(Twig\Extension\CoreExtension::titleCase($this->env->getCharset(), Twig\Extension\CoreExtension::replace($context["key"], ["_" => " "])), "html", null, true);
  1519.                     yield "</h5>
  1520. \t\t\t\t\t\t\t\t\t\t\t\t\t</td>
  1521. \t\t\t\t\t\t\t\t\t\t\t\t\t<td>
  1522. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<h5>";
  1523.                     // line 1074
  1524.                     yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["value"], "html", null, true);
  1525.                     yield "</h5>
  1526. \t\t\t\t\t\t\t\t\t\t\t\t\t</td>
  1527. \t\t\t\t\t\t\t\t\t\t\t\t</tr>
  1528. \t\t\t\t\t\t\t\t\t\t\t";
  1529.                 }
  1530.                 $_parent = $context['_parent'];
  1531.                 unset($context['_seq'], $context['key'], $context['value'], $context['_parent']);
  1532.                 $context = array_intersect_key($context, $_parent) + $_parent;
  1533.                 // line 1078
  1534.                 yield "\t\t\t\t\t\t\t\t\t\t";
  1535.             }
  1536.             // line 1079
  1537.             yield "\t\t\t\t\t\t\t\t\t</tbody>
  1538. \t\t\t\t\t\t\t\t</table>
  1539. \t\t\t\t\t\t\t</div>
  1540. \t\t\t\t\t\t";
  1541.         } else {
  1542.             // line 1083
  1543.             yield "\t\t\t\t\t\t\t<p class=\"text-muted\">Aucune spécification disponible pour ce produit.</p>
  1544. \t\t\t\t\t\t";
  1545.         }
  1546.         // line 1085
  1547.         yield "\t\t\t\t\t</div>
  1548. \t\t\t\t</div>
  1549. \t\t\t\t<div class=\"tab-pane fade\" id=\"contact\" role=\"tabpanel\" aria-labelledby=\"contact-tab\">
  1550. \t\t\t\t\t<div class=\"comment-wrapper\">
  1551. \t\t\t\t\t\t<div class=\"alert alert-info\">
  1552. \t\t\t\t\t\t\t<i class=\"lnr lnr-info-circle\"></i>
  1553. \t\t\t\t\t\t\tLa fonctionnalité de commentaires sera bientôt disponible. Vous pourrez laisser des commentaires et poser des questions sur ce produit.
  1554. \t\t\t\t\t\t</div>
  1555. \t\t\t\t\t\t";
  1556.         // line 1093
  1557.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 1093)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1558.             // line 1094
  1559.             yield "\t\t\t\t\t\t\t<div class=\"review_box mt-4\">
  1560. \t\t\t\t\t\t\t\t<h4>Poser une question</h4>
  1561. \t\t\t\t\t\t\t\t<form class=\"row contact_form\" method=\"post\" novalidate=\"novalidate\">
  1562. \t\t\t\t\t\t\t\t\t<div class=\"col-md-12\">
  1563. \t\t\t\t\t\t\t\t\t\t<div class=\"form-group\">
  1564. \t\t\t\t\t\t\t\t\t\t\t<textarea class=\"form-control\" name=\"comment\" id=\"comment\" rows=\"3\" placeholder=\"Votre question ou commentaire...\" required></textarea>
  1565. \t\t\t\t\t\t\t\t\t\t</div>
  1566. \t\t\t\t\t\t\t\t\t</div>
  1567. \t\t\t\t\t\t\t\t\t<div class=\"col-md-12 text-right\">
  1568. \t\t\t\t\t\t\t\t\t\t<button type=\"submit\" class=\"btn primary-btn\">Envoyer</button>
  1569. \t\t\t\t\t\t\t\t\t</div>
  1570. \t\t\t\t\t\t\t\t</form>
  1571. \t\t\t\t\t\t\t</div>
  1572. \t\t\t\t\t\t";
  1573.         } else {
  1574.             // line 1108
  1575.             yield "\t\t\t\t\t\t\t<p class=\"text-center\">
  1576. \t\t\t\t\t\t\t\t<a href=\"";
  1577.             // line 1109
  1578.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_app_login");
  1579.             yield "\" class=\"primary-btn\">Connectez-vous</a>
  1580. \t\t\t\t\t\t\t\tpour poser une question ou laisser un commentaire.
  1581. \t\t\t\t\t\t\t</p>
  1582. \t\t\t\t\t\t";
  1583.         }
  1584.         // line 1113
  1585.         yield "\t\t\t\t\t</div>
  1586. \t\t\t\t</div>
  1587. \t\t\t\t<div class=\"tab-pane fade\" id=\"review\" role=\"tabpanel\" aria-labelledby=\"review-tab\">
  1588. \t\t\t\t\t<div class=\"review-wrapper\">
  1589. \t\t\t\t\t\t<div class=\"row\">
  1590. \t\t\t\t\t\t\t<div class=\"col-lg-6\">
  1591. \t\t\t\t\t\t\t\t<div class=\"row total_rate\">
  1592. \t\t\t\t\t\t\t\t\t<div class=\"col-6\">
  1593. \t\t\t\t\t\t\t\t\t\t<div class=\"box_total\">
  1594. \t\t\t\t\t\t\t\t\t\t\t<h5>Note globale</h5>
  1595. \t\t\t\t\t\t\t\t\t\t\t<h4>";
  1596.         // line 1123
  1597.         yield (((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "averageRating", [], "any", false, false, false, 1123)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "averageRating", [], "any", false, false, false, 1123), 1, ".", ","), "html", null, true)) : ("0.0"));
  1598.         yield "</h4>
  1599. \t\t\t\t\t\t\t\t\t\t\t<h6>(";
  1600.         // line 1124
  1601.         yield (((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", true, true, false, 1124) &&  !(null === CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", false, false, false, 1124)))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", false, false, false, 1124), "html", null, true)) : (0));
  1602.         yield "
  1603. \t\t\t\t\t\t\t\t\t\t\t\tAvis)</h6>
  1604. \t\t\t\t\t\t\t\t\t\t</div>
  1605. \t\t\t\t\t\t\t\t\t</div>
  1606. \t\t\t\t\t\t\t\t\t<div class=\"col-6\">
  1607. \t\t\t\t\t\t\t\t\t\t<div class=\"rating_list\">
  1608. \t\t\t\t\t\t\t\t\t\t\t<h3>Basé sur
  1609. \t\t\t\t\t\t\t\t\t\t\t\t";
  1610.         // line 1131
  1611.         yield (((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", true, true, false, 1131) &&  !(null === CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", false, false, false, 1131)))) ? ($this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", false, false, false, 1131), "html", null, true)) : (0));
  1612.         yield "
  1613. \t\t\t\t\t\t\t\t\t\t\t\tavis</h3>
  1614. \t\t\t\t\t\t\t\t\t\t\t<div class=\"rating-summary\">
  1615. \t\t\t\t\t\t\t\t\t\t\t\t";
  1616.         // line 1134
  1617.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "averageRating", [], "any", false, false, false, 1134)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1618.             // line 1135
  1619.             yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rating-display mb-3\">
  1620. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1621.             // line 1136
  1622.             $context['_parent'] = $context;
  1623.             $context['_seq'] = CoreExtension::ensureTraversable(range(1, 5));
  1624.             foreach ($context['_seq'] as $context["_key"] => $context["i"]) {
  1625.                 // line 1137
  1626.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-star";
  1627.                 if (($context["i"] <= CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "averageRating", [], "any", false, false, false, 1137))) {
  1628.                 } else {
  1629.                     yield "-o";
  1630.                 }
  1631.                 yield "\" style=\"color: #ffa200; font-size: 1.2rem;\"></i>
  1632. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1633.             }
  1634.             $_parent = $context['_parent'];
  1635.             unset($context['_seq'], $context['_key'], $context['i'], $context['_parent']);
  1636.             $context = array_intersect_key($context, $_parent) + $_parent;
  1637.             // line 1139
  1638.             yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ms-2\" style=\"font-size: 1.1rem; font-weight: bold;\">";
  1639.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "averageRating", [], "any", false, false, false, 1139), 1, ".", ","), "html", null, true);
  1640.             yield "
  1641. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/ 5.0</span>
  1642. \t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  1643. \t\t\t\t\t\t\t\t\t\t\t\t";
  1644.         } else {
  1645.             // line 1143
  1646.             yield "\t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"text-muted\">Aucune note disponible</p>
  1647. \t\t\t\t\t\t\t\t\t\t\t\t";
  1648.         }
  1649.         // line 1145
  1650.         yield "\t\t\t\t\t\t\t\t\t\t\t</div>
  1651. \t\t\t\t\t\t\t\t\t\t</div>
  1652. \t\t\t\t\t\t\t\t\t</div>
  1653. \t\t\t\t\t\t\t\t</div>
  1654. \t\t\t\t\t\t\t\t<div class=\"review_list\">
  1655. \t\t\t\t\t\t\t\t\t";
  1656.         // line 1150
  1657.         if ((CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", false, false, false, 1150) && (CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", false, false, false, 1150) > 0))) {
  1658.             // line 1151
  1659.             yield "\t\t\t\t\t\t\t\t\t\t<div class=\"alert alert-info\">
  1660. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-info-circle\"></i>
  1661. \t\t\t\t\t\t\t\t\t\t\tLe système d'affichage détaillé des avis sera disponible prochainement. 
  1662. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tNote actuelle :
  1663. \t\t\t\t\t\t\t\t\t\t\t";
  1664.             // line 1155
  1665.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "averageRating", [], "any", false, false, false, 1155), 1, ".", ","), "html", null, true);
  1666.             yield "
  1667. \t\t\t\t\t\t\t\t\t\t\t/ 5.0 basée sur
  1668. \t\t\t\t\t\t\t\t\t\t\t";
  1669.             // line 1157
  1670.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "reviewCount", [], "any", false, false, false, 1157), "html", null, true);
  1671.             yield "
  1672. \t\t\t\t\t\t\t\t\t\t\tavis.
  1673. \t\t\t\t\t\t\t\t\t\t</div>
  1674. \t\t\t\t\t\t\t\t\t";
  1675.         } else {
  1676.             // line 1161
  1677.             yield "\t\t\t\t\t\t\t\t\t\t<div class=\"alert alert-info\">
  1678. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-info-circle\"></i>
  1679. \t\t\t\t\t\t\t\t\t\t\tAucun avis pour ce produit pour le moment. Soyez le premier à laisser un avis après votre achat !
  1680. \t\t\t\t\t\t\t\t\t\t</div>
  1681. \t\t\t\t\t\t\t\t\t";
  1682.         }
  1683.         // line 1166
  1684.         yield "\t\t\t\t\t\t\t\t</div>
  1685. \t\t\t\t\t\t\t</div>
  1686. \t\t\t\t\t\t\t<div class=\"col-lg-6\">
  1687. \t\t\t\t\t\t\t\t<div class=\"review_box\">
  1688. \t\t\t\t\t\t\t\t\t<h4>Laisser un avis</h4>
  1689. \t\t\t\t\t\t\t\t\t";
  1690.         // line 1171
  1691.         if ((($tmp = CoreExtension::getAttribute($this->env, $this->source, ($context["app"] ?? null), "user", [], "any", false, false, false, 1171)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  1692.             // line 1172
  1693.             yield "\t\t\t\t\t\t\t\t\t\t<p class=\"text-muted\">Vous pouvez laisser un avis après avoir acheté ce produit.</p>
  1694. \t\t\t\t\t\t\t\t\t\t<form class=\"row contact_form\" method=\"post\" novalidate=\"novalidate\">
  1695. \t\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-12\">
  1696. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"form-group\">
  1697. \t\t\t\t\t\t\t\t\t\t\t\t\t<label>Votre note</label>
  1698. \t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rating-input mb-3\" style=\"display: flex; gap: 5px; flex-direction: row-reverse; justify-content: flex-end;\">
  1699. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1700.             // line 1178
  1701.             $context['_parent'] = $context;
  1702.             $context['_seq'] = CoreExtension::ensureTraversable(range(5, 1));
  1703.             foreach ($context['_seq'] as $context["_key"] => $context["i"]) {
  1704.                 // line 1179
  1705.                 yield "\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input type=\"radio\" name=\"rating\" id=\"rating";
  1706.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["i"], "html", null, true);
  1707.                 yield "\" value=\"";
  1708.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["i"], "html", null, true);
  1709.                 yield "\" required style=\"display: none;\">
  1710. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"rating";
  1711.                 // line 1180
  1712.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($context["i"], "html", null, true);
  1713.                 yield "\" class=\"star-label\" style=\"cursor: pointer;\">
  1714. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-star-o\" style=\"color: #ccc; font-size: 1.5rem;\"></i>
  1715. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</label>
  1716. \t\t\t\t\t\t\t\t\t\t\t\t\t\t";
  1717.             }
  1718.             $_parent = $context['_parent'];
  1719.             unset($context['_seq'], $context['_key'], $context['i'], $context['_parent']);
  1720.             $context = array_intersect_key($context, $_parent) + $_parent;
  1721.             // line 1184
  1722.             yield "\t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  1723. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  1724. \t\t\t\t\t\t\t\t\t\t\t</div>
  1725. \t\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-12\">
  1726. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"form-group\">
  1727. \t\t\t\t\t\t\t\t\t\t\t\t\t<textarea class=\"form-control\" name=\"review\" id=\"review\" rows=\"5\" placeholder=\"Votre avis...\" required onfocus=\"this.placeholder = ''\" onblur=\"this.placeholder = 'Votre avis...'\"></textarea>
  1728. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  1729. \t\t\t\t\t\t\t\t\t\t\t</div>
  1730. \t\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-12 text-right\">
  1731. \t\t\t\t\t\t\t\t\t\t\t\t<button type=\"submit\" class=\"btn primary-btn\">Publier l'avis</button>
  1732. \t\t\t\t\t\t\t\t\t\t\t</div>
  1733. \t\t\t\t\t\t\t\t\t\t</form>
  1734. \t\t\t\t\t\t\t\t\t";
  1735.         } else {
  1736.             // line 1197
  1737.             yield "\t\t\t\t\t\t\t\t\t\t<p class=\"text-center\">
  1738. \t\t\t\t\t\t\t\t\t\t\t<a href=\"";
  1739.             // line 1198
  1740.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_app_login");
  1741.             yield "\" class=\"primary-btn\">Connectez-vous</a>
  1742. \t\t\t\t\t\t\t\t\t\t\tpour laisser un avis sur ce produit.
  1743. \t\t\t\t\t\t\t\t\t\t</p>
  1744. \t\t\t\t\t\t\t\t\t";
  1745.         }
  1746.         // line 1202
  1747.         yield "\t\t\t\t\t\t\t\t</div>
  1748. \t\t\t\t\t\t\t</div>
  1749. \t\t\t\t\t\t</div>
  1750. \t\t\t\t\t</div>
  1751. \t\t\t\t</div>
  1752. \t\t\t</div>
  1753. \t\t</div>
  1754. \t</section>
  1755. \t<!--================End Product Description Area =================-->
  1757. \t<script>
  1758. \t\t// Initialiser les onglets Bootstrap
  1759. document.addEventListener('DOMContentLoaded', function () { // Activer les onglets Bootstrap 5
  1760. const triggerTabList = document.querySelectorAll('#myTab button[data-bs-toggle=\"tab\"]');
  1761. triggerTabList.forEach(triggerEl => {
  1762. const tabTrigger = new bootstrap.Tab(triggerEl);
  1763. triggerEl.addEventListener('click', event => {
  1764. event.preventDefault();
  1765. tabTrigger.show();
  1766. });
  1767. });
  1769. // Gestion des étoiles pour les avis
  1770. const ratingInputs = document.querySelectorAll('.rating-input input[type=\"radio\"]');
  1771. const starLabels = document.querySelectorAll('.rating-input .star-label');
  1773. ratingInputs.forEach((input, index) => {
  1774. input.addEventListener('change', function () {
  1775. const rating = parseInt(this.value);
  1776. starLabels.forEach((label) => { // Trouver l'input associé à ce label
  1777. const labelInput = label.previousElementSibling;
  1778. if (labelInput && labelInput.type === 'radio') {
  1779. const starValue = parseInt(labelInput.value);
  1780. const star = label.querySelector('i');
  1781. if (starValue <= rating) {
  1782. star.style.color = '#ffa200';
  1783. star.classList.remove('fa-star-o');
  1784. star.classList.add('fa-star');
  1785. } else {
  1786. star.style.color = '#ccc';
  1787. star.classList.remove('fa-star');
  1788. star.classList.add('fa-star-o');
  1789. }
  1790. }
  1791. });
  1792. });
  1793. });
  1795. // Pré-remplir les étoiles au survol
  1796. starLabels.forEach((label) => {
  1797. label.addEventListener('mouseenter', function () { // Trouver l'input associé à ce label
  1798. const input = label.previousElementSibling;
  1799. if (input && input.type === 'radio') {
  1800. const rating = parseInt(input.value);
  1801. starLabels.forEach((l) => {
  1802. const lInput = l.previousElementSibling;
  1803. if (lInput && lInput.type === 'radio') {
  1804. const starValue = parseInt(lInput.value);
  1805. const star = l.querySelector('i');
  1806. if (starValue <= rating) {
  1807. star.style.color = '#ffa200';
  1808. star.classList.remove('fa-star-o');
  1809. star.classList.add('fa-star');
  1810. } else {
  1811. star.style.color = '#ccc';
  1812. star.classList.remove('fa-star');
  1813. star.classList.add('fa-star-o');
  1814. }
  1815. }
  1816. });
  1817. }
  1818. });
  1819. });
  1821. const ratingContainer = document.querySelector('.rating-input');
  1822. if (ratingContainer) {
  1823. ratingContainer.addEventListener('mouseleave', function () {
  1824. const checkedInput = document.querySelector('.rating-input input[type=\"radio\"]:checked');
  1825. if (checkedInput) {
  1826. checkedInput.dispatchEvent(new Event('change'));
  1827. } else {
  1828. starLabels.forEach(label => {
  1829. const star = label.querySelector('i');
  1830. star.style.color = '#ccc';
  1831. });
  1832. }
  1833. });
  1834. }
  1835. });
  1836. \t</script>
  1838. \t";
  1839.         // line 1293
  1840.         if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), ($context["youMightAlsoLike"] ?? null)) > 0)) {
  1841.             // line 1294
  1842.             yield "\t\t<section class=\"related-product-area section_gap_bottom py-5\" style=\"background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);\">
  1843. \t\t\t<div class=\"container\">
  1844. \t\t\t\t<div class=\"row justify-content-center\">
  1845. \t\t\t\t\t<div class=\"col-lg-8 text-center\">
  1846. \t\t\t\t\t\t<div class=\"section-title\">
  1847. \t\t\t\t\t\t\t<h2 class=\"fw-bold mb-3\" style=\"font-size: 2.5rem; color: #2c3e50;\">Vous pourriez aussi aimer</h2>
  1848. \t\t\t\t\t\t\t<p class=\"text-muted\" style=\"font-size: 1.1rem;\">Produits sélectionnés pour vous en fonction de vos préférences</p>
  1849. \t\t\t\t\t\t</div>
  1850. \t\t\t\t\t</div>
  1851. \t\t\t\t</div>
  1852. \t\t\t\t<div class=\"row g-4\">
  1853. \t\t\t\t\t";
  1854.             // line 1305
  1855.             $context['_parent'] = $context;
  1856.             $context['_seq'] = CoreExtension::ensureTraversable(($context["youMightAlsoLike"] ?? null));
  1857.             $context['loop'] = [
  1858.               'parent' => $context['_parent'],
  1859.               'index0' => 0,
  1860.               'index'  => 1,
  1861.               'first'  => true,
  1862.             ];
  1863.             if (is_array($context['_seq']) || (is_object($context['_seq']) && $context['_seq'] instanceof \Countable)) {
  1864.                 $length = count($context['_seq']);
  1865.                 $context['loop']['revindex0'] = $length - 1;
  1866.                 $context['loop']['revindex'] = $length;
  1867.                 $context['loop']['length'] = $length;
  1868.                 $context['loop']['last'] = 1 === $length;
  1869.             }
  1870.             foreach ($context['_seq'] as $context["_key"] => $context["relatedProduct"]) {
  1871.                 // line 1306
  1872.                 yield "\t\t\t\t\t\t<div class=\"col-xl-3 col-lg-4 col-md-6 col-sm-6 mb-4 d-flex align-items-stretch\">
  1873. \t\t\t\t\t\t\t";
  1874.                 // line 1307
  1875.                 yield from $this->load("home/_single_product_card.html.twig", 1307)->unwrap()->yield(CoreExtension::merge($context, ["product" => $context["relatedProduct"]]));
  1876.                 // line 1308
  1877.                 yield "\t\t\t\t\t\t</div>
  1878. \t\t\t\t\t";
  1879.                 ++$context['loop']['index0'];
  1880.                 ++$context['loop']['index'];
  1881.                 $context['loop']['first'] = false;
  1882.                 if (isset($context['loop']['revindex0'], $context['loop']['revindex'])) {
  1883.                     --$context['loop']['revindex0'];
  1884.                     --$context['loop']['revindex'];
  1885.                     $context['loop']['last'] = 0 === $context['loop']['revindex0'];
  1886.                 }
  1887.             }
  1888.             $_parent = $context['_parent'];
  1889.             unset($context['_seq'], $context['_key'], $context['relatedProduct'], $context['_parent'], $context['loop']);
  1890.             $context = array_intersect_key($context, $_parent) + $_parent;
  1891.             // line 1310
  1892.             yield "\t\t\t\t</div>
  1893. \t\t\t</div>
  1894. \t\t</section>
  1896. \t\t<style>
  1897. \t\t\t.modern-product-card {
  1898. \t\t\t\tbackground: #ffffff;
  1899. \t\t\t\tborder-radius: 16px;
  1900. \t\t\t\toverflow: hidden;
  1901. \t\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  1902. \t\t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  1903. \t\t\t\theight: 100%;
  1904. \t\t\t\tdisplay: flex;
  1905. \t\t\t\tflex-direction: column;
  1906. \t\t\t\tposition: relative;
  1907. \t\t\t}
  1909. \t\t\t.modern-product-card:hover {
  1910. \t\t\t\ttransform: translateY(-8px);
  1911. \t\t\t\tbox-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  1912. \t\t\t}
  1914. \t\t\t.product-image-wrapper {
  1915. \t\t\t\tposition: relative;
  1916. \t\t\t\twidth: 100%;
  1917. \t\t\t\theight: 250px;
  1918. \t\t\t\toverflow: hidden;
  1919. \t\t\t\tbackground: #f8f9fa;
  1920. \t\t\t}
  1922. \t\t\t.product-image {
  1923. \t\t\t\twidth: 100%;
  1924. \t\t\t\theight: 100%;
  1925. \t\t\t\tobject-fit: cover;
  1926. \t\t\t\ttransition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  1927. \t\t\t}
  1929. \t\t\t.modern-product-card:hover .product-image {
  1930. \t\t\t\ttransform: scale(1.1);
  1931. \t\t\t}
  1933. \t\t\t.product-overlay {
  1934. \t\t\t\tposition: absolute;
  1935. \t\t\t\ttop: 0;
  1936. \t\t\t\tleft: 0;
  1937. \t\t\t\tright: 0;
  1938. \t\t\t\tbottom: 0;
  1939. \t\t\t\tbackground: rgba(0, 0, 0, 0.5);
  1940. \t\t\t\tdisplay: flex;
  1941. \t\t\t\talign-items: center;
  1942. \t\t\t\tjustify-content: center;
  1943. \t\t\t\topacity: 0;
  1944. \t\t\t\ttransition: opacity 0.3s ease;
  1945. \t\t\t}
  1947. \t\t\t.modern-product-card:hover .product-overlay {
  1948. \t\t\t\topacity: 1;
  1949. \t\t\t}
  1951. \t\t\t.view-product-btn {
  1952. \t\t\t\tcolor: white;
  1953. \t\t\t\tpadding: 12px 24px;
  1954. \t\t\t\tbackground: rgba(255, 255, 255, 0.2);
  1955. \t\t\t\tbackdrop-filter: blur(10px);
  1956. \t\t\t\tborder-radius: 8px;
  1957. \t\t\t\tfont-weight: 600;
  1958. \t\t\t\tdisplay: inline-flex;
  1959. \t\t\t\talign-items: center;
  1960. \t\t\t\tgap: 8px;
  1961. \t\t\t\ttransition: all 0.3s ease;
  1962. \t\t\t}
  1964. \t\t\t.view-product-btn:hover {
  1965. \t\t\t\tbackground: rgba(255, 255, 255, 0.3);
  1966. \t\t\t\ttransform: scale(1.05);
  1967. \t\t\t}
  1969. \t\t\t.product-badge {
  1970. \t\t\t\tposition: absolute;
  1971. \t\t\t\ttop: 12px;
  1972. \t\t\t\tright: 12px;
  1973. \t\t\t\tz-index: 2;
  1974. \t\t\t}
  1976. \t\t\t.badge-discount {
  1977. \t\t\t\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  1978. \t\t\t\tcolor: white;
  1979. \t\t\t\tpadding: 6px 12px;
  1980. \t\t\t\tborder-radius: 20px;
  1981. \t\t\t\tfont-size: 0.75rem;
  1982. \t\t\t\tfont-weight: 700;
  1983. \t\t\t\tbox-shadow: 0 2px 8px rgba(238, 90, 111, 0.4);
  1984. \t\t\t}
  1986. \t\t\t.product-info {
  1987. \t\t\t\tpadding: 20px;
  1988. \t\t\t\tflex-grow: 1;
  1989. \t\t\t\tdisplay: flex;
  1990. \t\t\t\tflex-direction: column;
  1991. \t\t\t}
  1993. \t\t\t.product-title {
  1994. \t\t\t\tmargin: 0 0 8px 0;
  1995. \t\t\t\tfont-size: 1rem;
  1996. \t\t\t\tfont-weight: 600;
  1997. \t\t\t\tline-height: 1.4;
  1998. \t\t\t\theight: 2.8em;
  1999. \t\t\t\toverflow: hidden;
  2000. \t\t\t\tdisplay: -webkit-box;
  2001. \t\t\t\t-webkit-line-clamp: 2;
  2002. \t\t\t\t-webkit-box-orient: vertical;
  2003. \t\t\t}
  2005. \t\t\t.product-title a {
  2006. \t\t\t\tcolor: #2c3e50;
  2007. \t\t\t\ttext-decoration: none;
  2008. \t\t\t\ttransition: color 0.3s ease;
  2009. \t\t\t}
  2011. \t\t\t.product-title a:hover {
  2012. \t\t\t\tcolor: #ffa200;
  2013. \t\t\t}
  2015. \t\t\t.product-shop {
  2016. \t\t\t\tfont-size: 0.85rem;
  2017. \t\t\t\tcolor: #6c757d;
  2018. \t\t\t\tmargin-bottom: 12px;
  2019. \t\t\t\tdisplay: flex;
  2020. \t\t\t\talign-items: center;
  2021. \t\t\t\tgap: 6px;
  2022. \t\t\t}
  2024. \t\t\t.product-shop i {
  2025. \t\t\t\tfont-size: 0.9rem;
  2026. \t\t\t}
  2028. \t\t\t.shop-link {
  2029. \t\t\t\tcolor: #6c757d;
  2030. \t\t\t\ttext-decoration: none;
  2031. \t\t\t\ttransition: color 0.3s ease;
  2032. \t\t\t}
  2034. \t\t\t.shop-link:hover {
  2035. \t\t\t\tcolor: #ffa200;
  2036. \t\t\t}
  2038. \t\t\t.product-price-wrapper {
  2039. \t\t\t\tmargin-bottom: 16px;
  2040. \t\t\t\tdisplay: flex;
  2041. \t\t\t\talign-items: center;
  2042. \t\t\t\tgap: 8px;
  2043. \t\t\t\tflex-wrap: wrap;
  2044. \t\t\t}
  2046. \t\t\t.product-price {
  2047. \t\t\t\tfont-size: 1.25rem;
  2048. \t\t\t\tfont-weight: 700;
  2049. \t\t\t\tcolor: #ffa200;
  2050. \t\t\t}
  2052. \t\t\t.product-compare-price {
  2053. \t\t\t\tfont-size: 0.9rem;
  2054. \t\t\t\tcolor: #adb5bd;
  2055. \t\t\t\ttext-decoration: line-through;
  2056. \t\t\t}
  2058. \t\t\t.product-actions {
  2059. \t\t\t\tmargin-top: auto;
  2060. \t\t\t}
  2062. \t\t\t/* Styles pour les boutons de la section \"Vous pourriez aussi aimer\" uniquement */
  2063. \t\t\t.modern-product-card .btn-add-to-cart {
  2064. \t\t\t\twidth: 100%;
  2065. \t\t\t\tpadding: 12px;
  2066. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  2067. \t\t\t\tcolor: white;
  2068. \t\t\t\tborder: none;
  2069. \t\t\t\tborder-radius: 10px;
  2070. \t\t\t\tfont-weight: 600;
  2071. \t\t\t\tdisplay: flex;
  2072. \t\t\t\talign-items: center;
  2073. \t\t\t\tjustify-content: center;
  2074. \t\t\t\tgap: 8px;
  2075. \t\t\t\ttext-decoration: none;
  2076. \t\t\t\ttransition: all 0.3s ease;
  2077. \t\t\t\tcursor: pointer;
  2078. \t\t\t}
  2080. \t\t\t.modern-product-card .btn-add-to-cart:hover {
  2081. \t\t\t\tbackground: linear-gradient(135deg, #e8910a 0%, #d6820a 100%);
  2082. \t\t\t\ttransform: translateY(-2px);
  2083. \t\t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.4);
  2084. \t\t\t\tcolor: white;
  2085. \t\t\t}
  2087. \t\t\t/* Le bouton principal garde son design original */
  2088. \t\t\t.card_area .btn-add-to-cart {
  2089. \t\t\t\twidth: auto;
  2090. \t\t\t\tdisplay: inline-flex;
  2091. \t\t\t}
  2093. \t\t\t.modern-product-card .btn-add-to-cart:active {
  2094. \t\t\t\ttransform: translateY(0);
  2095. \t\t\t}
  2097. \t\t\t.modern-product-card .btn-add-to-cart i {
  2098. \t\t\t\tfont-size: 1.1rem;
  2099. \t\t\t}
  2101. \t\t\t/* Responsive adjustments */
  2102. \t\t\t@media (max-width: 768px) {
  2103. \t\t\t\t.product-image-wrapper {
  2104. \t\t\t\t\theight: 200px;
  2105. \t\t\t\t}
  2107. \t\t\t\t.product-info {
  2108. \t\t\t\t\tpadding: 16px;
  2109. \t\t\t\t}
  2111. \t\t\t\t.product-title {
  2112. \t\t\t\t\tfont-size: 0.95rem;
  2113. \t\t\t\t}
  2115. \t\t\t\t.product-price {
  2116. \t\t\t\t\tfont-size: 1.1rem;
  2117. \t\t\t\t}
  2119. \t\t\t\t.section-title h2 {
  2120. \t\t\t\t\tfont-size: 2rem !important;
  2121. \t\t\t\t}
  2122. \t\t\t}
  2124. \t\t\t@media (max-width: 576px) {
  2125. \t\t\t\t.product-image-wrapper {
  2126. \t\t\t\t\theight: 190px;
  2127. \t\t\t\t}
  2129. \t\t\t\t.product-info {
  2130. \t\t\t\t\tpadding: 14px;
  2131. \t\t\t\t}
  2133. \t\t\t\t.btn-add-to-cart {
  2134. \t\t\t\t\tpadding: 10px;
  2135. \t\t\t\t\tfont-size: 0.9rem;
  2136. \t\t\t\t}
  2137. \t\t\t}
  2139. \t\t\t/* Ensure fixed height for cards */
  2140. \t\t\t.col-6.col-md-4.col-lg-3 {
  2141. \t\t\t\tdisplay: flex;
  2142. \t\t\t}
  2144. \t\t\t.modern-product-card {
  2145. \t\t\t\twidth: 100%;
  2146. \t\t\t}
  2148. \t\t\t/* Loading state for add to cart button */
  2149. \t\t\t.btn-add-to-cart.loading {
  2150. \t\t\t\topacity: 0.7;
  2151. \t\t\t\tpointer-events: none;
  2152. \t\t\t}
  2154. \t\t\t.btn-add-to-cart.loading i {
  2155. \t\t\t\tanimation: spin 1s linear infinite;
  2156. \t\t\t}
  2158. \t\t\t@keyframes spin {
  2159. \t\t\t\tfrom { transform: rotate(0deg); }
  2160. \t\t\t\tto { transform: rotate(360deg); }
  2161. \t\t\t}
  2163. \t\t\t/* Success state - vert pour tous les boutons */
  2164. \t\t\t.btn-add-to-cart.success {
  2165. \t\t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  2166. \t\t\t}
  2168. \t\t\t/* Le bouton principal garde son style original même en success */
  2169. \t\t\t.card_area .btn-add-to-cart.success {
  2170. \t\t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  2171. \t\t\t}
  2172. \t\t</style>
  2174. \t\t<script>
  2175. \t\t\t// Gestion des boutons d'ajout au panier (principal et section \"Vous pourriez aussi aimer\")
  2176. \t\t\tdocument.addEventListener('DOMContentLoaded', function() {
  2177. \t\t\t\tconst addToCartButtons = document.querySelectorAll('.btn-add-to-cart');
  2178. \t\t\t\t
  2179. \t\t\t\taddToCartButtons.forEach(button => {
  2180. \t\t\t\t\tbutton.addEventListener('click', function(e) {
  2181. \t\t\t\t\t\te.preventDefault();
  2182. \t\t\t\t\t\te.stopPropagation();
  2183. \t\t\t\t\t\t
  2184. \t\t\t\t\t\tconst productId = this.getAttribute('data-product-id');
  2185. \t\t\t\t\t\t
  2186. \t\t\t\t\t\t// Pour le bouton principal, récupérer la quantité depuis l'input sst si disponible
  2187. \t\t\t\t\t\tlet qty = this.getAttribute('data-qty') || '1';
  2188. \t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  2189. \t\t\t\t\t\t\tconst qtyInput = document.getElementById('sst');
  2190. \t\t\t\t\t\t\tif (qtyInput) {
  2191. \t\t\t\t\t\t\t\tqty = parseInt(qtyInput.value) || 1;
  2192. \t\t\t\t\t\t\t}
  2193. \t\t\t\t\t\t}
  2194. \t\t\t\t\t\t
  2195. \t\t\t\t\t\tif (!productId) {
  2196. \t\t\t\t\t\t\tconsole.error('Product ID manquant');
  2197. \t\t\t\t\t\t\treturn false;
  2198. \t\t\t\t\t\t}
  2200. \t\t\t\t\t\t// Sauvegarder le contenu original
  2201. \t\t\t\t\t\tconst originalContent = this.innerHTML;
  2202. \t\t\t\t\t\t
  2203. \t\t\t\t\t\t// Désactiver le bouton et afficher le loading
  2204. \t\t\t\t\t\tthis.classList.add('loading');
  2205. \t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  2206. \t\t\t\t\t\t\tthis.style.pointerEvents = 'none';
  2207. \t\t\t\t\t\t\tthis.innerHTML = '<i class=\"lnr lnr-spinner\"></i> Ajout en cours...';
  2208. \t\t\t\t\t\t} else {
  2209. \t\t\t\t\t\t\tthis.innerHTML = '<i class=\"ti ti-loader-2\"></i> <span>Ajout...</span>';
  2210. \t\t\t\t\t\t}
  2211. \t\t\t\t\t\t
  2212. \t\t\t\t\t\t// Construire le body de la requête
  2213. \t\t\t\t\t\tlet body = 'productId=' + encodeURIComponent(productId) + '&qty=' + encodeURIComponent(qty);
  2214. \t\t\t\t\t\t
  2215. \t\t\t\t\t\t// Pour le bouton principal, vérifier aussi le prix unitaire pour les prix de gros
  2216. \t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  2217. \t\t\t\t\t\t\tconst unitPriceInput = document.getElementById('unit-price-input');
  2218. \t\t\t\t\t\t\tconst unitPrice = unitPriceInput ? unitPriceInput.value : '';
  2219. \t\t\t\t\t\t\tif (unitPrice) {
  2220. \t\t\t\t\t\t\t\tbody += '&unitPrice=' + encodeURIComponent(unitPrice);
  2221. \t\t\t\t\t\t\t}
  2222. \t\t\t\t\t\t}
  2223. \t\t\t\t\t\t
  2224. \t\t\t\t\t\t// Faire la requête AJAX
  2225. \t\t\t\t\t\tfetch('";
  2226.             // line 1643
  2227.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("ui_cart_add");
  2228.             yield "', {
  2229. \t\t\t\t\t\t\tmethod: 'POST',
  2230. \t\t\t\t\t\t\theaders: {
  2231. \t\t\t\t\t\t\t\t'Content-Type': 'application/x-www-form-urlencoded',
  2232. \t\t\t\t\t\t\t\t'X-Requested-With': 'XMLHttpRequest'
  2233. \t\t\t\t\t\t\t},
  2234. \t\t\t\t\t\t\tbody: body
  2235. \t\t\t\t\t\t})
  2236. \t\t\t\t\t\t.then(response => {
  2237. \t\t\t\t\t\t\tif (!response.ok) {
  2238. \t\t\t\t\t\t\t\tthrow new Error('Erreur réseau: ' + response.status);
  2239. \t\t\t\t\t\t\t}
  2240. \t\t\t\t\t\t\treturn response.json();
  2241. \t\t\t\t\t\t})
  2242. \t\t\t\t\t\t.then(data => {
  2243. \t\t\t\t\t\t\tif (data.ok || data.success) {
  2244. \t\t\t\t\t\t\t\t// Succès - Afficher l'animation de succès
  2245. \t\t\t\t\t\t\t\tthis.classList.remove('loading');
  2246. \t\t\t\t\t\t\t\tthis.classList.add('success');
  2247. \t\t\t\t\t\t\t\t
  2248. \t\t\t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  2249. \t\t\t\t\t\t\t\t\tthis.style.background = 'linear-gradient(135deg, #28a745 0%, #20c997 100%)';
  2250. \t\t\t\t\t\t\t\t\tthis.innerHTML = '<i class=\"lnr lnr-checkmark-circle\"></i> Ajouté !';
  2251. \t\t\t\t\t\t\t\t\t
  2252. \t\t\t\t\t\t\t\t\t// Afficher le message de confirmation si présent
  2253. \t\t\t\t\t\t\t\t\tconst cartMessage = document.getElementById('cart-message');
  2254. \t\t\t\t\t\t\t\t\tif (cartMessage) {
  2255. \t\t\t\t\t\t\t\t\t\tcartMessage.style.display = 'block';
  2256. \t\t\t\t\t\t\t\t\t\tsetTimeout(() => {
  2257. \t\t\t\t\t\t\t\t\t\t\tcartMessage.style.display = 'none';
  2258. \t\t\t\t\t\t\t\t\t\t}, 3000);
  2259. \t\t\t\t\t\t\t\t\t}
  2260. \t\t\t\t\t\t\t\t} else {
  2261. \t\t\t\t\t\t\t\t\tthis.innerHTML = '<i class=\"ti ti-check\"></i> <span>Ajouté !</span>';
  2262. \t\t\t\t\t\t\t\t}
  2263. \t\t\t\t\t\t\t\t
  2264. \t\t\t\t\t\t\t\t// Mettre à jour le compteur du panier si présent
  2265. \t\t\t\t\t\t\t\tconst cartBadge = document.querySelector('.cart-badge');
  2266. \t\t\t\t\t\t\t\tif (cartBadge) {
  2267. \t\t\t\t\t\t\t\t\tcartBadge.textContent = data.totalQty || data.quantity || 0;
  2268. \t\t\t\t\t\t\t\t\t// Animation du badge
  2269. \t\t\t\t\t\t\t\t\tcartBadge.style.transform = 'scale(1.2)';
  2270. \t\t\t\t\t\t\t\t\tsetTimeout(() => {
  2271. \t\t\t\t\t\t\t\t\t\tcartBadge.style.transform = 'scale(1)';
  2272. \t\t\t\t\t\t\t\t\t}, 300);
  2273. \t\t\t\t\t\t\t\t}
  2274. \t\t\t\t\t\t\t\t
  2275. \t\t\t\t\t\t\t\t// Afficher une notification si la fonction existe
  2276. \t\t\t\t\t\t\t\tif (typeof showCustomAlert === 'function') {
  2277. \t\t\t\t\t\t\t\t\tshowCustomAlert('Produit ajouté au panier avec succès !', 'success');
  2278. \t\t\t\t\t\t\t\t}
  2279. \t\t\t\t\t\t\t\t
  2280. \t\t\t\t\t\t\t\t// Restaurer le bouton après 2 secondes
  2281. \t\t\t\t\t\t\t\tsetTimeout(() => {
  2282. \t\t\t\t\t\t\t\t\tthis.classList.remove('success');
  2283. \t\t\t\t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  2284. \t\t\t\t\t\t\t\t\t\tthis.style.background = '';
  2285. \t\t\t\t\t\t\t\t\t\tthis.style.pointerEvents = 'auto';
  2286. \t\t\t\t\t\t\t\t\t}
  2287. \t\t\t\t\t\t\t\t\tthis.innerHTML = originalContent;
  2288. \t\t\t\t\t\t\t\t}, 2000);
  2289. \t\t\t\t\t\t\t} else {
  2290. \t\t\t\t\t\t\t\t// Erreur
  2291. \t\t\t\t\t\t\t\tthis.classList.remove('loading');
  2292. \t\t\t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  2293. \t\t\t\t\t\t\t\t\tthis.style.pointerEvents = 'auto';
  2294. \t\t\t\t\t\t\t\t}
  2295. \t\t\t\t\t\t\t\tthis.innerHTML = originalContent;
  2296. \t\t\t\t\t\t\t\t
  2297. \t\t\t\t\t\t\t\tconst message = data.message || 'Erreur lors de l\\'ajout au panier';
  2298. \t\t\t\t\t\t\t\tif (typeof showCustomAlert === 'function') {
  2299. \t\t\t\t\t\t\t\t\tshowCustomAlert(message, 'error');
  2300. \t\t\t\t\t\t\t\t} else {
  2301. \t\t\t\t\t\t\t\t\talert(message);
  2302. \t\t\t\t\t\t\t\t}
  2303. \t\t\t\t\t\t\t}
  2304. \t\t\t\t\t\t})
  2305. \t\t\t\t\t\t.catch(error => {
  2306. \t\t\t\t\t\t\tconsole.error('Erreur:', error);
  2307. \t\t\t\t\t\t\tthis.classList.remove('loading');
  2308. \t\t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  2309. \t\t\t\t\t\t\t\tthis.style.pointerEvents = 'auto';
  2310. \t\t\t\t\t\t\t}
  2311. \t\t\t\t\t\t\tthis.innerHTML = originalContent;
  2312. \t\t\t\t\t\t\t
  2313. \t\t\t\t\t\t\tif (typeof showCustomAlert === 'function') {
  2314. \t\t\t\t\t\t\t\tshowCustomAlert('Erreur lors de l\\'ajout au panier. Veuillez réessayer.', 'error');
  2315. \t\t\t\t\t\t\t} else {
  2316. \t\t\t\t\t\t\t\talert('Erreur lors de l\\'ajout au panier. Veuillez réessayer.');
  2317. \t\t\t\t\t\t\t}
  2318. \t\t\t\t\t\t});
  2319. \t\t\t\t\t\t
  2320. \t\t\t\t\t\treturn false;
  2321. \t\t\t\t\t});
  2322. \t\t\t\t});
  2323. \t\t\t});
  2324. \t\t</script>
  2325. \t";
  2326.         }
  2327.         // line 1741
  2328.         yield "
  2330. \t<script src=\"js/vendor/jquery-2.2.4.min.js\"></script>
  2331. \t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js\" integrity=\"sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4\" crossorigin=\"anonymous\"></script>
  2332. \t<script src=\"js/vendor/bootstrap.min.js\"></script>
  2333. \t<script src=\"js/jquery.ajaxchimp.min.js\"></script>
  2334. \t<script src=\"js/jquery.nice-select.min.js\"></script>
  2335. \t<script src=\"js/jquery.sticky.js\"></script>
  2336. \t<script src=\"js/nouislider.min.js\"></script>
  2337. \t<script src=\"js/jquery.magnific-popup.min.js\"></script>
  2338. \t<script src=\"js/owl.carousel.min.js\"></script>
  2339. \t<!--gmaps Js-->
  2340. \t<script src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE\"></script>
  2341. \t<script src=\"js/gmaps.min.js\"></script>
  2342. \t<script src=\"js/main.js\"></script>
  2343. \t<script>
  2344. \t\t// Le gestionnaire d'événements pour les boutons d'ajout au panier est déjà défini
  2345. \t\t// dans la section \"Vous pourriez aussi aimer\" et gère maintenant aussi le bouton principal
  2347. // Gestion de la galerie d'images
  2348. document.addEventListener('DOMContentLoaded', function () {
  2349. const thumbnails = document.querySelectorAll('.thumbnail-item');
  2350. const mainImage = document.getElementById('main-product-image');
  2351. const currentIndex = document.getElementById('current-image-index');
  2352. const totalImages = document.getElementById('total-images');
  2354. // Fonction pour changer l'image principale
  2355. function changeMainImage(thumbnail, index) {
  2356. const imageUrl = thumbnail.getAttribute('data-image');
  2357. if (mainImage && imageUrl) {
  2358. mainImage.style.opacity = '0';
  2359. setTimeout(() => {
  2360. mainImage.src = imageUrl;
  2361. mainImage.style.opacity = '1';
  2362. // Reset zoom
  2363. mainImage.style.transform = 'scale(1)';
  2364. mainImage.style.transformOrigin = 'center center';
  2365. }, 150);
  2366. }
  2368. // Mettre à jour l'indicateur
  2369. if (currentIndex) {
  2370. currentIndex.textContent = index + 1;
  2371. }
  2372. }
  2374. // Ajouter le zoom sur l'image principale au survol
  2375. const mainImageContainer = document.querySelector('.product-main-image-wrapper');
  2376. if (mainImageContainer && mainImage) {
  2377. \tmainImageContainer.addEventListener('mousemove', function(e) {
  2378. \t\tconst rect = mainImageContainer.getBoundingClientRect();
  2379. \t\tconst x = e.clientX - rect.left;
  2380. \t\tconst y = e.clientY - rect.top;
  2381. \t\t
  2382. \t\tconst xPercent = (x / rect.width) * 100;
  2383. \t\tconst yPercent = (y / rect.height) * 100;
  2384. \t\t
  2385. \t\tmainImage.style.transformOrigin = `\${xPercent}% \${yPercent}%`;
  2386. \t\tmainImage.style.transform = 'scale(2.2)'; // Zoom Alibaba-style
  2387. \t});
  2388. \t
  2389. \tmainImageContainer.addEventListener('mouseleave', function() {
  2390. \t\tmainImage.style.transformOrigin = 'center center';
  2391. \t\tmainImage.style.transform = 'scale(1)';
  2392. \t});
  2393. }
  2395. // Gérer le survol sur les miniatures (sélection permanente au survol)
  2396. thumbnails.forEach((thumbnail, index) => {
  2397. thumbnail.addEventListener('mouseenter', function () { // Retirer toutes les sélections permanentes
  2398. thumbnails.forEach(t => {
  2399. t.classList.remove('active', 'permanently-active');
  2400. });
  2402. // Ajouter active et permanently-active à la miniature survolée
  2403. thumbnail.classList.add('active', 'permanently-active');
  2405. // Changer l'image principale
  2406. changeMainImage(thumbnail, index);
  2407. });
  2408. });
  2410. // Gérer le clic sur les miniatures (sélection permanente)
  2411. thumbnails.forEach((thumbnail, index) => {
  2412. thumbnail.addEventListener('click', function () { // Retirer la classe active et permanently-active de toutes les miniatures
  2413. thumbnails.forEach(t => {
  2414. t.classList.remove('active', 'permanently-active');
  2415. });
  2417. // Ajouter les classes active et permanently-active à la miniature cliquée
  2418. thumbnail.classList.add('active', 'permanently-active');
  2420. // Changer l'image principale
  2421. changeMainImage(thumbnail, index);
  2422. });
  2423. });
  2425. // Gestion du carrousel de miniatures avec taille fixe carrée
  2426. const navUpBtn = document.getElementById('thumbnail-nav-up');
  2427. const navDownBtn = document.getElementById('thumbnail-nav-down');
  2428. const thumbnailsContainer = document.getElementById('product-thumbnails');
  2429. const thumbnailsWrapper = document.getElementById('thumbnails-wrapper');
  2430. const thumbnailItems = Array.from(document.querySelectorAll('.thumbnail-item'));
  2432. let currentThumbnailOffset = 0;
  2433. const thumbnailHeight = 90;
  2434. // 80px (hauteur) + 10px (gap)
  2435. // Calculer la hauteur disponible pour les miniatures dynamiquement
  2436. const thumbnailsEl = document.getElementById('product-thumbnails');
  2437. let containerHeight = thumbnailsEl ? thumbnailsEl.clientHeight : 520; // Hauteur par défaut si non disponible
  2438. let visibleThumbnails = Math.floor(containerHeight / thumbnailHeight);
  2440. // Recalculer après le chargement pour avoir la vraie hauteur
  2441. setTimeout(() => {
  2442. if (thumbnailsEl) {
  2443. containerHeight = thumbnailsEl.clientHeight;
  2444. visibleThumbnails = Math.floor(containerHeight / thumbnailHeight);
  2445. updateThumbnailsPosition();
  2446. }
  2447. }, 100);
  2449. function getCurrentIndex() {
  2450. const current = document.querySelector('.thumbnail-item.permanently-active') || document.querySelector('.thumbnail-item.active');
  2451. if (! current) 
  2452. return 0;
  2456. const idxAttr = current.getAttribute('data-index');
  2457. return idxAttr ? parseInt(idxAttr, 10) : Math.max(0, thumbnailItems.indexOf(current));
  2458. }
  2460. function selectThumbnailByIndex(newIndex) {
  2461. if (! thumbnailItems.length) 
  2462. return;
  2466. const total = thumbnailItems.length;
  2467. if (newIndex < 0) 
  2468. newIndex = 0;
  2472. if (newIndex > total - 1) 
  2473. newIndex = total - 1;
  2477. // Reset classes
  2478. thumbnailItems.forEach(t => t.classList.remove('active', 'permanently-active'));
  2479. const target = thumbnailItems[newIndex];
  2480. if (! target) 
  2481. return;
  2485. target.classList.add('active', 'permanently-active');
  2486. changeMainImage(target, newIndex);
  2488. // Ajuster le carrousel pour voir la miniature sélectionnée
  2489. ensureThumbnailVisible(newIndex);
  2490. }
  2492. function ensureThumbnailVisible(index) {
  2493. if (! thumbnailsWrapper || ! thumbnailItems.length) 
  2494. return;
  2498. const targetTop = index * thumbnailHeight;
  2499. const visibleTop = currentThumbnailOffset * thumbnailHeight;
  2500. const visibleBottom = visibleTop + containerHeight;
  2502. // Si la miniature est au-dessus de la zone visible
  2503. if (targetTop < visibleTop) {
  2504. currentThumbnailOffset = index;
  2505. updateThumbnailsPosition();
  2506. }
  2507. // Si la miniature est en-dessous de la zone visible 
  2508. else if (targetTop + thumbnailHeight > visibleBottom) {
  2509. currentThumbnailOffset = Math.max(0, index - visibleThumbnails + 1);
  2510. updateThumbnailsPosition();
  2511. }
  2512. }
  2514. function updateThumbnailsPosition() {
  2515. if (!thumbnailsWrapper) 
  2516. return;
  2520. const maxOffset = Math.max(0, thumbnailItems.length - visibleThumbnails);
  2521. currentThumbnailOffset = Math.max(0, Math.min(currentThumbnailOffset, maxOffset));
  2522. thumbnailsWrapper.style.transform = `translateY(-\${
  2523. currentThumbnailOffset * thumbnailHeight
  2524. }px)`;
  2525. updateNavButtons();
  2526. }
  2528. function updateNavButtons() {
  2529. if (!thumbnailItems.length) 
  2530. return;
  2534. const maxOffset = Math.max(0, thumbnailItems.length - visibleThumbnails);
  2535. const canScrollUp = currentThumbnailOffset > 0;
  2536. const canScrollDown = currentThumbnailOffset < maxOffset;
  2538. if (navUpBtn) {
  2539. navUpBtn.classList.toggle('disabled', ! canScrollUp);
  2540. }
  2541. if (navDownBtn) {
  2542. navDownBtn.classList.toggle('disabled', ! canScrollDown);
  2543. }
  2544. }
  2546. // Navigation avec les boutons
  2547. if(navUpBtn) {
  2548. navUpBtn.addEventListener('click', function (e) {
  2549. e.preventDefault();
  2550. if (currentThumbnailOffset > 0) {
  2551. currentThumbnailOffset --;
  2552. updateThumbnailsPosition();
  2553. }
  2554. });
  2555. }
  2557. if(navDownBtn) {
  2558. navDownBtn.addEventListener('click', function (e) {
  2559. e.preventDefault();
  2560. const maxOffset = Math.max(0, thumbnailItems.length - visibleThumbnails);
  2561. if (currentThumbnailOffset < maxOffset) {
  2562. currentThumbnailOffset ++;
  2563. updateThumbnailsPosition();
  2564. }
  2565. });
  2566. }
  2568. // Initialiser le carrousel
  2569. if(thumbnailsWrapper && thumbnailItems.length > 0) {
  2570. updateThumbnailsPosition();
  2571. // S'assurer que la première miniature est visible
  2572. ensureThumbnailVisible(0);
  2573. }
  2575. // Navigation sur l'image principale
  2576. const mainPrev = document.getElementById('main-image-prev');
  2577. const mainNext = document.getElementById('main-image-next');
  2578. if(mainPrev) {
  2579. mainPrev.addEventListener('click', function (e) {
  2580. e.preventDefault();
  2581. const idx = getCurrentIndex();
  2582. selectThumbnailByIndex(idx - 1);
  2583. });
  2584. }
  2585. if(mainNext) {
  2586. mainNext.addEventListener('click', function (e) {
  2587. e.preventDefault();
  2588. const idx = getCurrentIndex();
  2589. selectThumbnailByIndex(idx + 1);
  2590. });
  2591. }
  2592. }
  2593. );
  2595. // --- Prix de gros : calcul du prix unitaire dynamique ---
  2596. (function () {
  2597. const bulk = document.getElementById('bulk-pricing');
  2598. const qtyInputEl = document.getElementById('sst');
  2599. const unitPriceSpan = document.getElementById('unit-price-value');
  2600. const mainUnitPriceSpan = document.getElementById('main-unit-price');
  2601. const totalPriceSpan = document.getElementById('total-price-value');
  2602. const savingsAmountSpan = document.getElementById('savings-amount');
  2603. const savingsPercentSpan = document.getElementById('savings-percent');
  2604. const unitPriceInput = document.getElementById('unit-price-input');
  2605. const tierRowsTbody = document.getElementById('bulk-tier-rows');
  2606. if (! bulk || ! qtyInputEl || ! unitPriceSpan || ! mainUnitPriceSpan || ! unitPriceInput) 
  2607. return;
  2611. let tiers = [];
  2612. try {
  2613. tiers = JSON.parse(bulk.getAttribute('data-tiers') || '[]');
  2614. } catch (e) {
  2615. tiers = [];
  2616. }
  2617. if (!Array.isArray(tiers) || tiers.length === 0) 
  2618. return;
  2622. tiers.sort(function (a, b) {
  2623. return(a.min || 0) - (b.min || 0);
  2624. });
  2625. const basePrice = (function () {
  2626. const one = tiers.find(t => (t.min || 0) <= 1);
  2627. return one ? parseFloat(one.price) : parseFloat(tiers[0].price);
  2628. })();
  2629. function getUnitPriceForQty(qty) {
  2630. let candidate = tiers[0] || null;
  2631. for (let i = 0; i < tiers.length; i++) {
  2632. if (qty >= (tiers[i].min || 1)) {
  2633. candidate = tiers[i];
  2634. }
  2635. }
  2636. return candidate ? parseFloat(candidate.price) : (tiers[0] ? parseFloat(tiers[0].price) : basePrice);
  2637. }
  2638. function formatPrice(val) {
  2639. return(parseFloat(val) || 0).toFixed(2);
  2640. }
  2641. function highlightActiveTier(qty) {
  2642. if (! tierRowsTbody) 
  2643. return;
  2647. const rows = tierRowsTbody.querySelectorAll('tr');
  2648. rows.forEach(r => r.classList.remove('table-warning'));
  2649. let activeRow = null;
  2650. rows.forEach(r => {
  2651. const m = parseInt(r.getAttribute('data-min'), 10) || 1;
  2652. if (qty >= m) 
  2653. activeRow = r;
  2657. });
  2658. if (activeRow) 
  2659. activeRow.classList.add('table-warning');
  2663. }
  2664. function refreshPrices() {
  2665. const qty = Math.max(1, parseInt(qtyInputEl.value, 10) || 1);
  2666. const unit = getUnitPriceForQty(qty);
  2667. const total = unit * qty;
  2668. const saveAmount = Math.max(0, (basePrice - unit) * qty);
  2669. const savePercent = Math.max(0, 100 * (basePrice - unit) / basePrice);
  2670. unitPriceSpan.textContent = formatPrice(unit) + ' HTG';
  2671. mainUnitPriceSpan.textContent = formatPrice(unit);
  2672. if (totalPriceSpan) 
  2673. totalPriceSpan.textContent = formatPrice(total);
  2677. if (savingsAmountSpan) 
  2678. savingsAmountSpan.textContent = formatPrice(saveAmount);
  2682. if (savingsPercentSpan) 
  2683. savingsPercentSpan.textContent = Math.round(savePercent);
  2687. unitPriceInput.value = formatPrice(unit);
  2688. highlightActiveTier(qty);
  2689. }
  2690. qtyInputEl.addEventListener('input', refreshPrices);
  2691. qtyInputEl.addEventListener('change', refreshPrices);
  2692. setTimeout(refreshPrices, 50);
  2693. setInterval(refreshPrices, 350);
  2694. })();
  2695. // --- /Prix de gros ---
  2697. // Injection du prix unitaire dans l'ajout au panier
  2698. (function () {
  2699. const addToCartBtn = document.getElementById('add-to-cart-btn');
  2700. if (! addToCartBtn) 
  2701. return;
  2705. addToCartBtn.addEventListener('click', function () {
  2706. const unitPriceInput = document.getElementById('unit-price-input');
  2707. if (unitPriceInput) {
  2708. addToCartBtn.setAttribute('data-unit-price', unitPriceInput.value);
  2709. }
  2710. });
  2711. })();
  2713. // Fonction pour ouvrir le modal de zoom avec loader
  2714. function openImageZoom () {
  2715. const mainImage = document.getElementById('main-product-image');
  2716. const zoomModal = document.getElementById('image-zoom-modal');
  2717. const zoomImage = document.getElementById('zoom-modal-image');
  2718. const zoomLoader = document.getElementById('zoom-loader');
  2720. if (mainImage && zoomModal && zoomImage) { // Afficher le loader
  2721. if (zoomLoader) {
  2722. zoomLoader.style.display = 'flex';
  2723. }
  2725. // Masquer l'image et réinitialiser
  2726. zoomImage.classList.remove('loaded');
  2727. zoomImage.style.opacity = '0';
  2729. // Ouvrir le modal avec animation
  2730. zoomModal.classList.add('active');
  2731. document.body.style.overflow = 'hidden';
  2733. // Charger l'image
  2734. const imageUrl = mainImage.src;
  2735. const tempImage = new Image();
  2737. tempImage.onload = function () {
  2738. zoomImage.src = imageUrl;
  2739. // Masquer le loader et afficher l'image avec transition
  2740. setTimeout(function () {
  2741. if (zoomLoader) {
  2742. zoomLoader.style.display = 'none';
  2743. }
  2744. zoomImage.classList.add('loaded');
  2745. zoomImage.style.opacity = '1';
  2746. }, 200);
  2747. };
  2749. tempImage.onerror = function () {
  2750. if (zoomLoader) {
  2751. zoomLoader.style.display = 'none';
  2752. }
  2753. zoomImage.src = imageUrl;
  2754. zoomImage.classList.add('loaded');
  2755. };
  2757. tempImage.src = imageUrl;
  2758. }
  2759. }
  2761. // Fonction pour fermer le modal de zoom avec animation
  2762. function closeImageZoom () {
  2763. const zoomModal = document.getElementById('image-zoom-modal');
  2764. const zoomImage = document.getElementById('zoom-modal-image');
  2765. const zoomLoader = document.getElementById('zoom-loader');
  2767. if (zoomModal) { // Animation de fermeture
  2768. if (zoomImage) {
  2769. zoomImage.style.opacity = '0';
  2770. zoomImage.classList.remove('loaded');
  2771. }
  2773. setTimeout(function () {
  2774. zoomModal.classList.remove('active');
  2775. document.body.style.overflow = 'auto';
  2777. // Réinitialiser le loader pour la prochaine ouverture
  2778. if (zoomLoader) {
  2779. zoomLoader.style.display = 'none';
  2780. }
  2781. }, 200);
  2782. }
  2783. }
  2785. // Fermer le modal en cliquant en dehors
  2786. document.addEventListener('DOMContentLoaded', function () {
  2787. const zoomModal = document.getElementById('image-zoom-modal');
  2788. if (zoomModal) {
  2789. zoomModal.addEventListener('click', function (e) {
  2790. if (e.target === zoomModal) {
  2791. closeImageZoom();
  2792. }
  2793. });
  2794. }
  2795. });
  2796. \t</script>
  2798. \t<!-- Modal de zoom d'image -->
  2799. \t<div id=\"image-zoom-modal\" class=\"image-zoom-modal\">
  2800. \t\t<span class=\"close-zoom\" onclick=\"closeImageZoom()\" title=\"Fermer\">&times;</span>
  2801. \t\t<div
  2802. \t\t\tclass=\"zoom-modal-content\">
  2803. \t\t\t<!-- Loader -->
  2804. \t\t\t<div class=\"zoom-loader\" id=\"zoom-loader\" style=\"display: none;\">
  2805. \t\t\t\t<div class=\"zoom-loader-spinner\"></div>
  2806. \t\t\t\t<div class=\"zoom-loader-text\">Chargement...</div>
  2807. \t\t\t</div>
  2808. \t\t\t<!-- Image -->
  2809. \t\t\t<img id=\"zoom-modal-image\" src=\"\" alt=\"";
  2810.         // line 2222
  2811.         yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "name", [], "any", false, false, false, 2222), "html", null, true);
  2812.         yield "\">
  2813. \t\t</div>
  2814. \t</div>
  2816. \t";
  2817.         // line 2226
  2818.         if ((($tmp = ($context["dropshipReferral"] ?? null)) && $tmp instanceof Markup ? (string) $tmp : $tmp)) {
  2819.             // line 2227
  2820.             yield "\t\t<!-- Modal d'affiliation -->
  2821. \t\t<div id=\"dropship-modal\" class=\"dropship-referral-modal\" style=\"display: none;\">
  2822. \t\t\t<div class=\"dropship-modal-overlay\"></div>
  2823. \t\t\t<div class=\"dropship-modal-content\">
  2824. \t\t\t\t<button type=\"button\" class=\"dropship-modal-close\" onclick=\"closeDropshipModal()\" aria-label=\"Fermer\">
  2825. \t\t\t\t\t&times;
  2826. \t\t\t\t</button>
  2827. \t\t\t\t<div class=\"dropship-modal-header\">
  2828. \t\t\t\t\t<div class=\"dropship-icon\">
  2829. \t\t\t\t\t\t<i class=\"fas fa-gift\"></i>
  2830. \t\t\t\t\t</div>
  2831. \t\t\t\t\t<h3>Produit recommandé par
  2832. \t\t\t\t\t\t";
  2833.             // line 2239
  2834.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["dropshipReferral"] ?? null), "affiliateName", [], "any", false, false, false, 2239), "html", null, true);
  2835.             yield "</h3>
  2836. \t\t\t\t\t<p class=\"dropship-subtitle\">Vous avez été dirigé vers ce produit par un de nos partenaires</p>
  2837. \t\t\t\t</div>
  2838. \t\t\t\t<div class=\"dropship-modal-body\">
  2839. \t\t\t\t\t<div class=\"dropship-product-info\">
  2840. \t\t\t\t\t\t";
  2841.             // line 2244
  2842.             if ((Twig\Extension\CoreExtension::length($this->env->getCharset(), CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "images", [], "any", false, false, false, 2244)) > 0)) {
  2843.                 // line 2245
  2844.                 yield "\t\t\t\t\t\t\t<img src=\"";
  2845.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Symfony\Bridge\Twig\Extension\AssetExtension']->getAssetUrl((($_v1 = CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "images", [], "any", false, false, false, 2245)) && is_array($_v1) || $_v1 instanceof ArrayAccess ? ($_v1[0] ?? null) : null)), "html", null, true);
  2846.                 yield "\" alt=\"";
  2847.                 yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "name", [], "any", false, false, false, 2245), "html", null, true);
  2848.                 yield "\" class=\"dropship-product-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">
  2849. \t\t\t\t\t\t\t<div class=\"dropship-product-image-placeholder\" style=\"display: none; width: 100px; height: 100px; background: #f0f0f0; border-radius: 8px; align-items: center; justify-content: center; color: #999;\">
  2850. \t\t\t\t\t\t\t\t<i class=\"fas fa-image\" style=\"font-size: 32px;\"></i>
  2851. \t\t\t\t\t\t\t</div>
  2852. \t\t\t\t\t\t";
  2853.             } else {
  2854.                 // line 2250
  2855.                 yield "\t\t\t\t\t\t\t<div class=\"dropship-product-image-placeholder\" style=\"width: 100px; height: 100px; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999;\">
  2856. \t\t\t\t\t\t\t\t<i class=\"fas fa-image\" style=\"font-size: 32px;\"></i>
  2857. \t\t\t\t\t\t\t</div>
  2858. \t\t\t\t\t\t";
  2859.             }
  2860.             // line 2254
  2861.             yield "\t\t\t\t\t\t<div class=\"dropship-product-details\">
  2862. \t\t\t\t\t\t\t<h4>";
  2863.             // line 2255
  2864.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "name", [], "any", false, false, false, 2255), "html", null, true);
  2865.             yield "</h4>
  2866. \t\t\t\t\t\t\t<div class=\"dropship-product-price\">
  2867. \t\t\t\t\t\t\t\t<span class=\"price\">";
  2868.             // line 2257
  2869.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape($this->extensions['Twig\Extension\CoreExtension']->formatNumber(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "price", [], "any", false, false, false, 2257), 2, ",", " "), "html", null, true);
  2870.             yield "
  2871. \t\t\t\t\t\t\t\t\tHTG</span>
  2872. \t\t\t\t\t\t\t</div>
  2873. \t\t\t\t\t\t</div>
  2874. \t\t\t\t\t</div>
  2875. \t\t\t\t\t<div class=\"dropship-message\">
  2876. \t\t\t\t\t\t<p>
  2877. \t\t\t\t\t\t\t<strong>";
  2878.             // line 2264
  2879.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["dropshipReferral"] ?? null), "affiliateName", [], "any", false, false, false, 2264), "html", null, true);
  2880.             yield "</strong>
  2881. \t\t\t\t\t\t\tvous recommande ce produit. Souhaitez-vous l'ajouter à votre panier ?</p>
  2882. \t\t\t\t\t</div>
  2883. \t\t\t\t</div>
  2884. \t\t\t\t<div class=\"dropship-modal-footer\">
  2885. \t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" onclick=\"closeDropshipModal()\">
  2886. \t\t\t\t\t\tParcourir d'abord
  2887. \t\t\t\t\t</button>
  2888. \t\t\t\t\t<button type=\"button\" class=\"btn btn-primary dropship-add-to-cart\" onclick=\"addToCartFromDropship()\">
  2889. \t\t\t\t\t\t<i class=\"fas fa-shopping-cart\"></i>
  2890. \t\t\t\t\t\tAjouter au panier
  2891. \t\t\t\t\t</button>
  2892. \t\t\t\t</div>
  2893. \t\t\t</div>
  2894. \t\t</div>
  2896. \t\t<style>
  2897. \t\t\t.dropship-referral-modal {
  2898. \t\t\t\tposition: fixed;
  2899. \t\t\t\ttop: 0;
  2900. \t\t\t\tleft: 0;
  2901. \t\t\t\twidth: 100%;
  2902. \t\t\t\theight: 100%;
  2903. \t\t\t\tz-index: 10000;
  2904. \t\t\t\tdisplay: flex;
  2905. \t\t\t\talign-items: center;
  2906. \t\t\t\tjustify-content: center;
  2907. \t\t\t}
  2909. \t\t\t.dropship-modal-overlay {
  2910. \t\t\t\tposition: absolute;
  2911. \t\t\t\ttop: 0;
  2912. \t\t\t\tleft: 0;
  2913. \t\t\t\twidth: 100%;
  2914. \t\t\t\theight: 100%;
  2915. \t\t\t\tbackground: rgba(0, 0, 0, 0.6);
  2916. \t\t\t\tbackdrop-filter: blur(4px);
  2917. \t\t\t}
  2919. \t\t\t.dropship-modal-content {
  2920. \t\t\t\tposition: relative;
  2921. \t\t\t\tbackground: white;
  2922. \t\t\t\tborder-radius: 16px;
  2923. \t\t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  2924. \t\t\t\tmax-width: 500px;
  2925. \t\t\t\twidth: 90%;
  2926. \t\t\t\tmax-height: 90vh;
  2927. \t\t\t\toverflow-y: auto;
  2928. \t\t\t\tz-index: 10001;
  2929. \t\t\t\tanimation: dropshipModalSlideIn 0.3s ease-out;
  2930. \t\t\t}
  2932. \t\t\t@keyframes dropshipModalSlideIn {
  2933. \t\t\t\tfrom {
  2934. \t\t\t\t\topacity: 0;
  2935. \t\t\t\t\ttransform: translateY(-30px) scale(0.95);
  2936. \t\t\t\t}
  2937. \t\t\t\tto {
  2938. \t\t\t\t\topacity: 1;
  2939. \t\t\t\t\ttransform: translateY(0) scale(1);
  2940. \t\t\t\t}
  2941. \t\t\t}
  2943. \t\t\t.dropship-modal-close {
  2944. \t\t\t\tposition: absolute;
  2945. \t\t\t\ttop: 15px;
  2946. \t\t\t\tright: 15px;
  2947. \t\t\t\tbackground: none;
  2948. \t\t\t\tborder: none;
  2949. \t\t\t\tfont-size: 28px;
  2950. \t\t\t\tcolor: #666;
  2951. \t\t\t\tcursor: pointer;
  2952. \t\t\t\twidth: 35px;
  2953. \t\t\t\theight: 35px;
  2954. \t\t\t\tdisplay: flex;
  2955. \t\t\t\talign-items: center;
  2956. \t\t\t\tjustify-content: center;
  2957. \t\t\t\tborder-radius: 50%;
  2958. \t\t\t\ttransition: all 0.2s;
  2959. \t\t\t\tz-index: 10;
  2960. \t\t\t}
  2962. \t\t\t.dropship-modal-close:hover {
  2963. \t\t\t\tbackground: #f0f0f0;
  2964. \t\t\t\tcolor: #333;
  2965. \t\t\t}
  2967. \t\t\t.dropship-modal-header {
  2968. \t\t\t\tpadding: 30px 30px 20px;
  2969. \t\t\t\ttext-align: center;
  2970. \t\t\t\tborder-bottom: 1px solid #f0f0f0;
  2971. \t\t\t}
  2973. \t\t\t.dropship-icon {
  2974. \t\t\t\twidth: 70px;
  2975. \t\t\t\theight: 70px;
  2976. \t\t\t\tmargin: 0 auto 15px;
  2977. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff8c00 100%);
  2978. \t\t\t\tborder-radius: 50%;
  2979. \t\t\t\tdisplay: flex;
  2980. \t\t\t\talign-items: center;
  2981. \t\t\t\tjustify-content: center;
  2982. \t\t\t\tfont-size: 32px;
  2983. \t\t\t\tcolor: white;
  2984. \t\t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  2985. \t\t\t}
  2987. \t\t\t.dropship-modal-header h3 {
  2988. \t\t\t\tmargin: 0 0 8px;
  2989. \t\t\t\tfont-size: 22px;
  2990. \t\t\t\tfont-weight: 600;
  2991. \t\t\t\tcolor: #333;
  2992. \t\t\t}
  2994. \t\t\t.dropship-subtitle {
  2995. \t\t\t\tmargin: 0;
  2996. \t\t\t\tcolor: #666;
  2997. \t\t\t\tfont-size: 14px;
  2998. \t\t\t}
  3000. \t\t\t.dropship-modal-body {
  3001. \t\t\t\tpadding: 25px 30px;
  3002. \t\t\t}
  3004. \t\t\t.dropship-product-info {
  3005. \t\t\t\tdisplay: flex;
  3006. \t\t\t\tgap: 15px;
  3007. \t\t\t\tmargin-bottom: 20px;
  3008. \t\t\t\tpadding: 15px;
  3009. \t\t\t\tbackground: #f8f9fa;
  3010. \t\t\t\tborder-radius: 10px;
  3011. \t\t\t}
  3013. \t\t\t.dropship-product-image {
  3014. \t\t\t\twidth: 80px;
  3015. \t\t\t\theight: 80px;
  3016. \t\t\t\tobject-fit: cover;
  3017. \t\t\t\tborder-radius: 8px;
  3018. \t\t\t\tflex-shrink: 0;
  3019. \t\t\t}
  3021. \t\t\t.dropship-product-details {
  3022. \t\t\t\tflex: 1;
  3023. \t\t\t}
  3025. \t\t\t.dropship-product-details h4 {
  3026. \t\t\t\tmargin: 0 0 8px;
  3027. \t\t\t\tfont-size: 16px;
  3028. \t\t\t\tfont-weight: 600;
  3029. \t\t\t\tcolor: #333;
  3030. \t\t\t}
  3032. \t\t\t.dropship-product-price {
  3033. \t\t\t\tmargin-top: 5px;
  3034. \t\t\t}
  3036. \t\t\t.dropship-product-price .price {
  3037. \t\t\t\tfont-size: 20px;
  3038. \t\t\t\tfont-weight: 700;
  3039. \t\t\t\tcolor: #ffa200;
  3040. \t\t\t}
  3042. \t\t\t.dropship-message {
  3043. \t\t\t\tpadding: 15px;
  3044. \t\t\t\tbackground: #fff9e6;
  3045. \t\t\t\tborder-left: 4px solid #ffa200;
  3046. \t\t\t\tborder-radius: 6px;
  3047. \t\t\t}
  3049. \t\t\t.dropship-message p {
  3050. \t\t\t\tmargin: 0;
  3051. \t\t\t\tcolor: #666;
  3052. \t\t\t\tline-height: 1.6;
  3053. \t\t\t}
  3055. \t\t\t.dropship-modal-footer {
  3056. \t\t\t\tpadding: 20px 30px 30px;
  3057. \t\t\t\tdisplay: flex;
  3058. \t\t\t\tgap: 12px;
  3059. \t\t\t\tjustify-content: flex-end;
  3060. \t\t\t\tborder-top: 1px solid #f0f0f0;
  3061. \t\t\t}
  3063. \t\t\t.dropship-modal-footer .btn {
  3064. \t\t\t\tpadding: 12px 24px;
  3065. \t\t\t\tborder-radius: 8px;
  3066. \t\t\t\tfont-weight: 500;
  3067. \t\t\t\tborder: none;
  3068. \t\t\t\tcursor: pointer;
  3069. \t\t\t\ttransition: all 0.2s;
  3070. \t\t\t\tfont-size: 15px;
  3071. \t\t\t}
  3073. \t\t\t.dropship-modal-footer .btn-secondary {
  3074. \t\t\t\tbackground: #f0f0f0;
  3075. \t\t\t\tcolor: #666;
  3076. \t\t\t}
  3078. \t\t\t.dropship-modal-footer .btn-secondary:hover {
  3079. \t\t\t\tbackground: #e0e0e0;
  3080. \t\t\t}
  3082. \t\t\t.dropship-modal-footer .btn-primary {
  3083. \t\t\t\tbackground: #ffa200;
  3084. \t\t\t\tcolor: white;
  3085. \t\t\t}
  3087. \t\t\t.dropship-modal-footer .btn-primary:hover {
  3088. \t\t\t\tbackground: #e8910a;
  3089. \t\t\t\ttransform: translateY(-2px);
  3090. \t\t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.3);
  3091. \t\t\t}
  3093. \t\t\t.dropship-modal-footer .btn-primary:disabled {
  3094. \t\t\t\topacity: 0.6;
  3095. \t\t\t\tcursor: not-allowed;
  3096. \t\t\t\ttransform: none;
  3097. \t\t\t}
  3098. \t\t</style>
  3100. \t\t<script>
  3101. \t\t\t// Afficher le modal automatiquement au chargement de la page
  3102. document.addEventListener('DOMContentLoaded', function () {
  3103. const dropshipModal = document.getElementById('dropship-modal');
  3104. if (dropshipModal) {
  3105. setTimeout(function () {
  3106. dropshipModal.style.display = 'flex';
  3107. document.body.style.overflow = 'hidden';
  3108. }, 500); // Délai de 500ms pour une meilleure UX
  3109. }
  3110. });
  3112. function closeDropshipModal () {
  3113. const dropshipModal = document.getElementById('dropship-modal');
  3114. if (dropshipModal) {
  3115. dropshipModal.style.display = 'none';
  3116. document.body.style.overflow = 'auto';
  3117. }
  3118. }
  3120. function addToCartFromDropship () {
  3121. const addBtn = document.querySelector('.dropship-add-to-cart');
  3122. if (! addBtn) 
  3123. return;
  3127. // Désactiver le bouton pendant le traitement
  3128. addBtn.disabled = true;
  3129. addBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"></i> Ajout en cours...';
  3131. const productId = ";
  3132.             // line 2515
  3133.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["product"] ?? null), "id", [], "any", false, false, false, 2515), "html", null, true);
  3134.             yield ";
  3135. const qty = parseInt(document.getElementById('sst') ?. value || '1');
  3137. // Utiliser fetch pour ajouter au panier
  3138. fetch('";
  3139.             // line 2519
  3140.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("cart_add");
  3141.             yield "', {
  3142. method: 'POST',
  3143. headers: {
  3144. 'Content-Type': 'application/x-www-form-urlencoded',
  3145. 'X-Requested-With': 'XMLHttpRequest'
  3146. },
  3147. body: new URLSearchParams(
  3148. {productId: productId, qty: qty}
  3149. )
  3150. }).then(response => response.json()).then(data => {
  3151. if (data.ok) { // Afficher un message de succès
  3152. const modalBody = document.querySelector('.dropship-modal-body');
  3153. if (modalBody) {
  3154. modalBody.innerHTML = `
  3155. \t\t\t\t\t\t\t\t<div style=\"text-align: center; padding: 30px 20px;\">
  3156. \t\t\t\t\t\t\t\t\t<div style=\"width: 80px; height: 80px; margin: 0 auto 20px; background: #d4edda; border-radius: 50%; display: flex; align-items: center; justify-content: center;\">
  3157. \t\t\t\t\t\t\t\t\t\t<i class=\"fas fa-check\" style=\"font-size: 40px; color: #28a745;\"></i>
  3158. \t\t\t\t\t\t\t\t\t</div>
  3159. \t\t\t\t\t\t\t\t\t<h3 style=\"color: #28a745; margin-bottom: 10px;\">Produit ajouté avec succès !</h3>
  3160. \t\t\t\t\t\t\t\t\t<p style=\"color: #666; margin-bottom: 20px;\">Merci d'avoir utilisé le lien de recommandation de <strong>";
  3161.             // line 2538
  3162.             yield $this->env->getRuntime('Twig\Runtime\EscaperRuntime')->escape(CoreExtension::getAttribute($this->env, $this->source, ($context["dropshipReferral"] ?? null), "affiliateName", [], "any", false, false, false, 2538), "html", null, true);
  3163.             yield "</strong></p>
  3164. \t\t\t\t\t\t\t\t\t<p style=\"color: #666; font-size: 14px;\">Vous pouvez continuer vos achats ou aller directement au panier.</p>
  3165. \t\t\t\t\t\t\t\t</div>
  3166. \t\t\t\t\t\t\t`;
  3167. }
  3169. const modalFooter = document.querySelector('.dropship-modal-footer');
  3170. if (modalFooter) {
  3171. modalFooter.innerHTML = `
  3172. \t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" onclick=\"closeDropshipModal()\">
  3173. \t\t\t\t\t\t\t\t\tContinuer les achats
  3174. \t\t\t\t\t\t\t\t</button>
  3175. \t\t\t\t\t\t\t\t<a href=\"";
  3176.             // line 2550
  3177.             yield $this->extensions['Symfony\Bridge\Twig\Extension\RoutingExtension']->getPath("cart");
  3178.             yield "\" class=\"btn btn-primary\" style=\"text-decoration: none; display: inline-block;\">
  3179. \t\t\t\t\t\t\t\t\t<i class=\"fas fa-shopping-cart\"></i> Voir le panier
  3180. \t\t\t\t\t\t\t\t</a>
  3181. \t\t\t\t\t\t\t`;
  3182. }
  3184. // Mettre à jour le compteur du panier si présent
  3185. const cartCount = document.querySelector('.cart-count, .cart_count, [data-cart-count]');
  3186. if (cartCount) {
  3187. cartCount.textContent = data.totalQty || 0;
  3188. }
  3189. } else {
  3190. showCustomAlert('Erreur lors de l\\'ajout au panier. Veuillez réessayer.', 'error');
  3191. addBtn.disabled = false;
  3192. addBtn.innerHTML = '<i class=\"fas fa-shopping-cart\"></i> Ajouter au panier';
  3193. }
  3194. }).catch(error => {
  3195. console.error('Erreur:', error);
  3196. showCustomAlert('Une erreur est survenue. Veuillez réessayer.', 'error');
  3197. addBtn.disabled = false;
  3198. addBtn.innerHTML = '<i class=\"fas fa-shopping-cart\"></i> Ajouter au panier';
  3199. });
  3200. }
  3202. // Fermer le modal en cliquant sur l'overlay
  3203. document.addEventListener('DOMContentLoaded', function () {
  3204. const dropshipModal = document.getElementById('dropship-modal');
  3205. if (dropshipModal) {
  3206. const overlay = dropshipModal.querySelector('.dropship-modal-overlay');
  3207. if (overlay) {
  3208. overlay.addEventListener('click', function () {
  3209. closeDropshipModal();
  3210. });
  3211. }
  3212. }
  3213. });
  3214. \t\t</script>
  3215. \t";
  3216.         }
  3217.         // line 2588
  3218.         yield "
  3219. \t<!-- Le Modal personnalisé et showCustomAlert ont été déplacés dans base_home.html.twig pour une portée globale -->
  3220. \t<script>
  3221. \t\t// Remplacer window.alert par showCustomAlert
  3222. \t\twindow.alert = window.showCustomAlert || function(message) { console.log(\"Alert:\", message); };
  3223. \t</script>
  3224. ";
  3225.         
  3226.         $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof);
  3228.         
  3229.         $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof);
  3231.         yield from [];
  3232.     }
  3234.     /**
  3235.      * @codeCoverageIgnore
  3236.      */
  3237.     public function getTemplateName(): string
  3238.     {
  3239.         return "home/single-product.html.twig";
  3240.     }
  3242.     /**
  3243.      * @codeCoverageIgnore
  3244.      */
  3245.     public function isTraitable(): bool
  3246.     {
  3247.         return false;
  3248.     }
  3250.     /**
  3251.      * @codeCoverageIgnore
  3252.      */
  3253.     public function getDebugInfo(): array
  3254.     {
  3255.         return array (  3218 => 2588,  3177 => 2550,  3162 => 2538,  3140 => 2519,  3133 => 2515,  2879 => 2264,  2869 => 2257,  2864 => 2255,  2861 => 2254,  2855 => 2250,  2844 => 2245,  2842 => 2244,  2834 => 2239,  2820 => 2227,  2818 => 2226,  2811 => 2222,  2328 => 1741,  2227 => 1643,  1892 => 1310,  1877 => 1308,  1875 => 1307,  1872 => 1306,  1855 => 1305,  1842 => 1294,  1840 => 1293,  1747 => 1202,  1740 => 1198,  1737 => 1197,  1722 => 1184,  1712 => 1180,  1705 => 1179,  1701 => 1178,  1693 => 1172,  1691 => 1171,  1684 => 1166,  1677 => 1161,  1670 => 1157,  1665 => 1155,  1659 => 1151,  1657 => 1150,  1650 => 1145,  1646 => 1143,  1638 => 1139,  1626 => 1137,  1622 => 1136,  1619 => 1135,  1617 => 1134,  1611 => 1131,  1601 => 1124,  1597 => 1123,  1585 => 1113,  1578 => 1109,  1575 => 1108,  1559 => 1094,  1557 => 1093,  1547 => 1085,  1543 => 1083,  1537 => 1079,  1534 => 1078,  1524 => 1074,  1518 => 1071,  1514 => 1069,  1509 => 1068,  1506 => 1067,  1493 => 1056,  1490 => 1055,  1484 => 1051,  1478 => 1049,  1474 => 1047,  1472 => 1046,  1469 => 1045,  1467 => 1044,  1464 => 1043,  1462 => 1042,  1454 => 1036,  1451 => 1035,  1443 => 1030,  1436 => 1025,  1433 => 1024,  1427 => 1020,  1422 => 1018,  1419 => 1017,  1416 => 1016,  1411 => 1014,  1408 => 1013,  1405 => 1012,  1399 => 1010,  1397 => 1009,  1389 => 1003,  1386 => 1002,  1378 => 997,  1371 => 992,  1368 => 991,  1361 => 987,  1354 => 982,  1351 => 981,  1344 => 977,  1337 => 972,  1334 => 971,  1327 => 967,  1320 => 962,  1317 => 961,  1310 => 957,  1303 => 952,  1301 => 951,  1296 => 948,  1294 => 947,  1288 => 943,  1284 => 941,  1278 => 938,  1275 => 937,  1273 => 936,  1264 => 930,  1227 => 898,  1213 => 895,  1206 => 891,  1202 => 889,  1192 => 882,  1183 => 876,  1174 => 870,  1168 => 866,  1166 => 865,  1162 => 863,  1156 => 860,  1153 => 859,  1151 => 858,  1134 => 844,  1126 => 838,  1117 => 835,  1113 => 834,  1107 => 832,  1103 => 831,  1088 => 819,  1082 => 816,  1079 => 815,  1076 => 814,  1074 => 812,  1073 => 811,  1072 => 810,  1071 => 809,  1069 => 808,  1067 => 807,  1064 => 806,  1058 => 805,  1055 => 804,  1050 => 803,  1047 => 802,  1044 => 801,  1039 => 798,  1027 => 789,  1023 => 788,  1016 => 783,  1012 => 781,  1006 => 778,  1001 => 777,  999 => 776,  989 => 769,  983 => 766,  974 => 760,  963 => 752,  958 => 750,  948 => 743,  918 => 724,  909 => 717,  901 => 715,  893 => 713,  891 => 712,  879 => 702,  871 => 699,  866 => 698,  863 => 697,  842 => 694,  831 => 693,  813 => 692,  811 => 691,  776 => 658,  763 => 657,  106 => 9,  93 => 8,  78 => 4,  65 => 3,  42 => 1,);
  3256.     }
  3258.     public function getSourceContext(): Source
  3259.     {
  3260.         return new Source("{% extends 'base_home.html.twig' %}
  3262. {% block title %}
  3263. \t{{ product.name }}
  3264. \t| MaketOu
  3265. {% endblock %}
  3267. {% block stylesheets %}
  3268. \t<style>
  3269. \t\t/* Styles pour l'affichage de la boutique */
  3270. \t\t.shop-info {
  3271. \t\t\tpadding: 10px 0;
  3272. \t\t\tborder-bottom: 1px solid #f0f0f0;
  3273. \t\t\tmargin-bottom: 15px;
  3274. \t\t}
  3276. \t\t.shop-link {
  3277. \t\t\tcolor: #ffa200;
  3278. \t\t\ttext-decoration: none;
  3279. \t\t\tfont-weight: 500;
  3280. \t\t}
  3282. \t\t.shop-link:hover {
  3283. \t\t\tcolor: #e8910a;
  3284. \t\t\ttext-decoration: underline;
  3285. \t\t}
  3287. \t\t/* Styles pour les statistiques du produit */
  3288. \t\t.product-stats {
  3289. \t\t\tbackground: #f8f9fa;
  3290. \t\t\tpadding: 15px;
  3291. \t\t\tborder-radius: 8px;
  3292. \t\t\tborder: 1px solid #e9ecef;
  3293. \t\t}
  3295. \t\t.product-stats .stat-item {
  3296. \t\t\ttext-align: center;
  3297. \t\t}
  3299. \t\t.product-stats .stat-number {
  3300. \t\t\tdisplay: block;
  3301. \t\t\tfont-size: 1.2rem;
  3302. \t\t\tfont-weight: bold;
  3303. \t\t\tcolor: #ffa200;
  3304. \t\t}
  3306. \t\t.product-stats .stat-label {
  3307. \t\t\tcolor: #666;
  3308. \t\t\tfont-size: 0.8rem;
  3309. \t\t\ttext-transform: uppercase;
  3310. \t\t\tletter-spacing: 0.5px;
  3311. \t\t}
  3313. \t\t/* Message de confirmation */
  3314. \t\t#cart-message {
  3315. \t\t\tborder: none;
  3316. \t\t\tbackground: #d4edda;
  3317. \t\t\tcolor: #155724;
  3318. \t\t\tborder-radius: 6px;
  3319. \t\t\tpadding: 12px 16px;
  3320. \t\t\tmargin-top: 15px;
  3321. \t\t}
  3323. \t\t/* Amélioration des boutons d'actions */
  3324. \t\t.card_area {
  3325. \t\t\tmargin-top: 20px;
  3326. \t\t\tgap: 12px;
  3327. \t\t}
  3329. \t\t.card_area .primary-btn {
  3330. \t\t\tbackground: #ffa200;
  3331. \t\t\tborder: none;
  3332. \t\t\tpadding: 0 30px;
  3333. \t\t\theight: 50px;
  3334. \t\t\tdisplay: inline-flex;
  3335. \t\t\talign-items: center;
  3336. \t\t\tjustify-content: center;
  3337. \t\t\tborder-radius: 8px;
  3338. \t\t\tcolor: white;
  3339. \t\t\tfont-weight: 600;
  3340. \t\t\tfont-size: 16px;
  3341. \t\t\ttransition: all 0.3s ease;
  3342. \t\t\ttext-decoration: none;
  3343. \t\t\tgap: 8px;
  3344. \t\t\tflex: 1;
  3345. \t\t\tmax-width: 250px;
  3346. \t\t}
  3348. \t\t.card_area .primary-btn i {
  3349. \t\t\tfont-size: 20px;
  3350. \t\t}
  3352. \t\t.card_area .primary-btn:hover {
  3353. \t\t\tbackground: #e8910a;
  3354. \t\t\ttransform: translateY(-2px);
  3355. \t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  3356. \t\t\tcolor: white;
  3357. \t\t}
  3359. \t\t.card_area .icon_btn {
  3360. \t\t\tdisplay: inline-flex;
  3361. \t\t\talign-items: center;
  3362. \t\t\tjustify-content: center;
  3363. \t\t\twidth: 50px;
  3364. \t\t\theight: 50px;
  3365. \t\t\tborder-radius: 8px;
  3366. \t\t\tbackground: #fff;
  3367. \t\t\tcolor: #333;
  3368. \t\t\tborder: 1px solid #ddd;
  3369. \t\t\ttransition: all 0.3s ease;
  3370. \t\t\ttext-decoration: none;
  3371. \t\t}
  3373. \t\t.card_area .icon_btn i {
  3374. \t\t\tfont-size: 22px;
  3375. \t\t}
  3377. \t\t.card_area .icon_btn:hover {
  3378. \t\t\tbackground: #ffa200;
  3379. \t\t\tcolor: white;
  3380. \t\t\tborder-color: #ffa200;
  3381. \t\t\ttransform: translateY(-2px);
  3382. \t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.2);
  3383. \t\t}
  3385. \t\t/* Styles pour la galerie moderne de produits */
  3386. \t\t.product-gallery-modern {
  3387. \t\t\tdisplay: flex;
  3388. \t\t\tgap: 15px;
  3389. \t\t\tposition: relative;
  3390. \t\t\talign-items: stretch;
  3391. \t\t}
  3393. \t\t.thumbnails-container {
  3394. \t\t\tposition: relative;
  3395. \t\t\tdisplay: flex;
  3396. \t\t\tflex-direction: column;
  3397. \t\t\talign-items: center;
  3398. \t\t\twidth: 80px;
  3399. \t\t\tflex-shrink: 0;
  3400. \t\t\theight: auto;
  3401. \t\t}
  3403. \t\t/* Les boutons sont toujours visibles (meilleur pour le mobile et l'UX) */
  3404. \t\t.thumbnails-container .thumbnail-nav-btn {
  3405. \t\t\ttransition: all 0.2s ease;
  3406. \t\t}
  3408. \t\t.product-thumbnails {
  3409. \t\t\tdisplay: flex;
  3410. \t\t\tflex-direction: column;
  3411. \t\t\tgap: 10px;
  3412. \t\t\twidth: 100%;
  3413. \t\t\tflex: 1;
  3414. \t\t\toverflow: hidden;
  3415. \t\t\tposition: relative;
  3416. \t\t}
  3418. \t\t.thumbnails-wrapper {
  3419. \t\t\tdisplay: flex;
  3420. \t\t\tflex-direction: column;
  3421. \t\t\tgap: 10px;
  3422. \t\t\ttransition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  3423. \t\t\twill-change: transform;
  3424. \t\t}
  3426. \t\t.thumbnail-nav-btn {
  3427. \t\t\twidth: 30px;
  3428. \t\t\theight: 30px;
  3429. \t\t\tborder-radius: 50%;
  3430. \t\t\tbackground: white;
  3431. \t\t\tborder: 2px solid #e0e0e0;
  3432. \t\t\tdisplay: flex !important;
  3433. \t\t\talign-items: center;
  3434. \t\t\tjustify-content: center;
  3435. \t\t\tcursor: pointer;
  3436. \t\t\ttransition: all 0.3s ease;
  3437. \t\t\tmargin: 0;
  3438. \t\t\tpadding: 0;
  3439. \t\t\tcolor: #666;
  3440. \t\t\tz-index: 10;
  3441. \t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  3442. \t\t\tposition: relative;
  3443. \t\t\tflex-shrink: 0;
  3444. \t\t}
  3446. \t\t.thumbnail-nav-btn:hover {
  3447. \t\t\tbackground: #ffa200;
  3448. \t\t\tborder-color: #ffa200;
  3449. \t\t\tcolor: white;
  3450. \t\t\ttransform: scale(1.1);
  3451. \t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.3);
  3452. \t\t}
  3454. \t\t.thumbnail-nav-btn:active {
  3455. \t\t\ttransform: scale(0.95);
  3456. \t\t}
  3458. \t\t.thumbnail-nav-btn.disabled {
  3459. \t\t\topacity: 0.3;
  3460. \t\t\tcursor: not-allowed;
  3461. \t\t\tpointer-events: none;
  3462. \t\t\tfilter: grayscale(1);
  3463. \t\t}
  3465. \t\t.thumbnail-nav-btn i {
  3466. \t\t\tfont-size: 20px;
  3467. \t\t\tfont-weight: bold;
  3468. \t\t}
  3470. \t\t.thumbnail-item {
  3471. \t\t\twidth: 80px;
  3472. \t\t\theight: 80px;
  3473. \t\t\tmin-width: 80px;
  3474. \t\t\tmin-height: 80px;
  3475. \t\t\tmax-width: 80px;
  3476. \t\t\tmax-height: 80px;
  3477. \t\t\tborder: 2px solid #e0e0e0;
  3478. \t\t\tborder-radius: 8px;
  3479. \t\t\toverflow: hidden;
  3480. \t\t\tcursor: pointer;
  3481. \t\t\ttransition: border-color 0.3s ease, border-width 0.3s ease, box-shadow 0.3s ease;
  3482. \t\t\tposition: relative;
  3483. \t\t\tbackground: #fff;
  3484. \t\t\tborder-bottom: 2px solid #e0e0e0;
  3485. \t\t\tflex-shrink: 0;
  3486. \t\t}
  3488. \t\t.thumbnail-item:hover {
  3489. \t\t\tborder-color: #ffa200;
  3490. \t\t\tborder-bottom-color: #ffa200;
  3491. \t\t\tborder-width: 3px;
  3492. \t\t\tbox-shadow: 0 0 0 2px rgba(255, 162, 0, 0.2);
  3493. \t\t}
  3495. \t\t.thumbnail-item.active {
  3496. \t\t\tborder-color: #ffa200 !important;
  3497. \t\t\tborder-bottom-color: #ffa200 !important;
  3498. \t\t\tborder-width: 3px !important;
  3499. \t\t\tbox-shadow: 0 0 0 2px rgba(255, 162, 0, 0.2) !important;
  3500. \t\t}
  3502. \t\t.thumbnail-item::after,
  3503. \t\t.thumbnail-item::before {
  3504. \t\t\tdisplay: none !important;
  3505. \t\t\tcontent: none !important;
  3506. \t\t}
  3508. \t\t.thumbnail-item img {
  3509. \t\t\twidth: 100%;
  3510. \t\t\theight: 100%;
  3511. \t\t\tobject-fit: cover;
  3512. \t\t\ttransition: transform 0.3s ease;
  3513. \t\t}
  3515. \t\t.thumbnail-item:hover img {
  3516. \t\t\ttransform: scale(1.1);
  3517. \t\t}
  3519. \t\t.thumbnail-item.active img {
  3520. \t\t\ttransform: scale(1.1);
  3521. \t\t}
  3523. \t\t.product-main-image-wrapper {
  3524. \t\t\tflex: 1;
  3525. \t\t\tposition: relative;
  3526. \t\t\tbackground: #fff;
  3527. \t\t\tborder-radius: 12px;
  3528. \t\t\toverflow: hidden;
  3529. \t\t\tborder: 1px solid #e0e0e0;
  3530. \t\t\tcursor: crosshair;
  3531. \t\t}
  3533. \t\t.product-main-image {
  3534. \t\t\tposition: relative;
  3535. \t\t\twidth: 100%;
  3536. \t\t\tpadding-top: 100%;
  3537. \t\t\toverflow: hidden;
  3538. \t\t\tbackground: #f8f9fa;
  3539. \t\t}
  3541. \t\t.product-main-image img {
  3542. \t\t\tposition: absolute;
  3543. \t\t\ttop: 0;
  3544. \t\t\tleft: 0;
  3545. \t\t\twidth: 100%;
  3546. \t\t\theight: 100%;
  3547. \t\t\tobject-fit: contain;
  3548. \t\t\ttransition: transform 0.15s ease-out;
  3549. \t\t\ttransform-origin: center center;
  3550. \t\t}
  3552. \t\t/* Supprimer le scale basique, géré en JS */
  3553. \t\t/* .product-main-image:hover img {
  3554. \t\t\ttransform: scale(1.05);
  3555. \t\t} */
  3557. \t\t.image-overlay-icons {
  3558. \t\t\tposition: absolute;
  3559. \t\t\ttop: 15px;
  3560. \t\t\tright: 15px;
  3561. \t\t\tdisplay: flex;
  3562. \t\t\tflex-direction: column;
  3563. \t\t\tgap: 10px;
  3564. \t\t\tz-index: 20;
  3565. \t\t\tpointer-events: none;
  3566. \t\t}
  3568. \t\t.icon-btn {
  3569. \t\t\tpointer-events: all;
  3570. \t\t\twidth: 45px;
  3571. \t\t\theight: 45px;
  3572. \t\t\tborder-radius: 50%;
  3573. \t\t\tbackground: rgba(255, 255, 255, 0.95);
  3574. \t\t\tborder: none;
  3575. \t\t\tdisplay: flex;
  3576. \t\t\talign-items: center;
  3577. \t\t\tjustify-content: center;
  3578. \t\t\tpadding: 0;
  3579. \t\t\tcursor: pointer;
  3580. \t\t\ttransition: all 0.3s ease;
  3581. \t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  3582. \t\t\tcolor: #333;
  3583. \t\t}
  3585. \t\t.icon-btn:hover {
  3586. \t\t\tbackground: #ffa200;
  3587. \t\t\tcolor: white;
  3588. \t\t\ttransform: scale(1.1);
  3589. \t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.4);
  3590. \t\t}
  3592. \t\t.icon-btn i {
  3593. \t\t\tfont-size: 18px;
  3594. \t\t}
  3596. \t\t.favorite-btn.active {
  3597. \t\t\tbackground: #ff6b6b;
  3598. \t\t\tcolor: white;
  3599. \t\t}
  3601. \t\t.image-counter {
  3602. \t\t\tposition: absolute;
  3603. \t\t\tbottom: 15px;
  3604. \t\t\tright: 15px;
  3605. \t\t\tbackground: rgba(0, 0, 0, 0.7);
  3606. \t\t\tcolor: white;
  3607. \t\t\tpadding: 6px 12px;
  3608. \t\t\tborder-radius: 20px;
  3609. \t\t\tfont-size: 13px;
  3610. \t\t\tfont-weight: 600;
  3611. \t\t}
  3613. \t\t/* Modal de zoom d'image avec transitions modernes */
  3614. \t\t.image-zoom-modal {
  3615. \t\t\tdisplay: none;
  3616. \t\t\tposition: fixed;
  3617. \t\t\tz-index: 9999;
  3618. \t\t\tleft: 0;
  3619. \t\t\ttop: 0;
  3620. \t\t\twidth: 100%;
  3621. \t\t\theight: 100%;
  3622. \t\t\tbackground: rgba(0, 0, 0, 0);
  3623. \t\t\toverflow: auto;
  3624. \t\t\topacity: 0;
  3625. \t\t\ttransition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
  3626. \t\t\tbackdrop-filter: blur(0px);
  3627. \t\t}
  3629. \t\t.image-zoom-modal.active {
  3630. \t\t\tdisplay: flex;
  3631. \t\t\talign-items: center;
  3632. \t\t\tjustify-content: center;
  3633. \t\t\topacity: 1;
  3634. \t\t\tbackground: rgba(0, 0, 0, 0.95);
  3635. \t\t\tbackdrop-filter: blur(10px);
  3636. \t\t}
  3638. \t\t.zoom-modal-content {
  3639. \t\t\tposition: relative;
  3640. \t\t\tmax-width: 90%;
  3641. \t\t\tmax-height: 90%;
  3642. \t\t\tmargin: auto;
  3643. \t\t\topacity: 0;
  3644. \t\t\ttransform: scale(0.8);
  3645. \t\t\ttransition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  3646. \t\t}
  3648. \t\t.image-zoom-modal.active .zoom-modal-content {
  3649. \t\t\topacity: 1;
  3650. \t\t\ttransform: scale(1);
  3651. \t\t}
  3653. \t\t.zoom-modal-content img {
  3654. \t\t\twidth: 100%;
  3655. \t\t\theight: auto;
  3656. \t\t\tmax-height: 90vh;
  3657. \t\t\tobject-fit: contain;
  3658. \t\t\tborder-radius: 8px;
  3659. \t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  3660. \t\t\topacity: 0;
  3661. \t\t\ttransition: opacity 0.3s ease;
  3662. \t\t}
  3664. \t\t.zoom-modal-content img.loaded {
  3665. \t\t\topacity: 1;
  3666. \t\t}
  3668. \t\t/* Loader moderne */
  3669. \t\t.zoom-loader {
  3670. \t\t\tposition: absolute;
  3671. \t\t\ttop: 50%;
  3672. \t\t\tleft: 50%;
  3673. \t\t\ttransform: translate(-50%, -50%);
  3674. \t\t\tz-index: 1;
  3675. \t\t\tdisplay: flex;
  3676. \t\t\tflex-direction: column;
  3677. \t\t\talign-items: center;
  3678. \t\t\tjustify-content: center;
  3679. \t\t}
  3681. \t\t.zoom-loader-spinner {
  3682. \t\t\twidth: 60px;
  3683. \t\t\theight: 60px;
  3684. \t\t\tborder: 4px solid rgba(255, 255, 255, 0.1);
  3685. \t\t\tborder-top-color: #ffa200;
  3686. \t\t\tborder-radius: 50%;
  3687. \t\t\tanimation: spin 1s linear infinite;
  3688. \t\t}
  3690. \t\t@keyframes spin {
  3691. \t\t\tto {
  3692. \t\t\t\ttransform: rotate(360deg);
  3693. \t\t\t}
  3694. \t\t}
  3696. \t\t.zoom-loader-text {
  3697. \t\t\tcolor: white;
  3698. \t\t\tmargin-top: 15px;
  3699. \t\t\ttext-align: center;
  3700. \t\t\tfont-size: 14px;
  3701. \t\t\tfont-weight: 500;
  3702. \t\t}
  3704. \t\t.close-zoom {
  3705. \t\t\tposition: absolute;
  3706. \t\t\ttop: 30px;
  3707. \t\t\tright: 30px;
  3708. \t\t\tcolor: white;
  3709. \t\t\tfont-size: 32px;
  3710. \t\t\tfont-weight: 300;
  3711. \t\t\tcursor: pointer;
  3712. \t\t\tz-index: 10000;
  3713. \t\t\twidth: 50px;
  3714. \t\t\theight: 50px;
  3715. \t\t\tdisplay: flex;
  3716. \t\t\talign-items: center;
  3717. \t\t\tjustify-content: center;
  3718. \t\t\tbackground: rgba(255, 255, 255, 0.1);
  3719. \t\t\tborder: 2px solid rgba(255, 255, 255, 0.2);
  3720. \t\t\tborder-radius: 50%;
  3721. \t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  3722. \t\t\topacity: 0;
  3723. \t\t\ttransform: scale(0.8);
  3724. \t\t}
  3726. \t\t.image-zoom-modal.active .close-zoom {
  3727. \t\t\topacity: 1;
  3728. \t\t\ttransform: scale(1);
  3729. \t\t\ttransition-delay: 0.2s;
  3730. \t\t}
  3732. \t\t.close-zoom:hover {
  3733. \t\t\tbackground: rgba(255, 162, 0, 0.9);
  3734. \t\t\tborder-color: #ffa200;
  3735. \t\t\ttransform: scale(1.1) rotate(90deg);
  3736. \t\t\tbox-shadow: 0 4px 20px rgba(255, 162, 0, 0.4);
  3737. \t\t}
  3739. \t\t/* Boutons de navigation sur l'image principale */
  3740. \t\t.main-image-nav {
  3741. \t\t\tposition: absolute;
  3742. \t\t\ttop: 0;
  3743. \t\t\tbottom: 0;
  3744. \t\t\tleft: 0;
  3745. \t\t\tright: 0;
  3746. \t\t\tdisplay: flex;
  3747. \t\t\talign-items: center;
  3748. \t\t\tjustify-content: space-between;
  3749. \t\t\tpadding: 0 15px;
  3750. \t\t\tpointer-events: none;
  3751. \t\t\tz-index: 15;
  3752. \t\t}
  3753. \t\t.main-image-nav-btn {
  3754. \t\t\tpointer-events: all;
  3755. \t\t\twidth: 44px;
  3756. \t\t\theight: 44px;
  3757. \t\t\tborder-radius: 50%;
  3758. \t\t\tbackground: rgba(255, 255, 255, 0.95);
  3759. \t\t\tborder: 2px solid #e0e0e0;
  3760. \t\t\tdisplay: flex;
  3761. \t\t\talign-items: center;
  3762. \t\t\tjustify-content: center;
  3763. \t\t\tpadding: 0;
  3764. \t\t\tbox-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  3765. \t\t\tcolor: #333;
  3766. \t\t\ttransition: all 0.2s ease;
  3767. \t\t}
  3768. \t\t.main-image-nav-btn:hover {
  3769. \t\t\tbackground: #ffa200;
  3770. \t\t\tborder-color: #ffa200;
  3771. \t\t\tcolor: #fff;
  3772. \t\t\ttransform: scale(1.08);
  3773. \t\t}
  3774. \t\t.main-image-nav-btn:active {
  3775. \t\t\ttransform: scale(0.95);
  3776. \t\t}
  3778. \t\t/* Modal personnalisé pour remplacer les alert */
  3779. \t\t.custom-alert-modal .modal-content {
  3780. \t\t\tborder-radius: 12px;
  3781. \t\t\tborder: none;
  3782. \t\t\tbox-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  3783. \t\t}
  3785. \t\t.custom-alert-modal .modal-header {
  3786. \t\t\tborder-bottom: none;
  3787. \t\t\tpadding: 1.5rem 1.5rem 0.5rem;
  3788. \t\t\tbackground: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  3789. \t\t\tcolor: white;
  3790. \t\t\tborder-radius: 12px 12px 0 0;
  3791. \t\t}
  3793. \t\t.custom-alert-modal .modal-header .btn-close {
  3794. \t\t\tfilter: brightness(0) invert(1);
  3795. \t\t\topacity: 0.8;
  3796. \t\t}
  3798. \t\t.custom-alert-modal .modal-header .btn-close:hover {
  3799. \t\t\topacity: 1;
  3800. \t\t}
  3802. \t\t.custom-alert-modal .modal-body {
  3803. \t\t\tpadding: 1.5rem;
  3804. \t\t\ttext-align: center;
  3805. \t\t}
  3807. \t\t.custom-alert-modal .modal-body .alert-icon {
  3808. \t\t\tfont-size: 3rem;
  3809. \t\t\tmargin-bottom: 1rem;
  3810. \t\t}
  3812. \t\t.custom-alert-modal .modal-body .alert-icon.success {
  3813. \t\t\tcolor: #28a745;
  3814. \t\t}
  3816. \t\t.custom-alert-modal .modal-body .alert-icon.error {
  3817. \t\t\tcolor: #dc3545;
  3818. \t\t}
  3820. \t\t.custom-alert-modal .modal-body .alert-icon.warning {
  3821. \t\t\tcolor: #ffc107;
  3822. \t\t}
  3824. \t\t.custom-alert-modal .modal-body .alert-icon.info {
  3825. \t\t\tcolor: #17a2b8;
  3826. \t\t}
  3828. \t\t.custom-alert-modal .modal-body .alert-message {
  3829. \t\t\tfont-size: 1.1rem;
  3830. \t\t\tcolor: #333;
  3831. \t\t\tmargin-bottom: 1rem;
  3832. \t\t\tline-height: 1.6;
  3833. \t\t}
  3835. \t\t.custom-alert-modal .modal-footer {
  3836. \t\t\tborder-top: none;
  3837. \t\t\tpadding: 0.5rem 1.5rem 1.5rem;
  3838. \t\t\tjustify-content: center;
  3839. \t\t}
  3841. \t\t.custom-alert-modal .modal-footer .btn {
  3842. \t\t\tmin-width: 120px;
  3843. \t\t\tpadding: 0.6rem 1.5rem;
  3844. \t\t\tborder-radius: 8px;
  3845. \t\t\tfont-weight: 500;
  3846. \t\t}
  3848. \t\t/* Responsive pour single-product */
  3849. \t\t@media(max-width: 991.98px) {
  3850. \t\t\t.product-gallery-modern {
  3851. \t\t\t\tflex-direction: column;
  3852. \t\t\t}
  3854. \t\t\t.thumbnails-container {
  3855. \t\t\t\tflex-direction: row;
  3856. \t\t\t\twidth: 100%;
  3857. \t\t\t\toverflow-x: auto;
  3858. \t\t\t\tpadding: 10px 0;
  3859. \t\t\t}
  3861. \t\t\t.thumbnail-item {
  3862. \t\t\t\tflex-shrink: 0;
  3863. \t\t\t}
  3865. \t\t\t.main-image-container {
  3866. \t\t\t\twidth: 100%;
  3867. \t\t\t}
  3868. \t\t}
  3870. \t\t@media(max-width: 768px) {
  3871. \t\t\t.product-gallery-modern {
  3872. \t\t\t\tflex-direction: column;
  3873. \t\t\t}
  3875. \t\t\t.thumbnails-container {
  3876. \t\t\t\twidth: 100%;
  3877. \t\t\t\tflex-direction: row;
  3878. \t\t\t\talign-items: center;
  3879. \t\t\t}
  3881. \t\t\t.product-thumbnails {
  3882. \t\t\t\tflex-direction: row;
  3883. \t\t\t\twidth: 100%;
  3884. \t\t\t\tmax-height: 100px;
  3885. \t\t\t\toverflow-x: auto;
  3886. \t\t\t\toverflow-y: hidden;
  3887. \t\t\t}
  3889. \t\t\t.thumbnail-item {
  3890. \t\t\t\tflex-shrink: 0;
  3891. \t\t\t}
  3893. \t\t\t.thumbnail-nav-btn {
  3894. \t\t\t\tmargin: 0 5px;
  3895. \t\t\t}
  3897. \t\t\t.thumbnail-nav-up {
  3898. \t\t\t\torder: 1;
  3899. \t\t\t}
  3901. \t\t\t.product-thumbnails {
  3902. \t\t\t\torder: 2;
  3903. \t\t\t}
  3905. \t\t\t.thumbnail-nav-down {
  3906. \t\t\t\torder: 3;
  3907. \t\t\t}
  3909. \t\t\t.image-overlay-icons {
  3910. \t\t\t\topacity: 1;
  3911. \t\t\t}
  3912. \t\t}
  3913. \t</style>
  3914. {% endblock %}
  3916. {% block body %}
  3917. \t<!-- Start Banner Area -->
  3918. \t<section class=\"banner-area organic-breadcrumb\">
  3919. \t\t<div class=\"container\">
  3920. \t\t\t<div class=\"breadcrumb-banner d-flex flex-wrap align-items-center justify-content-end\">
  3921. \t\t\t\t<div class=\"col-first\">
  3922. \t\t\t\t\t<h1>Product Details Page</h1>
  3923. \t\t\t\t\t<nav class=\"d-flex align-items-center\">
  3924. \t\t\t\t\t\t<a href=\"index.html\">Home<span class=\"lnr lnr-arrow-right\"></span>
  3925. \t\t\t\t\t\t</a>
  3926. \t\t\t\t\t\t<a href=\"#\">Shop<span class=\"lnr lnr-arrow-right\"></span>
  3927. \t\t\t\t\t\t</a>
  3928. \t\t\t\t\t\t<a href=\"single-product.html\">product-details</a>
  3929. \t\t\t\t\t</nav>
  3930. \t\t\t\t</div>
  3931. \t\t\t</div>
  3932. \t\t</div>
  3933. \t</section>
  3934. \t<!-- End Banner Area -->
  3936. \t<!--================Single Product Area =================-->
  3937. \t<div class=\"product_image_area\">
  3938. \t\t<div class=\"container\">
  3939. \t\t\t<div class=\"row s_product_inner\">
  3940. \t\t\t\t<div class=\"col-lg-6\">
  3941. \t\t\t\t\t<div
  3942. \t\t\t\t\t\tclass=\"product-gallery-modern\">
  3943. \t\t\t\t\t\t<!-- Colonne de miniatures à gauche avec navigation -->
  3944. \t\t\t\t\t\t<div class=\"thumbnails-container\">
  3945. \t\t\t\t\t\t\t<button class=\"thumbnail-nav-btn thumbnail-nav-up\" id=\"thumbnail-nav-up\" title=\"Image précédente\">
  3946. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-up\"></i>
  3947. \t\t\t\t\t\t\t</button>
  3948. \t\t\t\t\t\t\t<div class=\"product-thumbnails\" id=\"product-thumbnails\">
  3949. \t\t\t\t\t\t\t\t<div class=\"thumbnails-wrapper\" id=\"thumbnails-wrapper\">
  3950. \t\t\t\t\t\t\t\t\t{% if product.images is defined and product.images|length > 0 %}
  3951. \t\t\t\t\t\t\t\t\t\t{% for img in product.images %}
  3952. \t\t\t\t\t\t\t\t\t\t\t<div class=\"thumbnail-item {% if loop.first %}active permanently-active{% endif %}\" data-image=\"{{ asset(img) }}\" data-index=\"{{ loop.index0 }}\">
  3953. \t\t\t\t\t\t\t\t\t\t\t\t<img src=\"{{ asset(img) }}\" alt=\"{{ product.name }} - Image {{ loop.index }}\">
  3954. \t\t\t\t\t\t\t\t\t\t\t</div>
  3955. \t\t\t\t\t\t\t\t\t\t{% endfor %}
  3956. \t\t\t\t\t\t\t\t\t{% else %}
  3957. \t\t\t\t\t\t\t\t\t\t<div class=\"thumbnail-item active permanently-active\" data-image=\"{{ asset('ui/img/category/s-p1.jpg') }}\" data-index=\"0\">
  3958. \t\t\t\t\t\t\t\t\t\t\t<img src=\"{{ asset('ui/img/category/s-p1.jpg') }}\" alt=\"{{ product.name }}\">
  3959. \t\t\t\t\t\t\t\t\t\t</div>
  3960. \t\t\t\t\t\t\t\t\t{% endif %}
  3961. \t\t\t\t\t\t\t\t</div>
  3962. \t\t\t\t\t\t\t</div>
  3963. \t\t\t\t\t\t\t<button class=\"thumbnail-nav-btn thumbnail-nav-down\" id=\"thumbnail-nav-down\" title=\"Image suivante\">
  3964. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-down\"></i>
  3965. \t\t\t\t\t\t\t</button>
  3966. \t\t\t\t\t\t</div>
  3968. \t\t\t\t\t\t<!-- Grande image principale -->
  3969. \t\t\t\t\t\t<div class=\"product-main-image-wrapper\">
  3970. \t\t\t\t\t\t\t<div class=\"product-main-image\">
  3971. \t\t\t\t\t\t\t\t{% if product.images is defined and product.images|length > 0 %}
  3972. \t\t\t\t\t\t\t\t\t<img id=\"main-product-image\" src=\"{{ asset(product.images[0]) }}\" alt=\"{{ product.name }}\">
  3973. \t\t\t\t\t\t\t\t{% else %}
  3974. \t\t\t\t\t\t\t\t\t<img id=\"main-product-image\" src=\"{{ asset('ui/img/category/s-p1.jpg') }}\" alt=\"{{ product.name }}\">
  3975. \t\t\t\t\t\t\t\t{% endif %}
  3976. \t\t\t\t\t\t\t</div>
  3978. \t\t\t\t\t\t\t<!-- Overlay avec icônes -->
  3979. \t\t\t\t\t\t\t<div class=\"image-overlay-icons\">
  3980. \t\t\t\t\t\t\t\t<button class=\"icon-btn zoom-btn\" onclick=\"openImageZoom()\" title=\"Agrandir l'image\">
  3981. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-magnifier\"></i>
  3982. \t\t\t\t\t\t\t\t</button>
  3983. \t\t\t\t\t\t\t\t<button class=\"icon-btn favorite-btn\" {% if app.user %} onclick=\"toggleWishlist({{ product.id }}, this); return false;\" {% else %} onclick=\"showCustomAlert('Vous devez être connecté pour ajouter aux favoris', 'warning'); return false;\" {% endif %} title=\"Ajouter aux favoris\" data-product-id=\"{{ product.id }}\">
  3984. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-heart\"></i>
  3985. \t\t\t\t\t\t\t\t</button>
  3986. \t\t\t\t\t\t\t</div>
  3988. \t\t\t\t\t\t\t<!-- Navigation sur l'image principale -->
  3989. \t\t\t\t\t\t\t<div class=\"main-image-nav\">
  3990. \t\t\t\t\t\t\t\t<button type=\"button\" class=\"main-image-nav-btn\" id=\"main-image-prev\" title=\"Image précédente\">
  3991. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-left\"></i>
  3992. \t\t\t\t\t\t\t\t</button>
  3993. \t\t\t\t\t\t\t\t<button type=\"button\" class=\"main-image-nav-btn\" id=\"main-image-next\" title=\"Image suivante\">
  3994. \t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-right\"></i>
  3995. \t\t\t\t\t\t\t\t</button>
  3996. \t\t\t\t\t\t\t</div>
  3998. \t\t\t\t\t\t\t<!-- Indicateur d'image active -->
  3999. \t\t\t\t\t\t\t<div class=\"image-counter\">
  4000. \t\t\t\t\t\t\t\t<span id=\"current-image-index\">1</span>
  4001. \t\t\t\t\t\t\t\t/
  4002. \t\t\t\t\t\t\t\t<span id=\"total-images\">{{ (product.images|length) ?: 1 }}</span>
  4003. \t\t\t\t\t\t\t</div>
  4004. \t\t\t\t\t\t</div>
  4005. \t\t\t\t\t</div>
  4006. \t\t\t\t</div>
  4007. \t\t\t\t<div class=\"col-lg-5 offset-lg-1\">
  4008. \t\t\t\t\t<div class=\"s_product_text\">
  4009. \t\t\t\t\t\t<h3>{{ product.name }}</h3>
  4010. \t\t\t\t\t\t<h2>
  4011. \t\t\t\t\t\t\t<span id=\"main-unit-price\">{{ product.price|number_format(2, '.', ' ') }}</span>
  4012. \t\t\t\t\t\t\tHTG
  4013. \t\t\t\t\t\t</h2>
  4014. \t\t\t\t\t\t<ul class=\"list\">
  4015. \t\t\t\t\t\t\t<li>
  4016. \t\t\t\t\t\t\t\t<a class=\"active\" href=\"#\">
  4017. \t\t\t\t\t\t\t\t\t<span>Category</span>
  4018. \t\t\t\t\t\t\t\t\t:
  4019. \t\t\t\t\t\t\t\t\t{{ product.category.name }}</a>
  4020. \t\t\t\t\t\t\t</li>
  4021. \t\t\t\t\t\t\t<li>
  4022. \t\t\t\t\t\t\t\t<a href=\"#\">
  4023. \t\t\t\t\t\t\t\t\t<span>Disponibilité</span>
  4024. \t\t\t\t\t\t\t\t\t:
  4025. \t\t\t\t\t\t\t\t\t{{ product.stockStatus }}</a>
  4026. \t\t\t\t\t\t\t</li>
  4027. \t\t\t\t\t\t</ul>
  4028. \t\t\t\t\t\t<p>{{ product.description|raw|striptags|nl2br }}</p>
  4030. \t\t\t\t\t\t<!-- Informations sur la boutique -->
  4031. \t\t\t\t\t\t<div class=\"shop-info mb-3\">
  4032. \t\t\t\t\t\t\t<small class=\"text-muted\">
  4033. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-store\"></i>
  4034. \t\t\t\t\t\t\t\tVendu par :
  4035. \t\t\t\t\t\t\t\t{% if product.shop is defined and product.shop %}
  4036. \t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_shop_show', {'slug': product.shop.slug}) }}\" class=\"shop-link\">
  4037. \t\t\t\t\t\t\t\t\t\t{{ product.shop.name }}
  4038. \t\t\t\t\t\t\t\t\t</a>
  4039. \t\t\t\t\t\t\t\t{% else %}
  4040. \t\t\t\t\t\t\t\t\t<span class=\"text-muted\">Boutique inconnue</span>
  4041. \t\t\t\t\t\t\t\t{% endif %}
  4042. \t\t\t\t\t\t\t</small>
  4043. \t\t\t\t\t\t</div>
  4045. \t\t\t\t\t\t<div class=\"product_count\">
  4046. \t\t\t\t\t\t\t<label for=\"qty\">Quantité :</label>
  4047. \t\t\t\t\t\t\t<input type=\"text\" name=\"qty\" id=\"sst\" maxlength=\"12\" value=\"1\" title=\"Quantité:\" class=\"input-text qty\" max=\"{{ product.stock ?? 99 }}\">
  4048. \t\t\t\t\t\t\t<button onclick=\"var result = document.getElementById('sst'); var sst = result.value; if( !isNaN( sst ) && sst < {{ product.stock ?? 99 }}) result.value++;return false;\" class=\"increase items-count\" type=\"button\">
  4049. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-up\"></i>
  4050. \t\t\t\t\t\t\t</button>
  4051. \t\t\t\t\t\t\t<button onclick=\"var result = document.getElementById('sst'); var sst = result.value; if( !isNaN( sst ) && sst > 1 ) result.value--;return false;\" class=\"reduced items-count\" type=\"button\">
  4052. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-chevron-down\"></i>
  4053. \t\t\t\t\t\t\t</button>
  4054. \t\t\t\t\t\t</div>
  4056. \t\t\t\t\t\t<input
  4057. \t\t\t\t\t\ttype=\"hidden\" id=\"unit-price-input\" value=\"{{ product.price|number_format(2, '.', '') }}\"/>
  4059. \t\t\t\t\t\t{# Prix de gros (bulk pricing) #}
  4060. \t\t\t\t\t\t{% set tierPrices = [] %}
  4061. \t\t\t\t\t\t{% if product.tierPrices is defined and product.tierPrices|length > 0 %}
  4062. \t\t\t\t\t\t\t{% for tier in product.tierPrices %}
  4063. \t\t\t\t\t\t\t\t{% set tierPrices = tierPrices|merge([{ 'min': tier.minQty, 'price': tier.price }]) %}
  4064. \t\t\t\t\t\t\t{% endfor %}
  4065. \t\t\t\t\t\t{% else %}
  4066. \t\t\t\t\t\t\t{# Facultatif: exemple si pas de data backend #}
  4067. \t\t\t\t\t\t\t{% set tierPrices = [
  4068. \t\t\t\t\t\t\t\t{ 'min': 1, 'price': product.price },
  4069. \t\t\t\t\t\t\t\t{ 'min': 5, 'price': (product.price * 0.98)|round(2, 'floor') },
  4070. \t\t\t\t\t\t\t\t{ 'min': 10, 'price': (product.price * 0.95)|round(2, 'floor') },
  4071. \t\t\t\t\t\t\t\t{ 'min': 20, 'price': (product.price * 0.92)|round(2, 'floor') }
  4072. \t\t\t\t\t\t\t] %}
  4073. \t\t\t\t\t\t{% endif %}
  4075. \t\t\t\t\t\t<div id=\"bulk-pricing\" class=\"mt-3\" data-tiers='{{ tierPrices|json_encode|e('html_attr') }}'>
  4076. \t\t\t\t\t\t\t<div class=\"d-flex align-items-center mb-2\">
  4077. \t\t\t\t\t\t\t\t<strong class=\"me-2\">Prix unitaire selon quantité :</strong>
  4078. \t\t\t\t\t\t\t\t<span id=\"unit-price-value\">{{ product.price|number_format(2, '.', ' ') }}
  4079. \t\t\t\t\t\t\t\t\tHTG</span>
  4080. \t\t\t\t\t\t\t</div>
  4081. \t\t\t\t\t\t\t<div class=\"table-responsive\">
  4082. \t\t\t\t\t\t\t\t<table class=\"table table-sm mb-2\" style=\"border:1px solid #eee;\">
  4083. \t\t\t\t\t\t\t\t\t<thead class=\"table-light\">
  4084. \t\t\t\t\t\t\t\t\t\t<tr>
  4085. \t\t\t\t\t\t\t\t\t\t\t<th>Quantité min.</th>
  4086. \t\t\t\t\t\t\t\t\t\t\t<th>Prix unitaire (HTG)</th>
  4087. \t\t\t\t\t\t\t\t\t\t</tr>
  4088. \t\t\t\t\t\t\t\t\t</thead>
  4089. \t\t\t\t\t\t\t\t\t<tbody id=\"bulk-tier-rows\">
  4090. \t\t\t\t\t\t\t\t\t\t{% for tier in tierPrices|sort((a,b)=> a.min <=> b.min) %}
  4091. \t\t\t\t\t\t\t\t\t\t\t<tr data-min=\"{{ tier.min }}\">
  4092. \t\t\t\t\t\t\t\t\t\t\t\t<td>≥
  4093. \t\t\t\t\t\t\t\t\t\t\t\t\t{{ tier.min }}</td>
  4094. \t\t\t\t\t\t\t\t\t\t\t\t<td>{{ tier.price|number_format(2, '.', ' ') }}</td>
  4095. \t\t\t\t\t\t\t\t\t\t\t</tr>
  4096. \t\t\t\t\t\t\t\t\t\t{% endfor %}
  4097. \t\t\t\t\t\t\t\t\t</tbody>
  4098. \t\t\t\t\t\t\t\t</table>
  4099. \t\t\t\t\t\t\t</div>
  4100. \t\t\t\t\t\t\t<div class=\"d-flex flex-wrap gap-3 align-items-baseline mb-2\">
  4101. \t\t\t\t\t\t\t\t<div>
  4102. \t\t\t\t\t\t\t\t\t<strong>Total:</strong>
  4103. \t\t\t\t\t\t\t\t\t<span id=\"total-price-value\">{{ product.price|number_format(2, '.', ' ') }}</span>
  4104. \t\t\t\t\t\t\t\t\tHTG
  4105. \t\t\t\t\t\t\t\t</div>
  4106. \t\t\t\t\t\t\t\t<div class=\"text-success\">
  4107. \t\t\t\t\t\t\t\t\t<strong>Économies:</strong>
  4108. \t\t\t\t\t\t\t\t\t<span id=\"savings-amount\">0.00</span>
  4109. \t\t\t\t\t\t\t\t\tHTG
  4110. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t(<span id=\"savings-percent\">0</span>%)
  4111. \t\t\t\t\t\t\t\t</div>
  4112. \t\t\t\t\t\t\t</div>
  4113. \t\t\t\t\t\t\t<small class=\"text-muted\">Le prix et le total s’adaptent automatiquement selon la quantité.</small>
  4114. \t\t\t\t\t\t</div>
  4116. \t\t\t\t\t\t<!-- Stock disponible -->
  4117. \t\t\t\t\t\t{% if product.stock is defined %}
  4118. \t\t\t\t\t\t\t<small class=\"text-muted\">Stock disponible :
  4119. \t\t\t\t\t\t\t\t{{ product.stock }}
  4120. \t\t\t\t\t\t\t\tunités</small>
  4121. \t\t\t\t\t\t{% endif %}
  4123. \t\t\t\t\t\t<!-- Statistiques du produit -->
  4124. \t\t\t\t\t\t{% if productStats is defined %}
  4125. \t\t\t\t\t\t\t<div class=\"product-stats mt-3\">
  4126. \t\t\t\t\t\t\t\t<div class=\"row text-center\">
  4127. \t\t\t\t\t\t\t\t\t<div class=\"col-4\">
  4128. \t\t\t\t\t\t\t\t\t\t<div class=\"stat-item\">
  4129. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-number\">{{ productStats.totalViews }}</span>
  4130. \t\t\t\t\t\t\t\t\t\t\t<small class=\"stat-label\">Vues</small>
  4131. \t\t\t\t\t\t\t\t\t\t</div>
  4132. \t\t\t\t\t\t\t\t\t</div>
  4133. \t\t\t\t\t\t\t\t\t<div class=\"col-4\">
  4134. \t\t\t\t\t\t\t\t\t\t<div class=\"stat-item\">
  4135. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-number\">{{ productStats.salesCount }}</span>
  4136. \t\t\t\t\t\t\t\t\t\t\t<small class=\"stat-label\">Ventes</small>
  4137. \t\t\t\t\t\t\t\t\t\t</div>
  4138. \t\t\t\t\t\t\t\t\t</div>
  4139. \t\t\t\t\t\t\t\t\t<div class=\"col-4\">
  4140. \t\t\t\t\t\t\t\t\t\t<div class=\"stat-item\">
  4141. \t\t\t\t\t\t\t\t\t\t\t<span class=\"stat-number\">{{ productStats.conversionRate }}%</span>
  4142. \t\t\t\t\t\t\t\t\t\t\t<small class=\"stat-label\">Conversion</small>
  4143. \t\t\t\t\t\t\t\t\t\t</div>
  4144. \t\t\t\t\t\t\t\t\t</div>
  4145. \t\t\t\t\t\t\t\t</div>
  4146. \t\t\t\t\t\t\t</div>
  4147. \t\t\t\t\t\t{% endif %}
  4149. \t\t\t\t\t\t<div class=\"card_area d-flex align-items-center\">
  4150. \t\t\t\t\t\t\t<a class=\"primary-btn btn-add-to-cart\" href=\"javascript:void(0);\" id=\"add-to-cart-btn\" data-product-id=\"{{ product.id }}\" data-qty=\"1\">
  4151. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-cart\"></i>
  4152. \t\t\t\t\t\t\t\tAjouter au panier
  4153. \t\t\t\t\t\t\t</a>
  4154. \t\t\t\t\t\t\t<a class=\"icon_btn wishlist-btn\" href=\"#\" title=\"Ajouter aux favoris\" data-product-id=\"{{ product.id }}\" {% if app.user %} onclick=\"toggleWishlist({{ product.id }}, this); return false;\" {% else %} onclick=\"showCustomAlert('Vous devez être connecté pour ajouter aux favoris', 'warning'); return false;\" {% endif %}>
  4155. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-heart\"></i>
  4156. \t\t\t\t\t\t\t</a>
  4157. \t\t\t\t\t\t\t<a class=\"icon_btn comparison-btn\" href=\"#\" title=\"Comparer\" data-product-id=\"{{ product.id }}\" onclick=\"toggleComparison({{ product.id }}, this); return false;\">
  4158. \t\t\t\t\t\t\t\t<i class=\"lnr lnr-sync\"></i>
  4159. \t\t\t\t\t\t\t</a>
  4160. \t\t\t\t\t\t</div>
  4162. \t\t\t\t\t\t<!-- Message de confirmation -->
  4163. \t\t\t\t\t\t<div id=\"cart-message\" class=\"alert alert-success mt-3\" style=\"display: none;\">
  4164. \t\t\t\t\t\t\t<i class=\"lnr lnr-checkmark-circle\"></i>
  4165. \t\t\t\t\t\t\tProduit ajouté au panier avec succès !
  4166. \t\t\t\t\t\t</div>
  4167. \t\t\t\t\t\t<!-- ... existing code ... -->
  4168. \t\t\t\t\t</div>
  4169. \t\t\t\t</div>
  4170. \t\t\t</div>
  4171. \t\t</div>
  4172. \t</div>
  4173. \t<!--================End Single Product Area =================-->
  4175. \t<!--================Product Description Area =================-->
  4176. \t<section class=\"product_description_area\">
  4177. \t\t<div class=\"container\">
  4178. \t\t\t<ul class=\"nav nav-tabs\" id=\"myTab\" role=\"tablist\">
  4179. \t\t\t\t<li class=\"nav-item\">
  4180. \t\t\t\t\t<a class=\"nav-link active\" id=\"home-tab\" data-bs-toggle=\"tab\" href=\"#home\" role=\"tab\" aria-controls=\"home\" aria-selected=\"true\">Description</a>
  4181. \t\t\t\t</li>
  4182. \t\t\t\t<li class=\"nav-item\">
  4183. \t\t\t\t\t<a class=\"nav-link\" id=\"profile-tab\" data-bs-toggle=\"tab\" href=\"#profile\" role=\"tab\" aria-controls=\"profile\" aria-selected=\"false\">Spécifications</a>
  4184. \t\t\t\t</li>
  4185. \t\t\t\t<li class=\"nav-item\">
  4186. \t\t\t\t\t<a class=\"nav-link\" id=\"contact-tab\" data-bs-toggle=\"tab\" href=\"#contact\" role=\"tab\" aria-controls=\"contact\" aria-selected=\"false\">Commentaires</a>
  4187. \t\t\t\t</li>
  4188. \t\t\t\t<li class=\"nav-item\">
  4189. \t\t\t\t\t<a class=\"nav-link\" id=\"review-tab\" data-bs-toggle=\"tab\" href=\"#review\" role=\"tab\" aria-controls=\"review\" aria-selected=\"false\">Avis ({{ product.reviewCount ?? 0 }})</a>
  4190. \t\t\t\t</li>
  4191. \t\t\t</ul>
  4192. \t\t\t<div class=\"tab-content\" id=\"myTabContent\">
  4193. \t\t\t\t<div class=\"tab-pane fade show active\" id=\"home\" role=\"tabpanel\" aria-labelledby=\"home-tab\">
  4194. \t\t\t\t\t<div class=\"description\">
  4195. \t\t\t\t\t\t{% if product.description %}
  4196. \t\t\t\t\t\t\t<div class=\"product-description-content\">
  4197. \t\t\t\t\t\t\t\t{{ product.description|raw|nl2br }}
  4198. \t\t\t\t\t\t\t</div>
  4199. \t\t\t\t\t\t{% else %}
  4200. \t\t\t\t\t\t\t<p class=\"text-muted\">Aucune description disponible pour ce produit.</p>
  4201. \t\t\t\t\t\t{% endif %}
  4202. \t\t\t\t\t</div>
  4203. \t\t\t\t</div>
  4204. \t\t\t\t<div class=\"tab-pane fade\" id=\"profile\" role=\"tabpanel\" aria-labelledby=\"profile-tab\">
  4205. \t\t\t\t\t<div class=\"specification-table\">
  4206. \t\t\t\t\t\t{% if product.weight or product.length or product.width or product.height or product.attributes %}
  4207. \t\t\t\t\t\t\t<div class=\"table-responsive\">
  4208. \t\t\t\t\t\t\t\t<table class=\"table\">
  4209. \t\t\t\t\t\t\t\t\t<tbody>
  4210. \t\t\t\t\t\t\t\t\t\t{% if product.sku %}
  4211. \t\t\t\t\t\t\t\t\t\t\t<tr>
  4212. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4213. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Référence (SKU)</h5>
  4214. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4215. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4216. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>{{ product.sku }}</h5>
  4217. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4218. \t\t\t\t\t\t\t\t\t\t\t</tr>
  4219. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4220. \t\t\t\t\t\t\t\t\t\t{% if product.barcode %}
  4221. \t\t\t\t\t\t\t\t\t\t\t<tr>
  4222. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4223. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Code-barres</h5>
  4224. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4225. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4226. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>{{ product.barcode }}</h5>
  4227. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4228. \t\t\t\t\t\t\t\t\t\t\t</tr>
  4229. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4230. \t\t\t\t\t\t\t\t\t\t{% if product.brand %}
  4231. \t\t\t\t\t\t\t\t\t\t\t<tr>
  4232. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4233. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Marque</h5>
  4234. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4235. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4236. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>{{ product.brand.name }}</h5>
  4237. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4238. \t\t\t\t\t\t\t\t\t\t\t</tr>
  4239. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4240. \t\t\t\t\t\t\t\t\t\t{% if product.category %}
  4241. \t\t\t\t\t\t\t\t\t\t\t<tr>
  4242. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4243. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Catégorie</h5>
  4244. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4245. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4246. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>{{ product.category.name }}</h5>
  4247. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4248. \t\t\t\t\t\t\t\t\t\t\t</tr>
  4249. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4250. \t\t\t\t\t\t\t\t\t\t{% if product.weight %}
  4251. \t\t\t\t\t\t\t\t\t\t\t<tr>
  4252. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4253. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Poids</h5>
  4254. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4255. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4256. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>{{ product.weight }}
  4257. \t\t\t\t\t\t\t\t\t\t\t\t\t\tkg</h5>
  4258. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4259. \t\t\t\t\t\t\t\t\t\t\t</tr>
  4260. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4261. \t\t\t\t\t\t\t\t\t\t{% if product.length or product.width or product.height %}
  4262. \t\t\t\t\t\t\t\t\t\t\t<tr>
  4263. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4264. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Dimensions</h5>
  4265. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4266. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4267. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>
  4268. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% if product.length %}
  4269. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ product.length }}cm
  4270. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  4271. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% if product.width %}
  4272. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t×
  4273. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ product.width }}cm
  4274. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  4275. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% if product.height %}
  4276. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t×
  4277. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ product.height }}cm
  4278. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  4279. \t\t\t\t\t\t\t\t\t\t\t\t\t</h5>
  4280. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4281. \t\t\t\t\t\t\t\t\t\t\t</tr>
  4282. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4283. \t\t\t\t\t\t\t\t\t\t{% if product.stock is not null %}
  4284. \t\t\t\t\t\t\t\t\t\t\t<tr>
  4285. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4286. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Stock disponible</h5>
  4287. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4288. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4289. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>{{ product.stock }}
  4290. \t\t\t\t\t\t\t\t\t\t\t\t\t\tunité(s)</h5>
  4291. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4292. \t\t\t\t\t\t\t\t\t\t\t</tr>
  4293. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4294. \t\t\t\t\t\t\t\t\t\t{% if product.stockStatus %}
  4295. \t\t\t\t\t\t\t\t\t\t\t<tr>
  4296. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4297. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Statut</h5>
  4298. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4299. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4300. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>
  4301. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% if product.stockStatus == 'in_stock' %}
  4302. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"badge bg-success\">En stock</span>
  4303. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% elseif product.stockStatus == 'out_of_stock' %}
  4304. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"badge bg-danger\">Rupture de stock</span>
  4305. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% elseif product.stockStatus == 'backorder' %}
  4306. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"badge bg-warning\">Sur commande</span>
  4307. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% else %}
  4308. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t{{ product.stockStatus }}
  4309. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  4310. \t\t\t\t\t\t\t\t\t\t\t\t\t</h5>
  4311. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4312. \t\t\t\t\t\t\t\t\t\t\t</tr>
  4313. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4314. \t\t\t\t\t\t\t\t\t\t{% if product.isDigital %}
  4315. \t\t\t\t\t\t\t\t\t\t\t<tr>
  4316. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4317. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>Type</h5>
  4318. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4319. \t\t\t\t\t\t\t\t\t\t\t\t<td>
  4320. \t\t\t\t\t\t\t\t\t\t\t\t\t<h5>
  4321. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"badge bg-info\">Produit digital</span>
  4322. \t\t\t\t\t\t\t\t\t\t\t\t\t</h5>
  4323. \t\t\t\t\t\t\t\t\t\t\t\t</td>
  4324. \t\t\t\t\t\t\t\t\t\t\t</tr>
  4325. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4326. \t\t\t\t\t\t\t\t\t\t{% if product.attributes is not empty %}
  4327. \t\t\t\t\t\t\t\t\t\t\t{% for key, value in product.attributes %}
  4328. \t\t\t\t\t\t\t\t\t\t\t\t<tr>
  4329. \t\t\t\t\t\t\t\t\t\t\t\t\t<td>
  4330. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<h5>{{ key|replace({'_': ' '})|title }}</h5>
  4331. \t\t\t\t\t\t\t\t\t\t\t\t\t</td>
  4332. \t\t\t\t\t\t\t\t\t\t\t\t\t<td>
  4333. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<h5>{{ value }}</h5>
  4334. \t\t\t\t\t\t\t\t\t\t\t\t\t</td>
  4335. \t\t\t\t\t\t\t\t\t\t\t\t</tr>
  4336. \t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  4337. \t\t\t\t\t\t\t\t\t\t{% endif %}
  4338. \t\t\t\t\t\t\t\t\t</tbody>
  4339. \t\t\t\t\t\t\t\t</table>
  4340. \t\t\t\t\t\t\t</div>
  4341. \t\t\t\t\t\t{% else %}
  4342. \t\t\t\t\t\t\t<p class=\"text-muted\">Aucune spécification disponible pour ce produit.</p>
  4343. \t\t\t\t\t\t{% endif %}
  4344. \t\t\t\t\t</div>
  4345. \t\t\t\t</div>
  4346. \t\t\t\t<div class=\"tab-pane fade\" id=\"contact\" role=\"tabpanel\" aria-labelledby=\"contact-tab\">
  4347. \t\t\t\t\t<div class=\"comment-wrapper\">
  4348. \t\t\t\t\t\t<div class=\"alert alert-info\">
  4349. \t\t\t\t\t\t\t<i class=\"lnr lnr-info-circle\"></i>
  4350. \t\t\t\t\t\t\tLa fonctionnalité de commentaires sera bientôt disponible. Vous pourrez laisser des commentaires et poser des questions sur ce produit.
  4351. \t\t\t\t\t\t</div>
  4352. \t\t\t\t\t\t{% if app.user %}
  4353. \t\t\t\t\t\t\t<div class=\"review_box mt-4\">
  4354. \t\t\t\t\t\t\t\t<h4>Poser une question</h4>
  4355. \t\t\t\t\t\t\t\t<form class=\"row contact_form\" method=\"post\" novalidate=\"novalidate\">
  4356. \t\t\t\t\t\t\t\t\t<div class=\"col-md-12\">
  4357. \t\t\t\t\t\t\t\t\t\t<div class=\"form-group\">
  4358. \t\t\t\t\t\t\t\t\t\t\t<textarea class=\"form-control\" name=\"comment\" id=\"comment\" rows=\"3\" placeholder=\"Votre question ou commentaire...\" required></textarea>
  4359. \t\t\t\t\t\t\t\t\t\t</div>
  4360. \t\t\t\t\t\t\t\t\t</div>
  4361. \t\t\t\t\t\t\t\t\t<div class=\"col-md-12 text-right\">
  4362. \t\t\t\t\t\t\t\t\t\t<button type=\"submit\" class=\"btn primary-btn\">Envoyer</button>
  4363. \t\t\t\t\t\t\t\t\t</div>
  4364. \t\t\t\t\t\t\t\t</form>
  4365. \t\t\t\t\t\t\t</div>
  4366. \t\t\t\t\t\t{% else %}
  4367. \t\t\t\t\t\t\t<p class=\"text-center\">
  4368. \t\t\t\t\t\t\t\t<a href=\"{{ path('ui_app_login') }}\" class=\"primary-btn\">Connectez-vous</a>
  4369. \t\t\t\t\t\t\t\tpour poser une question ou laisser un commentaire.
  4370. \t\t\t\t\t\t\t</p>
  4371. \t\t\t\t\t\t{% endif %}
  4372. \t\t\t\t\t</div>
  4373. \t\t\t\t</div>
  4374. \t\t\t\t<div class=\"tab-pane fade\" id=\"review\" role=\"tabpanel\" aria-labelledby=\"review-tab\">
  4375. \t\t\t\t\t<div class=\"review-wrapper\">
  4376. \t\t\t\t\t\t<div class=\"row\">
  4377. \t\t\t\t\t\t\t<div class=\"col-lg-6\">
  4378. \t\t\t\t\t\t\t\t<div class=\"row total_rate\">
  4379. \t\t\t\t\t\t\t\t\t<div class=\"col-6\">
  4380. \t\t\t\t\t\t\t\t\t\t<div class=\"box_total\">
  4381. \t\t\t\t\t\t\t\t\t\t\t<h5>Note globale</h5>
  4382. \t\t\t\t\t\t\t\t\t\t\t<h4>{{ product.averageRating ? product.averageRating|number_format(1, '.', ',') : '0.0' }}</h4>
  4383. \t\t\t\t\t\t\t\t\t\t\t<h6>({{ product.reviewCount ?? 0 }}
  4384. \t\t\t\t\t\t\t\t\t\t\t\tAvis)</h6>
  4385. \t\t\t\t\t\t\t\t\t\t</div>
  4386. \t\t\t\t\t\t\t\t\t</div>
  4387. \t\t\t\t\t\t\t\t\t<div class=\"col-6\">
  4388. \t\t\t\t\t\t\t\t\t\t<div class=\"rating_list\">
  4389. \t\t\t\t\t\t\t\t\t\t\t<h3>Basé sur
  4390. \t\t\t\t\t\t\t\t\t\t\t\t{{ product.reviewCount ?? 0 }}
  4391. \t\t\t\t\t\t\t\t\t\t\t\tavis</h3>
  4392. \t\t\t\t\t\t\t\t\t\t\t<div class=\"rating-summary\">
  4393. \t\t\t\t\t\t\t\t\t\t\t\t{% if product.averageRating %}
  4394. \t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rating-display mb-3\">
  4395. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% for i in 1..5 %}
  4396. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-star{% if i <= product.averageRating %}{% else %}-o{% endif %}\" style=\"color: #ffa200; font-size: 1.2rem;\"></i>
  4397. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  4398. \t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"ms-2\" style=\"font-size: 1.1rem; font-weight: bold;\">{{ product.averageRating|number_format(1, '.', ',') }}
  4399. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t/ 5.0</span>
  4400. \t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  4401. \t\t\t\t\t\t\t\t\t\t\t\t{% else %}
  4402. \t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"text-muted\">Aucune note disponible</p>
  4403. \t\t\t\t\t\t\t\t\t\t\t\t{% endif %}
  4404. \t\t\t\t\t\t\t\t\t\t\t</div>
  4405. \t\t\t\t\t\t\t\t\t\t</div>
  4406. \t\t\t\t\t\t\t\t\t</div>
  4407. \t\t\t\t\t\t\t\t</div>
  4408. \t\t\t\t\t\t\t\t<div class=\"review_list\">
  4409. \t\t\t\t\t\t\t\t\t{% if product.reviewCount and product.reviewCount > 0 %}
  4410. \t\t\t\t\t\t\t\t\t\t<div class=\"alert alert-info\">
  4411. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-info-circle\"></i>
  4412. \t\t\t\t\t\t\t\t\t\t\tLe système d'affichage détaillé des avis sera disponible prochainement. 
  4413. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tNote actuelle :
  4414. \t\t\t\t\t\t\t\t\t\t\t{{ product.averageRating|number_format(1, '.', ',') }}
  4415. \t\t\t\t\t\t\t\t\t\t\t/ 5.0 basée sur
  4416. \t\t\t\t\t\t\t\t\t\t\t{{ product.reviewCount }}
  4417. \t\t\t\t\t\t\t\t\t\t\tavis.
  4418. \t\t\t\t\t\t\t\t\t\t</div>
  4419. \t\t\t\t\t\t\t\t\t{% else %}
  4420. \t\t\t\t\t\t\t\t\t\t<div class=\"alert alert-info\">
  4421. \t\t\t\t\t\t\t\t\t\t\t<i class=\"lnr lnr-info-circle\"></i>
  4422. \t\t\t\t\t\t\t\t\t\t\tAucun avis pour ce produit pour le moment. Soyez le premier à laisser un avis après votre achat !
  4423. \t\t\t\t\t\t\t\t\t\t</div>
  4424. \t\t\t\t\t\t\t\t\t{% endif %}
  4425. \t\t\t\t\t\t\t\t</div>
  4426. \t\t\t\t\t\t\t</div>
  4427. \t\t\t\t\t\t\t<div class=\"col-lg-6\">
  4428. \t\t\t\t\t\t\t\t<div class=\"review_box\">
  4429. \t\t\t\t\t\t\t\t\t<h4>Laisser un avis</h4>
  4430. \t\t\t\t\t\t\t\t\t{% if app.user %}
  4431. \t\t\t\t\t\t\t\t\t\t<p class=\"text-muted\">Vous pouvez laisser un avis après avoir acheté ce produit.</p>
  4432. \t\t\t\t\t\t\t\t\t\t<form class=\"row contact_form\" method=\"post\" novalidate=\"novalidate\">
  4433. \t\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-12\">
  4434. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"form-group\">
  4435. \t\t\t\t\t\t\t\t\t\t\t\t\t<label>Votre note</label>
  4436. \t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"rating-input mb-3\" style=\"display: flex; gap: 5px; flex-direction: row-reverse; justify-content: flex-end;\">
  4437. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% for i in 5..1 %}
  4438. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input type=\"radio\" name=\"rating\" id=\"rating{{ i }}\" value=\"{{ i }}\" required style=\"display: none;\">
  4439. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"rating{{ i }}\" class=\"star-label\" style=\"cursor: pointer;\">
  4440. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<i class=\"fa fa-star-o\" style=\"color: #ccc; font-size: 1.5rem;\"></i>
  4441. \t\t\t\t\t\t\t\t\t\t\t\t\t\t\t</label>
  4442. \t\t\t\t\t\t\t\t\t\t\t\t\t\t{% endfor %}
  4443. \t\t\t\t\t\t\t\t\t\t\t\t\t</div>
  4444. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  4445. \t\t\t\t\t\t\t\t\t\t\t</div>
  4446. \t\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-12\">
  4447. \t\t\t\t\t\t\t\t\t\t\t\t<div class=\"form-group\">
  4448. \t\t\t\t\t\t\t\t\t\t\t\t\t<textarea class=\"form-control\" name=\"review\" id=\"review\" rows=\"5\" placeholder=\"Votre avis...\" required onfocus=\"this.placeholder = ''\" onblur=\"this.placeholder = 'Votre avis...'\"></textarea>
  4449. \t\t\t\t\t\t\t\t\t\t\t\t</div>
  4450. \t\t\t\t\t\t\t\t\t\t\t</div>
  4451. \t\t\t\t\t\t\t\t\t\t\t<div class=\"col-md-12 text-right\">
  4452. \t\t\t\t\t\t\t\t\t\t\t\t<button type=\"submit\" class=\"btn primary-btn\">Publier l'avis</button>
  4453. \t\t\t\t\t\t\t\t\t\t\t</div>
  4454. \t\t\t\t\t\t\t\t\t\t</form>
  4455. \t\t\t\t\t\t\t\t\t{% else %}
  4456. \t\t\t\t\t\t\t\t\t\t<p class=\"text-center\">
  4457. \t\t\t\t\t\t\t\t\t\t\t<a href=\"{{ path('ui_app_login') }}\" class=\"primary-btn\">Connectez-vous</a>
  4458. \t\t\t\t\t\t\t\t\t\t\tpour laisser un avis sur ce produit.
  4459. \t\t\t\t\t\t\t\t\t\t</p>
  4460. \t\t\t\t\t\t\t\t\t{% endif %}
  4461. \t\t\t\t\t\t\t\t</div>
  4462. \t\t\t\t\t\t\t</div>
  4463. \t\t\t\t\t\t</div>
  4464. \t\t\t\t\t</div>
  4465. \t\t\t\t</div>
  4466. \t\t\t</div>
  4467. \t\t</div>
  4468. \t</section>
  4469. \t<!--================End Product Description Area =================-->
  4471. \t<script>
  4472. \t\t// Initialiser les onglets Bootstrap
  4473. document.addEventListener('DOMContentLoaded', function () { // Activer les onglets Bootstrap 5
  4474. const triggerTabList = document.querySelectorAll('#myTab button[data-bs-toggle=\"tab\"]');
  4475. triggerTabList.forEach(triggerEl => {
  4476. const tabTrigger = new bootstrap.Tab(triggerEl);
  4477. triggerEl.addEventListener('click', event => {
  4478. event.preventDefault();
  4479. tabTrigger.show();
  4480. });
  4481. });
  4483. // Gestion des étoiles pour les avis
  4484. const ratingInputs = document.querySelectorAll('.rating-input input[type=\"radio\"]');
  4485. const starLabels = document.querySelectorAll('.rating-input .star-label');
  4487. ratingInputs.forEach((input, index) => {
  4488. input.addEventListener('change', function () {
  4489. const rating = parseInt(this.value);
  4490. starLabels.forEach((label) => { // Trouver l'input associé à ce label
  4491. const labelInput = label.previousElementSibling;
  4492. if (labelInput && labelInput.type === 'radio') {
  4493. const starValue = parseInt(labelInput.value);
  4494. const star = label.querySelector('i');
  4495. if (starValue <= rating) {
  4496. star.style.color = '#ffa200';
  4497. star.classList.remove('fa-star-o');
  4498. star.classList.add('fa-star');
  4499. } else {
  4500. star.style.color = '#ccc';
  4501. star.classList.remove('fa-star');
  4502. star.classList.add('fa-star-o');
  4503. }
  4504. }
  4505. });
  4506. });
  4507. });
  4509. // Pré-remplir les étoiles au survol
  4510. starLabels.forEach((label) => {
  4511. label.addEventListener('mouseenter', function () { // Trouver l'input associé à ce label
  4512. const input = label.previousElementSibling;
  4513. if (input && input.type === 'radio') {
  4514. const rating = parseInt(input.value);
  4515. starLabels.forEach((l) => {
  4516. const lInput = l.previousElementSibling;
  4517. if (lInput && lInput.type === 'radio') {
  4518. const starValue = parseInt(lInput.value);
  4519. const star = l.querySelector('i');
  4520. if (starValue <= rating) {
  4521. star.style.color = '#ffa200';
  4522. star.classList.remove('fa-star-o');
  4523. star.classList.add('fa-star');
  4524. } else {
  4525. star.style.color = '#ccc';
  4526. star.classList.remove('fa-star');
  4527. star.classList.add('fa-star-o');
  4528. }
  4529. }
  4530. });
  4531. }
  4532. });
  4533. });
  4535. const ratingContainer = document.querySelector('.rating-input');
  4536. if (ratingContainer) {
  4537. ratingContainer.addEventListener('mouseleave', function () {
  4538. const checkedInput = document.querySelector('.rating-input input[type=\"radio\"]:checked');
  4539. if (checkedInput) {
  4540. checkedInput.dispatchEvent(new Event('change'));
  4541. } else {
  4542. starLabels.forEach(label => {
  4543. const star = label.querySelector('i');
  4544. star.style.color = '#ccc';
  4545. });
  4546. }
  4547. });
  4548. }
  4549. });
  4550. \t</script>
  4552. \t{% if youMightAlsoLike|length > 0 %}
  4553. \t\t<section class=\"related-product-area section_gap_bottom py-5\" style=\"background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);\">
  4554. \t\t\t<div class=\"container\">
  4555. \t\t\t\t<div class=\"row justify-content-center\">
  4556. \t\t\t\t\t<div class=\"col-lg-8 text-center\">
  4557. \t\t\t\t\t\t<div class=\"section-title\">
  4558. \t\t\t\t\t\t\t<h2 class=\"fw-bold mb-3\" style=\"font-size: 2.5rem; color: #2c3e50;\">Vous pourriez aussi aimer</h2>
  4559. \t\t\t\t\t\t\t<p class=\"text-muted\" style=\"font-size: 1.1rem;\">Produits sélectionnés pour vous en fonction de vos préférences</p>
  4560. \t\t\t\t\t\t</div>
  4561. \t\t\t\t\t</div>
  4562. \t\t\t\t</div>
  4563. \t\t\t\t<div class=\"row g-4\">
  4564. \t\t\t\t\t{% for relatedProduct in youMightAlsoLike %}
  4565. \t\t\t\t\t\t<div class=\"col-xl-3 col-lg-4 col-md-6 col-sm-6 mb-4 d-flex align-items-stretch\">
  4566. \t\t\t\t\t\t\t{% include 'home/_single_product_card.html.twig' with {'product': relatedProduct} %}
  4567. \t\t\t\t\t\t</div>
  4568. \t\t\t\t\t{% endfor %}
  4569. \t\t\t\t</div>
  4570. \t\t\t</div>
  4571. \t\t</section>
  4573. \t\t<style>
  4574. \t\t\t.modern-product-card {
  4575. \t\t\t\tbackground: #ffffff;
  4576. \t\t\t\tborder-radius: 16px;
  4577. \t\t\t\toverflow: hidden;
  4578. \t\t\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  4579. \t\t\t\ttransition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  4580. \t\t\t\theight: 100%;
  4581. \t\t\t\tdisplay: flex;
  4582. \t\t\t\tflex-direction: column;
  4583. \t\t\t\tposition: relative;
  4584. \t\t\t}
  4586. \t\t\t.modern-product-card:hover {
  4587. \t\t\t\ttransform: translateY(-8px);
  4588. \t\t\t\tbox-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  4589. \t\t\t}
  4591. \t\t\t.product-image-wrapper {
  4592. \t\t\t\tposition: relative;
  4593. \t\t\t\twidth: 100%;
  4594. \t\t\t\theight: 250px;
  4595. \t\t\t\toverflow: hidden;
  4596. \t\t\t\tbackground: #f8f9fa;
  4597. \t\t\t}
  4599. \t\t\t.product-image {
  4600. \t\t\t\twidth: 100%;
  4601. \t\t\t\theight: 100%;
  4602. \t\t\t\tobject-fit: cover;
  4603. \t\t\t\ttransition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  4604. \t\t\t}
  4606. \t\t\t.modern-product-card:hover .product-image {
  4607. \t\t\t\ttransform: scale(1.1);
  4608. \t\t\t}
  4610. \t\t\t.product-overlay {
  4611. \t\t\t\tposition: absolute;
  4612. \t\t\t\ttop: 0;
  4613. \t\t\t\tleft: 0;
  4614. \t\t\t\tright: 0;
  4615. \t\t\t\tbottom: 0;
  4616. \t\t\t\tbackground: rgba(0, 0, 0, 0.5);
  4617. \t\t\t\tdisplay: flex;
  4618. \t\t\t\talign-items: center;
  4619. \t\t\t\tjustify-content: center;
  4620. \t\t\t\topacity: 0;
  4621. \t\t\t\ttransition: opacity 0.3s ease;
  4622. \t\t\t}
  4624. \t\t\t.modern-product-card:hover .product-overlay {
  4625. \t\t\t\topacity: 1;
  4626. \t\t\t}
  4628. \t\t\t.view-product-btn {
  4629. \t\t\t\tcolor: white;
  4630. \t\t\t\tpadding: 12px 24px;
  4631. \t\t\t\tbackground: rgba(255, 255, 255, 0.2);
  4632. \t\t\t\tbackdrop-filter: blur(10px);
  4633. \t\t\t\tborder-radius: 8px;
  4634. \t\t\t\tfont-weight: 600;
  4635. \t\t\t\tdisplay: inline-flex;
  4636. \t\t\t\talign-items: center;
  4637. \t\t\t\tgap: 8px;
  4638. \t\t\t\ttransition: all 0.3s ease;
  4639. \t\t\t}
  4641. \t\t\t.view-product-btn:hover {
  4642. \t\t\t\tbackground: rgba(255, 255, 255, 0.3);
  4643. \t\t\t\ttransform: scale(1.05);
  4644. \t\t\t}
  4646. \t\t\t.product-badge {
  4647. \t\t\t\tposition: absolute;
  4648. \t\t\t\ttop: 12px;
  4649. \t\t\t\tright: 12px;
  4650. \t\t\t\tz-index: 2;
  4651. \t\t\t}
  4653. \t\t\t.badge-discount {
  4654. \t\t\t\tbackground: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  4655. \t\t\t\tcolor: white;
  4656. \t\t\t\tpadding: 6px 12px;
  4657. \t\t\t\tborder-radius: 20px;
  4658. \t\t\t\tfont-size: 0.75rem;
  4659. \t\t\t\tfont-weight: 700;
  4660. \t\t\t\tbox-shadow: 0 2px 8px rgba(238, 90, 111, 0.4);
  4661. \t\t\t}
  4663. \t\t\t.product-info {
  4664. \t\t\t\tpadding: 20px;
  4665. \t\t\t\tflex-grow: 1;
  4666. \t\t\t\tdisplay: flex;
  4667. \t\t\t\tflex-direction: column;
  4668. \t\t\t}
  4670. \t\t\t.product-title {
  4671. \t\t\t\tmargin: 0 0 8px 0;
  4672. \t\t\t\tfont-size: 1rem;
  4673. \t\t\t\tfont-weight: 600;
  4674. \t\t\t\tline-height: 1.4;
  4675. \t\t\t\theight: 2.8em;
  4676. \t\t\t\toverflow: hidden;
  4677. \t\t\t\tdisplay: -webkit-box;
  4678. \t\t\t\t-webkit-line-clamp: 2;
  4679. \t\t\t\t-webkit-box-orient: vertical;
  4680. \t\t\t}
  4682. \t\t\t.product-title a {
  4683. \t\t\t\tcolor: #2c3e50;
  4684. \t\t\t\ttext-decoration: none;
  4685. \t\t\t\ttransition: color 0.3s ease;
  4686. \t\t\t}
  4688. \t\t\t.product-title a:hover {
  4689. \t\t\t\tcolor: #ffa200;
  4690. \t\t\t}
  4692. \t\t\t.product-shop {
  4693. \t\t\t\tfont-size: 0.85rem;
  4694. \t\t\t\tcolor: #6c757d;
  4695. \t\t\t\tmargin-bottom: 12px;
  4696. \t\t\t\tdisplay: flex;
  4697. \t\t\t\talign-items: center;
  4698. \t\t\t\tgap: 6px;
  4699. \t\t\t}
  4701. \t\t\t.product-shop i {
  4702. \t\t\t\tfont-size: 0.9rem;
  4703. \t\t\t}
  4705. \t\t\t.shop-link {
  4706. \t\t\t\tcolor: #6c757d;
  4707. \t\t\t\ttext-decoration: none;
  4708. \t\t\t\ttransition: color 0.3s ease;
  4709. \t\t\t}
  4711. \t\t\t.shop-link:hover {
  4712. \t\t\t\tcolor: #ffa200;
  4713. \t\t\t}
  4715. \t\t\t.product-price-wrapper {
  4716. \t\t\t\tmargin-bottom: 16px;
  4717. \t\t\t\tdisplay: flex;
  4718. \t\t\t\talign-items: center;
  4719. \t\t\t\tgap: 8px;
  4720. \t\t\t\tflex-wrap: wrap;
  4721. \t\t\t}
  4723. \t\t\t.product-price {
  4724. \t\t\t\tfont-size: 1.25rem;
  4725. \t\t\t\tfont-weight: 700;
  4726. \t\t\t\tcolor: #ffa200;
  4727. \t\t\t}
  4729. \t\t\t.product-compare-price {
  4730. \t\t\t\tfont-size: 0.9rem;
  4731. \t\t\t\tcolor: #adb5bd;
  4732. \t\t\t\ttext-decoration: line-through;
  4733. \t\t\t}
  4735. \t\t\t.product-actions {
  4736. \t\t\t\tmargin-top: auto;
  4737. \t\t\t}
  4739. \t\t\t/* Styles pour les boutons de la section \"Vous pourriez aussi aimer\" uniquement */
  4740. \t\t\t.modern-product-card .btn-add-to-cart {
  4741. \t\t\t\twidth: 100%;
  4742. \t\t\t\tpadding: 12px;
  4743. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #e8910a 100%);
  4744. \t\t\t\tcolor: white;
  4745. \t\t\t\tborder: none;
  4746. \t\t\t\tborder-radius: 10px;
  4747. \t\t\t\tfont-weight: 600;
  4748. \t\t\t\tdisplay: flex;
  4749. \t\t\t\talign-items: center;
  4750. \t\t\t\tjustify-content: center;
  4751. \t\t\t\tgap: 8px;
  4752. \t\t\t\ttext-decoration: none;
  4753. \t\t\t\ttransition: all 0.3s ease;
  4754. \t\t\t\tcursor: pointer;
  4755. \t\t\t}
  4757. \t\t\t.modern-product-card .btn-add-to-cart:hover {
  4758. \t\t\t\tbackground: linear-gradient(135deg, #e8910a 0%, #d6820a 100%);
  4759. \t\t\t\ttransform: translateY(-2px);
  4760. \t\t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.4);
  4761. \t\t\t\tcolor: white;
  4762. \t\t\t}
  4764. \t\t\t/* Le bouton principal garde son design original */
  4765. \t\t\t.card_area .btn-add-to-cart {
  4766. \t\t\t\twidth: auto;
  4767. \t\t\t\tdisplay: inline-flex;
  4768. \t\t\t}
  4770. \t\t\t.modern-product-card .btn-add-to-cart:active {
  4771. \t\t\t\ttransform: translateY(0);
  4772. \t\t\t}
  4774. \t\t\t.modern-product-card .btn-add-to-cart i {
  4775. \t\t\t\tfont-size: 1.1rem;
  4776. \t\t\t}
  4778. \t\t\t/* Responsive adjustments */
  4779. \t\t\t@media (max-width: 768px) {
  4780. \t\t\t\t.product-image-wrapper {
  4781. \t\t\t\t\theight: 200px;
  4782. \t\t\t\t}
  4784. \t\t\t\t.product-info {
  4785. \t\t\t\t\tpadding: 16px;
  4786. \t\t\t\t}
  4788. \t\t\t\t.product-title {
  4789. \t\t\t\t\tfont-size: 0.95rem;
  4790. \t\t\t\t}
  4792. \t\t\t\t.product-price {
  4793. \t\t\t\t\tfont-size: 1.1rem;
  4794. \t\t\t\t}
  4796. \t\t\t\t.section-title h2 {
  4797. \t\t\t\t\tfont-size: 2rem !important;
  4798. \t\t\t\t}
  4799. \t\t\t}
  4801. \t\t\t@media (max-width: 576px) {
  4802. \t\t\t\t.product-image-wrapper {
  4803. \t\t\t\t\theight: 190px;
  4804. \t\t\t\t}
  4806. \t\t\t\t.product-info {
  4807. \t\t\t\t\tpadding: 14px;
  4808. \t\t\t\t}
  4810. \t\t\t\t.btn-add-to-cart {
  4811. \t\t\t\t\tpadding: 10px;
  4812. \t\t\t\t\tfont-size: 0.9rem;
  4813. \t\t\t\t}
  4814. \t\t\t}
  4816. \t\t\t/* Ensure fixed height for cards */
  4817. \t\t\t.col-6.col-md-4.col-lg-3 {
  4818. \t\t\t\tdisplay: flex;
  4819. \t\t\t}
  4821. \t\t\t.modern-product-card {
  4822. \t\t\t\twidth: 100%;
  4823. \t\t\t}
  4825. \t\t\t/* Loading state for add to cart button */
  4826. \t\t\t.btn-add-to-cart.loading {
  4827. \t\t\t\topacity: 0.7;
  4828. \t\t\t\tpointer-events: none;
  4829. \t\t\t}
  4831. \t\t\t.btn-add-to-cart.loading i {
  4832. \t\t\t\tanimation: spin 1s linear infinite;
  4833. \t\t\t}
  4835. \t\t\t@keyframes spin {
  4836. \t\t\t\tfrom { transform: rotate(0deg); }
  4837. \t\t\t\tto { transform: rotate(360deg); }
  4838. \t\t\t}
  4840. \t\t\t/* Success state - vert pour tous les boutons */
  4841. \t\t\t.btn-add-to-cart.success {
  4842. \t\t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  4843. \t\t\t}
  4845. \t\t\t/* Le bouton principal garde son style original même en success */
  4846. \t\t\t.card_area .btn-add-to-cart.success {
  4847. \t\t\t\tbackground: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
  4848. \t\t\t}
  4849. \t\t</style>
  4851. \t\t<script>
  4852. \t\t\t// Gestion des boutons d'ajout au panier (principal et section \"Vous pourriez aussi aimer\")
  4853. \t\t\tdocument.addEventListener('DOMContentLoaded', function() {
  4854. \t\t\t\tconst addToCartButtons = document.querySelectorAll('.btn-add-to-cart');
  4855. \t\t\t\t
  4856. \t\t\t\taddToCartButtons.forEach(button => {
  4857. \t\t\t\t\tbutton.addEventListener('click', function(e) {
  4858. \t\t\t\t\t\te.preventDefault();
  4859. \t\t\t\t\t\te.stopPropagation();
  4860. \t\t\t\t\t\t
  4861. \t\t\t\t\t\tconst productId = this.getAttribute('data-product-id');
  4862. \t\t\t\t\t\t
  4863. \t\t\t\t\t\t// Pour le bouton principal, récupérer la quantité depuis l'input sst si disponible
  4864. \t\t\t\t\t\tlet qty = this.getAttribute('data-qty') || '1';
  4865. \t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  4866. \t\t\t\t\t\t\tconst qtyInput = document.getElementById('sst');
  4867. \t\t\t\t\t\t\tif (qtyInput) {
  4868. \t\t\t\t\t\t\t\tqty = parseInt(qtyInput.value) || 1;
  4869. \t\t\t\t\t\t\t}
  4870. \t\t\t\t\t\t}
  4871. \t\t\t\t\t\t
  4872. \t\t\t\t\t\tif (!productId) {
  4873. \t\t\t\t\t\t\tconsole.error('Product ID manquant');
  4874. \t\t\t\t\t\t\treturn false;
  4875. \t\t\t\t\t\t}
  4877. \t\t\t\t\t\t// Sauvegarder le contenu original
  4878. \t\t\t\t\t\tconst originalContent = this.innerHTML;
  4879. \t\t\t\t\t\t
  4880. \t\t\t\t\t\t// Désactiver le bouton et afficher le loading
  4881. \t\t\t\t\t\tthis.classList.add('loading');
  4882. \t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  4883. \t\t\t\t\t\t\tthis.style.pointerEvents = 'none';
  4884. \t\t\t\t\t\t\tthis.innerHTML = '<i class=\"lnr lnr-spinner\"></i> Ajout en cours...';
  4885. \t\t\t\t\t\t} else {
  4886. \t\t\t\t\t\t\tthis.innerHTML = '<i class=\"ti ti-loader-2\"></i> <span>Ajout...</span>';
  4887. \t\t\t\t\t\t}
  4888. \t\t\t\t\t\t
  4889. \t\t\t\t\t\t// Construire le body de la requête
  4890. \t\t\t\t\t\tlet body = 'productId=' + encodeURIComponent(productId) + '&qty=' + encodeURIComponent(qty);
  4891. \t\t\t\t\t\t
  4892. \t\t\t\t\t\t// Pour le bouton principal, vérifier aussi le prix unitaire pour les prix de gros
  4893. \t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  4894. \t\t\t\t\t\t\tconst unitPriceInput = document.getElementById('unit-price-input');
  4895. \t\t\t\t\t\t\tconst unitPrice = unitPriceInput ? unitPriceInput.value : '';
  4896. \t\t\t\t\t\t\tif (unitPrice) {
  4897. \t\t\t\t\t\t\t\tbody += '&unitPrice=' + encodeURIComponent(unitPrice);
  4898. \t\t\t\t\t\t\t}
  4899. \t\t\t\t\t\t}
  4900. \t\t\t\t\t\t
  4901. \t\t\t\t\t\t// Faire la requête AJAX
  4902. \t\t\t\t\t\tfetch('{{ path(\"ui_cart_add\") }}', {
  4903. \t\t\t\t\t\t\tmethod: 'POST',
  4904. \t\t\t\t\t\t\theaders: {
  4905. \t\t\t\t\t\t\t\t'Content-Type': 'application/x-www-form-urlencoded',
  4906. \t\t\t\t\t\t\t\t'X-Requested-With': 'XMLHttpRequest'
  4907. \t\t\t\t\t\t\t},
  4908. \t\t\t\t\t\t\tbody: body
  4909. \t\t\t\t\t\t})
  4910. \t\t\t\t\t\t.then(response => {
  4911. \t\t\t\t\t\t\tif (!response.ok) {
  4912. \t\t\t\t\t\t\t\tthrow new Error('Erreur réseau: ' + response.status);
  4913. \t\t\t\t\t\t\t}
  4914. \t\t\t\t\t\t\treturn response.json();
  4915. \t\t\t\t\t\t})
  4916. \t\t\t\t\t\t.then(data => {
  4917. \t\t\t\t\t\t\tif (data.ok || data.success) {
  4918. \t\t\t\t\t\t\t\t// Succès - Afficher l'animation de succès
  4919. \t\t\t\t\t\t\t\tthis.classList.remove('loading');
  4920. \t\t\t\t\t\t\t\tthis.classList.add('success');
  4921. \t\t\t\t\t\t\t\t
  4922. \t\t\t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  4923. \t\t\t\t\t\t\t\t\tthis.style.background = 'linear-gradient(135deg, #28a745 0%, #20c997 100%)';
  4924. \t\t\t\t\t\t\t\t\tthis.innerHTML = '<i class=\"lnr lnr-checkmark-circle\"></i> Ajouté !';
  4925. \t\t\t\t\t\t\t\t\t
  4926. \t\t\t\t\t\t\t\t\t// Afficher le message de confirmation si présent
  4927. \t\t\t\t\t\t\t\t\tconst cartMessage = document.getElementById('cart-message');
  4928. \t\t\t\t\t\t\t\t\tif (cartMessage) {
  4929. \t\t\t\t\t\t\t\t\t\tcartMessage.style.display = 'block';
  4930. \t\t\t\t\t\t\t\t\t\tsetTimeout(() => {
  4931. \t\t\t\t\t\t\t\t\t\t\tcartMessage.style.display = 'none';
  4932. \t\t\t\t\t\t\t\t\t\t}, 3000);
  4933. \t\t\t\t\t\t\t\t\t}
  4934. \t\t\t\t\t\t\t\t} else {
  4935. \t\t\t\t\t\t\t\t\tthis.innerHTML = '<i class=\"ti ti-check\"></i> <span>Ajouté !</span>';
  4936. \t\t\t\t\t\t\t\t}
  4937. \t\t\t\t\t\t\t\t
  4938. \t\t\t\t\t\t\t\t// Mettre à jour le compteur du panier si présent
  4939. \t\t\t\t\t\t\t\tconst cartBadge = document.querySelector('.cart-badge');
  4940. \t\t\t\t\t\t\t\tif (cartBadge) {
  4941. \t\t\t\t\t\t\t\t\tcartBadge.textContent = data.totalQty || data.quantity || 0;
  4942. \t\t\t\t\t\t\t\t\t// Animation du badge
  4943. \t\t\t\t\t\t\t\t\tcartBadge.style.transform = 'scale(1.2)';
  4944. \t\t\t\t\t\t\t\t\tsetTimeout(() => {
  4945. \t\t\t\t\t\t\t\t\t\tcartBadge.style.transform = 'scale(1)';
  4946. \t\t\t\t\t\t\t\t\t}, 300);
  4947. \t\t\t\t\t\t\t\t}
  4948. \t\t\t\t\t\t\t\t
  4949. \t\t\t\t\t\t\t\t// Afficher une notification si la fonction existe
  4950. \t\t\t\t\t\t\t\tif (typeof showCustomAlert === 'function') {
  4951. \t\t\t\t\t\t\t\t\tshowCustomAlert('Produit ajouté au panier avec succès !', 'success');
  4952. \t\t\t\t\t\t\t\t}
  4953. \t\t\t\t\t\t\t\t
  4954. \t\t\t\t\t\t\t\t// Restaurer le bouton après 2 secondes
  4955. \t\t\t\t\t\t\t\tsetTimeout(() => {
  4956. \t\t\t\t\t\t\t\t\tthis.classList.remove('success');
  4957. \t\t\t\t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  4958. \t\t\t\t\t\t\t\t\t\tthis.style.background = '';
  4959. \t\t\t\t\t\t\t\t\t\tthis.style.pointerEvents = 'auto';
  4960. \t\t\t\t\t\t\t\t\t}
  4961. \t\t\t\t\t\t\t\t\tthis.innerHTML = originalContent;
  4962. \t\t\t\t\t\t\t\t}, 2000);
  4963. \t\t\t\t\t\t\t} else {
  4964. \t\t\t\t\t\t\t\t// Erreur
  4965. \t\t\t\t\t\t\t\tthis.classList.remove('loading');
  4966. \t\t\t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  4967. \t\t\t\t\t\t\t\t\tthis.style.pointerEvents = 'auto';
  4968. \t\t\t\t\t\t\t\t}
  4969. \t\t\t\t\t\t\t\tthis.innerHTML = originalContent;
  4970. \t\t\t\t\t\t\t\t
  4971. \t\t\t\t\t\t\t\tconst message = data.message || 'Erreur lors de l\\'ajout au panier';
  4972. \t\t\t\t\t\t\t\tif (typeof showCustomAlert === 'function') {
  4973. \t\t\t\t\t\t\t\t\tshowCustomAlert(message, 'error');
  4974. \t\t\t\t\t\t\t\t} else {
  4975. \t\t\t\t\t\t\t\t\talert(message);
  4976. \t\t\t\t\t\t\t\t}
  4977. \t\t\t\t\t\t\t}
  4978. \t\t\t\t\t\t})
  4979. \t\t\t\t\t\t.catch(error => {
  4980. \t\t\t\t\t\t\tconsole.error('Erreur:', error);
  4981. \t\t\t\t\t\t\tthis.classList.remove('loading');
  4982. \t\t\t\t\t\t\tif (this.id === 'add-to-cart-btn') {
  4983. \t\t\t\t\t\t\t\tthis.style.pointerEvents = 'auto';
  4984. \t\t\t\t\t\t\t}
  4985. \t\t\t\t\t\t\tthis.innerHTML = originalContent;
  4986. \t\t\t\t\t\t\t
  4987. \t\t\t\t\t\t\tif (typeof showCustomAlert === 'function') {
  4988. \t\t\t\t\t\t\t\tshowCustomAlert('Erreur lors de l\\'ajout au panier. Veuillez réessayer.', 'error');
  4989. \t\t\t\t\t\t\t} else {
  4990. \t\t\t\t\t\t\t\talert('Erreur lors de l\\'ajout au panier. Veuillez réessayer.');
  4991. \t\t\t\t\t\t\t}
  4992. \t\t\t\t\t\t});
  4993. \t\t\t\t\t\t
  4994. \t\t\t\t\t\treturn false;
  4995. \t\t\t\t\t});
  4996. \t\t\t\t});
  4997. \t\t\t});
  4998. \t\t</script>
  4999. \t{% endif %}
  5002. \t<script src=\"js/vendor/jquery-2.2.4.min.js\"></script>
  5003. \t<script src=\"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js\" integrity=\"sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4\" crossorigin=\"anonymous\"></script>
  5004. \t<script src=\"js/vendor/bootstrap.min.js\"></script>
  5005. \t<script src=\"js/jquery.ajaxchimp.min.js\"></script>
  5006. \t<script src=\"js/jquery.nice-select.min.js\"></script>
  5007. \t<script src=\"js/jquery.sticky.js\"></script>
  5008. \t<script src=\"js/nouislider.min.js\"></script>
  5009. \t<script src=\"js/jquery.magnific-popup.min.js\"></script>
  5010. \t<script src=\"js/owl.carousel.min.js\"></script>
  5011. \t<!--gmaps Js-->
  5012. \t<script src=\"https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE\"></script>
  5013. \t<script src=\"js/gmaps.min.js\"></script>
  5014. \t<script src=\"js/main.js\"></script>
  5015. \t<script>
  5016. \t\t// Le gestionnaire d'événements pour les boutons d'ajout au panier est déjà défini
  5017. \t\t// dans la section \"Vous pourriez aussi aimer\" et gère maintenant aussi le bouton principal
  5019. // Gestion de la galerie d'images
  5020. document.addEventListener('DOMContentLoaded', function () {
  5021. const thumbnails = document.querySelectorAll('.thumbnail-item');
  5022. const mainImage = document.getElementById('main-product-image');
  5023. const currentIndex = document.getElementById('current-image-index');
  5024. const totalImages = document.getElementById('total-images');
  5026. // Fonction pour changer l'image principale
  5027. function changeMainImage(thumbnail, index) {
  5028. const imageUrl = thumbnail.getAttribute('data-image');
  5029. if (mainImage && imageUrl) {
  5030. mainImage.style.opacity = '0';
  5031. setTimeout(() => {
  5032. mainImage.src = imageUrl;
  5033. mainImage.style.opacity = '1';
  5034. // Reset zoom
  5035. mainImage.style.transform = 'scale(1)';
  5036. mainImage.style.transformOrigin = 'center center';
  5037. }, 150);
  5038. }
  5040. // Mettre à jour l'indicateur
  5041. if (currentIndex) {
  5042. currentIndex.textContent = index + 1;
  5043. }
  5044. }
  5046. // Ajouter le zoom sur l'image principale au survol
  5047. const mainImageContainer = document.querySelector('.product-main-image-wrapper');
  5048. if (mainImageContainer && mainImage) {
  5049. \tmainImageContainer.addEventListener('mousemove', function(e) {
  5050. \t\tconst rect = mainImageContainer.getBoundingClientRect();
  5051. \t\tconst x = e.clientX - rect.left;
  5052. \t\tconst y = e.clientY - rect.top;
  5053. \t\t
  5054. \t\tconst xPercent = (x / rect.width) * 100;
  5055. \t\tconst yPercent = (y / rect.height) * 100;
  5056. \t\t
  5057. \t\tmainImage.style.transformOrigin = `\${xPercent}% \${yPercent}%`;
  5058. \t\tmainImage.style.transform = 'scale(2.2)'; // Zoom Alibaba-style
  5059. \t});
  5060. \t
  5061. \tmainImageContainer.addEventListener('mouseleave', function() {
  5062. \t\tmainImage.style.transformOrigin = 'center center';
  5063. \t\tmainImage.style.transform = 'scale(1)';
  5064. \t});
  5065. }
  5067. // Gérer le survol sur les miniatures (sélection permanente au survol)
  5068. thumbnails.forEach((thumbnail, index) => {
  5069. thumbnail.addEventListener('mouseenter', function () { // Retirer toutes les sélections permanentes
  5070. thumbnails.forEach(t => {
  5071. t.classList.remove('active', 'permanently-active');
  5072. });
  5074. // Ajouter active et permanently-active à la miniature survolée
  5075. thumbnail.classList.add('active', 'permanently-active');
  5077. // Changer l'image principale
  5078. changeMainImage(thumbnail, index);
  5079. });
  5080. });
  5082. // Gérer le clic sur les miniatures (sélection permanente)
  5083. thumbnails.forEach((thumbnail, index) => {
  5084. thumbnail.addEventListener('click', function () { // Retirer la classe active et permanently-active de toutes les miniatures
  5085. thumbnails.forEach(t => {
  5086. t.classList.remove('active', 'permanently-active');
  5087. });
  5089. // Ajouter les classes active et permanently-active à la miniature cliquée
  5090. thumbnail.classList.add('active', 'permanently-active');
  5092. // Changer l'image principale
  5093. changeMainImage(thumbnail, index);
  5094. });
  5095. });
  5097. // Gestion du carrousel de miniatures avec taille fixe carrée
  5098. const navUpBtn = document.getElementById('thumbnail-nav-up');
  5099. const navDownBtn = document.getElementById('thumbnail-nav-down');
  5100. const thumbnailsContainer = document.getElementById('product-thumbnails');
  5101. const thumbnailsWrapper = document.getElementById('thumbnails-wrapper');
  5102. const thumbnailItems = Array.from(document.querySelectorAll('.thumbnail-item'));
  5104. let currentThumbnailOffset = 0;
  5105. const thumbnailHeight = 90;
  5106. // 80px (hauteur) + 10px (gap)
  5107. // Calculer la hauteur disponible pour les miniatures dynamiquement
  5108. const thumbnailsEl = document.getElementById('product-thumbnails');
  5109. let containerHeight = thumbnailsEl ? thumbnailsEl.clientHeight : 520; // Hauteur par défaut si non disponible
  5110. let visibleThumbnails = Math.floor(containerHeight / thumbnailHeight);
  5112. // Recalculer après le chargement pour avoir la vraie hauteur
  5113. setTimeout(() => {
  5114. if (thumbnailsEl) {
  5115. containerHeight = thumbnailsEl.clientHeight;
  5116. visibleThumbnails = Math.floor(containerHeight / thumbnailHeight);
  5117. updateThumbnailsPosition();
  5118. }
  5119. }, 100);
  5121. function getCurrentIndex() {
  5122. const current = document.querySelector('.thumbnail-item.permanently-active') || document.querySelector('.thumbnail-item.active');
  5123. if (! current) 
  5124. return 0;
  5128. const idxAttr = current.getAttribute('data-index');
  5129. return idxAttr ? parseInt(idxAttr, 10) : Math.max(0, thumbnailItems.indexOf(current));
  5130. }
  5132. function selectThumbnailByIndex(newIndex) {
  5133. if (! thumbnailItems.length) 
  5134. return;
  5138. const total = thumbnailItems.length;
  5139. if (newIndex < 0) 
  5140. newIndex = 0;
  5144. if (newIndex > total - 1) 
  5145. newIndex = total - 1;
  5149. // Reset classes
  5150. thumbnailItems.forEach(t => t.classList.remove('active', 'permanently-active'));
  5151. const target = thumbnailItems[newIndex];
  5152. if (! target) 
  5153. return;
  5157. target.classList.add('active', 'permanently-active');
  5158. changeMainImage(target, newIndex);
  5160. // Ajuster le carrousel pour voir la miniature sélectionnée
  5161. ensureThumbnailVisible(newIndex);
  5162. }
  5164. function ensureThumbnailVisible(index) {
  5165. if (! thumbnailsWrapper || ! thumbnailItems.length) 
  5166. return;
  5170. const targetTop = index * thumbnailHeight;
  5171. const visibleTop = currentThumbnailOffset * thumbnailHeight;
  5172. const visibleBottom = visibleTop + containerHeight;
  5174. // Si la miniature est au-dessus de la zone visible
  5175. if (targetTop < visibleTop) {
  5176. currentThumbnailOffset = index;
  5177. updateThumbnailsPosition();
  5178. }
  5179. // Si la miniature est en-dessous de la zone visible 
  5180. else if (targetTop + thumbnailHeight > visibleBottom) {
  5181. currentThumbnailOffset = Math.max(0, index - visibleThumbnails + 1);
  5182. updateThumbnailsPosition();
  5183. }
  5184. }
  5186. function updateThumbnailsPosition() {
  5187. if (!thumbnailsWrapper) 
  5188. return;
  5192. const maxOffset = Math.max(0, thumbnailItems.length - visibleThumbnails);
  5193. currentThumbnailOffset = Math.max(0, Math.min(currentThumbnailOffset, maxOffset));
  5194. thumbnailsWrapper.style.transform = `translateY(-\${
  5195. currentThumbnailOffset * thumbnailHeight
  5196. }px)`;
  5197. updateNavButtons();
  5198. }
  5200. function updateNavButtons() {
  5201. if (!thumbnailItems.length) 
  5202. return;
  5206. const maxOffset = Math.max(0, thumbnailItems.length - visibleThumbnails);
  5207. const canScrollUp = currentThumbnailOffset > 0;
  5208. const canScrollDown = currentThumbnailOffset < maxOffset;
  5210. if (navUpBtn) {
  5211. navUpBtn.classList.toggle('disabled', ! canScrollUp);
  5212. }
  5213. if (navDownBtn) {
  5214. navDownBtn.classList.toggle('disabled', ! canScrollDown);
  5215. }
  5216. }
  5218. // Navigation avec les boutons
  5219. if(navUpBtn) {
  5220. navUpBtn.addEventListener('click', function (e) {
  5221. e.preventDefault();
  5222. if (currentThumbnailOffset > 0) {
  5223. currentThumbnailOffset --;
  5224. updateThumbnailsPosition();
  5225. }
  5226. });
  5227. }
  5229. if(navDownBtn) {
  5230. navDownBtn.addEventListener('click', function (e) {
  5231. e.preventDefault();
  5232. const maxOffset = Math.max(0, thumbnailItems.length - visibleThumbnails);
  5233. if (currentThumbnailOffset < maxOffset) {
  5234. currentThumbnailOffset ++;
  5235. updateThumbnailsPosition();
  5236. }
  5237. });
  5238. }
  5240. // Initialiser le carrousel
  5241. if(thumbnailsWrapper && thumbnailItems.length > 0) {
  5242. updateThumbnailsPosition();
  5243. // S'assurer que la première miniature est visible
  5244. ensureThumbnailVisible(0);
  5245. }
  5247. // Navigation sur l'image principale
  5248. const mainPrev = document.getElementById('main-image-prev');
  5249. const mainNext = document.getElementById('main-image-next');
  5250. if(mainPrev) {
  5251. mainPrev.addEventListener('click', function (e) {
  5252. e.preventDefault();
  5253. const idx = getCurrentIndex();
  5254. selectThumbnailByIndex(idx - 1);
  5255. });
  5256. }
  5257. if(mainNext) {
  5258. mainNext.addEventListener('click', function (e) {
  5259. e.preventDefault();
  5260. const idx = getCurrentIndex();
  5261. selectThumbnailByIndex(idx + 1);
  5262. });
  5263. }
  5264. }
  5265. );
  5267. // --- Prix de gros : calcul du prix unitaire dynamique ---
  5268. (function () {
  5269. const bulk = document.getElementById('bulk-pricing');
  5270. const qtyInputEl = document.getElementById('sst');
  5271. const unitPriceSpan = document.getElementById('unit-price-value');
  5272. const mainUnitPriceSpan = document.getElementById('main-unit-price');
  5273. const totalPriceSpan = document.getElementById('total-price-value');
  5274. const savingsAmountSpan = document.getElementById('savings-amount');
  5275. const savingsPercentSpan = document.getElementById('savings-percent');
  5276. const unitPriceInput = document.getElementById('unit-price-input');
  5277. const tierRowsTbody = document.getElementById('bulk-tier-rows');
  5278. if (! bulk || ! qtyInputEl || ! unitPriceSpan || ! mainUnitPriceSpan || ! unitPriceInput) 
  5279. return;
  5283. let tiers = [];
  5284. try {
  5285. tiers = JSON.parse(bulk.getAttribute('data-tiers') || '[]');
  5286. } catch (e) {
  5287. tiers = [];
  5288. }
  5289. if (!Array.isArray(tiers) || tiers.length === 0) 
  5290. return;
  5294. tiers.sort(function (a, b) {
  5295. return(a.min || 0) - (b.min || 0);
  5296. });
  5297. const basePrice = (function () {
  5298. const one = tiers.find(t => (t.min || 0) <= 1);
  5299. return one ? parseFloat(one.price) : parseFloat(tiers[0].price);
  5300. })();
  5301. function getUnitPriceForQty(qty) {
  5302. let candidate = tiers[0] || null;
  5303. for (let i = 0; i < tiers.length; i++) {
  5304. if (qty >= (tiers[i].min || 1)) {
  5305. candidate = tiers[i];
  5306. }
  5307. }
  5308. return candidate ? parseFloat(candidate.price) : (tiers[0] ? parseFloat(tiers[0].price) : basePrice);
  5309. }
  5310. function formatPrice(val) {
  5311. return(parseFloat(val) || 0).toFixed(2);
  5312. }
  5313. function highlightActiveTier(qty) {
  5314. if (! tierRowsTbody) 
  5315. return;
  5319. const rows = tierRowsTbody.querySelectorAll('tr');
  5320. rows.forEach(r => r.classList.remove('table-warning'));
  5321. let activeRow = null;
  5322. rows.forEach(r => {
  5323. const m = parseInt(r.getAttribute('data-min'), 10) || 1;
  5324. if (qty >= m) 
  5325. activeRow = r;
  5329. });
  5330. if (activeRow) 
  5331. activeRow.classList.add('table-warning');
  5335. }
  5336. function refreshPrices() {
  5337. const qty = Math.max(1, parseInt(qtyInputEl.value, 10) || 1);
  5338. const unit = getUnitPriceForQty(qty);
  5339. const total = unit * qty;
  5340. const saveAmount = Math.max(0, (basePrice - unit) * qty);
  5341. const savePercent = Math.max(0, 100 * (basePrice - unit) / basePrice);
  5342. unitPriceSpan.textContent = formatPrice(unit) + ' HTG';
  5343. mainUnitPriceSpan.textContent = formatPrice(unit);
  5344. if (totalPriceSpan) 
  5345. totalPriceSpan.textContent = formatPrice(total);
  5349. if (savingsAmountSpan) 
  5350. savingsAmountSpan.textContent = formatPrice(saveAmount);
  5354. if (savingsPercentSpan) 
  5355. savingsPercentSpan.textContent = Math.round(savePercent);
  5359. unitPriceInput.value = formatPrice(unit);
  5360. highlightActiveTier(qty);
  5361. }
  5362. qtyInputEl.addEventListener('input', refreshPrices);
  5363. qtyInputEl.addEventListener('change', refreshPrices);
  5364. setTimeout(refreshPrices, 50);
  5365. setInterval(refreshPrices, 350);
  5366. })();
  5367. // --- /Prix de gros ---
  5369. // Injection du prix unitaire dans l'ajout au panier
  5370. (function () {
  5371. const addToCartBtn = document.getElementById('add-to-cart-btn');
  5372. if (! addToCartBtn) 
  5373. return;
  5377. addToCartBtn.addEventListener('click', function () {
  5378. const unitPriceInput = document.getElementById('unit-price-input');
  5379. if (unitPriceInput) {
  5380. addToCartBtn.setAttribute('data-unit-price', unitPriceInput.value);
  5381. }
  5382. });
  5383. })();
  5385. // Fonction pour ouvrir le modal de zoom avec loader
  5386. function openImageZoom () {
  5387. const mainImage = document.getElementById('main-product-image');
  5388. const zoomModal = document.getElementById('image-zoom-modal');
  5389. const zoomImage = document.getElementById('zoom-modal-image');
  5390. const zoomLoader = document.getElementById('zoom-loader');
  5392. if (mainImage && zoomModal && zoomImage) { // Afficher le loader
  5393. if (zoomLoader) {
  5394. zoomLoader.style.display = 'flex';
  5395. }
  5397. // Masquer l'image et réinitialiser
  5398. zoomImage.classList.remove('loaded');
  5399. zoomImage.style.opacity = '0';
  5401. // Ouvrir le modal avec animation
  5402. zoomModal.classList.add('active');
  5403. document.body.style.overflow = 'hidden';
  5405. // Charger l'image
  5406. const imageUrl = mainImage.src;
  5407. const tempImage = new Image();
  5409. tempImage.onload = function () {
  5410. zoomImage.src = imageUrl;
  5411. // Masquer le loader et afficher l'image avec transition
  5412. setTimeout(function () {
  5413. if (zoomLoader) {
  5414. zoomLoader.style.display = 'none';
  5415. }
  5416. zoomImage.classList.add('loaded');
  5417. zoomImage.style.opacity = '1';
  5418. }, 200);
  5419. };
  5421. tempImage.onerror = function () {
  5422. if (zoomLoader) {
  5423. zoomLoader.style.display = 'none';
  5424. }
  5425. zoomImage.src = imageUrl;
  5426. zoomImage.classList.add('loaded');
  5427. };
  5429. tempImage.src = imageUrl;
  5430. }
  5431. }
  5433. // Fonction pour fermer le modal de zoom avec animation
  5434. function closeImageZoom () {
  5435. const zoomModal = document.getElementById('image-zoom-modal');
  5436. const zoomImage = document.getElementById('zoom-modal-image');
  5437. const zoomLoader = document.getElementById('zoom-loader');
  5439. if (zoomModal) { // Animation de fermeture
  5440. if (zoomImage) {
  5441. zoomImage.style.opacity = '0';
  5442. zoomImage.classList.remove('loaded');
  5443. }
  5445. setTimeout(function () {
  5446. zoomModal.classList.remove('active');
  5447. document.body.style.overflow = 'auto';
  5449. // Réinitialiser le loader pour la prochaine ouverture
  5450. if (zoomLoader) {
  5451. zoomLoader.style.display = 'none';
  5452. }
  5453. }, 200);
  5454. }
  5455. }
  5457. // Fermer le modal en cliquant en dehors
  5458. document.addEventListener('DOMContentLoaded', function () {
  5459. const zoomModal = document.getElementById('image-zoom-modal');
  5460. if (zoomModal) {
  5461. zoomModal.addEventListener('click', function (e) {
  5462. if (e.target === zoomModal) {
  5463. closeImageZoom();
  5464. }
  5465. });
  5466. }
  5467. });
  5468. \t</script>
  5470. \t<!-- Modal de zoom d'image -->
  5471. \t<div id=\"image-zoom-modal\" class=\"image-zoom-modal\">
  5472. \t\t<span class=\"close-zoom\" onclick=\"closeImageZoom()\" title=\"Fermer\">&times;</span>
  5473. \t\t<div
  5474. \t\t\tclass=\"zoom-modal-content\">
  5475. \t\t\t<!-- Loader -->
  5476. \t\t\t<div class=\"zoom-loader\" id=\"zoom-loader\" style=\"display: none;\">
  5477. \t\t\t\t<div class=\"zoom-loader-spinner\"></div>
  5478. \t\t\t\t<div class=\"zoom-loader-text\">Chargement...</div>
  5479. \t\t\t</div>
  5480. \t\t\t<!-- Image -->
  5481. \t\t\t<img id=\"zoom-modal-image\" src=\"\" alt=\"{{ product.name }}\">
  5482. \t\t</div>
  5483. \t</div>
  5485. \t{% if dropshipReferral %}
  5486. \t\t<!-- Modal d'affiliation -->
  5487. \t\t<div id=\"dropship-modal\" class=\"dropship-referral-modal\" style=\"display: none;\">
  5488. \t\t\t<div class=\"dropship-modal-overlay\"></div>
  5489. \t\t\t<div class=\"dropship-modal-content\">
  5490. \t\t\t\t<button type=\"button\" class=\"dropship-modal-close\" onclick=\"closeDropshipModal()\" aria-label=\"Fermer\">
  5491. \t\t\t\t\t&times;
  5492. \t\t\t\t</button>
  5493. \t\t\t\t<div class=\"dropship-modal-header\">
  5494. \t\t\t\t\t<div class=\"dropship-icon\">
  5495. \t\t\t\t\t\t<i class=\"fas fa-gift\"></i>
  5496. \t\t\t\t\t</div>
  5497. \t\t\t\t\t<h3>Produit recommandé par
  5498. \t\t\t\t\t\t{{ dropshipReferral.affiliateName }}</h3>
  5499. \t\t\t\t\t<p class=\"dropship-subtitle\">Vous avez été dirigé vers ce produit par un de nos partenaires</p>
  5500. \t\t\t\t</div>
  5501. \t\t\t\t<div class=\"dropship-modal-body\">
  5502. \t\t\t\t\t<div class=\"dropship-product-info\">
  5503. \t\t\t\t\t\t{% if product.images|length > 0 %}
  5504. \t\t\t\t\t\t\t<img src=\"{{ asset(product.images[0]) }}\" alt=\"{{ product.name }}\" class=\"dropship-product-image\" onerror=\"this.style.display='none'; this.nextElementSibling.style.display='flex';\">
  5505. \t\t\t\t\t\t\t<div class=\"dropship-product-image-placeholder\" style=\"display: none; width: 100px; height: 100px; background: #f0f0f0; border-radius: 8px; align-items: center; justify-content: center; color: #999;\">
  5506. \t\t\t\t\t\t\t\t<i class=\"fas fa-image\" style=\"font-size: 32px;\"></i>
  5507. \t\t\t\t\t\t\t</div>
  5508. \t\t\t\t\t\t{% else %}
  5509. \t\t\t\t\t\t\t<div class=\"dropship-product-image-placeholder\" style=\"width: 100px; height: 100px; background: #f0f0f0; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999;\">
  5510. \t\t\t\t\t\t\t\t<i class=\"fas fa-image\" style=\"font-size: 32px;\"></i>
  5511. \t\t\t\t\t\t\t</div>
  5512. \t\t\t\t\t\t{% endif %}
  5513. \t\t\t\t\t\t<div class=\"dropship-product-details\">
  5514. \t\t\t\t\t\t\t<h4>{{ product.name }}</h4>
  5515. \t\t\t\t\t\t\t<div class=\"dropship-product-price\">
  5516. \t\t\t\t\t\t\t\t<span class=\"price\">{{ product.price|number_format(2, ',', ' ') }}
  5517. \t\t\t\t\t\t\t\t\tHTG</span>
  5518. \t\t\t\t\t\t\t</div>
  5519. \t\t\t\t\t\t</div>
  5520. \t\t\t\t\t</div>
  5521. \t\t\t\t\t<div class=\"dropship-message\">
  5522. \t\t\t\t\t\t<p>
  5523. \t\t\t\t\t\t\t<strong>{{ dropshipReferral.affiliateName }}</strong>
  5524. \t\t\t\t\t\t\tvous recommande ce produit. Souhaitez-vous l'ajouter à votre panier ?</p>
  5525. \t\t\t\t\t</div>
  5526. \t\t\t\t</div>
  5527. \t\t\t\t<div class=\"dropship-modal-footer\">
  5528. \t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" onclick=\"closeDropshipModal()\">
  5529. \t\t\t\t\t\tParcourir d'abord
  5530. \t\t\t\t\t</button>
  5531. \t\t\t\t\t<button type=\"button\" class=\"btn btn-primary dropship-add-to-cart\" onclick=\"addToCartFromDropship()\">
  5532. \t\t\t\t\t\t<i class=\"fas fa-shopping-cart\"></i>
  5533. \t\t\t\t\t\tAjouter au panier
  5534. \t\t\t\t\t</button>
  5535. \t\t\t\t</div>
  5536. \t\t\t</div>
  5537. \t\t</div>
  5539. \t\t<style>
  5540. \t\t\t.dropship-referral-modal {
  5541. \t\t\t\tposition: fixed;
  5542. \t\t\t\ttop: 0;
  5543. \t\t\t\tleft: 0;
  5544. \t\t\t\twidth: 100%;
  5545. \t\t\t\theight: 100%;
  5546. \t\t\t\tz-index: 10000;
  5547. \t\t\t\tdisplay: flex;
  5548. \t\t\t\talign-items: center;
  5549. \t\t\t\tjustify-content: center;
  5550. \t\t\t}
  5552. \t\t\t.dropship-modal-overlay {
  5553. \t\t\t\tposition: absolute;
  5554. \t\t\t\ttop: 0;
  5555. \t\t\t\tleft: 0;
  5556. \t\t\t\twidth: 100%;
  5557. \t\t\t\theight: 100%;
  5558. \t\t\t\tbackground: rgba(0, 0, 0, 0.6);
  5559. \t\t\t\tbackdrop-filter: blur(4px);
  5560. \t\t\t}
  5562. \t\t\t.dropship-modal-content {
  5563. \t\t\t\tposition: relative;
  5564. \t\t\t\tbackground: white;
  5565. \t\t\t\tborder-radius: 16px;
  5566. \t\t\t\tbox-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  5567. \t\t\t\tmax-width: 500px;
  5568. \t\t\t\twidth: 90%;
  5569. \t\t\t\tmax-height: 90vh;
  5570. \t\t\t\toverflow-y: auto;
  5571. \t\t\t\tz-index: 10001;
  5572. \t\t\t\tanimation: dropshipModalSlideIn 0.3s ease-out;
  5573. \t\t\t}
  5575. \t\t\t@keyframes dropshipModalSlideIn {
  5576. \t\t\t\tfrom {
  5577. \t\t\t\t\topacity: 0;
  5578. \t\t\t\t\ttransform: translateY(-30px) scale(0.95);
  5579. \t\t\t\t}
  5580. \t\t\t\tto {
  5581. \t\t\t\t\topacity: 1;
  5582. \t\t\t\t\ttransform: translateY(0) scale(1);
  5583. \t\t\t\t}
  5584. \t\t\t}
  5586. \t\t\t.dropship-modal-close {
  5587. \t\t\t\tposition: absolute;
  5588. \t\t\t\ttop: 15px;
  5589. \t\t\t\tright: 15px;
  5590. \t\t\t\tbackground: none;
  5591. \t\t\t\tborder: none;
  5592. \t\t\t\tfont-size: 28px;
  5593. \t\t\t\tcolor: #666;
  5594. \t\t\t\tcursor: pointer;
  5595. \t\t\t\twidth: 35px;
  5596. \t\t\t\theight: 35px;
  5597. \t\t\t\tdisplay: flex;
  5598. \t\t\t\talign-items: center;
  5599. \t\t\t\tjustify-content: center;
  5600. \t\t\t\tborder-radius: 50%;
  5601. \t\t\t\ttransition: all 0.2s;
  5602. \t\t\t\tz-index: 10;
  5603. \t\t\t}
  5605. \t\t\t.dropship-modal-close:hover {
  5606. \t\t\t\tbackground: #f0f0f0;
  5607. \t\t\t\tcolor: #333;
  5608. \t\t\t}
  5610. \t\t\t.dropship-modal-header {
  5611. \t\t\t\tpadding: 30px 30px 20px;
  5612. \t\t\t\ttext-align: center;
  5613. \t\t\t\tborder-bottom: 1px solid #f0f0f0;
  5614. \t\t\t}
  5616. \t\t\t.dropship-icon {
  5617. \t\t\t\twidth: 70px;
  5618. \t\t\t\theight: 70px;
  5619. \t\t\t\tmargin: 0 auto 15px;
  5620. \t\t\t\tbackground: linear-gradient(135deg, #ffa200 0%, #ff8c00 100%);
  5621. \t\t\t\tborder-radius: 50%;
  5622. \t\t\t\tdisplay: flex;
  5623. \t\t\t\talign-items: center;
  5624. \t\t\t\tjustify-content: center;
  5625. \t\t\t\tfont-size: 32px;
  5626. \t\t\t\tcolor: white;
  5627. \t\t\t\tbox-shadow: 0 4px 15px rgba(255, 162, 0, 0.3);
  5628. \t\t\t}
  5630. \t\t\t.dropship-modal-header h3 {
  5631. \t\t\t\tmargin: 0 0 8px;
  5632. \t\t\t\tfont-size: 22px;
  5633. \t\t\t\tfont-weight: 600;
  5634. \t\t\t\tcolor: #333;
  5635. \t\t\t}
  5637. \t\t\t.dropship-subtitle {
  5638. \t\t\t\tmargin: 0;
  5639. \t\t\t\tcolor: #666;
  5640. \t\t\t\tfont-size: 14px;
  5641. \t\t\t}
  5643. \t\t\t.dropship-modal-body {
  5644. \t\t\t\tpadding: 25px 30px;
  5645. \t\t\t}
  5647. \t\t\t.dropship-product-info {
  5648. \t\t\t\tdisplay: flex;
  5649. \t\t\t\tgap: 15px;
  5650. \t\t\t\tmargin-bottom: 20px;
  5651. \t\t\t\tpadding: 15px;
  5652. \t\t\t\tbackground: #f8f9fa;
  5653. \t\t\t\tborder-radius: 10px;
  5654. \t\t\t}
  5656. \t\t\t.dropship-product-image {
  5657. \t\t\t\twidth: 80px;
  5658. \t\t\t\theight: 80px;
  5659. \t\t\t\tobject-fit: cover;
  5660. \t\t\t\tborder-radius: 8px;
  5661. \t\t\t\tflex-shrink: 0;
  5662. \t\t\t}
  5664. \t\t\t.dropship-product-details {
  5665. \t\t\t\tflex: 1;
  5666. \t\t\t}
  5668. \t\t\t.dropship-product-details h4 {
  5669. \t\t\t\tmargin: 0 0 8px;
  5670. \t\t\t\tfont-size: 16px;
  5671. \t\t\t\tfont-weight: 600;
  5672. \t\t\t\tcolor: #333;
  5673. \t\t\t}
  5675. \t\t\t.dropship-product-price {
  5676. \t\t\t\tmargin-top: 5px;
  5677. \t\t\t}
  5679. \t\t\t.dropship-product-price .price {
  5680. \t\t\t\tfont-size: 20px;
  5681. \t\t\t\tfont-weight: 700;
  5682. \t\t\t\tcolor: #ffa200;
  5683. \t\t\t}
  5685. \t\t\t.dropship-message {
  5686. \t\t\t\tpadding: 15px;
  5687. \t\t\t\tbackground: #fff9e6;
  5688. \t\t\t\tborder-left: 4px solid #ffa200;
  5689. \t\t\t\tborder-radius: 6px;
  5690. \t\t\t}
  5692. \t\t\t.dropship-message p {
  5693. \t\t\t\tmargin: 0;
  5694. \t\t\t\tcolor: #666;
  5695. \t\t\t\tline-height: 1.6;
  5696. \t\t\t}
  5698. \t\t\t.dropship-modal-footer {
  5699. \t\t\t\tpadding: 20px 30px 30px;
  5700. \t\t\t\tdisplay: flex;
  5701. \t\t\t\tgap: 12px;
  5702. \t\t\t\tjustify-content: flex-end;
  5703. \t\t\t\tborder-top: 1px solid #f0f0f0;
  5704. \t\t\t}
  5706. \t\t\t.dropship-modal-footer .btn {
  5707. \t\t\t\tpadding: 12px 24px;
  5708. \t\t\t\tborder-radius: 8px;
  5709. \t\t\t\tfont-weight: 500;
  5710. \t\t\t\tborder: none;
  5711. \t\t\t\tcursor: pointer;
  5712. \t\t\t\ttransition: all 0.2s;
  5713. \t\t\t\tfont-size: 15px;
  5714. \t\t\t}
  5716. \t\t\t.dropship-modal-footer .btn-secondary {
  5717. \t\t\t\tbackground: #f0f0f0;
  5718. \t\t\t\tcolor: #666;
  5719. \t\t\t}
  5721. \t\t\t.dropship-modal-footer .btn-secondary:hover {
  5722. \t\t\t\tbackground: #e0e0e0;
  5723. \t\t\t}
  5725. \t\t\t.dropship-modal-footer .btn-primary {
  5726. \t\t\t\tbackground: #ffa200;
  5727. \t\t\t\tcolor: white;
  5728. \t\t\t}
  5730. \t\t\t.dropship-modal-footer .btn-primary:hover {
  5731. \t\t\t\tbackground: #e8910a;
  5732. \t\t\t\ttransform: translateY(-2px);
  5733. \t\t\t\tbox-shadow: 0 4px 12px rgba(255, 162, 0, 0.3);
  5734. \t\t\t}
  5736. \t\t\t.dropship-modal-footer .btn-primary:disabled {
  5737. \t\t\t\topacity: 0.6;
  5738. \t\t\t\tcursor: not-allowed;
  5739. \t\t\t\ttransform: none;
  5740. \t\t\t}
  5741. \t\t</style>
  5743. \t\t<script>
  5744. \t\t\t// Afficher le modal automatiquement au chargement de la page
  5745. document.addEventListener('DOMContentLoaded', function () {
  5746. const dropshipModal = document.getElementById('dropship-modal');
  5747. if (dropshipModal) {
  5748. setTimeout(function () {
  5749. dropshipModal.style.display = 'flex';
  5750. document.body.style.overflow = 'hidden';
  5751. }, 500); // Délai de 500ms pour une meilleure UX
  5752. }
  5753. });
  5755. function closeDropshipModal () {
  5756. const dropshipModal = document.getElementById('dropship-modal');
  5757. if (dropshipModal) {
  5758. dropshipModal.style.display = 'none';
  5759. document.body.style.overflow = 'auto';
  5760. }
  5761. }
  5763. function addToCartFromDropship () {
  5764. const addBtn = document.querySelector('.dropship-add-to-cart');
  5765. if (! addBtn) 
  5766. return;
  5770. // Désactiver le bouton pendant le traitement
  5771. addBtn.disabled = true;
  5772. addBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"></i> Ajout en cours...';
  5774. const productId = {{ product.id }};
  5775. const qty = parseInt(document.getElementById('sst') ?. value || '1');
  5777. // Utiliser fetch pour ajouter au panier
  5778. fetch('{{ path(\"cart_add\") }}', {
  5779. method: 'POST',
  5780. headers: {
  5781. 'Content-Type': 'application/x-www-form-urlencoded',
  5782. 'X-Requested-With': 'XMLHttpRequest'
  5783. },
  5784. body: new URLSearchParams(
  5785. {productId: productId, qty: qty}
  5786. )
  5787. }).then(response => response.json()).then(data => {
  5788. if (data.ok) { // Afficher un message de succès
  5789. const modalBody = document.querySelector('.dropship-modal-body');
  5790. if (modalBody) {
  5791. modalBody.innerHTML = `
  5792. \t\t\t\t\t\t\t\t<div style=\"text-align: center; padding: 30px 20px;\">
  5793. \t\t\t\t\t\t\t\t\t<div style=\"width: 80px; height: 80px; margin: 0 auto 20px; background: #d4edda; border-radius: 50%; display: flex; align-items: center; justify-content: center;\">
  5794. \t\t\t\t\t\t\t\t\t\t<i class=\"fas fa-check\" style=\"font-size: 40px; color: #28a745;\"></i>
  5795. \t\t\t\t\t\t\t\t\t</div>
  5796. \t\t\t\t\t\t\t\t\t<h3 style=\"color: #28a745; margin-bottom: 10px;\">Produit ajouté avec succès !</h3>
  5797. \t\t\t\t\t\t\t\t\t<p style=\"color: #666; margin-bottom: 20px;\">Merci d'avoir utilisé le lien de recommandation de <strong>{{ dropshipReferral.affiliateName }}</strong></p>
  5798. \t\t\t\t\t\t\t\t\t<p style=\"color: #666; font-size: 14px;\">Vous pouvez continuer vos achats ou aller directement au panier.</p>
  5799. \t\t\t\t\t\t\t\t</div>
  5800. \t\t\t\t\t\t\t`;
  5801. }
  5803. const modalFooter = document.querySelector('.dropship-modal-footer');
  5804. if (modalFooter) {
  5805. modalFooter.innerHTML = `
  5806. \t\t\t\t\t\t\t\t<button type=\"button\" class=\"btn btn-secondary\" onclick=\"closeDropshipModal()\">
  5807. \t\t\t\t\t\t\t\t\tContinuer les achats
  5808. \t\t\t\t\t\t\t\t</button>
  5809. \t\t\t\t\t\t\t\t<a href=\"{{ path('cart') }}\" class=\"btn btn-primary\" style=\"text-decoration: none; display: inline-block;\">
  5810. \t\t\t\t\t\t\t\t\t<i class=\"fas fa-shopping-cart\"></i> Voir le panier
  5811. \t\t\t\t\t\t\t\t</a>
  5812. \t\t\t\t\t\t\t`;
  5813. }
  5815. // Mettre à jour le compteur du panier si présent
  5816. const cartCount = document.querySelector('.cart-count, .cart_count, [data-cart-count]');
  5817. if (cartCount) {
  5818. cartCount.textContent = data.totalQty || 0;
  5819. }
  5820. } else {
  5821. showCustomAlert('Erreur lors de l\\'ajout au panier. Veuillez réessayer.', 'error');
  5822. addBtn.disabled = false;
  5823. addBtn.innerHTML = '<i class=\"fas fa-shopping-cart\"></i> Ajouter au panier';
  5824. }
  5825. }).catch(error => {
  5826. console.error('Erreur:', error);
  5827. showCustomAlert('Une erreur est survenue. Veuillez réessayer.', 'error');
  5828. addBtn.disabled = false;
  5829. addBtn.innerHTML = '<i class=\"fas fa-shopping-cart\"></i> Ajouter au panier';
  5830. });
  5831. }
  5833. // Fermer le modal en cliquant sur l'overlay
  5834. document.addEventListener('DOMContentLoaded', function () {
  5835. const dropshipModal = document.getElementById('dropship-modal');
  5836. if (dropshipModal) {
  5837. const overlay = dropshipModal.querySelector('.dropship-modal-overlay');
  5838. if (overlay) {
  5839. overlay.addEventListener('click', function () {
  5840. closeDropshipModal();
  5841. });
  5842. }
  5843. }
  5844. });
  5845. \t\t</script>
  5846. \t{% endif %}
  5848. \t<!-- Le Modal personnalisé et showCustomAlert ont été déplacés dans base_home.html.twig pour une portée globale -->
  5849. \t<script>
  5850. \t\t// Remplacer window.alert par showCustomAlert
  5851. \t\twindow.alert = window.showCustomAlert || function(message) { console.log(\"Alert:\", message); };
  5852. \t</script>
  5853. {% endblock %}
  5854. ", "home/single-product.html.twig", "/home/u540977899/domains/maketou-ht.com/public_html/templates/home/single-product.html.twig");
  5855.     }
  5856. }