Symfony Profiler

{% extends base_layout() %}
{% if category.oms is not empty and subcategory.oms is not empty and product.oms is not empty %}
{% if category.combinedCategoryName is not empty %}
{% set categorieName = category.combinedCategoryName|capitalize %}
{% else %}
{% set categorieName = category.oms|capitalize %}
{% endif %}
{% set head_title = product.oms ~ ' | ' ~ subcategory.oms ~ ' | ' ~ categorieName %}
{% endif %}
{% if product.extrainfo is not empty %}
{% set head_description = product.extrainfo|truncate(200, '...') %}
{% endif %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-12 mb-3 pt-5 position-relative">
<h3 class="text-primary">{{ subcategory.oms|capitalize }}</h3>
<span class="position-absolute top-0 pt-3">
<a href="{% if check_websitesetting('product_document', 'document') %}{{ inotherlang('LocalizedDocument', pimcore_website_config('product_document')) }}{% endif %}">{{ 'Aanbod'|trans }}</a>
/
{% set categoryLink = app_product_grouplink(category) %}
<a href="{{ categoryLink }}">
{% if category.combinedCategoryName is not empty %}
{{ category.combinedCategoryName|capitalize }}
{% else %}
{{ category.oms|capitalize }}
{% endif %}
</a>
/
{% set subcategoryLink = app_product_subgrouplink(category, subcategory) %}
<a href="{{ subcategoryLink }}">{{ subcategory.oms|capitalize }}</a>
/
</span>
</div>
</div>
<div class="row justify-content-between">
{% if product.getFotos() is defined %}
{% if product.getFotos()|length > 0 %}
<div class="col-12 col-lg-6 mb-3 mb-lg-0">
<img src="{{ product.getFotos().getThumbnail('prod-thumb') }}" class="img-fluid">
</div>
{% endif %}
{% endif %}
{# {% if product.getImages()|length > 0 %} #}
{# <div class="col-6"> #}
{# <ul id="lightSlider"> #}
{# {% if product.getImages() is defined %} #}
{# <div class="col-md-4 fotoframe" > #}
{# {% for productImage in product.getImages() %} #}
{# {% if productImage is defined %} #}
{# <li data-thumb="{{ productImage.getThumbnail('slideshow-thumb') }}"><img src="{{ productImage.getThumbnail('slideshow-product') }}" alt="{{ product.title }}" class="img-responsive"></li> #}
{# {% endif %} #}
{# {% endfor %} #}
{# </div> #}
{# {% endif %} #}
{# </ul> #}
{# </div> #}
{# {% endif %} #}
<div class="col-12 col-lg-6 ps-lg-5">
<div class="row mb-3">
<div class="col-12">
<h2 class="text-primary">{{ product.oms }}</h2>
<i class="text-black text-opacity-50">{{ 'Code:'|trans }} {{ product.code }}</i><br>
{% if product.merk is not empty %}
<span>{{ 'Merk:'|trans }} {{ product.merk }}</span><br>
{% endif %}
<div class="mt-3">
{{ product.extrainfo|raw }}</div>
</div>
</div>
<div class="row mb-5">
<div class="col-12">
{# {% if product.stock <= 0 %}
<p><span class="stockrood me-1">
<i class="fas fa-xs fa-circle"></i>
</span>{{ 'momenteel niet voorradig'|trans|raw }}</p>
{% elseif product.stock <= product.aantalVerkochtLaatsteMaand %}
<span class="stockoranje ms-1">
<i class="fas fa-xs fa-circle"></i>
{{ 'beperkte voorraad'|trans|raw }}</span>
{% elseif product.stock > product.aantalVerkochtLaatsteMaand %}
<span class="stockgroen ms-1">
<i class="fas fa-xs fa-circle"></i>
{{ 'voldoende vooraad'|trans|raw }}</span>
{% endif %}#}
{% if product.productAPE %}
{% set productUnit = product.APEeenheid %}
{% else %}
{% set productUnit = 'stuk(s)' %}
{% endif %}
{% if product.stock <= 0 %}
<p><span class="stockrood me-1">
<i class="fas fa-xs fa-circle"></i>
</span>{{ 'momenteel niet voorradig *'|trans|raw }}</p>
{% elseif product.stock <= product.aantalVerkochtLaatsteMaand %}
<span class="stockoranje ms-1">
<i class="fas fa-xs fa-circle"></i>
{{ 'Beperkt op voorraad, er zijn momenteel '|trans|raw }} {{ product.stock }} {{ productUnit |trans|raw }} {{' in voorraad. *'|trans|raw }}</span>
{% elseif product.stock > product.aantalVerkochtLaatsteMaand %}
<span class="stockgroen ms-1">
<i class="fas fa-xs fa-circle"></i>
{{ 'Voldoende voorraad, er zijn momenteel '|trans|raw }} {{ product.stock }} {{ productUnit |trans|raw }} {{' in voorraad. *'|trans|raw }}</span>
{% endif %}
</div>
</div>
<script>
$(document).ready(function(){
$("#myModal").modal('show');
});
</script>
{% if product.stock <= 0 %}
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ 'Momenteel niet op voorraad'|trans }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>{{ 'Opgepast, dit product is momenteel niet op voorraad en levering kan langer duren dan gebruikelijk.'|trans }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Oke'|trans }}</button>
</div>
</div>
</div>
</div>
{% endif %}
<div class="row">
<div class="col-12">
{% if product.promoprijs is defined %}
<div class="p-3 bg-light-grey bg-opacity-50 w-75 mb-3">
{% if product.promoprijs > 0 %}
{% if product.productAPE %}
{% set APE = product.prijs * product.AantalPerEenheid %}
{% set APEpromo = product.promoprijs * product.AantalPerEenheid %}
<span class="fs-7 text-decoration-underline"> {{ 'per'|trans }} € {{ product.promoprijs|number_format(2, ',', ' ') }} {{ product.APEeenheid | trans}} </span>
<br>
<strike>€ {{ APE|number_format(2, ',', ' ') }} | {{ product.AantalPerEenheid }} {{ product.APEeenheid | trans}}</strike><br>
<span class="fw-bold fs-4 text-red">€ {{ APEpromo|number_format(2, ',', ' ') }} {{ '/'|trans }} {{ product.AantalPerEenheid }} {{ product.APEeenheid | trans}}</span>
{% else %}
<strike>€ {{ product.prijs|number_format(2, ',', ' ') }}</strike><br>
<span class="fw-bold text-red">€ {{ product.promoprijs|number_format(2, ',', ' ') }}</span>
{% endif %}
{% else %}
{% if product.productAPE %}
<span class="fs-7 fw-bold py-5 text-decoration-underline">
€ {{ product.prijs|number_format(2, ',', ' ') }} {{ 'per'|trans }} {{ product.APEeenheid | trans }}
</span>
<br>
<div class="mt-3 col-6">
<label for="length">{{ orderByQuantity |trans }}</label>
<input class="form-control col-3" type="number" id="length" name="length" step="0.1" required>
</div>
<div class="col-6 d-none">
<label for="width">{{ 'Breedte in m:'|trans }}</label>
<input class="form-control col-3" type="number" id="width" name="width" step="0.1"
value="{{ product.AantalPerEenheid|number_format(2, '.', ' ') }}" readonly>
</div>
<div class="row g-3 align-items-start mt-1">
<div class="col-auto">
<label for="product_amount" class="col-form-label">{{ ('Aantal ' ~ product.APEeenheid ~ ':') |trans }}</label>
</div>
<div class="col-auto">
<input type="number" id="product_amount" min="1" max="999" value="" readonly class="form-control"/>
</div>
<div class="col-auto pt-1">
<span class="fs-7 fw-bold" id="amount_price">
€ {{ product.prijs|number_format(2, ',', ' ') }}
</span>
</div>
<div class="col-auto">
<button id="add_to_cart" class="btn btn-secondary">
<i class="fas fa-cart-plus"></i>
</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const lengthInput = document.getElementById('length');
const widthInput = document.getElementById('width');
const totalInput = document.getElementById('product_amount');
const amountPriceSpan = document.getElementById('amount_price');
const pricePerSquareMeter = {{ product.prijs|number_format(2, '.', '') }};
const updateTotal = () => {
const length = parseFloat(lengthInput.value);
const width = parseFloat(widthInput.value);
if (!isNaN(length) && !isNaN(width)) {
const totalArea = length * width; // Bereken het aantal m²
const roundedArea = Math.ceil(totalArea); // Rond naar boven af
const totalPrice = roundedArea * pricePerSquareMeter; // Bereken de totale prijsvolgens afgerond opp
totalInput.value = roundedArea; // Update aantal m²
amountPriceSpan.textContent = `€ ${totalPrice.toFixed(2).replace('.', ',')}`; // Update de prijs
} else {
totalInput.value = '';
amountPriceSpan.textContent = `€ ${pricePerSquareMeter.toFixed(2).replace('.', ',')}`;
}
};
lengthInput.addEventListener('input', updateTotal);
// Zorg ervoor dat de prijs bij het laden correct wordt weergegeven
updateTotal();
});
</script>
{% else %}
<span class="fw-bold fs-4">€ {{ product.prijs|number_format(2, ',', ' ') }}</span>
<div class="row g-3 align-items-start mt-1">
<div class="col-auto">
<label for="product_amount" class="col-form-label">{{ 'Aantal:'|trans }}</label>
</div>
<div class="col-auto">
<input type="number" id="product_amount" min="1" max="999" value="1" class="form-control"/></div>
<div class="col-auto">
<button id="add_to_cart" class="btn btn-secondary"><i class="fas fa-cart-plus"></i></button>
</div>
</div>
{% endif %}
{% endif %}
</div>
<input type="hidden" id="product_id" value="{{ product.id }}">
<span id="product_added_confirmation" class="w-100" style="display: none;"><i class="fas fa-check"></i> {{ "Toegevoegd aan winkelwagen." | trans }}</span>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="row my-5">
<div class="col-12 text-center">
{% set subcategoryLink = app_product_subgrouplink(category, subcategory) %}
<a class="btn btn-outline-secondary" href="{{ subcategoryLink }}">
<span class="material-symbols-outlined inline-icon">
chevron_left
</span> {{ 'Terug naar'|trans }} {{ subcategory.oms }}
</a>
</div>
</div>
{% if shortLink is defined %}
{% if shortLink == true %}
<script>
$('#add_to_cart').click((e)=>{
e.preventDefault();
let productId = $('#product_id').val();
let amount = $('#product_amount').val();
let fetchUrl = `/${jsLanguage}/cart/update`;
let productAddedCheckMark = $('#product_added_confirmation');
productAddedCheckMark.show();
productAddedCheckMark.fadeOut(3000);
$.ajax({
url: fetchUrl,
cache: false,
type:'GET',
data: {
productId: productId,
amount: amount,
action: 'add'
},
success: (data)=>{
if (data) {
$('#amount_in_cart').html(data.cartCount);
}
},
error: function (jqXHR, textStatus, errorThrown) {
let errorObj = JSON.parse(jqXHR.responseText);
},
complete: function () {
}
})
})
</script>
{% endif %}
{% endif %}
{% endblock %}

templates/product/detail.html.twig line 1