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

Open in your IDE?
  1. {% extends getThemeDir('base.html.twig') %}
  2. {% block seo %}
  3.     {# مهم: روت محصول پارامتر urlSlug می‌خواهد؛ مدل محصول باید getUrlSlug() یا getSlug() داشته باشد #}
  4.     {{ render_seo('product', product, app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}
  5. {% endblock %}
  7. {% block body %}
  8.     <style>
  9.         .ui-variant--color .ui-variant--check {
  10.             padding-right: 10px !important;
  11.         }
  12.     </style>
  13.     <div class="container main-container">
  14.         {% include  getThemeDir('product/bread-crumb.html.twig') with {'product' : product} %}
  15.         {% include  getThemeDir('product/intro.html.twig') with {'product' : product} %}
  16.         <div class="dt-sn mb-5 px-0 dt-sl pt-0">
  17.             {% include  getThemeDir('product/tabs.html.twig') with {'product' : product,'comments' : comments} %}
  18.         </div>
  19.         <section class="slider-section dt-sl mb-5">
  20.             <div class="row mb-3">
  21.                 <div class="col-12">
  22.                     <div class="section-title text-sm-title title-wide no-after-title-wide">
  23.                         <h2>خریداران این محصول، محصولات زیر را هم خریده‌اند</h2>
  24.                     </div>
  25.                 </div>
  26.                 <div class="col-12">
  27.                     <div class="product-carousel carousel-lg owl-carousel owl-theme">
  28.                         {% for product in relatedProducts %}
  29.                             <div class="item">
  30.                                 {% include getThemeDir('cards/single-product.html.twig') with {'product' : product} %}
  31.                             </div>
  32.                         {% endfor %}
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.         </section>
  37.     </div>
  38. {% endblock %}
  42. {% block javascripts %}
  43.     <script>
  44.         function setupDynamicCollection(containerId, addButtonId) {
  45.             const container = document.querySelector(`#${containerId} [data-prototype]`);
  46.             const addButton = document.getElementById(addButtonId);
  47.             let index = container.children.length;
  49.             addButton.addEventListener('click', () => {
  50.                 const prototype = container.dataset.prototype;
  51.                 const newForm = prototype.replace(/__name__/g, index);
  52.                 const wrapper = document.createElement('div');
  53.                 wrapper.classList.add('input-group', 'mb-2');
  54.                 wrapper.innerHTML = newForm + '<button type="button" class="btn btn-danger remove-item">–</button>';
  55.                 container.appendChild(wrapper);
  56.                 index++;
  57.             });
  59.             container.addEventListener('click', (e) => {
  60.                 if (e.target.classList.contains('remove-item')) {
  61.                     e.target.closest('.input-group').remove();
  62.                 }
  63.             });
  64.         }
  66.         document.addEventListener('DOMContentLoaded', () => {
  67.             setupDynamicCollection('pros-container', 'add-pro');
  68.             setupDynamicCollection('cons-container', 'add-con');
  69.         });
  70.     </script>
  72. {% endblock %}