public/themes/default/product/intro.html.twig line 1

Open in your IDE?
  1. <div class="dt-sn mb-5 dt-sl">
  2.     <div class="row">
  3.         <div class="col-lg-4 col-md-6 ps-relative">
  4.             <div class="product-gallery">
  5.                 <div class="product-carousel owl-carousel" data-slider-id="1">
  6.                     {% for image in product.productImages %}
  7.                         <div class="item">
  8.                             <a class="gallery-item" href="{{ image.imageUrl }}"
  9.                                data-fancybox="gallery1">
  10.                                 <img src="{{ image.imageUrl }}" alt="{{ product.name }}">
  11.                             </a>
  12.                         </div>
  13.                     {% endfor %}
  14.                 </div>
  15.                 <div class="d-flex justify-content-center flex-wrap">
  16.                     <ul class="product-thumbnails owl-thumbs ml-2" data-slider-id="1">
  17.                         {% for key,image in product.productImages %}
  18.                             <li class="owl-thumb-item {% if key == 0 %}active{% endif %}">
  19.                                 <a href="">
  20.                                     <img src="{{ image.imageUrl }}" alt="{{ product.name }}">
  21.                                 </a>
  22.                             </li>
  23.                         {% endfor %}
  24.                     </ul>
  25.                 </div>
  26.             </div>
  27.         </div>
  28.         <div class="col-lg-8 col-md-6 py-2">
  29.             <div class="product-info dt-sl">
  30.                 <div class="product-title dt-sl mb-3">
  31.                     <h1>{{ product.name }}</h1>
  32.                     <h3>{{ product.subName }}</h3>
  33.                 </div>
  34.                 {{ form_start(addToCart , {'attr' : {'id' :"product-variant"}}) }}
  35.                 <div class="row">
  36.                     <div class="col-lg-6">
  37.                         <div class="product-variant dt-sl">
  38.                             {% for key, input in addToCart.children %}
  39.                                 {% if key != 'quantity' and key != '_token' and key != 'product_price_id' %}
  40.                                     <div class="section-title text-sm-title title-wide no-after-title-wide mb-0">
  41.                                         <h2>انتخاب {{ input.vars.label }}:</h2>
  42.                                     </div>
  43.                                     <ul class="product-variants float-right ml-3">
  44.                                         {% for choice in input.vars.choices %}
  45.                                             <li class="ui-variant">
  46.                                                 <label class="ui-variant ui-variant--color">
  47.                                                     <input
  48.                                                             data-select-target="#{{ input.vars.id }}"
  49.                                                             data-select-value="{{ choice.value }}"
  50.                                                             type="radio"
  51.                                                             name="{{ input.vars.name }}"
  52.                                                             value="{{ choice.value }}"
  53.                                                             {% if choice.value == input.vars.value %}checked{% endif %}
  54.                                                             class="variant-selector"
  55.                                                     >
  56.                                                     <span class="ui-variant--check">{{ choice.label }}</span>
  57.                                                 </label>
  58.                                             </li>
  59.                                         {% endfor %}
  60.                                     </ul>
  61.                                     <div class="clearfix"></div>
  62.                                 {% else %}
  63.                                     {{ form_row(input) }}
  64.                                 {% endif %}
  65.                             {% endfor %}
  66.                             {{ form_rest(addToCart) }}
  67.                         </div>
  68.                     </div>
  69.                     <div class="col-lg-6">
  70.                         <div class="product-summary">
  71.                             <nav id="stack-menu">
  72.                                 <ul>
  73.                                     <li>
  74.                                         <a href="#">
  75.                                             <i class="far fa-box-check product-delivery-warehouse"></i>
  76.                                             موجود در انبار
  77.                                         </a>
  78.                                         <ul class="product-seller-box--shadowed">
  79.                                             <div class="product-info-box-body-wrapper">
  80.                                                 <div class="product-info-box-body">
  81.                                                     <div class="shipment-info-box-row">
  82.                                                         <div class="font-weight-bold">
  83.                                                             <span>آماده ارسال</span>
  84.                                                         </div>
  85.                                                         <div class="u-text-spaced">
  86.                                                             این کالا در انبار موجود و آماده پردازش است.
  87.                                                         </div>
  88.                                                     </div>
  89.                                                 </div>
  90.                                             </div>
  91.                                         </ul>
  92.                                     </li>
  93.                                 </ul>
  94.                                 <div class="product-seller-row product-seller-row--price">
  95.                                     <div class="product-seller-price-real">
  96.                                         <div class="product-seller-price-raw">
  97.                             <span id="product-price">
  98.                                 {{ product.displayPrice|number_format }}
  99.                                 تومان
  100.                             </span>
  101.                                         </div>
  102.                                     </div>
  103.                                 </div>
  104.                                 {% if product.isSelling %}
  105.                                     {% if getSellingType(product) == 'advanced' %}
  106.                                         <div class="product-seller-row product-seller-row--add-to-cart">
  107.                                             <button disabled type="submit" id="buy-btnl" class="btn-add-to-cart btn-add-to-cart--full-width">
  108.                                                 <span class="btn-add-to-cart-txt">افزودن به سبد خرید</span>
  109.                                             </button>
  110.                                         </div>
  111.                                     {% else %}
  112.                                         <div class="product-seller-row product-seller-row--add-to-cart">
  113.                                             <button type="submit" id="buy-btnl" class="btn-add-to-cart btn-add-to-cart--full-width">
  114.                                                 <span class="btn-add-to-cart-txt">افزودن به سبد خرید</span>
  115.                                             </button>
  116.                                         </div>
  117.                                     {% endif %}
  118.                                 {% else %}
  119.                                     <div class="product-seller-row product-seller-row--add-to-cart">
  120.                                         <button disabled class="btn-add-to-cart btn-add-to-cart--full-width">
  121.                                             <span class="btn-add-to-cart-txt">موجود نیست</span>
  122.                                         </button>
  123.                                     </div>
  124.                                 {% endif %}
  125.                             </nav>
  126.                         </div>
  127.                     </div>
  128.                 </div>
  129.                 {{ form_end(addToCart, { render_rest: false }) }}
  130.             </div>
  131.         </div>
  132.     </div>
  133. </div>
  134. {% block javascripts %}
  135.     <script>
  136.         $(document).ready(function () {
  137.             $('.variant-selector').change(function () {
  138.                 var selectedVariants = {};
  139.                 $('#product-variant input[type="radio"]:checked').each(function () {
  140.                     selectedVariants[$(this).attr('name')] = $(this).val();
  141.                 });
  142.                 $.ajax({
  143.                     url: '{{ path('app_shop_site_product_price' , {'urlSlug' : product.urlSlug}) }}',  // Your endpoint to handle the price update
  144.                     type: 'GET',
  145.                     data: selectedVariants,  // Send the selected variants as parameters
  146.                     success: function (response) {
  147.                         // add Product price id to form hidden
  148.                         if (response.res) {
  149.                             $('#buy-btnl').removeAttr('disabled');
  150.                             $('#product-price').text(response.text);
  151.                             $('#add_to_cart_product_price_id').val(response.productPriceId);
  152.                         } else {
  153.                             $('#buy-btnl').attr('disabled', 'disabled');
  154.                             $('#product-price').text(response.text);
  155.                         }
  156.                     },
  157.                     error: function () {
  158.                         // alert('این');
  159.                     }
  160.                 });
  161.             });
  162.         });
  163.     </script>
  164.     <script>
  165.         document.addEventListener('DOMContentLoaded', function () {
  166.             document.querySelectorAll('.variant-selector').forEach(function (radio) {
  167.                 radio.addEventListener('change', function () {
  168.                     const targetSelector = this.dataset.selectTarget;
  169.                     const newValue = this.dataset.selectValue;
  170.                     if (targetSelector && newValue) {
  171.                         const select = document.querySelector(targetSelector);
  172.                         if (select) {
  173.                             select.value = newValue;
  174.                             select.dispatchEvent(new Event('change')); // ← برای ری‌اکت شدن با JSهای دیگه
  175.                         }
  176.                     }
  177.                 });
  178.             });
  179.         });
  180.     </script>
  181. {% endblock %}