<div class="dt-sn mb-5 dt-sl">
<div class="row">
<div class="col-lg-4 col-md-6 ps-relative">
<div class="product-gallery">
<div class="product-carousel owl-carousel" data-slider-id="1">
{% for image in product.productImages %}
<div class="item">
<a class="gallery-item" href="{{ image.imageUrl }}"
data-fancybox="gallery1">
<img src="{{ image.imageUrl }}" alt="{{ product.name }}">
</a>
</div>
{% endfor %}
</div>
<div class="d-flex justify-content-center flex-wrap">
<ul class="product-thumbnails owl-thumbs ml-2" data-slider-id="1">
{% for key,image in product.productImages %}
<li class="owl-thumb-item {% if key == 0 %}active{% endif %}">
<a href="">
<img src="{{ image.imageUrl }}" alt="{{ product.name }}">
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="col-lg-8 col-md-6 py-2">
<div class="product-info dt-sl">
<div class="product-title dt-sl mb-3">
<h1>{{ product.name }}</h1>
<h3>{{ product.subName }}</h3>
</div>
{{ form_start(addToCart , {'attr' : {'id' :"product-variant"}}) }}
<div class="row">
<div class="col-lg-6">
<div class="product-variant dt-sl">
{% for key, input in addToCart.children %}
{% if key != 'quantity' and key != '_token' and key != 'product_price_id' %}
<div class="section-title text-sm-title title-wide no-after-title-wide mb-0">
<h2>انتخاب {{ input.vars.label }}:</h2>
</div>
<ul class="product-variants float-right ml-3">
{% for choice in input.vars.choices %}
<li class="ui-variant">
<label class="ui-variant ui-variant--color">
<input
data-select-target="#{{ input.vars.id }}"
data-select-value="{{ choice.value }}"
type="radio"
name="{{ input.vars.name }}"
value="{{ choice.value }}"
{% if choice.value == input.vars.value %}checked{% endif %}
class="variant-selector"
>
<span class="ui-variant--check">{{ choice.label }}</span>
</label>
</li>
{% endfor %}
</ul>
<div class="clearfix"></div>
{% else %}
{{ form_row(input) }}
{% endif %}
{% endfor %}
{{ form_rest(addToCart) }}
</div>
</div>
<div class="col-lg-6">
<div class="product-summary">
<nav id="stack-menu">
<ul>
<li>
<a href="#">
<i class="far fa-box-check product-delivery-warehouse"></i>
موجود در انبار
</a>
<ul class="product-seller-box--shadowed">
<div class="product-info-box-body-wrapper">
<div class="product-info-box-body">
<div class="shipment-info-box-row">
<div class="font-weight-bold">
<span>آماده ارسال</span>
</div>
<div class="u-text-spaced">
این کالا در انبار موجود و آماده پردازش است.
</div>
</div>
</div>
</div>
</ul>
</li>
</ul>
<div class="product-seller-row product-seller-row--price">
<div class="product-seller-price-real">
<div class="product-seller-price-raw">
<span id="product-price">
{{ product.displayPrice|number_format }}
تومان
</span>
</div>
</div>
</div>
{% if product.isSelling %}
{% if getSellingType(product) == 'advanced' %}
<div class="product-seller-row product-seller-row--add-to-cart">
<button disabled type="submit" id="buy-btnl" class="btn-add-to-cart btn-add-to-cart--full-width">
<span class="btn-add-to-cart-txt">افزودن به سبد خرید</span>
</button>
</div>
{% else %}
<div class="product-seller-row product-seller-row--add-to-cart">
<button type="submit" id="buy-btnl" class="btn-add-to-cart btn-add-to-cart--full-width">
<span class="btn-add-to-cart-txt">افزودن به سبد خرید</span>
</button>
</div>
{% endif %}
{% else %}
<div class="product-seller-row product-seller-row--add-to-cart">
<button disabled class="btn-add-to-cart btn-add-to-cart--full-width">
<span class="btn-add-to-cart-txt">موجود نیست</span>
</button>
</div>
{% endif %}
</nav>
</div>
</div>
</div>
{{ form_end(addToCart, { render_rest: false }) }}
</div>
</div>
</div>
</div>
{% block javascripts %}
<script>
$(document).ready(function () {
$('.variant-selector').change(function () {
var selectedVariants = {};
$('#product-variant input[type="radio"]:checked').each(function () {
selectedVariants[$(this).attr('name')] = $(this).val();
});
$.ajax({
url: '{{ path('app_shop_site_product_price' , {'urlSlug' : product.urlSlug}) }}', // Your endpoint to handle the price update
type: 'GET',
data: selectedVariants, // Send the selected variants as parameters
success: function (response) {
// add Product price id to form hidden
if (response.res) {
$('#buy-btnl').removeAttr('disabled');
$('#product-price').text(response.text);
$('#add_to_cart_product_price_id').val(response.productPriceId);
} else {
$('#buy-btnl').attr('disabled', 'disabled');
$('#product-price').text(response.text);
}
},
error: function () {
// alert('این');
}
});
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.variant-selector').forEach(function (radio) {
radio.addEventListener('change', function () {
const targetSelector = this.dataset.selectTarget;
const newValue = this.dataset.selectValue;
if (targetSelector && newValue) {
const select = document.querySelector(targetSelector);
if (select) {
select.value = newValue;
select.dispatchEvent(new Event('change')); // ← برای ریاکت شدن با JSهای دیگه
}
}
});
});
});
</script>
{% endblock %}