templates/product.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% set productData = product|default(null) %}
  4. {% set selectedVariant = productData and productData.selected_variant|default(null) ? productData.selected_variant : null %}
  5. {% set productVariants = productData and productData.variants|default([])|length ? productData.variants : [] %}
  6. {% set productName = productData ? productData.name : 'Forza Horizon 6 · Standard / Deluxe / Premium · STEAM RU' %}
  7. {% set productMobileName = productData ? productData.name : 'DOOM 2016 · STEAM RU' %}
  8. {% set productImage = productData and productData.image_url ? productData.image_url : './assets/product-doom.jpg' %}
  9. {% set productPrice = selectedVariant ? selectedVariant.price_label : (productData and productData.price_label ? productData.price_label : '5 299 ₽') %}
  10. {% set productRegion = selectedVariant ? selectedVariant.context_label|default(selectedVariant.label) : (productData and productData.region ? productData.region : 'Россия · Standard') %}
  11. {% set productDiscountLabel = selectedVariant ? selectedVariant.discount_label|default('') : (productData and productData.discount_label|default('') ? productData.discount_label : '') %}
  12. {% set productGallery = productData ? productData.gallery|default([]) : [] %}
  13. {% set productGalleryCount = productGallery|length %}
  14. {% set productPreviewGallery = productGallery|slice(0, 10) %}
  15. {% set productPreviewGalleryCount = productPreviewGallery|length %}
  16. {% set productHeroImage = productPreviewGalleryCount ? productPreviewGallery[0].url|default(productImage) : productImage %}
  17. {% set relatedProducts = productData and productData.related_products|default([])|length ? productData.related_products : [] %}
  18. {% set productRegionRestriction = selectedVariant and selectedVariant.region_restriction|default(null) ? selectedVariant.region_restriction : (productData and productData.region_restriction|default(null) ? productData.region_restriction : null) %}
  19. {% set productSpecs = productData and productData.specs|default([])|length ? productData.specs : [
  20.   {'key': 'platform', 'label': 'ПЛАТФОРМА', 'value': 'Steam · PC'},
  21.   {'key': 'activation_region', 'label': 'РЕГИОН АКТИВАЦИИ', 'value': 'Россия'},
  22.   {'key': 'language', 'label': 'ЯЗЫК', 'value': 'Русский, English'},
  23.   {'key': 'genre', 'label': 'ЖАНР', 'value': 'Игра'},
  24.   {'key': 'release_date', 'label': 'ДАТА ВЫХОДА', 'value': 'Уточняется'},
  25.   {'key': 'publisher', 'label': 'ИЗДАТЕЛЬ', 'value': 'Уточняется'}
  26. ] %}
  27. {% set productDelivery = productData and productData.delivery|default(null) ? productData.delivery : {
  28.   'type': 'steam_gift',
  29.   'label': 'Подарок Steam',
  30.   'short_label': 'Подарок Steam',
  31.   'badge': 'Gift',
  32.   'description': 'Отправляется подарком на Steam-аккаунт по ссылке-приглашению.',
  33.   'form_hint': 'Понадобится ссылка-приглашение Steam.'
  34. } %}
  35. {% set productDeliveryShortLabel = productDelivery.short_label|default(productDelivery.label) %}
  36. {% set checkoutForms = selectedVariant ? selectedVariant.forms|default(productData.forms|default([])) : (productData ? productData.forms|default([]) : []) %}
  37. {% set checkoutProductId = selectedVariant ? selectedVariant.id : (productData ? productData.id : '') %}
  39. {% block title %}{{ productName }} — PlayPapa{% endblock %}
  40. {% block body_class %}product-page{% endblock %}
  42. {% block stylesheets %}
  43.       <link rel="stylesheet" href="/product.css" />
  44. {% endblock %}
  46. {% block content %}
  47. <section class="shell product-hero" aria-label="Карточка товара">
  48.         <nav class="product-breadcrumbs" aria-label="Навигация">
  49.           <a href="./index.html">Главная</a>
  50.           <span aria-hidden="true">›</span>
  51.           <a href="/catalog">Игры</a>
  52.           <span aria-hidden="true">›</span>
  53.           <b>{{ productName }}</b>
  54.         </nav>
  56.         <div class="product-overview">
  57.           <div class="product-gallery">
  58.             <div class="product-cover-large">
  59.               <img src="{{ productHeroImage }}" alt="{{ productName }}" data-product-cover />
  60.               {% if productDiscountLabel %}
  61.                 <span class="product-sale-badge">{{ productDiscountLabel }}</span>
  62.               {% endif %}
  63.             </div>
  64.           </div>
  66.           <section class="product-summary" aria-labelledby="productTitle">
  67.             <h1 id="productTitle">
  68.               <span class="desktop-title">{{ productName }}</span>
  69.               <span class="mobile-title">{{ productMobileName }}</span>
  70.             </h1>
  71.             <div class="product-meta">
  72.               <span class="product-stars" aria-label="Рейтинг 4.9">★★★★★ <b>4.9</b></span>
  73.               <span>Продано 5 744</span>
  74.               <a href="#reviews" data-product-tab-link="reviews">896 отзывов</a>
  75.             </div>
  76.             <div class="mobile-price-row" aria-hidden="true">
  77.               <strong>{{ productPrice }}</strong>
  78.               {% if productDiscountLabel %}<b>{{ productDiscountLabel }}</b>{% endif %}
  79.             </div>
  81.             <div class="variant-block">
  82.               <p class="variant-title">Выберите регион и издание <span>*</span></p>
  83.               <div class="variant-grid" role="group" aria-label="Регион и издание">
  84.                 {% if productVariants %}
  85.                   {% for variant in productVariants %}
  86.                     {% set selected = variant.id == productData.selected_variant_id %}
  87.                     <button
  88.                       class="variant-option {{ selected ? 'is-selected' : '' }} {{ variant.in_stock ? '' : 'is-disabled' }}"
  89.                       type="button"
  90.                       data-variant-option
  91.                       data-price="{{ variant.price_label }}"
  92.                       data-context="{{ variant.context_label|default(variant.label) }}"
  93.                       data-region-label="{{ variant.region }}"
  94.                       data-region-restriction-title="{{ variant.region_restriction.title|default('') }}"
  95.                       data-region-restriction-text="{{ variant.region_restriction.text|default('') }}"
  96.                       data-region-restriction-countries="{{ variant.region_restriction.countries|default('') }}"
  97.                       data-name="{{ variant.name }}"
  98.                       data-url="{{ variant.url }}"
  99.                       data-delivery-label="{{ variant.delivery.label|default(productDelivery.label) }}"
  100.                       data-delivery-short-label="{{ variant.delivery.short_label|default(productDeliveryShortLabel) }}"
  101.                       data-delivery-description="{{ variant.delivery.description|default(productDelivery.description) }}"
  102.                       data-delivery-type="{{ variant.delivery.type|default(productDelivery.type|default('digital_item')) }}"
  103.                       data-product-id="{{ variant.id }}"
  104.                       data-forms="{{ variant.forms|default([])|json_encode|e('html_attr') }}"
  105.                       data-discount-label="{{ variant.discount_label|default('') }}"
  106.                       {{ variant.in_stock ? '' : 'disabled' }}
  107.                     >
  108.                       <span>{{ variant.label }}</span>
  109.                       <small>{{ selected ? 'Выбрано' : (variant.in_stock ? variant.price_label : 'Нет в наличии') }}</small>
  110.                     </button>
  111.                   {% endfor %}
  112.                 {% else %}
  113.                   <button class="variant-option is-selected" type="button">
  114.                     <span>{{ productRegion }}</span>
  115.                     <small>Выбрано</small>
  116.                   </button>
  117.                   <button class="variant-option" type="button">
  118.                     <span>Россия · Deluxe</span>
  119.                     <small>+2 500 ₽</small>
  120.                   </button>
  121.                   <button class="variant-option" type="button">
  122.                     <span>Россия · Premium</span>
  123.                     <small>+4 300 ₽</small>
  124.                   </button>
  125.                   <button class="variant-option is-discount" type="button">
  126.                     <span><span class="desktop-label">Казахстан · Standard</span><span class="mobile-label">Казахстан</span></span>
  127.                     <small>−400 ₽</small>
  128.                   </button>
  129.                 {% endif %}
  130.               </div>
  131.               {% if productVariants|length > 4 %}
  132.                 <button class="show-regions" type="button">Всего вариантов: {{ productVariants|length }}</button>
  133.               {% elseif not productVariants %}
  134.                 <button class="show-regions" type="button">Показать все регионы ›</button>
  135.               {% endif %}
  136.             </div>
  138.             <div class="product-media-tabs">
  139.               <div class="product-media-head" aria-label="Галерея товара">
  140.                 <p>Изображения{% if productPreviewGalleryCount %} <span>{{ productPreviewGalleryCount }}</span>{% endif %}</p>
  141.               </div>
  142.               <div class="thumb-row-product" aria-label="Миниатюры">
  143.                 {% if productPreviewGallery %}
  144.                   {% for image in productPreviewGallery %}
  145.                     {% set fullImage = image.url|default(productImage) %}
  146.                     <button
  147.                       class="product-thumb {{ loop.first ? 'is-active' : '' }}"
  148.                       type="button"
  149.                       aria-label="Изображение {{ loop.index }}"
  150.                       data-product-thumb
  151.                       data-full-image="{{ fullImage }}"
  152.                     >
  153.                       <img src="{{ image.thumbnail_url|default(fullImage) }}" alt="" />
  154.                     </button>
  155.                   {% endfor %}
  156.                 {% else %}
  157.                   <button class="product-thumb is-active" type="button" aria-label="Изображение 1" data-product-thumb data-full-image="{{ productImage }}">
  158.                     <img src="{{ productImage }}" alt="" />
  159.                   </button>
  160.                 {% endif %}
  161.               </div>
  162.             </div>
  163.           </section>
  165.           <aside class="purchase-column" aria-label="Покупка">
  166.             <section class="purchase-card">
  167.               <div class="price-main">
  168.                 <strong>{{ productPrice }}</strong>
  169.                 {% if not productData %}<del>6 499 ₽</del>{% endif %}
  170.               </div>
  171.               <div class="buy-context">
  172.                 <span>{{ productRegion }}</span>
  173.                 <b data-discount-label-target {{ productDiscountLabel ? '' : 'hidden' }}>{{ productDiscountLabel }}</b>
  174.               </div>
  175.               <div class="delivery-method" data-delivery-method>
  176.                 <span>Способ получения</span>
  177.                 <strong data-delivery-label-target>{{ productDelivery.label }}</strong>
  178.                 <small data-delivery-description-target>{{ productDelivery.description }}</small>
  179.               </div>
  180.               <button class="buy-now" type="button" data-checkout-open aria-haspopup="dialog" aria-controls="checkoutModal">
  181.                 <img src="./assets/cart-white.svg" alt="" />
  182.                 Купить сейчас
  183.               </button>
  184.               <div class="promo-widget" data-promo-widget>
  185.                 <button class="promo-link" type="button" aria-expanded="false">
  186.                   Ввести промокод <img src="./assets/promo-arrow.svg" alt="" />
  187.                 </button>
  188.                 <form class="promo-form" hidden>
  189.                   <div class="promo-control-row">
  190.                     <input type="text" placeholder="Промокод" autocomplete="off" />
  191.                     <button class="promo-apply" type="submit">
  192.                       <span>OK</span>
  193.                       <img src="./assets/auth-check.svg" alt="" />
  194.                     </button>
  195.                   </div>
  196.                   <p class="promo-help">Введите промокод - скидка применится автоматически.</p>
  197.                   <p class="promo-success" hidden>Промокод применён - скидка 15%</p>
  198.                   <p class="promo-error" hidden>× Промокод недействителен или истёк</p>
  199.                 </form>
  200.               </div>
  201.               <ul class="buy-features">
  202.                 <li>Безопасная сделка</li>
  203.                 <li>Мгновенная доставка</li>
  204.                 <li>Гарантия возврата</li>
  205.               </ul>
  206.             </section>
  208.             <section class="seller-card" aria-label="Продавец">
  209.               <img class="seller-logo" src="./assets/blogger-playpapa-logo.svg" alt="" />
  210.               <div>
  211.                 <strong>PlayPapa</strong>
  212.                 <span>20 218 продаж</span>
  213.               </div>
  214.               <b class="seller-rating">★ 4.9</b>
  215.             </section>
  216.           </aside>
  217.         </div>
  218.       </section>
  220.       <section class="shell product-info" aria-label="Описание товара">
  221.         <nav class="product-page-tabs" aria-label="Разделы товара">
  222.           <button class="is-active" type="button" data-product-tab="description">Описание</button>
  223.           <button id="reviews" type="button" data-product-tab="reviews">Отзывы <span class="tab-count">896</span></button>
  224.           <button type="button" data-product-tab="comments">Комментарии <span class="tab-count">28</span></button>
  225.           <button type="button" data-product-tab="images">Изображения <span class="tab-count">{{ productGalleryCount ?: 1 }}</span></button>
  226.         </nav>
  228.         <div class="product-description product-tab-panel is-active is-collapsed" data-product-panel="description">
  229.           <div class="description-copy">
  230.             {% if productData and productData.description_html %}
  231.               {{ productData.description_html|raw }}
  232.             {% else %}
  233.               <p>
  234.                 DOOM 2016 - перезапуск легендарной серии от id Software. Стремительный, агрессивный шутер с культовым
  235.                 арсеналом, добиваниями Glory Kill и саундтреком, ставшим эталоном жанра. Ключ активируется в Steam, регион
  236.                 РФ + СНГ.
  237.               </p>
  238.             {% endif %}
  239.           </div>
  241.           {% if productSpecs %}
  242.             <div class="spec-grid product-spec-grid" aria-label="Характеристики товара">
  243.               {% for spec in productSpecs %}
  244.                 <div class="spec-card">
  245.                   <small>{{ spec.label }}</small>
  246.                   <strong{% if spec.key|default('') == 'activation_region' %} data-spec-region{% endif %}>{{ spec.value }}</strong>
  247.                 </div>
  248.               {% endfor %}
  249.             </div>
  250.           {% endif %}
  252.           <div class="region-restriction-note" data-region-restriction {% if not productRegionRestriction %}hidden{% endif %}>
  253.             <strong data-region-restriction-title>{{ productRegionRestriction.title|default('') }}</strong>
  254.             <p data-region-restriction-text>{{ productRegionRestriction.text|default('') }}</p>
  255.             <code data-region-restriction-countries>{{ productRegionRestriction.countries|default('') }}</code>
  256.           </div>
  258.           <div class="product-description-extra" id="descriptionDetails" data-description-extra hidden>
  259.             {% if productData and productData.short_description_html %}
  260.               {{ productData.short_description_html|raw }}
  261.             {% else %}
  262.             <ul>
  263.               <li>Автоматическая выдача 24/7 - активация не дольше 2 минут.</li>
  264.               <li>Оплата через СБП - комиссия 0%.</li>
  265.               <li>Отправляется как подарок (gift) на ваш аккаунт Steam.</li>
  266.               <li>Цены для разных регионов могут отличаться - смотрите при выборе.</li>
  267.               <li>Куплено официально через Steam. Действует гарантия возврата.</li>
  268.             </ul>
  270.             <h2>Подробнее об игре</h2>
  271.             <p>
  272.               Вы - Палач Рока, пробудившийся на марсианской базе, захваченной силами Ада. Никаких перезарядок-передышек:
  273.               игра поощряет постоянное движение и агрессию. Собирайте руны, улучшайте броню Praetor и оружие, исследуйте
  274.               секреты уровней и уничтожайте демонов всеми доступными способами.
  275.             </p>
  276.             {% endif %}
  277.           </div>
  279.           <button class="description-toggle" type="button" data-description-toggle aria-expanded="false" aria-controls="descriptionDetails">
  280.             <span>Показать полностью</span>
  281.             <img src="./assets/promo-arrow.svg" alt="" />
  282.           </button>
  283.         </div>
  285.         <section class="product-reviews-block product-tab-panel" data-product-panel="reviews" aria-label="Отзывы о товаре" hidden>
  286.           <div class="reviews-score-card">
  287.             <div class="reviews-score-main">
  288.               <strong>4.9</strong>
  289.               <span aria-label="Рейтинг 4.9 из 5">★★★★★</span>
  290.               <b>896 отзывов</b>
  291.             </div>
  292.             <div class="reviews-score-bars" aria-label="Распределение оценок">
  293.               <div class="score-row"><span>5</span><i><b style="--score: 92%"></b></i><em>824</em></div>
  294.               <div class="score-row"><span>4</span><i><b style="--score: 7%"></b></i><em>52</em></div>
  295.               <div class="score-row"><span>3</span><i><b style="--score: 2%"></b></i><em>14</em></div>
  296.               <div class="score-row"><span>2</span><i><b style="--score: 1%"></b></i><em>4</em></div>
  297.               <div class="score-row"><span>1</span><i><b style="--score: 1%"></b></i><em>2</em></div>
  298.             </div>
  299.           </div>
  301.           <div class="review-form-grid">
  302.             <article class="review-form-wrap">
  303.               <form class="product-review-form" data-review-form>
  304.                 <div class="review-form-head">
  305.                   <h3><span class="desktop-label">Поделитесь впечатлением</span><span class="mobile-label">Ваш отзыв</span></h3>
  306.                 </div>
  307.                 <div class="review-form-rating" role="radiogroup" aria-label="Поставьте оценку">
  308.                   <button type="button" aria-label="1 звезда" data-rating="1">★</button>
  309.                   <button type="button" aria-label="2 звезды" data-rating="2">★</button>
  310.                   <button type="button" aria-label="3 звезды" data-rating="3">★</button>
  311.                   <button type="button" aria-label="4 звезды" data-rating="4">★</button>
  312.                   <button type="button" aria-label="5 звезд" data-rating="5">★</button>
  313.                   <b>Поставьте оценку</b>
  314.                 </div>
  315.                 <div class="review-tags" aria-label="Быстрые теги">
  316.                   <button type="button">Быстрая выдача</button>
  317.                   <button type="button">Всё честно</button>
  318.                   <button type="button">Приятная цена</button>
  319.                 </div>
  320.                 <label class="review-textarea">
  321.                   <textarea placeholder="Расскажите, как прошла покупка и активация..."></textarea>
  322.                 </label>
  323.                 <p class="review-error" hidden>Пожалуйста, напишите текст перед отправкой</p>
  324.                 <p class="review-success" hidden>Отправлено, спасибо! Появится после модерации</p>
  325.                 <button class="review-submit" type="submit">Опубликовать отзыв</button>
  326.               </form>
  327.             </article>
  328.           </div>
  330.           <div class="product-review-list">
  331.             <article class="product-review-item">
  332.               <div class="review-avatar"></div>
  333.               <div class="review-item-body">
  334.                 <div class="review-item-head">
  335.                   <div>
  336.                     <strong>Bizidin</strong>
  337.                     <span aria-label="5 из 5">★★★★★</span>
  338.                   </div>
  339.                   <time>Сегодня, 11:48</time>
  340.                 </div>
  341.                 <b class="review-product-chip">DOOM 2016</b>
  342.                 <p>Отзывчивый и приятный продавец, помог не только с товаром, но и с другим вопросом. Рекомендую!</p>
  343.                 <div class="review-actions">
  344.                   <button class="like-action is-liked" type="button" aria-label="13 лайков">
  345.                     <img src="./assets/like-filled.svg" alt="" />
  346.                     <span>13</span>
  347.                   </button>
  348.                   <button type="button">Ответить</button>
  349.                 </div>
  350.               </div>
  351.             </article>
  353.             <article class="product-review-item">
  354.               <div class="review-avatar"></div>
  355.               <div class="review-item-body">
  356.                 <div class="review-item-head">
  357.                   <div>
  358.                     <strong>maxx_88</strong>
  359.                     <span aria-label="4 из 5">★★★★<i>★</i></span>
  360.                   </div>
  361.                   <time>2 дня назад</time>
  362.                 </div>
  363.                 <b class="review-product-chip">DOOM Eternal</b>
  364.                 <p>Немного подождал ответа поддержки, но в итоге всё ок. Цена приятная.</p>
  365.                 <div class="review-actions">
  366.                   <button class="like-action" type="button" aria-label="3 лайка">
  367.                     <img src="./assets/like-outline.svg" alt="" />
  368.                     <span>3</span>
  369.                   </button>
  370.                   <button type="button">Ответить</button>
  371.                 </div>
  372.               </div>
  373.             </article>
  374.           </div>
  375.         </section>
  377.         <section class="product-questions-block product-tab-panel" data-product-panel="comments" aria-label="Вопросы о товаре" hidden>
  378.           <div class="question-form-grid">
  379.             <form class="product-question-form" data-question-form>
  380.               <h3>Задайте вопрос о товаре</h3>
  381.               <label class="question-textarea">
  382.                 <textarea placeholder="Ваш вопрос по товару..."></textarea>
  383.               </label>
  384.               <div class="question-form-footer">
  385.                 <p class="question-error" hidden>Напишите вопрос перед отправкой</p>
  386.                 <p class="question-success" hidden>Отправлено - ответит продавец или покупатели</p>
  387.                 <button class="question-submit" type="submit">Отправить</button>
  388.               </div>
  389.             </form>
  390.           </div>
  392.           <div class="product-question-list">
  393.             <article class="product-question-item">
  394.               <div class="question-main">
  395.                 <div class="review-avatar question-avatar"></div>
  396.                 <div class="question-item-body">
  397.                   <div class="review-item-head">
  398.                     <strong>Vladislav</strong>
  399.                     <time>Сегодня, 10:12</time>
  400.                   </div>
  401.                   <p>А регион точно РФ? Активируется на российском аккаунте?</p>
  402.                   <div class="review-actions question-actions">
  403.                     <button class="like-action" type="button" aria-label="4 лайка">
  404.                       <img src="./assets/like-outline.svg" alt="" />
  405.                       <span>4</span>
  406.                     </button>
  407.                     <button type="button">Ответить</button>
  408.                   </div>
  410.                   <div class="question-answer">
  411.                     <div class="review-avatar seller-answer-avatar"></div>
  412.                     <div class="question-answer-body">
  413.                       <div class="review-item-head">
  414.                         <strong>PlayPapa <em>· Продавец</em></strong>
  415.                         <time>Сегодня, 10:20</time>
  416.                       </div>
  417.                       <p>Да, ключ для региона РФ+СНГ, активируется на российском аккаунте Steam без VPN.</p>
  418.                       <div class="review-actions question-actions">
  419.                         <button class="like-action is-liked" type="button" aria-label="9 лайков">
  420.                           <img src="./assets/like-filled.svg" alt="" />
  421.                           <span>9</span>
  422.                         </button>
  423.                       </div>
  424.                     </div>
  425.                   </div>
  426.                 </div>
  427.               </div>
  428.             </article>
  429.           </div>
  430.         </section>
  432.         <section class="product-images-block product-tab-panel" data-product-panel="images" aria-label="Изображения товара" hidden>
  433.           <div class="product-images-grid">
  434.             {% if productGallery %}
  435.               {% for image in productGallery %}
  436.                 <button class="product-image-preview" type="button" aria-label="Открыть изображение {{ loop.index }}">
  437.                   <img src="{{ image.url|default(productImage) }}" alt="{{ productName }} изображение {{ loop.index }}" />
  438.                 </button>
  439.               {% endfor %}
  440.             {% else %}
  441.               <button class="product-image-preview" type="button" aria-label="Открыть изображение 1">
  442.                 <img src="{{ productImage }}" alt="{{ productName }} скриншот 1" />
  443.               </button>
  444.             {% endif %}
  445.           </div>
  446.         </section>
  447.       </section>
  449.       <section class="shell product-section product-recommendations">
  450.         <div class="section-head">
  451.           <h2>С этим товаром смотрят</h2>
  452.           <a class="show-all" href="/catalog">Показать все</a>
  453.         </div>
  454.         <div class="product-grid product-recommend-grid">
  455.           {% for related in relatedProducts %}
  456.             <article class="product-card">
  457.               <div class="product-cover">
  458.                 <img src="{{ related.image_url|default('./assets/product-pubg.png') }}" alt="" />
  459.                 {% if related.discount_label|default('') %}
  460.                   <span class="discount red">{{ related.discount_label }}</span>
  461.                 {% endif %}
  462.               </div>
  463.               <div class="product-body">
  464.                 <h3>{{ related.name|default('Товар PlayPapa') }}</h3>
  465.                 <div class="price-line"><strong>{{ related.price_label|default('Цена уточняется') }}</strong></div>
  466.                 <a href="{{ related.url|default('/catalog') }}">Купить</a>
  467.               </div>
  468.             </article>
  469.           {% else %}
  470.             <article class="product-card">
  471.               <div class="product-cover">
  472.                 <img src="./assets/product-pubg.png" alt="" />
  473.               </div>
  474.               <div class="product-body">
  475.                 <h3>Популярные товары PlayPapa</h3>
  476.                 <div class="price-line"><strong>Каталог</strong></div>
  477.                 <a href="/catalog">Смотреть</a>
  478.               </div>
  479.             </article>
  480.           {% endfor %}
  481.         </div>
  482.       </section>
  483. {% endblock %}
  485. {% block body_extras %}
  486. <aside class="sticky-purchase-bar" aria-label="Быстрая покупка">
  487.       <div class="sticky-purchase-inner">
  488.         <img class="sticky-purchase-thumb" src="{{ productImage }}" alt="" />
  489.         <strong class="sticky-purchase-title">{{ productName }}</strong>
  490.         <div class="sticky-purchase-price">
  491.           <strong>{{ productPrice }}</strong>
  492.           {% if not productData %}<del>6 499 ₽</del>{% endif %}
  493.         </div>
  494.         <button class="sticky-purchase-button" type="button" data-checkout-open aria-haspopup="dialog" aria-controls="checkoutModal">Купить сейчас</button>
  495.       </div>
  496.     </aside>
  498. {% include 'components/modals/checkout_product.html.twig' %}
  499. {% include 'components/modals/image_lightbox.html.twig' %}
  500. {% endblock %}
  502. {% block scripts %}
  503. <script>
  504.       const root = document.documentElement;
  505.       const themeSwitch = document.querySelector(".theme-switch");
  506.       const themeButtons = document.querySelectorAll(".theme-btn[data-theme]");
  508.       const setTheme = (theme, animate = false) => {
  509.         if (animate) {
  510.           document.body.classList.remove("theme-animating");
  511.           void document.body.offsetWidth;
  512.           document.body.classList.add("theme-animating");
  513.         }
  515.         root.dataset.theme = theme;
  516.         try {
  517.           localStorage.setItem("playpapa-theme", theme);
  518.         } catch {}
  520.         themeButtons.forEach((button) => {
  521.           const active = button.dataset.theme === theme;
  522.           button.classList.toggle("is-active", active);
  523.           button.setAttribute("aria-pressed", active ? "true" : "false");
  524.         });
  526.         if (animate) window.setTimeout(() => document.body.classList.remove("theme-animating"), 560);
  527.       };
  529.       setTheme(root.dataset.theme === "dark" ? "dark" : "light");
  530.       themeButtons.forEach((button) => button.addEventListener("click", () => setTheme(button.dataset.theme, true)));
  531.       themeSwitch?.addEventListener("click", (event) => {
  532.         if (event.target.closest(".theme-btn")) return;
  533.         setTheme(root.dataset.theme === "dark" ? "light" : "dark", true);
  534.       });
  536.       const profileMenu = document.querySelector(".profile-menu");
  537.       const profileButton = profileMenu?.querySelector(".profile-btn");
  538.       const profilePopover = document.getElementById("profilePopover");
  540.       const setProfileOpen = (open, returnFocus = false) => {
  541.         if (!profileMenu || !profilePopover || !profileButton) return;
  542.         profileMenu.classList.toggle("is-open", open);
  543.         profileButton.setAttribute("aria-expanded", open ? "true" : "false");
  544.         profilePopover.setAttribute("aria-hidden", open ? "false" : "true");
  545.         profilePopover.toggleAttribute("inert", !open);
  546.         document.body.classList.toggle("profile-open", open);
  547.         if (returnFocus) profileButton.focus();
  548.       };
  550.       profileButton?.addEventListener("click", (event) => {
  551.         event.stopPropagation();
  552.         setProfileOpen(!profileMenu?.classList.contains("is-open"));
  553.       });
  555.       document.addEventListener("pointerdown", (event) => {
  556.         if (!profileMenu?.classList.contains("is-open") || profileMenu.contains(event.target)) return;
  557.         setProfileOpen(false);
  558.       });
  560.       document.addEventListener("keydown", (event) => {
  561.         if (event.key !== "Escape" || !profileMenu?.classList.contains("is-open")) return;
  562.         setProfileOpen(false, true);
  563.       });
  565.       const catalogLayer = document.getElementById("catalogMegaMenu");
  566.       const catalogButton = document.querySelector(".catalog-btn:not([href])");
  567.       const catalogSideLinks = document.querySelectorAll(".catalog-side-link");
  568.       const catalogFeaturedItems = [
  569.         ["service-steam.png", "Пополнение Steam"],
  570.         ["service-brawl.png", "Game Pass"],
  571.         ["service-steam.png", "Пополнение PSN"],
  572.         ["service-brawl.png", "PS Plus"],
  573.         ["service-pubg.png", "Grand Theft Auto V"],
  574.         ["service-roblox.png", "Minecraft"],
  575.         ["service-playstation.png", "Diablo 4"],
  576.         ["service-mobile.png", "ARC Raiders"],
  577.         ["service-chatgpt.png", "Dead by Daylight"],
  578.       ];
  579.       const catalogNewItems = [
  580.         ["article-paradise.png", "Gothic 1 Remake"],
  581.         ["article-sale.png", "Forza Horizon 6"],
  582.         ["product-pubg.png", "Assassin's Creed: Black..."],
  583.         ["article-mobile.png", "007 First Light"],
  584.         ["article-sale.png", "Call of Duty: Modern..."],
  585.         ["product-pubg.png", "Marvel's Wolverine"],
  586.         ["article-paradise.png", "UFC 6"],
  587.         ["article-sale.png", "Subnautica 2"],
  588.         ["product-pubg.png", "SILENT HILL: Townfall"],
  589.       ];
  591.       const catalogItemMarkup = ([image, label]) => `
  592.         <a class="catalog-showcase-item" href="#" aria-label="${label}">
  593.           <img src="./assets/${image}" alt="">
  594.           <span>${label}</span>
  595.         </a>
  596.       `;
  598.       const catalogFeatured = document.getElementById("catalogFeatured");
  599.       const catalogNew = document.getElementById("catalogNew");
  600.       if (catalogFeatured) catalogFeatured.innerHTML = catalogFeaturedItems.map(catalogItemMarkup).join("");
  601.       if (catalogNew) catalogNew.innerHTML = catalogNewItems.map(catalogItemMarkup).join("");
  603.       const setCatalogOpen = (open) => {
  604.         if (!catalogLayer || !catalogButton) return;
  605.         catalogLayer.classList.toggle("is-open", open);
  606.         catalogLayer.setAttribute("aria-hidden", open ? "false" : "true");
  607.         catalogLayer.toggleAttribute("inert", !open);
  608.         document.body.classList.toggle("catalog-open", open);
  609.         catalogButton.setAttribute("aria-expanded", open ? "true" : "false");
  610.       };
  612.       catalogButton?.addEventListener("click", (event) => {
  613.         event.preventDefault();
  614.         setProfileOpen(false);
  615.         setCatalogOpen(!catalogLayer?.classList.contains("is-open"));
  616.       });
  618.       catalogSideLinks.forEach((link) => {
  619.         link.addEventListener("click", () => {
  620.           catalogSideLinks.forEach((item) => item.classList.toggle("is-active", item === link));
  621.         });
  622.       });
  624.       catalogLayer?.querySelectorAll('a[href="#"]').forEach((link) => {
  625.         link.addEventListener("click", (event) => event.preventDefault());
  626.       });
  628.       document.addEventListener("pointerdown", (event) => {
  629.         if (!catalogLayer?.classList.contains("is-open")) return;
  630.         if (catalogLayer.contains(event.target) || catalogButton?.contains(event.target)) return;
  631.         setCatalogOpen(false);
  632.       });
  634.       document.addEventListener("keydown", (event) => {
  635.         if (event.key !== "Escape" || !catalogLayer?.classList.contains("is-open")) return;
  636.         setCatalogOpen(false);
  637.         catalogButton?.focus();
  638.       });
  640.       const checkoutModal = document.getElementById("checkoutModal");
  641.       const checkoutDialog = checkoutModal?.querySelector(".checkout-modal-dialog");
  642.       const checkoutOpenButtons = document.querySelectorAll("[data-checkout-open]");
  643.       const checkoutCloseButtons = checkoutModal?.querySelectorAll("[data-checkout-close]");
  644.       const checkoutPaymentButtons = checkoutModal?.querySelectorAll(".checkout-payment-option");
  645.       const checkoutPaymentInput = checkoutModal?.querySelector('input[name="payment"]');
  646.       const checkoutEmailInput = checkoutModal?.querySelector('input[name="email"]');
  647.       const checkoutEmailField = checkoutEmailInput?.closest(".checkout-field");
  648.       const checkoutEmailError = checkoutEmailField?.querySelector("small");
  649.       const checkoutProductIdInput = checkoutModal?.querySelector("[data-checkout-product-id]");
  650.       const checkoutDynamicFields = checkoutModal?.querySelector("[data-checkout-fields]");
  651.       const checkoutResult = checkoutModal?.querySelector("[data-checkout-result]");
  652.       const checkoutEndpoint = "{{ path('payment_cryptobot_create') }}";
  653.       const checkoutStatusEndpointBase = "/checkout/galaxylink/test/";
  654.       const checkoutRequiresAuth = {{ user ? 'false' : 'true' }};
  655.       let checkoutReturnFocus = null;
  656.       let checkoutPollTimer = 0;
  658.       const checkoutAuthReturnPath = () => `${window.location.pathname}${window.location.search}${window.location.hash}`;
  660.       const openCheckoutAuth = (trigger = null) => {
  661.         const returnPath = checkoutAuthReturnPath();
  662.         if (window.PlayPapaAuth?.openModal?.("login", trigger, returnPath)) return;
  663.         const url = new URL("/", window.location.origin);
  664.         url.searchParams.set("auth", "login");
  665.         url.searchParams.set("redirect", returnPath);
  666.         url.searchParams.set("reason", "checkout");
  667.         window.location.assign(`${url.pathname}${url.search}`);
  668.       };
  670.       const setCheckoutEmailError = (show) => {
  671.         checkoutEmailField?.classList.toggle("is-invalid", show);
  672.         if (checkoutEmailError) checkoutEmailError.hidden = !show;
  673.       };
  675.       const checkoutEscape = (value) =>
  676.         String(value ?? "")
  677.           .replaceAll("&", "&amp;")
  678.           .replaceAll("<", "&lt;")
  679.           .replaceAll(">", "&gt;")
  680.           .replaceAll('"', "&quot;")
  681.           .replaceAll("'", "&#039;");
  683.       const checkoutFieldMeta = {
  684.         invite_url: ["Ссылка-приглашение Steam", "https://s.team/p/xxxx/yyyyyyyy", "url"],
  685.         user_id: ["User ID", "ID пользователя", "text"],
  686.         server_id: ["Сервер", "Europe", "text"],
  687.         region_id: ["Регион", "Europe", "text"],
  688.         ip_address: ["IP-адрес", "Автоматически, если оставить пустым", "text"],
  689.         login: ["Логин аккаунта", "login@example.com", "text"],
  690.         password: ["Пароль аккаунта", "Пароль", "password"],
  691.         backup_codes: ["Backup codes", "Коды через пробел", "text"],
  692.         order_comment: ["Комментарий", "Комментарий для оператора", "text"],
  693.         roblox_username: ["Roblox username", "PlayerOne", "text"],
  694.         roblox_password: ["Roblox password", "Пароль Roblox", "password"],
  695.       };
  697.       const parseCheckoutForms = (raw) => {
  698.         try {
  699.           const forms = JSON.parse(raw || "[]");
  700.           return Array.isArray(forms) ? forms.map((item) => String(item || "").trim().toLowerCase()).filter(Boolean) : [];
  701.         } catch {
  702.           return [];
  703.         }
  704.       };
  706.       const checkoutFormsFor = (forms, deliveryType) => {
  707.         const result = Array.from(new Set(forms));
  708.         if (deliveryType === "steam_gift" && !result.includes("invite_url")) result.push("invite_url");
  709.         return result.filter((field) => checkoutFieldMeta[field]);
  710.       };
  712.       const renderCheckoutFields = (forms, deliveryType) => {
  713.         if (!checkoutDynamicFields) return;
  714.         const fields = checkoutFormsFor(forms, deliveryType);
  715.         checkoutDynamicFields.hidden = fields.length === 0;
  716.         checkoutDynamicFields.innerHTML = fields.map((field) => {
  717.           const [label, placeholder, type] = checkoutFieldMeta[field];
  718.           const required = field === "ip_address" || field === "order_comment" ? "" : "required";
  719.           return `
  720.             <label class="checkout-field checkout-extra-field">
  721.               <span>${checkoutEscape(label)}</span>
  722.               <input type="${type}" name="${checkoutEscape(field)}" placeholder="${checkoutEscape(placeholder)}" autocomplete="off" ${required} data-checkout-extra-input />
  723.               <small hidden>Заполните поле</small>
  724.             </label>
  725.           `;
  726.         }).join("");
  727.       };
  729.       const collectCheckoutFields = () => {
  730.         const fields = {};
  731.         const inputs = Array.from(checkoutDynamicFields?.querySelectorAll("[data-checkout-extra-input]") || []);
  732.         for (const input of inputs) {
  733.           if (!input.checkValidity()) {
  734.             input.closest(".checkout-field")?.classList.add("is-invalid");
  735.             input.focus();
  736.             return null;
  737.           }
  738.           input.closest(".checkout-field")?.classList.remove("is-invalid");
  739.           fields[input.name] = input.value.trim();
  740.         }
  741.         return fields;
  742.       };
  744.       const renderCheckoutResult = (order, error = "") => {
  745.         if (!checkoutResult) return;
  746.         checkoutResult.hidden = false;
  747.         checkoutResult.classList.toggle("is-error", Boolean(error));
  748.         checkoutResult.classList.toggle("is-success", !error && order?.status === "completed");
  749.         if (error) {
  750.           checkoutResult.innerHTML = `<strong>Не получилось создать оплату</strong><p>${checkoutEscape(error)}</p>`;
  751.           return;
  752.         }
  754.         const items = Array.isArray(order?.items) ? order.items : [];
  755.         const codes = items.map((item) => `
  756.           <li>
  757.             <span>${checkoutEscape(item.label || "Код")}</span>
  758.             <code>${checkoutEscape(item.code || "")}</code>
  759.           </li>
  760.         `).join("");
  761.         const verification = order?.verification?.url
  762.           ? `<a href="${checkoutEscape(order.verification.url)}" target="_blank" rel="noreferrer">Открыть verification-ссылку</a>`
  763.           : "";
  765.         checkoutResult.innerHTML = `
  766.           <strong>${checkoutEscape(order?.status_label || "Заказ создан")}</strong>
  767.           <p>${checkoutEscape(order?.message || "")}</p>
  768.           <dl>
  769.             <div><dt>GalaxyLink</dt><dd>${checkoutEscape(order?.provider_order_id || "ожидаем")}</dd></div>
  770.             <div><dt>Partner ID</dt><dd>${checkoutEscape(order?.partner_order_id || "")}</dd></div>
  771.             ${order?.amount_label ? `<div><dt>Списание</dt><dd>${checkoutEscape(order.amount_label)}</dd></div>` : ""}
  772.           </dl>
  773.           ${codes ? `<ul>${codes}</ul>` : ""}
  774.           ${verification}
  775.         `;
  776.       };
  778.       const refreshCheckoutOrder = async (orderId) => {
  779.         const response = await fetch(`${checkoutStatusEndpointBase}${encodeURIComponent(orderId)}`, {
  780.           headers: { Accept: "application/json" },
  781.         });
  782.         const payload = await response.json();
  783.         if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}`);
  784.         renderCheckoutResult(payload.order);
  785.         return payload.order;
  786.       };
  788.       const pollCheckoutOrder = (order) => {
  789.         window.clearInterval(checkoutPollTimer);
  790.         if (!order?.id || order.terminal || (Array.isArray(order.items) && order.items.length > 0)) return;
  791.         let attempts = 0;
  792.         checkoutPollTimer = window.setInterval(async () => {
  793.           attempts += 1;
  794.           try {
  795.             const nextOrder = await refreshCheckoutOrder(order.id);
  796.             if (nextOrder.terminal || (Array.isArray(nextOrder.items) && nextOrder.items.length > 0) || attempts >= 8) {
  797.               window.clearInterval(checkoutPollTimer);
  798.             }
  799.           } catch (error) {
  800.             window.clearInterval(checkoutPollTimer);
  801.           }
  802.         }, 3500);
  803.       };
  805.       const setCheckoutOpen = (open, returnFocus = false) => {
  806.         if (!checkoutModal) return;
  808.         if (open) {
  809.           window.clearInterval(checkoutPollTimer);
  810.           if (checkoutResult) {
  811.             checkoutResult.hidden = true;
  812.             checkoutResult.innerHTML = "";
  813.           }
  814.           checkoutReturnFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
  815.           checkoutModal.hidden = false;
  816.           checkoutModal.removeAttribute("inert");
  817.           checkoutModal.setAttribute("aria-hidden", "false");
  818.           document.body.classList.add("checkout-modal-open");
  819.           setCatalogOpen(false);
  820.           setProfileOpen(false);
  821.           requestAnimationFrame(() => checkoutModal.classList.add("is-open"));
  822.           window.setTimeout(() => checkoutModal.querySelector("[data-checkout-close]")?.focus(), 80);
  823.           return;
  824.         }
  826.         checkoutModal.classList.remove("is-open");
  827.         checkoutModal.setAttribute("aria-hidden", "true");
  828.         checkoutModal.setAttribute("inert", "");
  829.         document.body.classList.remove("checkout-modal-open");
  830.         window.setTimeout(() => {
  831.           if (!checkoutModal.classList.contains("is-open")) checkoutModal.hidden = true;
  832.         }, 200);
  833.         if (returnFocus) checkoutReturnFocus?.focus();
  834.       };
  836.       checkoutOpenButtons.forEach((button) => {
  837.         button.addEventListener("click", () => {
  838.           if (checkoutRequiresAuth) {
  839.             openCheckoutAuth(button);
  840.             return;
  841.           }
  842.           setCheckoutOpen(true);
  843.         });
  844.       });
  846.       checkoutCloseButtons?.forEach((button) => {
  847.         button.addEventListener("click", () => setCheckoutOpen(false, true));
  848.       });
  850.       checkoutModal?.addEventListener("pointerdown", (event) => {
  851.         if (event.target !== checkoutModal || checkoutDialog?.contains(event.target)) return;
  852.         setCheckoutOpen(false, true);
  853.       });
  855.       checkoutPaymentButtons?.forEach((button) => {
  856.         button.addEventListener("click", () => {
  857.           checkoutPaymentButtons.forEach((item) => {
  858.             const selected = item === button;
  859.             item.classList.toggle("is-selected", selected);
  860.             item.setAttribute("aria-checked", selected ? "true" : "false");
  861.           });
  862.           if (checkoutPaymentInput) checkoutPaymentInput.value = button.dataset.paymentMethod || "cryptobot";
  863.         });
  864.       });
  866.       checkoutEmailInput?.addEventListener("input", () => setCheckoutEmailError(false));
  868.       renderCheckoutFields(
  869.         parseCheckoutForms(checkoutDynamicFields?.dataset.initialForms || "[]"),
  870.         checkoutDynamicFields?.dataset.initialDeliveryType || "digital_item"
  871.       );
  873.       checkoutDialog?.addEventListener("submit", async (event) => {
  874.         event.preventDefault();
  875.         if (!checkoutEmailInput?.checkValidity()) {
  876.           setCheckoutEmailError(true);
  877.           checkoutEmailInput?.focus();
  878.           return;
  879.         }
  880.         const fields = collectCheckoutFields();
  881.         if (fields === null) {
  882.           renderCheckoutResult(null, "Заполните обязательные поля для выдачи товара.");
  883.           return;
  884.         }
  886.         setCheckoutEmailError(false);
  887.         const submitButton = checkoutDialog.querySelector(".checkout-submit");
  888.         const originalText = submitButton?.textContent || "";
  889.         if (submitButton) {
  890.           submitButton.disabled = true;
  891.           submitButton.textContent = "Создаем счёт...";
  892.         }
  893.         renderCheckoutResult({ status_label: "Создаем счёт CryptoBot", message: "Подготовили заказ и создаём ссылку на оплату." });
  895.         try {
  896.           const response = await fetch(checkoutEndpoint, {
  897.             method: "POST",
  898.             headers: {
  899.               Accept: "application/json",
  900.               "Content-Type": "application/json",
  901.             },
  902.             body: JSON.stringify({
  903.               product_id: checkoutProductIdInput?.value || "",
  904.               email: checkoutEmailInput.value,
  905.               payment: checkoutPaymentInput?.value || "cryptobot",
  906.               fields,
  907.             }),
  908.           });
  909.           const payload = await response.json();
  910.           if (response.status === 401 && payload.auth_required) {
  911.             setCheckoutOpen(false, true);
  912.             openCheckoutAuth(submitButton);
  913.             return;
  914.           }
  915.           if (!response.ok || !payload.ok) throw new Error(payload.error || `HTTP ${response.status}`);
  916.           if (payload.status_url) {
  917.             renderCheckoutResult({ status_label: "Переходим к заказу", message: "Открываем страницу статуса. Там будет кнопка оплаты и автообновление выдачи." });
  918.             window.location.href = payload.status_url;
  919.             return;
  920.           }
  921.           if (payload.redirect_url) {
  922.             renderCheckoutResult({ status_label: "Переходим к оплате", message: "Открываем CryptoBot." });
  923.             window.location.href = payload.redirect_url;
  924.             return;
  925.           }
  926.           renderCheckoutResult(payload.order);
  927.           pollCheckoutOrder(payload.order);
  928.         } catch (error) {
  929.           renderCheckoutResult(null, error.message || "Неизвестная ошибка оплаты.");
  930.         } finally {
  931.           if (submitButton) {
  932.             submitButton.disabled = false;
  933.             submitButton.textContent = originalText;
  934.           }
  935.         }
  936.       });
  938.       document.addEventListener("keydown", (event) => {
  939.         if (event.key !== "Escape" || !checkoutModal?.classList.contains("is-open")) return;
  940.         setCheckoutOpen(false, true);
  941.       });
  943.       document.querySelectorAll(".variant-option").forEach((button) => {
  944.         button.addEventListener("click", () => {
  945.           if (button.disabled) return;
  946.           document.querySelectorAll(".variant-option").forEach((item) => item.classList.remove("is-selected"));
  947.           document.querySelectorAll(".variant-option small").forEach((item) => {
  948.             const option = item.closest(".variant-option");
  949.             if (!option || option === button) return;
  950.             item.textContent = option.dataset.price || item.textContent;
  951.           });
  952.           button.classList.add("is-selected");
  953.           const note = button.querySelector("small");
  954.           if (note) note.textContent = "Выбрано";
  956.           const price = button.dataset.price || "";
  957.           const context = button.dataset.context || "";
  958.           const regionLabel = button.dataset.regionLabel || "";
  959.           const regionRestrictionTitle = button.dataset.regionRestrictionTitle || "";
  960.           const regionRestrictionText = button.dataset.regionRestrictionText || "";
  961.           const regionRestrictionCountries = button.dataset.regionRestrictionCountries || "";
  962.           const name = button.dataset.name || "";
  963.           const deliveryLabel = button.dataset.deliveryLabel || "";
  964.           const deliveryShortLabel = button.dataset.deliveryShortLabel || deliveryLabel;
  965.           const deliveryDescription = button.dataset.deliveryDescription || "";
  966.           const deliveryType = button.dataset.deliveryType || "digital_item";
  967.           const forms = parseCheckoutForms(button.dataset.forms || "[]");
  968.           const discountLabel = button.dataset.discountLabel || "";
  969.           if (checkoutProductIdInput && button.dataset.productId) checkoutProductIdInput.value = button.dataset.productId;
  970.           renderCheckoutFields(forms, deliveryType);
  971.           if (checkoutResult) checkoutResult.hidden = true;
  972.           if (price) {
  973.             document.querySelectorAll(".price-main strong, .mobile-price-row strong, .sticky-purchase-price strong, .checkout-product-price strong, [data-checkout-total-price]").forEach((node) => {
  974.               node.textContent = price;
  975.             });
  976.             document.querySelectorAll(".checkout-submit").forEach((node) => {
  977.               node.textContent = `Оплатить ${price}`;
  978.             });
  979.           }
  980.           if (context) {
  981.             document.querySelectorAll(".buy-context span").forEach((node) => {
  982.               node.textContent = context;
  983.             });
  984.             const checkoutContext = document.querySelector(".checkout-product span");
  985.             if (checkoutContext) checkoutContext.textContent = `${context} · ${deliveryShortLabel || "мгновенно"}`;
  986.           }
  987.           if (deliveryLabel) {
  988.             document.querySelectorAll("[data-delivery-label-target]").forEach((node) => {
  989.               node.textContent = deliveryLabel;
  990.             });
  991.           }
  992.           if (deliveryDescription) {
  993.             document.querySelectorAll("[data-delivery-description-target]").forEach((node) => {
  994.               node.textContent = deliveryDescription;
  995.             });
  996.           }
  997.           if (regionLabel) {
  998.             document.querySelectorAll("[data-spec-region]").forEach((node) => {
  999.               node.textContent = regionLabel;
  1000.             });
  1001.           }
  1002.           document.querySelectorAll("[data-region-restriction]").forEach((node) => {
  1003.             const hasRestriction = regionRestrictionTitle !== "" || regionRestrictionText !== "" || regionRestrictionCountries !== "";
  1004.             node.hidden = !hasRestriction;
  1005.             const title = node.querySelector("[data-region-restriction-title]");
  1006.             const text = node.querySelector("[data-region-restriction-text]");
  1007.             const countries = node.querySelector("[data-region-restriction-countries]");
  1008.             if (title) title.textContent = regionRestrictionTitle;
  1009.             if (text) text.textContent = regionRestrictionText;
  1010.             if (countries) countries.textContent = regionRestrictionCountries;
  1011.           });
  1012.           document.querySelectorAll("[data-discount-label-target]").forEach((node) => {
  1013.             node.textContent = discountLabel;
  1014.             node.hidden = discountLabel === "";
  1015.           });
  1016.           if (name) {
  1017.             document.querySelectorAll(".sticky-purchase-title, .checkout-product strong").forEach((node) => {
  1018.               node.textContent = name;
  1019.             });
  1020.           }
  1021.           if (button.dataset.url && window.history?.replaceState) {
  1022.             window.history.replaceState(null, "", button.dataset.url);
  1023.           }
  1024.         });
  1025.       });
  1027.       const productTabButtons = document.querySelectorAll("[data-product-tab]");
  1028.       const productPanels = document.querySelectorAll("[data-product-panel]");
  1029.       const setProductTab = (target, scrollToPanel = false) => {
  1030.         const targetPanel = document.querySelector(`[data-product-panel="${target}"]`);
  1031.         if (!targetPanel) return;
  1033.         productPanels.forEach((panel) => {
  1034.           const active = panel.dataset.productPanel === target;
  1035.           panel.classList.toggle("is-active", active);
  1036.           panel.hidden = !active;
  1037.         });
  1039.         productTabButtons.forEach((button) => {
  1040.           button.classList.toggle("is-active", button.dataset.productTab === target);
  1041.         });
  1043.         if (scrollToPanel) {
  1044.           document.querySelector(".product-info")?.scrollIntoView({ block: "start", behavior: "smooth" });
  1045.         }
  1046.       };
  1048.       productTabButtons.forEach((button) => {
  1049.         button.addEventListener("click", () => {
  1050.           setProductTab(button.dataset.productTab, false);
  1051.         });
  1052.       });
  1054.       document.querySelectorAll("[data-product-tab-link]").forEach((link) => {
  1055.         link.addEventListener("click", (event) => {
  1056.           event.preventDefault();
  1057.           setProductTab(link.dataset.productTabLink, true);
  1058.         });
  1059.       });
  1061.       const productCover = document.querySelector("[data-product-cover]");
  1062.       const productThumbs = Array.from(document.querySelectorAll("[data-product-thumb]"));
  1063.       let productGalleryTimer = null;
  1064.       let productCoverSwapTimer = null;
  1066.       const setProductCover = (button, scrollThumb = false) => {
  1067.         if (!button) return;
  1068.         const src = button.dataset.fullImage || button.querySelector("img")?.src;
  1069.         if (!src) return;
  1071.         const group = button.parentElement;
  1072.         group?.querySelectorAll(".is-active").forEach((item) => item.classList.remove("is-active"));
  1073.         button.classList.add("is-active");
  1075.         if (productCover) {
  1076.           if (productCoverSwapTimer) window.clearTimeout(productCoverSwapTimer);
  1077.           productCover.classList.add("is-changing");
  1078.           productCoverSwapTimer = window.setTimeout(() => {
  1079.             productCover.src = src;
  1080.             productCover.alt = button.getAttribute("aria-label") || productCover.alt;
  1081.             productCover.classList.remove("is-changing");
  1082.           }, 120);
  1083.         }
  1085.         if (scrollThumb && group && group.scrollWidth > group.clientWidth) {
  1086.           group.scrollTo({ left: Math.max(0, button.offsetLeft - 12), behavior: "smooth" });
  1087.         }
  1088.       };
  1090.       const restartProductGalleryAutoplay = () => {
  1091.         if (productGalleryTimer) window.clearInterval(productGalleryTimer);
  1092.         if (productThumbs.length < 2) return;
  1094.         productGalleryTimer = window.setInterval(() => {
  1095.           const activeIndex = Math.max(0, productThumbs.findIndex((button) => button.classList.contains("is-active")));
  1096.           setProductCover(productThumbs[(activeIndex + 1) % productThumbs.length], true);
  1097.         }, 4500);
  1098.       };
  1100.       productThumbs.forEach((button) => {
  1101.         button.addEventListener("click", () => {
  1102.           setProductCover(button, true);
  1103.           restartProductGalleryAutoplay();
  1104.         });
  1105.       });
  1106.       restartProductGalleryAutoplay();
  1108.       document.querySelectorAll("[data-description-toggle]").forEach((button) => {
  1109.         const description = button.closest(".product-description");
  1110.         const extra = description?.querySelector("[data-description-extra]");
  1111.         const label = button.querySelector("span");
  1112.         const mobileDescription = window.matchMedia("(max-width: 767px)");
  1114.         const setDescriptionOpen = (isOpen) => {
  1115.           if (!description || !extra || !label) return;
  1116.           description.classList.toggle("is-collapsed", !isOpen);
  1117.           extra.hidden = !isOpen;
  1118.           button.setAttribute("aria-expanded", isOpen ? "true" : "false");
  1119.           label.textContent = isOpen ? (mobileDescription.matches ? "Свернуть" : "Скрыть полностью") : "Показать полностью";
  1120.         };
  1122.         button.addEventListener("click", () => {
  1123.           setDescriptionOpen(button.getAttribute("aria-expanded") !== "true");
  1124.         });
  1126.         const refreshDescriptionLabel = () => setDescriptionOpen(button.getAttribute("aria-expanded") === "true");
  1127.         if (mobileDescription.addEventListener) {
  1128.           mobileDescription.addEventListener("change", refreshDescriptionLabel);
  1129.         } else {
  1130.           mobileDescription.addListener(refreshDescriptionLabel);
  1131.         }
  1132.       });
  1134.       document.querySelectorAll("[data-review-form]").forEach((form) => {
  1135.         const textarea = form.querySelector("textarea");
  1136.         const error = form.querySelector(".review-error");
  1137.         const success = form.querySelector(".review-success");
  1138.         const ratingLabel = form.querySelector(".review-form-rating b");
  1139.         const ratingButtons = form.querySelectorAll("[data-rating]");
  1141.         const setRating = (rating) => {
  1142.           form.dataset.rating = rating;
  1143.           form.querySelector(".review-form-rating")?.classList.add("has-value");
  1144.           ratingButtons.forEach((button) => button.classList.toggle("is-active", Number(button.dataset.rating) <= rating));
  1145.           if (ratingLabel) ratingLabel.textContent = `${rating}.0`;
  1146.         };
  1148.         ratingButtons.forEach((button) => {
  1149.           button.addEventListener("click", () => setRating(Number(button.dataset.rating)));
  1150.         });
  1152.         form.querySelectorAll(".review-tags button").forEach((button) => {
  1153.           button.addEventListener("click", () => button.classList.toggle("is-active"));
  1154.         });
  1156.         textarea?.addEventListener("input", () => {
  1157.           form.classList.remove("has-error");
  1158.           if (error) error.hidden = true;
  1159.         });
  1161.         form.addEventListener("submit", (event) => {
  1162.           event.preventDefault();
  1163.           const text = textarea?.value.trim() || "";
  1164.           if (!text) {
  1165.             setRating(Number(form.dataset.rating || 5));
  1166.             form.classList.add("has-error");
  1167.             form.classList.remove("is-sent");
  1168.             if (error) error.hidden = false;
  1169.             if (success) success.hidden = true;
  1170.             textarea?.focus();
  1171.             return;
  1172.           }
  1174.           setRating(Number(form.dataset.rating || 5));
  1175.           form.classList.remove("has-error");
  1176.           form.classList.add("is-sent");
  1177.           if (error) error.hidden = true;
  1178.           if (success) success.hidden = false;
  1179.         });
  1180.       });
  1182.       document.querySelectorAll("[data-question-form]").forEach((form) => {
  1183.         const textarea = form.querySelector("textarea");
  1184.         const error = form.querySelector(".question-error");
  1185.         const success = form.querySelector(".question-success");
  1187.         textarea?.addEventListener("input", () => {
  1188.           form.classList.remove("has-error");
  1189.           if (error) error.hidden = true;
  1190.         });
  1192.         form.addEventListener("submit", (event) => {
  1193.           event.preventDefault();
  1194.           const text = textarea?.value.trim() || "";
  1195.           if (!text) {
  1196.             form.classList.add("has-error");
  1197.             form.classList.remove("is-sent");
  1198.             if (error) error.hidden = false;
  1199.             if (success) success.hidden = true;
  1200.             textarea?.focus();
  1201.             return;
  1202.           }
  1204.           form.classList.remove("has-error");
  1205.           form.classList.add("is-sent");
  1206.           if (error) error.hidden = true;
  1207.           if (success) success.hidden = false;
  1208.         });
  1209.       });
  1211.       document.querySelectorAll(".like-action").forEach((button) => {
  1212.         button.addEventListener("click", () => {
  1213.           const wasLiked = button.classList.contains("is-liked");
  1214.           const count = button.querySelector("span");
  1215.           const icon = button.querySelector("img");
  1216.           button.classList.toggle("is-liked", !wasLiked);
  1217.           if (icon) icon.src = wasLiked ? "./assets/like-outline.svg" : "./assets/like-filled.svg";
  1218.           if (count) count.textContent = String(Math.max(0, Number(count.textContent || 0) + (wasLiked ? -1 : 1)));
  1219.         });
  1220.       });
  1222.       document.querySelectorAll("[data-promo-widget]").forEach((widget) => {
  1223.         const toggle = widget.querySelector(".promo-link");
  1224.         const form = widget.querySelector(".promo-form");
  1225.         const input = widget.querySelector("input");
  1226.         const help = widget.querySelector(".promo-help");
  1227.         const success = widget.querySelector(".promo-success");
  1228.         const error = widget.querySelector(".promo-error");
  1230.         const setPromoState = (state) => {
  1231.           widget.classList.toggle("is-success", state === "success");
  1232.           widget.classList.toggle("is-error", state === "error");
  1233.           if (help) help.hidden = state !== "idle";
  1234.           if (success) success.hidden = state !== "success";
  1235.           if (error) error.hidden = state !== "error";
  1236.         };
  1238.         toggle?.addEventListener("click", () => {
  1239.           const isOpen = widget.classList.toggle("is-open");
  1240.           if (form) form.hidden = !isOpen;
  1241.           toggle.setAttribute("aria-expanded", isOpen ? "true" : "false");
  1242.           if (isOpen) {
  1243.             setPromoState("idle");
  1244.             window.setTimeout(() => input?.focus(), 0);
  1245.           }
  1246.         });
  1248.         input?.addEventListener("input", () => setPromoState("idle"));
  1250.         form?.addEventListener("submit", (event) => {
  1251.           event.preventDefault();
  1252.           const code = input?.value.trim().toUpperCase() || "";
  1253.           if (code === "PAPA15") {
  1254.             if (input) input.value = "PAPA15";
  1255.             setPromoState("success");
  1256.             return;
  1257.           }
  1258.           setPromoState("error");
  1259.         });
  1260.       });
  1262.       const lightbox = document.querySelector("[data-image-lightbox]");
  1263.       const lightboxImage = lightbox?.querySelector("img");
  1264.       const closeLightbox = () => {
  1265.         if (!lightbox) return;
  1266.         lightbox.hidden = true;
  1267.         document.body.classList.remove("image-lightbox-open");
  1268.       };
  1270.       document.querySelectorAll(".product-image-preview").forEach((button) => {
  1271.         button.addEventListener("click", () => {
  1272.           const image = button.querySelector("img");
  1273.           if (!lightbox || !lightboxImage || !image) return;
  1274.           lightboxImage.src = image.currentSrc || image.src;
  1275.           lightboxImage.alt = image.alt;
  1276.           lightbox.hidden = false;
  1277.           document.body.classList.add("image-lightbox-open");
  1278.         });
  1279.       });
  1281.       lightbox?.querySelectorAll(".image-lightbox-backdrop, .image-lightbox-close").forEach((button) => {
  1282.         button.addEventListener("click", closeLightbox);
  1283.       });
  1285.       document.addEventListener("keydown", (event) => {
  1286.         if (event.key === "Escape") closeLightbox();
  1287.       });
  1289.       document.querySelectorAll('a[href="#"]').forEach((link) => {
  1290.         link.addEventListener("click", (event) => event.preventDefault());
  1291.       });
  1293.       document.querySelector(".search-form")?.addEventListener("submit", (event) => event.preventDefault());
  1295.     </script>
  1296. {% endblock %}