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.                         
  236.                         {% if (product.images|length > 1) %}
  237.                             <div class="swiper-button-next"></div>
  238.                             <div class="swiper-button-prev"></div>
  239.                         {% endif %}
  240.                     </div>
  241.                     {% if (product.images|length > 1) %}
  242.                     <div thumbsSlider="" class="swiper product-slider-thumbnails-view">
  243.                         <div class="swiper-wrapper">
  244.                             {% for image in product.images %}
  245.                                 <div class="swiper-slide">
  246.                                     <img src="/images/{{ image.image }}">
  247.                                 </div>
  248.                             {% endfor %}
  249.                         </div>
  250.                     </div>
  251.                     {% endif %}
  252.                 </div>
  253.             </div>
  254.         </div>
  255.     </div>
  256. {% endblock %}
  257. {% block body_javascript %}
  258.     {{ encore_entry_script_tags('product') }}
  259. {% endblock body_javascript %}