templates/page/product/details.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block page_title %}
  3. {{ 'storefront.title'|resolve|striptags }} | {{ product.name }}
  4. {% endblock %}
  5. {% block head_custom_stylesheets %}
  6. {{ encore_entry_link_tags('product-card') }}
  7. {{ encore_entry_link_tags('products') }}
  8. {% endblock head_custom_stylesheets %}
  9. {% block content %}
  10. {% set productConfig = product.config|json_decode %}
  11. <div class="container-3xl my-5">
  12. <div class="row">
  13. <div class="col-12 d-lg-none">
  14. <h1 class="ornament mb-4">{{ product.name }}</h1>
  15. </div>
  16. <div class="col-12 col-lg-8 col-xl-6 order-2 order-lg-1">
  17. <h1 class="ornament mb-4 d-none d-lg-block">{{ product.name }}</h1>
  18. <p>{{ product.description|raw }}</p>
  19. <ul id="product-config" class="my-4">
  20. {% if productConfig.kim_addresses_included %}
  21. <li>
  22. {{ productConfig.kim_addresses.quantity }}x KIM Adressen
  23. </li>
  24. {% endif %}
  25. {% if productConfig.hardware_included %}
  26. {% for hardware in productConfig.hardware %}
  27. {% if hardware.quantity > 0 %}
  28. <li>
  29. {{ hardware.quantity }}x {{ hardware.hardware|resolve }}
  30. </li>
  31. {% endif %}
  32. {% endfor %}
  33. {% endif %}
  34. </ul>
  35. <form name="product-form">
  36. <div class="row">
  37. {% if productConfig.kim_addresses_included %}
  38. {% set quantity = productConfig.kim_addresses.quantity %}
  39. <div class="col-12">
  40. <div class="bg-lightgrey p-3 p-xl-5">
  41. <h3>KIM Mail</h3>
  42. <p>Reserviere deine KIM-Adresse{{ (quantity > 1) ? 'n' : '' }}.</p>
  43. <div id="kimAddresses">
  44. {% for i in range(1, quantity) %}
  45. <div id="kim_address_result_{{ loop.index0 }}" class="d-none w-100 mb-3"></div>
  46. <div class="row">
  47. <div class="input-group mb-4 mb-md-3">
  48. <input
  49. id="kim_address_{{ loop.index0 }}"
  50. name="kim_address[{{ loop.index0 }}]"
  51. type="text"
  52. class="col-12 col-md-5 form-control border-0"
  53. placeholder="Kim Muster"
  54. aria-label="Kim Adresse"
  55. aria-describedby="kim_address_{{ loop.index0 }}"
  56. data-domain="{{ productConfig.kim_addresses.domain }}"
  57. data-type="kim"
  58. data-included="true"
  59. data-reserved="false"
  60. >
  61. <span class="col-12 col-md-5 input-group-text border-0 bg-accent-grey" id="kim_address_{{ loop.index0 }}">{{ productConfig.kim_addresses.domain }}</span>
  62. <button
  63. class="col-12 col-md-2 button accent"
  64. type="button"
  65. data-type="check"
  66. data-target="kim_address_{{ loop.index0 }}"
  67. data-result="kim_address_result_{{ loop.index0 }}"
  68. >
  69. Prüfen
  70. </button>
  71. <button
  72. class="col-12 col-md-2 button accent d-none"
  73. type="button"
  74. data-type="reserve"
  75. data-target="kim_address_{{ loop.index0 }}"
  76. data-result="kim_address_result_{{ loop.index0 }}"
  77. disabled="disabled"
  78. >
  79. Reservieren
  80. </button>
  81. </div>
  82. </div>
  83. {% endfor %}
  84. </div>
  85. {% if has_kim_prices(product.id) %}
  86. <template id="kimAddressTemplate">
  87. <div id="kim_address_result_" class="d-none w-100 mb-3"></div>
  88. <div class="row">
  89. <div class="input-group mb-3 mb-md-3">
  90. <button class="col-6 col-md-1 order-3 order-md-1 d-flex justify-content-center align-items-center d-md-block btn btn-outline-secondary" type="button" data-type="remove">
  91. <i class="fas fa-trash"></i>
  92. <span class="d-block ms-2 ms-md-0 d-md-none">löschen</span>
  93. </button>
  94. <input
  95. id="kim_address_"
  96. name="kim_address[]"
  97. type="text"
  98. class="col-12 col-md-5 order-1 order-md-2 form-control border-0"
  99. placeholder="Kim Muster"
  100. aria-label="Kim Adresse"
  101. data-domain="{{ productConfig.kim_addresses.domain }}"
  102. data-type="kim"
  103. data-included="false"
  104. data-price="{{ productConfig.kim_addresses.price }}"
  105. data-reserved="false"
  106. >
  107. <span class="col-12 col-md-5 order-2 order-md-3 input-group-text bg-accent-grey" id="kim_address_">{{ productConfig.kim_addresses.domain }}</span>
  108. <button
  109. class="col-6 col-md-2 order-4 button accent button-border-right d-block"
  110. type="button"
  111. data-type="check"
  112. >
  113. Prüfen
  114. </button>
  115. <button
  116. class="col-12 col-md-2 order-4 button accent d-none"
  117. type="button"
  118. data-type="reserve"
  119. disabled="disabled"
  120. >
  121. Reservieren
  122. </button>
  123. </div>
  124. </div>
  125. </template>
  126. <button id="addAdditionalKimAddress" class="button outlined darkblue w-100" type="button"><i class="fas fa-plus me-2"></i> weitere hinzufügen</button>
  127. {% endif %}
  128. </div>
  129. </div>
  130. {% endif %}
  131. </div>
  132. {% if has_hardware_prices(product.id) %}
  133. <div class="product-addons mt-5">
  134. <div class="row">
  135. <div class="col-12">
  136. <h1 class="ornament-with-child">{{ 'product.details.addon.headline'|resolve }}</h1>
  137. <p>{{ 'product.details.addon.subline'|resolve }}</p>
  138. </div>
  139. </div>
  140. <div data-match-height-group="product-addons-group" class="row g-3 match-height-product-addon">
  141. {% if productConfig.hardware_included %}
  142. {% for hardware in productConfig.hardware %}
  143. {% if hardware.has_own_price %}
  144. <div class="col-12 col-sm-6 col-xl-4">
  145. <div
  146. class="addon d-flex flex-column justify-content-between bg-accent p-4"
  147. {{ stimulus_controller('product') }}
  148. data-product-max-value="99"
  149. data-product-min-value="0"
  150. >
  151. <div class="card-body p-0">
  152. <h5 class="card-title">{{ hardware.hardware|resolve }}</h5>
  153. {% if hardware.price > 0 %}
  154. <p>{{ hardware.price }} €</p>
  155. {% endif %}
  156. <img class="d-block mx-auto pb-5" width="100" src="{{ asset('build/images/icons/icon_tiproduct.svg') }}" alt="">
  157. </div>
  158. <div class="card-footer p-0">
  159. <div class="input-group">
  160. <button
  161. type="button"
  162. class="btn btn-dark btn-number"
  163. {{ stimulus_action('product', 'decreaseValue') }}
  164. >
  165. <i class="fas fa-minus"></i>
  166. </button>
  167. <input
  168. type="number"
  169. name="hardware[{{ hardware.hardware }}]"
  170. class="form-control fw-bold"
  171. data-type="addon"
  172. data-item-number="{{ hardware.hardware }}"
  173. data-price="{{ hardware.price }}"
  174. placeholder="Anzahl"
  175. aria-label="Anzahl"
  176. aria-describedby="hardware_{{ hardware.hardware }}"
  177. value="0"
  178. min="0"
  179. {{ stimulus_target('product', 'quantity') }}
  180. >
  181. <button
  182. type="button"
  183. class="btn btn-dark btn-number"
  184. {{ stimulus_action('product', 'increaseValue') }}
  185. >
  186. <i class="fas fa-plus"></i>
  187. </button>
  188. </div>
  189. </div>
  190. </div>
  191. </div>
  192. {% endif %}
  193. {% endfor %}
  194. {% endif %}
  195. </div>
  196. </div>
  197. {% endif %}
  198. <div class="row mb-5 mt-2">
  199. <div class="col-12 text-center">
  200. <hr>
  201. <h1>{{ product.name }}</h1>
  202. {% if (product.price > 0) %}
  203. <h1>{{ product.price|format_currency('EUR', locale='de') }} *</h1>
  204. {% endif %}
  205. {% if (product.recurringPrice) %}
  206. <h2>{{ product.recurringPrice|format_currency('EUR', locale='de') }} / mtl.</h2>
  207. {% endif %}
  208. <p>{{ 'product.details.page.button.star'|resolve }}</p>
  209. </div>
  210. <div class="col-12">
  211. <div class="mx-5">
  212. <button
  213. {{ stimulus_controller('shopping-cart') }}
  214. {{ stimulus_action('shopping-cart', 'addProductToCart') }}
  215. data-shopping-cart-product-id-value="{{ product.id }}"
  216. class="button accent w-100">
  217. {{ 'product.details.page.button.buy'|resolve }}
  218. </button>
  219. </div>
  220. <hr>
  221. </div>
  222. </div>
  223. </form>
  224. </div>
  225. <div class="col-12 col-md-6 col-lg-4 col-xl-6 order-1 order-lg-1 mb-5 mb-lg-0">
  226. <div class="product-slider">
  227. <div style="--swiper-navigation-color: var(--ti-accent); --swiper-pagination-color: var(--ti-accent)" class="swiper product-slider-main-view">
  228. <div class="swiper-wrapper">
  229. {% for image in product.images %}
  230. <div class="swiper-slide">
  231. <img src="/images/{{ image.image }}">
  232. </div>
  233. {% endfor %}
  234. </div>
  235. {% if (product.images|length > 1) %}
  236. <div class="swiper-button-next"></div>
  237. <div class="swiper-button-prev"></div>
  238. {% endif %}
  239. </div>
  240. {% if (product.images|length > 1) %}
  241. <div thumbsSlider="" class="swiper product-slider-thumbnails-view">
  242. <div class="swiper-wrapper">
  243. {% for image in product.images %}
  244. <div class="swiper-slide">
  245. <img src="/images/{{ image.image }}">
  246. </div>
  247. {% endfor %}
  248. </div>
  249. </div>
  250. {% endif %}
  251. </div>
  252. </div>
  253. </div>
  254. </div>
  255. {% endblock %}
  256. {% block body_javascript %}
  257. {{ encore_entry_script_tags('product') }}
  258. {% endblock body_javascript %}