{% extends 'base.html.twig' %}{% block page_title %} {{ 'storefront.title'|resolve|striptags }} | {{ product.name }}{% endblock %}{% block head_custom_stylesheets %} {{ encore_entry_link_tags('product-card') }} {{ encore_entry_link_tags('products') }}{% endblock head_custom_stylesheets %}{% block content %} {% set productConfig = product.config|json_decode %} <div class="container-3xl my-5"> <div class="row"> <div class="col-12 d-lg-none"> <h1 class="ornament mb-4">{{ product.name }}</h1> </div> <div class="col-12 col-lg-8 col-xl-6 order-2 order-lg-1"> <h1 class="ornament mb-4 d-none d-lg-block">{{ product.name }}</h1> <p>{{ product.description|raw }}</p> <ul id="product-config" class="my-4"> {% if productConfig.kim_addresses_included %} <li> {{ productConfig.kim_addresses.quantity }}x KIM Adressen </li> {% endif %} {% if productConfig.hardware_included %} {% for hardware in productConfig.hardware %} {% if hardware.quantity > 0 %} <li> {{ hardware.quantity }}x {{ hardware.hardware|resolve }} </li> {% endif %} {% endfor %} {% endif %} </ul> <form name="product-form"> <div class="row"> {% if productConfig.kim_addresses_included %} {% set quantity = productConfig.kim_addresses.quantity %} <div class="col-12"> <div class="bg-lightgrey p-3 p-xl-5"> <h3>KIM Mail</h3> <p>Reserviere deine KIM-Adresse{{ (quantity > 1) ? 'n' : '' }}.</p> <div id="kimAddresses"> {% for i in range(1, quantity) %} <div id="kim_address_result_{{ loop.index0 }}" class="d-none w-100 mb-3"></div> <div class="row"> <div class="input-group mb-4 mb-md-3"> <input id="kim_address_{{ loop.index0 }}" name="kim_address[{{ loop.index0 }}]" type="text" class="col-12 col-md-5 form-control border-0" placeholder="Kim Muster" aria-label="Kim Adresse" aria-describedby="kim_address_{{ loop.index0 }}" data-domain="{{ productConfig.kim_addresses.domain }}" data-type="kim" data-included="true" data-reserved="false" > <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> <button class="col-12 col-md-2 button accent" type="button" data-type="check" data-target="kim_address_{{ loop.index0 }}" data-result="kim_address_result_{{ loop.index0 }}" > Prüfen </button> <button class="col-12 col-md-2 button accent d-none" type="button" data-type="reserve" data-target="kim_address_{{ loop.index0 }}" data-result="kim_address_result_{{ loop.index0 }}" disabled="disabled" > Reservieren </button> </div> </div> {% endfor %} </div> {% if has_kim_prices(product.id) %} <template id="kimAddressTemplate"> <div id="kim_address_result_" class="d-none w-100 mb-3"></div> <div class="row"> <div class="input-group mb-3 mb-md-3"> <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"> <i class="fas fa-trash"></i> <span class="d-block ms-2 ms-md-0 d-md-none">löschen</span> </button> <input id="kim_address_" name="kim_address[]" type="text" class="col-12 col-md-5 order-1 order-md-2 form-control border-0" placeholder="Kim Muster" aria-label="Kim Adresse" data-domain="{{ productConfig.kim_addresses.domain }}" data-type="kim" data-included="false" data-price="{{ productConfig.kim_addresses.price }}" data-reserved="false" > <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> <button class="col-6 col-md-2 order-4 button accent button-border-right d-block" type="button" data-type="check" > Prüfen </button> <button class="col-12 col-md-2 order-4 button accent d-none" type="button" data-type="reserve" disabled="disabled" > Reservieren </button> </div> </div> </template> <button id="addAdditionalKimAddress" class="button outlined darkblue w-100" type="button"><i class="fas fa-plus me-2"></i> weitere hinzufügen</button> {% endif %} </div> </div> {% endif %} </div> {% if has_hardware_prices(product.id) %} <div class="product-addons mt-5"> <div class="row"> <div class="col-12"> <h1 class="ornament-with-child">{{ 'product.details.addon.headline'|resolve }}</h1> <p>{{ 'product.details.addon.subline'|resolve }}</p> </div> </div> <div data-match-height-group="product-addons-group" class="row g-3 match-height-product-addon"> {% if productConfig.hardware_included %} {% for hardware in productConfig.hardware %} {% if hardware.has_own_price %} <div class="col-12 col-sm-6 col-xl-4"> <div class="addon d-flex flex-column justify-content-between bg-accent p-4" {{ stimulus_controller('product') }} data-product-max-value="99" data-product-min-value="0" > <div class="card-body p-0"> <h5 class="card-title">{{ hardware.hardware|resolve }}</h5> {% if hardware.price > 0 %} <p>{{ hardware.price }} €</p> {% endif %} <img class="d-block mx-auto pb-5" width="100" src="{{ asset('build/images/icons/icon_tiproduct.svg') }}" alt=""> </div> <div class="card-footer p-0"> <div class="input-group"> <button type="button" class="btn btn-dark btn-number" {{ stimulus_action('product', 'decreaseValue') }} > <i class="fas fa-minus"></i> </button> <input type="number" name="hardware[{{ hardware.hardware }}]" class="form-control fw-bold" data-type="addon" data-item-number="{{ hardware.hardware }}" data-price="{{ hardware.price }}" placeholder="Anzahl" aria-label="Anzahl" aria-describedby="hardware_{{ hardware.hardware }}" value="0" min="0" {{ stimulus_target('product', 'quantity') }} > <button type="button" class="btn btn-dark btn-number" {{ stimulus_action('product', 'increaseValue') }} > <i class="fas fa-plus"></i> </button> </div> </div> </div> </div> {% endif %} {% endfor %} {% endif %} </div> </div> {% endif %} <div class="row mb-5 mt-2"> <div class="col-12 text-center"> <hr> <h1>{{ product.name }}</h1> {% if (product.price > 0) %} <h1>{{ product.price|format_currency('EUR', locale='de') }} *</h1> {% endif %} {% if (product.recurringPrice) %} <h2>{{ product.recurringPrice|format_currency('EUR', locale='de') }} / mtl.</h2> {% endif %} <p>{{ 'product.details.page.button.star'|resolve }}</p> </div> <div class="col-12"> <div class="mx-5"> <button {{ stimulus_controller('shopping-cart') }} {{ stimulus_action('shopping-cart', 'addProductToCart') }} data-shopping-cart-product-id-value="{{ product.id }}" class="button accent w-100"> {{ 'product.details.page.button.buy'|resolve }} </button> </div> <hr> </div> </div> </form> </div> <div class="col-12 col-md-6 col-lg-4 col-xl-6 order-1 order-lg-1 mb-5 mb-lg-0"> <div class="product-slider"> <div style="--swiper-navigation-color: var(--ti-accent); --swiper-pagination-color: var(--ti-accent)" class="swiper product-slider-main-view"> <div class="swiper-wrapper"> {% for image in product.images %} <div class="swiper-slide"> <img src="/images/{{ image.image }}"> </div> {% endfor %} </div> {% if (product.images|length > 1) %} <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> {% endif %} </div> {% if (product.images|length > 1) %} <div thumbsSlider="" class="swiper product-slider-thumbnails-view"> <div class="swiper-wrapper"> {% for image in product.images %} <div class="swiper-slide"> <img src="/images/{{ image.image }}"> </div> {% endfor %} </div> </div> {% endif %} </div> </div> </div> </div>{% endblock %}{% block body_javascript %} {{ encore_entry_script_tags('product') }}{% endblock body_javascript %}