templates/product/product_details.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{product.metatitle}}{% endblock %}
  5. {% block metas %}
  6. <meta name="title" content="{{product.metatitle}}">
  7. <meta name="description" content="{{product.metadescription}}">
  8. <meta property="og:image" content="{{ asset( files_directory_relative ~ product.image) }}">
  9. <meta property="og:image:alt" content="{{product.legendeimage|default('image ' ~ product.getNameByDefaultLocale ~ 'Tany mena')}}">
  10. <meta property="og:url" content="https://aromaforest.fr/boutique">
  11. <script type="application/ld+json">
  12. {
  13. "@context": "https://schema.org",
  14. "@type": "WebPage",
  15. "mainEntityOfPage": {
  16. "@type": "WebPage",
  17. "@id": "https://aromaforest.fr/boutique"
  18. },
  19. "breadcrumb": {
  20. "@type": "BreadcrumbList",
  21. "itemListElement": [
  22. {
  23. "@type": "ListItem",
  24. "position": 1,
  25. "name": "Nos Huiles",
  26. "item": "https://aromaforest.fr/boutique"
  27. },
  28. {
  29. "@type": "ListItem",
  30. "position": 2,
  31. "name": "Blog",
  32. "item": "https://aromaforest.fr/blog"
  33. },
  34. {
  35. "@type": "ListItem",
  36. "position": 2,
  37. "name": "Conditions générales de vente",
  38. "item": "https://aromaforest.fr/condition_generale_vente"
  39. }
  40. ]
  41. }
  42. }
  43. </script>
  44. {% endblock %}
  46. {% block stylesheets %}
  47. {{ parent() }}
  48. <link rel="stylesheet" href="{{ asset('assets/css/image-zoom.css') }}">
  49. <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/product/product-details.css') }}">
  50. {% endblock %}
  52. {% block body %}
  54. {% set banner_title, banner_subtitle_2 = 'Accueil', 'détails' %}
  55. {# {% include "/partials/_banner.html.twig" %} #}
  57. <!--product details start-->
  58. <div class="product_details my-5">
  59. <div class="container">
  60. <div class="row mb-5">
  61. <div class="col-12">
  62. <div class="banner-subtitle">
  63. <a href="{{ path('app_home_index') }}">{% trans %}Accueil{% endtrans %}</a>
  64. /
  65. {{banner_subtitle_2|default('Tany Mena')}}
  66. </div>
  67. </div>
  68. </div>
  69. {% if product == null or product.productCategory == null %}
  70. <div class="alert alert-danger text-center p-5" role="alert">
  71. <div class="alert-body">
  72. {% trans %}Vous ne pouvez pas accéder à ce produit{% endtrans %}.
  73. </div>
  74. </div>
  75. {% else %}
  76. <div class="row">
  77. <div class="col-lg-5 col-md-5">
  78. <div class="product-details-tab">
  79. <div class="row text-center d-flex align-items-center logo-hebbd-wl position-absolute">
  80. <div class="col-12 col-md-6 lhwl_right" >
  81. <img src="{{ asset('/assets/img/webp/home/wfen-logo-final-e1533836513548.webp') }}" alt="img-hebd" width="60">
  82. </div>
  83. <div class="col-12 col-md-6 lhwl_left">
  84. <img src="{{ asset('/assets/img/webp/home/hebbd-logo.webp') }}" alt="img-wildlife" width="60">
  85. </div>
  86. </div>
  87. <div id="img-1" class="zoomWrapper single-zoom br-12">
  88. <span class="zoom-image-custom" style="width : 100%; display : flex; justify-content : center;">
  89. <img id="zoom1" class="br-12" src="{{ asset( files_directory_relative ~ product.image) }}"
  90. data-zoom-image="{{ asset( files_directory_relative ~ product.image) }}"
  91. alt="{{product.legendeimage|default('image ' ~ product.getNameByDefaultLocale ~ 'Tany mena')}}">
  92. </span>
  93. </div>
  94. {% if product.productImages|length > 0 %}
  95. <div class="single-zoom-thumb">
  96. <ul class="s-tab-zoom owl-carousel single-product-active" id="gallery_01">
  97. <li>
  98. <a href="#" class="elevatezoom-gallery active" data-update=""
  99. data-image="{{ asset( files_directory_relative ~ product.image) }}"
  100. data-zoom-image="{{ asset( files_directory_relative ~ product.image) }}">
  101. <img src="{{ asset( files_directory_relative ~ product.image) }}" alt="{{product.legendeimage|default('image ' ~ product.getNameByDefaultLocale ~ 'Tany mena')}}" />
  102. </a>
  104. </li>
  105. {% for productImage in product.productImages %}
  106. <li>
  107. <a href="#" class="elevatezoom-gallery active" data-update=""
  108. data-image="{{ asset( files_directory_relative ~ productImage.image) }}"
  109. data-zoom-image="{{ asset( files_directory_relative ~ productImage.image) }}">
  110. <img src="{{ asset( files_directory_relative ~ productImage.image) }}" alt="{{product.legendeimage|default('image ' ~ product.getNameByDefaultLocale ~ 'Tany mena')}}" />
  111. </a>
  113. </li>
  114. {% endfor %}
  115. </ul>
  116. </div>
  117. {% endif %}
  118. </div>
  119. </div>
  120. <div class="col-lg-7 col-md-7">
  121. <div class="product_d_right">
  122. <form action="{{path('app_cart_add')}}" method="POST">
  123. <div class="mb-4">
  124. {# <span><a href="#">{{product.productCategory.description}}</a></span> #}
  125. </div>
  126. <div class="productd_title_nav">
  127. <h1><a href="#">{{product.getNameByDefaultLocale}} {% if product.volume %} - {{product.volume}}{% endif %}</a></h1>
  128. </div>
  130. <div class="price_box">
  131. <span class="current_price text-primary">{{product.cost|format_currency('EUR')}}</span>
  132. <span class="old_price"></span>
  133. </div>
  134. <div class="mb-4">
  135. <span>
  136. {# 100% pure et naturelle - COMPOSITION CONTROLÉE #}
  137. </span>
  138. </div>
  139. {% if product.getAproposByDefaultLocale %}
  140. <div class="" >
  141. {{product.getAproposByDefaultLocale|raw}}
  142. </div>
  143. {% endif %}
  145. {% if product.available %}
  146. <div class="product_variant quantity mt-3">
  147. <input min="1" max="100" value="1" type="number" name="quantity"/>
  148. <input type="hidden" value="{{product.id}}" name="product_id"/>
  150. <button class="button mx-2" type="submit">
  151. {% if product.preOrder %} {% trans %}Précommander{% endtrans %}
  152. {% else %} {% trans %}Ajouter au panier{% endtrans %} {% endif %}
  153. </button>
  154. <div class="product_variant">
  155. <a href="{{ path('app_cart_index') }}" class="button text-white bg-tany-mena px-2 mx-4"><i class="fa fa-shopping-cart" style="margin-right:10px;"></i>{% trans %}Voir le panier{% endtrans %}</a>
  156. </div>
  158. </div>
  159. {% if product.preOrder and date() < date("2023-08-28") %}
  160. <div class="mb-4">
  161. <p class="fw-bold">
  162. *Expédition au plus tard le 28 août
  163. </p>
  164. </div>
  165. {% endif %}
  166. {% else %}
  167. <div class="product_meta">
  168. {# <span>Rupture de stock</span>#}
  169. <button class="button" style="border: none;" type="button"> <span>{% trans %}Bientôt disponible{% endtrans %}</span> </button>
  170. </div>
  171. {% endif %}
  174. {# <div class=" product_ratting">
  175. <ul>
  176. <li><a href="#"><i class="ion-android-star"></i></a></li>
  177. <li><a href="#"><i class="ion-android-star"></i></a></li>
  178. <li><a href="#"><i class="ion-android-star"></i></a></li>
  179. <li><a href="#"><i class="ion-android-star"></i></a></li>
  180. <li><a href="#"><i class="ion-android-star"></i></a></li>
  181. </ul>
  182. </div> #}
  185. {#
  186. <div class="row">
  187. <div class="col-md-4 text-center">
  188. <img class="mt-4 mb-2" src="{{ asset('/assets/img/webp/home/icon/1.webp') }}" alt="img-hebd" width="60">
  189. <p class="text-secondary">
  190. <span class="fw-bolder">
  191. Expédition rapide
  192. </span>
  193. <br>
  194. <span class="detail-small">
  195. en 48h
  196. </span>
  197. </p>
  198. </div>
  199. <div class="col-md-4 text-center">
  200. <img class="mt-4 mb-2" src="{{ asset('/assets/img/webp/home/icon/2.webp') }}" alt="img-hebd" width="60">
  201. <p class="text-secondary">
  202. <span class="fw-bolder">
  203. Livraison offerte
  204. </span>
  205. <br>
  206. <span class="detail-small">
  207. dès 35€ d’achat
  208. </span>
  209. </p>
  210. </div>
  211. <div class="col-md-4 text-center">
  212. <img class="mt-4 mb-2" src="{{ asset('/assets/img/webp/home/icon/3.webp') }}" alt="img-hebd" width="60">
  213. <p class="text-secondary">
  214. <span class="fw-bolder">
  215. Paiement sécurisé
  216. </span>
  217. <br>
  218. <span class="detail-small">
  219. via stripe
  220. </span>
  221. </p>
  222. </div>
  223. </div> #}
  225. <div class="product_desc mt-5">
  226. {# <p><strong>Documents :</strong> Pour toute demande de documents concernant l’analyse chromatographique par lot ou les recherches scientifiques menées sur cette huile essentielle, <a href="{{path('app_contact_index')}}"> contactez-nous</a>.</p> #}
  227. {% if product.tracabilites|length > 0 %}
  228. <div class="d-flex flex-wrap align-items-center " style="gap: 10px;">
  229. {% for tracabilite in product.tracabilites %}
  230. <div class="card text-center" style="width: 18rem;">
  231. <div class="card-header">
  232. {{tracabilite.titre}}
  233. </div>
  234. <div class="card-body">
  235. <a href="{{path('app_product_tracabilite_download', {id: tracabilite.id})}}" class="btn btn-outline-secondary"><i class="fa fa-download" aria-hidden="true"></i>&nbsp;Télécharger</a>
  236. </div>
  237. </div>
  238. {% endfor %}
  239. </div>
  240. {% endif %}
  241. </div>
  245. </form>
  247. </div>
  248. </div>
  249. </div>
  250. {# <section class="section section-products">
  251. <div>
  252. <ul class="nav nav-tabs text-black" id="myTab" role="tablist">
  253. {% if product.getAproposByDefaultLocale %}
  254. <li class="nav-item">
  255. <a class="nav-link active" id="apropos-tab" data-bs-toggle="tab" role="tab" aria-controls="apropos" aria-selected="true" href="#apropos"><strong>{% trans %}A propos{% endtrans %}</strong></a>
  256. </li>
  257. {% endif %}
  258. {% if product.getOriginAndCurrentProductionByDefaultLocale %}
  259. <li class="nav-item">
  260. <a class="nav-link" id="originAndProduction-tab" data-bs-toggle="tab" role="tab" aria-controls="originAndProduction" aria-selected="false" href="#originAndProduction"><strong>{% trans %}Origine & production actuelle{% endtrans %}</strong></a>
  261. </li>
  262. {% endif %}
  263. {% if product.getUsageTipsByDefaultLocale %}
  264. <li class="nav-item">
  265. <a class="nav-link" id="usageTips-tab" data-bs-toggle="tab" role="tab" aria-controls="usageTips" aria-selected="false" href="#usageTips"><strong>{% trans %}Conseils d'utilisation{% endtrans %}</strong></a>
  266. </li>
  267. {% endif %}
  268. {% if product.getCompositionAndPrecautionsForUseByDefaultLocale %}
  269. <li class="nav-item">
  270. <a class="nav-link" id="precaution-tab" data-bs-toggle="tab" role="tab" aria-controls="precaution" aria-selected="false" href="#precaution"><strong>{% trans %}Composition typique & Précautions spécifiques{% endtrans %}</strong></a>
  271. </li>
  272. {% endif %}
  273. {% if product.getGeneralPrecautionByDefaultLocale %}
  274. <li class="nav-item">
  275. <a class="nav-link" id="general-precautions-tab" data-bs-toggle="tab" role="tab" aria-controls="precaution" aria-selected="false" href="#generalPrecautions"><strong>{% trans %}Précautions générales{% endtrans %}</strong></a>
  276. </li>
  277. {% endif %}
  280. {% if product.getLegalNoticeByDefaultLocale %}
  281. <li class="nav-item">
  282. <a class="nav-link" id="legal-notice-tab" data-bs-toggle="tab" role="tab" aria-controls="legelNotice" aria-selected="false" href="#legelNotice"><strong>{% trans %}Mention légale{% endtrans %}</strong></a>
  283. </li>
  284. {% endif %}
  285. </ul>
  287. <!-- Tab panes -->
  288. <div class="tab-content pt-4" id="myTabContent">
  289. {% if product.getAproposByDefaultLocale %}
  290. <div class="tab-pane container fade" id="apropos" role="tabpanel" aria-labelledby="apropos-tab">
  291. {{product.getAproposByDefaultLocale|raw}}
  292. </div>
  293. {% endif %}
  294. {% if product.getOriginAndCurrentProductionByDefaultLocale %}
  295. <div class="tab-pane container fade" id="originAndProduction" role="tabpanel" aria-labelledby="originAndProduction-tab">
  296. {{product.getOriginAndCurrentProductionByDefaultLocale|raw}}
  297. </div>
  298. {% endif %}
  299. {% if product.getUsageTipsByDefaultLocale %}
  300. <div class="tab-pane container fade" id="usageTips" role="tabpanel" aria-labelledby="usageTips-tab">
  301. {{product.getUsageTipsByDefaultLocale|raw}}
  302. </div>
  303. {% endif %}
  304. {% if product.getCompositionAndPrecautionsForUseByDefaultLocale %}
  305. <div class="tab-pane container fade" id="precaution" role="tabpanel" aria-labelledby="precaution-tab">
  306. {{product.getCompositionAndPrecautionsForUseByDefaultLocale|raw}}
  307. </div>
  308. {% endif %}
  309. {% if product.getGeneralPrecautionByDefaultLocale %}
  310. <div class="tab-pane container fade" id="generalPrecautions" role="tabpanel" aria-labelledby="general-precautions-tab">
  311. {{product.getGeneralPrecautionByDefaultLocale|raw}}
  312. </div>
  313. {% endif %}
  314. {% if product.getLegalNoticeByDefaultLocale %}
  315. <div class="tab-pane container fade" id="legelNotice" role="tabpanel" aria-labelledby="legal-notice-tab">
  316. {{product.getLegalNoticeByDefaultLocale|raw}}
  317. </div>
  318. {% endif %}
  319. </div>
  320. </div>
  322. <div class="section-container pb-0">
  323. <div class="section-products-category">
  324. <div class="section-products-category-title">
  325. <h2 class="af-section__subtitle text-secondary-2">{% trans %}Autres produits disponibles{% endtrans %}</h2>
  326. </div>
  327. <div class="section-products-items">
  329. <div id="our-oils-splide" class="splide" aria-label="Tany Mena Oils">
  330. <div class="splide__track container">
  331. <ul class="splide__list section-products-list">
  332. {% for prop in propositions %}
  333. <li class="splide__slide me-3">
  334. {% include '/partials/product/_product_2.html.twig' with {'product' : prop} %}
  335. </li>
  336. {% endfor %}
  337. </ul>
  338. </div>
  339. </div>
  340. </div>
  341. </div>
  342. </div>
  343. </section> #}
  344. {% endif %}
  346. </div>
  347. </div>
  348. <!--product details end-->
  349. {% endblock %}
  351. {% block javascripts %}
  352. {{ parent() }}
  353. <script src="{{ asset('/assets/js/image-zoom.js') }}" type="text/javascript"></script>
  354. <script>
  356. var $ = jQuery.noConflict();
  358. $(document).ready(function(){
  359. const zoomImage = $('#zoom1').clone();
  360. $('#zoom1').imageZoom({zoom : 200});
  361. $(this).on('click','.elevatezoom-gallery', function(e) {
  362. e.preventDefault();
  363. // $('#imageZoom')[0].src = $(this).find('img').attr('src');
  364. $('.containerZoom').remove();
  365. zoomImage[0].src = $(this).find('img').attr('src')
  366. $('.zoom-image-custom').html(zoomImage);
  367. $('#zoom1').imageZoom({zoom : 200});
  368. })
  372. const splide_2 = new Splide('#our-oils-splide', {
  373. type: 'loop',
  374. perPage: 4,
  375. lazyLoad: 'nearby',
  376. perMove: 1,
  377. omitEnd: true,
  378. breakpoints: {
  379. 640: {
  380. height: '100vh',
  381. perPage: 1
  382. },
  383. },
  384. });
  385. splide_2.mount();
  386. });
  388. </script>
  389. {% endblock %}