public/themes/karen/product-single.html.twig line 1

Open in your IDE?
  1. {% extends getThemeDir('base.html.twig') %}
  2. {% block seo %}
  3.     {{ render_seo('product', product, app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}
  4. {% endblock %}
  5. {% block body %}
  6.     <main class="container">
  7.         <nav class="flex mt-8" aria-label="Breadcrumb">
  8.             <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
  9.                 <li class="inline-flex items-center">
  10.                     <a href="{{ path('app_shop_site_index') }}"
  11.                        class="inline-flex items-center text-sm gap-x-1  text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
  12.                         <svg class="size-4 mb-0.5">
  13.                             <use href="#home"/>
  14.                         </svg>
  15.                         صفحه اصلی
  16.                     </a>
  17.                 </li>
  18.                 <li class="inline-flex items-center">
  19.                     <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true"
  20.                          xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
  21.                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
  22.                               d="m1 9 4-4-4-4"/>
  23.                     </svg>
  24.                     <a href="{{ path('app_shop_site_products') }}"
  25.                        class="inline-flex items-center text-sm gap-x-1  text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
  26.                         فروشگاه
  27.                     </a>
  28.                 </li>
  29.                 <li aria-current="page">
  30.                     <div class="flex items-center">
  31.                         <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true"
  32.                              xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
  33.                             <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
  34.                                   d="m1 9 4-4-4-4"/>
  35.                         </svg>
  36.                         <span class="ms-1 text-sm  text-gray-500 md:ms-2 dark:text-gray-400">
  37.                         {{ product.name }}
  38.                     </span>
  39.                     </div>
  40.                 </li>
  41.             </ol>
  42.         </nav>
  43.         {{ form_start(addToCart , {'attr' : {'id' :"product-variant"}}) }}
  44.         <section
  45.                 class="mt-5 flex flex-col lg:flex-row items-start gap-4 child:rounded-lg child:bg-white child:dark:bg-gray-800 child:shadow child:p-4">
  46.             <div class="w-full lg:w-3/4">
  47.                 <div class="flex flex-col md:flex-row justify-start gap-x-8 xl:gap-x-2 items-start">
  48.                     <div class="w-2/4 hidden md:flex flex-col justify-center items-center gap-y-4">
  49.                         {% if product.productImages[0] is defined and product.productImages[0] is not null %}
  50.                             <span class="open-sliderModal">
  51.                             <img src="{{ product.productImages[0].imageUrl }}" class="cursor-pointer object-cover"
  52.                                  alt="">
  53.                         </span>
  54.                         {% endif %}
  55.                         <div class="grid grid-cols-12 child:col-span-3 child:app-border gap-x-4 child:size-16 child:rounded-lg child:cursor-pointer">
  56.                             {% for key,image in product.productImages %}
  57.                                 {% if key < 3 %}
  58.                                     <div class="p-1 open-sliderModal">
  59.                                         <img src="{{ image.imageUrl }}" class="object-cover  rounded-lg">
  60.                                     </div>
  61.                                 {% endif %}
  62.                             {% endfor %}
  63.                             {% if product.productImages[4] is defined and product.productImages[4] is not null %}
  64.                                 <div class="overflow-hidden relative open-sliderModal">
  65.                                     <svg class="absolute size-8 text-gray-100 top-4 left-4 z-10">
  66.                                         <use href="#ellipsis"></use>
  67.                                     </svg>
  68.                                     <img src="{{ product.productImages[4].imageUrl }}"
  69.                                          class="object-cover rounded-lg blur-sm">
  70.                                 </div>
  71.                             {% endif %}
  72.                         </div>
  73.                     </div>
  74.                     <div class="slider-modal">
  75.                         <div class="flex w-full h-fit items-center justify-between">
  76.                             <h1 class="font-DanaMedium text-lg">
  77.                                 تصاویر {{ product.name }}
  78.                             </h1>
  79.                             <svg class="size-6 cursor-pointer close-sliderModal">
  80.                                 <use href="#x-mark"></use>
  81.                             </svg>
  82.                         </div>
  83.                         <div class="swiper ProductDetailsSlider mt-14 px-10 w-96 relative">
  84.                             <div class="swiper-wrapper w-[50%] child:w-full child:rounded-lg child:overflow-hidden">
  85.                                 {% for key,image in product.productImages %}
  86.                                     {% if key < 3 %}
  87.                                         <div class="swiper-slide">
  88.                                             <img src="{{ image.imageUrl }}" alt="{{ product.name }}">
  89.                                         </div>
  90.                                     {% endif %}
  91.                                 {% endfor %}
  92.                             </div>
  93.                         </div>
  94.                         <button class="slider-navigate_btn absolute right-40 top-[17rem] border dark:border-gray-700 border-gray-200 button-prev-ProductDetailsSlider z-20">
  95.                             <svg class="size-6 -rotate-90">
  96.                                 <use href="#chevron"/>
  97.                             </svg>
  98.                         </button>
  99.                         <button
  100.                                 class="slider-navigate_btn absolute left-40 top-[17rem] border dark:border-gray-700 border-gray-200 button-next-ProductDetailsSlider z-10">
  101.                             <svg class="size-6 rotate-90">
  102.                                 <use href="#chevron"/>
  103.                             </svg>
  104.                         </button>
  105.                     </div>
  106.                     <div class="w-full md:w-3/4 flex flex-col gap-y-7">
  107.                         <div class="flex items-center justify-between">
  108.                             {% if product.productCategories[0] is defined %}
  109.                                 <a href="{{ path('app_shop_site_product_category' , {'urlSlug' : product.productCategories[0].urlSlug}) }}"
  110.                                    class="font-DanaMedium text-sky-400">{{ product.productCategories[0].name }}</a>
  111.                             {% endif %}
  112.                         </div>
  113.                         <div class="flex md:hidden">
  114.                             <div class="swiper MobileProductSlider w-full">
  115.                                 <div class="swiper-wrapper w-full child:w-full child:overflow-hidden child:rounded-lg">
  117.                                     {% for key,image in product.productImages %}
  118.                                         <div class="swiper-slide">
  119.                                             <img src="{{ image.imageUrl }}" alt="{{ product.name }}">
  120.                                         </div>
  121.                                     {% endfor %}
  122.                                 </div>
  123.                                 <div class="swiper-pagination MobileProductSlider-pagination"></div>
  124.                             </div>
  125.                         </div>
  126.                         <div class="flex flex-col gap-y-3">
  127.                             <p class="text-lg font-DanaDemiBold dark:text-gray-300">
  128.                                 {{ product.name }}
  129.                             </p>
  130.                             <div class="flex items-center gap-x-2">
  131.                                 <span class="h-6 bg-slate-100 text-gray-400 dark:bg-slate-700 dark:text-gray-400 flex items-center justify-center rounded-full px-2 text-xs font-DanaMedium pt-1">
  132.                                 {{ product.productReviews|length }} دیدگاه
  133.                               </span>
  134.                             </div>
  135.                         </div>
  136.                         <div class="flex flex-col gap-y-4">
  137.                             {% set skip = ['quantity', '_token', 'product_price_id'] %}
  138.                             {% for key, field in addToCart.children %}
  139.                                 {% if key not in skip %}
  140.                                         {{ form_row(field, {
  141.                                             row_attr:   { class: 'mb-4 variant-selector' },
  142.                                             label_attr: { class: 'block text-sm text-gray-700 dark:text-gray-200 mb-1' },
  143.                                             attr:       { class: 'block w-full rounded-md border border-gray-300 bg-white dark:bg-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-500' },
  144.                                             help_attr:  { class: 'text-xs text-gray-500 mt-1' }
  145.                                         }) }}
  146.                                 {% else %}
  147.                                     {{ form_row(field, {
  148.                                         row_attr:   { class: 'mb-4' },
  149.                                         label_attr: { class: 'block text-sm text-gray-700 dark:text-gray-200 mb-1' },
  150.                                         attr:       { class: 'block w-full py-1.5 px-3 text-base outline dark:outline-none outline-1 -outline-offset-1 placeholder:text-gray-400   transition-all col-span-6
  151.                             text-gray-800 dark:text-gray-100 dark:bg-gray-900 bg-slate-100 border border-transparent hover:border-slate-200 appearance-none rounded-md outline-none focus:bg-white focus:border-indigo-400 focus:ring-2 focus:ring-indigo-100 dark:focus:ring-blue-400 h-11' },
  152.                                         help_attr:  { class: 'text-xs text-gray-500 mt-1' }
  153.                                     }) }}
  154.                                 {% endif %}
  155.                             {% endfor %}
  156.                             {#                            {{ form_rest(addToCart) }} #}
  157.                         </div>
  158.                     </div>
  159.                 </div>
  160.                 <div class="mt-10 lg:mr-2 grid grid-cols-12 child:col-span-6 xl:child:col-span-3 gap-x-1 gap-y-2 lg:gap-4 child:border child:text-gray-400 child:dark:border-white/20 child:border-gray-200 child:rounded-lg child:h-12  child:p-2 child:flex child:items-center child:gap-x-1 lg:child:gap-x-2 child:text-sm lg:text-base">
  161.                     <span>
  162.                         <svg class="w-4 h-4 lg:w-6 lg:h-6">
  163.                             <use href="#arrow-path-rounded-square"></use>
  164.                         </svg>
  165.                         <p>ضمانت بازگشت کالا</p>
  166.                     </span>
  168.                     <span>
  169.                         <svg class="w-4 h-4 lg:w-6 lg:h-6">
  170.                             <use href="#check-badge"></use>
  171.                         </svg>
  172.                         <p>
  173.                             تضمین اصالت کالا
  174.                         </p>
  175.                     </span>
  176.                     <span>
  177.                         <svg class="w-4 h-4 lg:w-6 lg:h-6">
  178.                             <use href="#calender-day"></use>
  179.                         </svg>
  180.                         <p>پشتیبانی کل هفته</p>
  181.                     </span>
  182.                     <span>
  183.                         <svg class="w-4 h-4 lg:w-6 lg:h-6">
  184.                             <use href="#truke"></use>
  185.                         </svg>
  186.                         <p>ارسال به سراسر ایران </p>
  187.                     </span>
  188.                 </div>
  189.             </div>
  190.             <div class="w-full lg:w-1/4 lg:sticky top-5 flex flex-col gap-y-6">
  191.                 <div class="flex items-center gap-x-1">
  192.                     <p class="text-2xl font-DanaDemiBold"
  193.                        id="product-price">
  194.                         {{ product.displayPrice|number_format }}
  195.                         تومان
  196.                     </p>
  198.                 </div>
  199.                 {% if product.isSelling %}
  200.                     {% if getSellingType(product) == 'advanced' %}
  201.                         <button type="submit" id="buy-btnl"
  202.                                 disabled
  203.                                 class="w-full btn-add-to-cart-txt flex items-center gap-x-1 justify-center bg-blue-500 text-white hover:bg-blue-600 transition-all rounded-lg shadow py-2">
  204.                             افزودن به سبد
  205.                         </button>
  206.                         {% else %}
  207.                             <button type="submit" id="buy-btnl"
  208.                                     class="w-full btn-add-to-cart-txt flex items-center gap-x-1 justify-center bg-blue-500 text-white hover:bg-blue-600 transition-all rounded-lg shadow py-2">
  209.                                 افزودن به سبد
  210.                             </button>
  211.                     {% endif %}
  212.                 {% else %}
  213.                     <button disabled
  214.                             class="w-full btn-add-to-cart-txt flex items-center gap-x-1 justify-center bg-blue-500 text-white hover:bg-blue-600 transition-all rounded-lg shadow py-2">
  215.                         افزودن به سبد
  216.                     </button>
  217.                 {% endif %}
  218.             </div>
  219.         </section>
  220.         {{ form_end(addToCart, { render_rest: false }) }}
  221.         {% set products1 = getProducts() %}
  222.         {% include getThemeDir('modules/product-bar.html.twig') with {'title' : 'محصولات مرتبط' ,
  223.             subtitle: "جدیدترین و بروزترین محصولات",
  224.             products:products1,
  225.             container:0
  226.         } %}
  227.         <section class="relative mt-10 flex flex-col items-start gap-4 rounded-lg bg-white dark:bg-gray-800 shadow p-4">
  228.             <div class="w-full py-3 flex items-center gap-x-6 child:font-DanaMedium tab-buttons z-10 border-b  border-gray-600/20 dark:border-b-gray-200/20">
  229.                 <button class="tab-btn text-blue-500" data-target="tab1">معرفی محصول</button>
  230.                 <button class="tab-btn text-gray-500 dark:text-gray-300" data-target="tab3">دیدگاه‌ها</button>
  231.             </div>
  232.             <div class="tab-content tab1 block">
  233.                 <h2 class="font-DanaDemiBold border-b-2 border-blue-500 w-fit p-1 text-lg mb-3">معرفی</h2>
  234.                 {#                <p class="mt-4 leading-8"> #}
  235.                 <div class="justify-content" style="text-align: justify">
  236.                     {{ product.description|raw }}
  237.                 </div>
  238.                 {#                </p> #}
  239.             </div>
  240.             <div class="tab-content tab3 hidden w-full">
  241.                 <div class="flex items-center gap-x-2 mb-6">
  242.                     <h2 class="font-DanaMedium text-2xl ">
  243.                         دیدگاه ها
  244.                     </h2>
  245.                     <p class="text-sm text-blue-500">
  246.                         ({{ product.productReviews|length }} دیدگاه)
  247.                     </p>
  248.                 </div>
  249.                 <div class="w-full flex flex-col md:flex-row items-start gap-10">
  250.                     <div class="lg:w-1/4 flex flex-col w-full ">
  251.                         <p class="font-DanaMedium text-lg mb-2">ثبت دیدگاه</p>
  252.                         {% if app.user %}
  253.                             {{ form_start(reviewForm , {'attr' : {'class' : 'pt-0'}}) }}
  254.                             {{ form_widget(reviewForm.content, {'attr': {'class': 'h-24 tailwind-input', 'rows': 5}}) }}
  255.                             {{ form_errors(reviewForm.content) }}
  256.                             {{ form_row(reviewForm.recommend, {
  257.                                 row_attr:   { class: 'mb-4 variant-selector' },
  258.                                 label_attr: { class: 'block text-sm text-gray-700 dark:text-gray-200 mb-1' },
  259.                                 attr:       { class: 'block w-full rounded-md border border-gray-300 bg-white dark:bg-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-500' },
  260.                                 help_attr:  { class: 'text-xs text-gray-500 mt-1' }
  261.                             }) }}
  262.                             {{ form_errors(reviewForm.recommend) }}
  263.                             {{ form_row(reviewForm.rating, {
  264.                                 row_attr:   { class: 'mb-4 variant-selector' },
  265.                                 label_attr: { class: 'block text-sm text-gray-700 dark:text-gray-200 mb-1' },
  266.                                 attr:       { class: 'block w-full rounded-md border border-gray-300 bg-white dark:bg-gray-900 dark:text-gray-100 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-300 focus:border-blue-500' },
  267.                                 help_attr:  { class: 'text-xs text-gray-500 mt-1' }
  268.                             }) }}
  269.                             <button type="submit"
  270.                                     class="w-100 group shadow-xl text-sm md:text-base flex gap-x-1.5 items-center px-2 h-10 md:px-3 text-white bg-blue-600 rounded-xl">
  271.                                 ثبت نظر
  272.                             </button>
  273.                             {{ form_end(reviewForm) }}
  274.                         {% else %}
  275.                             <p>برای ثبت نظر، لازم است ابتدا وارد حساب کاربری خود
  276.                                 شوید.
  277.                             </p>
  278.                             <a href="{{ path('customer_panel_login') }}">ورود / ثبت نام</a>
  279.                         {% endif %}
  282.                     </div>
  284.                     <ul class="lg:w-3/4 flex flex-col gap-y-2 child:w-full ">
  285.                         {% for comment in comments %}
  286.                             <li class="child:flex py-4 border-b border-gray-200 dark:border-b-gray-200/20 child:border-white/20">
  287.                                 <div class="flex-col">
  288.                                     {% if comment.recommend %}
  289.                                         <h2 class="flex items-center gap-x-1 text-green-500 mb-4">
  290.                                             <svg class="w-4 h-4">
  291.                                                 <use href="#hand-up"></use>
  292.                                             </svg>
  293.                                             پیشنهاد میشود
  294.                                         </h2>
  295.                                     {% else %}
  296.                                         <h2 class="flex items-center gap-x-1 text-danger mb-4">
  297.                                             <svg class="w-4 h-4">
  298.                                                 <use href="#hand-down"></use>
  299.                                             </svg>
  300.                                             پیشنهاد نمیشود
  301.                                         </h2>
  302.                                     {% endif %}
  303.                                     <p class="text-gray-500 dark:text-gray-200 mb-2 line-clamp-2">
  304.                                         {{ comment.content }}
  305.                                     </p>
  306.                                 </div>
  307.                                 <div class="mt-2 lg:mt-0 flex-col lg:flex-row gap-y-2 lg:items-center justify-between">
  308.                                     <div class="flex items-center gap-x-4 text-gray-400 text-sm">
  309.                                         <p>{{ comment.createdAt|persianDate }}</p>
  310.                                         <p> {{ comment.author }}</p>
  311.                                     </div>
  312.                                 </div>
  313.                             </li>
  315.                             {% else %}
  316.                             اولین نفر برای ثبت نظر باشید
  317.                         {% endfor %}
  320.                     </ul>
  321.                 </div>
  322.             </div>
  323.         </section>
  324.     </main>
  325. {% endblock %}
  326. {% block javascripts %}
  327.     <script>
  328.         function setupDynamicCollection(containerId, addButtonId) {
  329.             const container = document.querySelector(`#${containerId} [data-prototype]`);
  330.             const addButton = document.getElementById(addButtonId);
  331.             let index = container.children.length;
  332.             addButton.addEventListener('click', () => {
  333.                 const prototype = container.dataset.prototype;
  334.                 const newForm = prototype.replace(/__name__/g, index);
  335.                 const wrapper = document.createElement('div');
  336.                 wrapper.classList.add('input-group', 'mb-2');
  337.                 wrapper.innerHTML = newForm + '<button type="button" class="btn btn-danger remove-item">–</button>';
  338.                 container.appendChild(wrapper);
  339.                 index++;
  340.             });
  342.             container.addEventListener('click', (e) => {
  343.                 if (e.target.classList.contains('remove-item')) {
  344.                     e.target.closest('.input-group').remove();
  345.                 }
  346.             });
  347.         }
  349.         document.addEventListener('DOMContentLoaded', () => {
  350.             setupDynamicCollection('pros-container', 'add-pro');
  351.             setupDynamicCollection('cons-container', 'add-con');
  352.         });
  353.     </script>
  355.     {% set jss = [
  356.         'base-assets/themes/karen/scripts/productDetails.js',
  357.     ] %}
  358.     {% for url in jss %}
  359.         <script src="{{ url('app_cdn_path' , {'path' : url})|replaceUrl('http://', 'https://') }}"></script>
  360.     {% endfor %}
  362. {#    <script>#}
  363. {#        $(function () {#}
  364. {#            const $root = $('#product-variant');#}
  365. {#            const $price = $('#product-price');#}
  366. {#            const $buyBtn = $('#buy-btnl');#}
  367. {#            const $priceId = $('#add_to_cart_product_price_id');#}
  369. {#            let pendingReq = null;#}
  370. {#            let debounceTimer = null;#}
  372. {#            function collectVariants() {#}
  373. {#                const data = {};#}
  374. {#                // رادیوهای انتخاب‌شده (فقط داخل گروه‌های variant)#}
  375. {#                $root.find('.variant-selector input[type="radio"]:checked').each(function () {#}
  376. {#                    data[this.name] = this.value;#}
  377. {#                });#}
  378. {#                // سلکت‌ها (اگر خالی نباشند)#}
  379. {#                $root.find('.variant-selector select').each(function () {#}
  380. {#                    const v = $(this).val();#}
  381. {#                    if (v !== '' && v != null) data[this.name] = v;#}
  382. {#                });#}
  383. {#                return data;#}
  384. {#            }#}
  386. {#            function updatePrice() {#}
  387. {#                const params = collectVariants();#}
  389. {#                // لغو درخواست قبلی اگر هنوز بازه#}
  390. {#                if (pendingReq && pendingReq.readyState !== 4) {#}
  391. {#                    pendingReq.abort();#}
  392. {#                }#}
  394. {#                pendingReq = $.ajax({#}
  395. {#                    url: '{{ path("app_shop_site_product_price", {"urlSlug": product.urlSlug}) }}',#}
  396. {#                    type: 'GET',#}
  397. {#                    dataType: 'json',#}
  398. {#                    cache: false,#}
  399. {#                    data: params,#}
  400. {#                    beforeSend: function () {#}
  401. {#                        $buyBtn.prop('disabled', true);#}
  402. {#                    },#}
  403. {#                    success: function (res) {#}
  404. {#                        if (res && res.res) {#}
  405. {#                            $price.text(res.text || '');#}
  406. {#                            $priceId.val(res.productPriceId || '');#}
  407. {#                            $buyBtn.prop('disabled', false);#}
  408. {#                        } else {#}
  409. {#                            $price.text(res && res.text ? res.text : '');#}
  410. {#                            $priceId.val('');#}
  411. {#                            $buyBtn.prop('disabled', true);#}
  412. {#                        }#}
  413. {#                    },#}
  414. {#                    error: function (xhr, status) {#}
  415. {#                        if (status === 'abort') return; // درخواست قبلی بود#}
  416. {#                        $buyBtn.prop('disabled', true);#}
  417. {#                    }#}
  418. {#                });#}
  419. {#            }#}
  421. {#            // هندل تغییر روی رادیو و سلکت‌ها (delegation)#}
  422. {#            $(document).on('change', '#product-variant .variant-selector input[type="radio"], #product-variant .variant-selector select', function () {#}
  423. {#                clearTimeout(debounceTimer);#}
  424. {#                debounceTimer = setTimeout(updatePrice, 150);#}
  425. {#            });#}
  427. {#            // اجرا روی بارگذاری اولیه (اگر چیزی از قبل انتخاب شده)#}
  428. {#            updatePrice();#}
  429. {#        });#}
  430. {#    </script>#}
  433.         <script>
  434.         $(document).ready(function () {
  435.             $('.variant-selector').change(function () {
  436.                 var selectedVariants = {};
  438.                 $('#product-variant .variant-selector input[type="radio"], #product-variant .variant-selector select').each(function () {
  439.                     selectedVariants[$(this).attr('name')] = $(this).val();
  440.                 });
  441.                 $.ajax({
  442.                     url: '{{ path('app_shop_site_product_price' , {'urlSlug' : product.urlSlug}) }}',  // Your endpoint to handle the price update
  443.                     type: 'GET',
  444.                     data: selectedVariants,  // Send the selected variants as parameters
  445.                     success: function (response) {
  448.                         // add Product price id to form hidden
  449.                         if (response.res) {
  450.                             $('#buy-btnl').removeAttr('disabled');
  451.                             $('#product-price').text(response.text);
  452.                             $('#add_to_cart_product_price_id').val(response.productPriceId);
  455.                         } else {
  456.                             $('#buy-btnl').attr('disabled', 'disabled');
  457.                             $('#product-price').text(response.text);
  458.                         }
  459.                     },
  460.                     error: function () {
  461.                         // alert('این');
  462.                     }
  463.                 });
  464.             });
  465.         });
  466.     </script>
  467.     <script>
  468.         document.addEventListener('DOMContentLoaded', function () {
  469.             document.querySelectorAll('.variant-selector').forEach(function (radio) {
  470.                 radio.addEventListener('change', function () {
  471.                     const targetSelector = this.dataset.selectTarget;
  472.                     const newValue = this.dataset.selectValue;
  474.                     if (targetSelector && newValue) {
  475.                         const select = document.querySelector(targetSelector);
  476.                         if (select) {
  477.                             select.value = newValue;
  478.                             select.dispatchEvent(new Event('change')); // ← برای ری‌اکت شدن با JSهای دیگه
  479.                         }
  480.                     }
  481.                 });
  482.             });
  483.         });
  484.     </script>
  486. {% endblock %}