Maks | fix: сделал рабочими кнопки у товаров в возвращаемом ajax-запросе

.section.php

@@ -3,6 +3,6 @@ $sSectionName = "Главная страница";
 $arDirProperties = Array(
    "description" => "Заполнять через \"Изменить раздел\" в панели сверху",
    "title" => "Заполнять через \"Изменить раздел\" в панели сверху",
-   "ROBOTS" => "index, follow"
+   "ROBOTS" => "noindex, nofollow"
 );
 ?>

local/components/era/calculator/templates/.default/ajax.php

@@ -1,44 +1,67 @@
-<?php if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
+<?php if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true)
+    die();
 /** @var array $arParams */
 /** @var array $arResult */
 
+use Bitrix\Catalog\PriceTable;
+
+
 if (!empty($arResult['ITEMS'])):
     foreach ($arResult['ITEMS'] as $item): ?>
+        <?
+            $priceRow = PriceTable::getList([
+                'filter' => [
+                    'PRODUCT_ID' => $item['ID'],
+                    'CATALOG_GROUP_ID' => 1
+                ],
+                'select' => ['PRICE', 'CURRENCY']
+            ])->fetch();
+        ?>
         <div class="product">
-            <a class="product__image" href="<?=$item['DETAIL_PAGE_URL']?>">
-                <img src="<?=$item['PREVIEW_PICTURE']?>" alt="<?=$item['NAME']?>">
+            <a class="product__image" href="<?= $item['DETAIL_PAGE_URL'] ?>">
+                <img src="<?= $item['PREVIEW_PICTURE'] ?>" alt="<?= $item['NAME'] ?>">
             </a>
             <div class="product__data">
-                <?php if(isset($item['RATING'])): ?>
-                <div class="product__rating rating rating--<?=$item['RATING']?>"><?=$item['RATING']?>/5</div>
+                <?php if (isset($item['RATING'])): ?>
+                    <div class="product__rating rating rating--<?= $item['RATING'] ?>"><?= $item['RATING'] ?>/5</div>
                 <?php endif; ?>
                 <div class="product__info">
-                    <a class="product__title" href="<?=$item['DETAIL_PAGE_URL']?>"><?=$item['NAME']?></a>
-                    <?php if(!empty($item['PREVIEW_TEXT'])): ?>
-                    <p class="product__text"><?=$item['PREVIEW_TEXT']?></p>
+                    <a class="product__title" href="<?= $item['DETAIL_PAGE_URL'] ?>"><?= $item['NAME'] ?></a>
+                    <?php if (!empty($item['PREVIEW_TEXT'])): ?>
+                        <p class="product__text"><?= $item['PREVIEW_TEXT'] ?></p>
                     <?php endif; ?>
                 </div>
                 <div class="product__info">
-                    <?php if(!empty($item['PEOPLE_COUNT'])): ?>
-                    <p class="product__text">Пользователей: <span><?=$item['PEOPLE_COUNT']?></span></p>
+                    <?php if (!empty($item['PEOPLE_COUNT'])): ?>
+                        <p class="product__text">Пользователей: <span><?= $item['PEOPLE_COUNT'] ?></span></p>
                     <?php endif; ?>
-                    <?php if(!empty($item['PERFORMANCE'])): ?>
-                    <p class="product__text">Производительность: <span><?=$item['PERFORMANCE']?> м³/сут</span></p>
+                    <?php if (!empty($item['PERFORMANCE'])): ?>
+                        <p class="product__text">Производительность: <span><?= $item['PERFORMANCE'] ?> м³/сут</span></p>
                     <?php endif; ?>
-                    <?php if(!empty($item['RESET'])): ?>
-                    <p class="product__text">Залповый сброс: <span><?=$item['RESET']?> л</span></p>
+                    <?php if (!empty($item['RESET'])): ?>
+                        <p class="product__text">Залповый сброс: <span><?= $item['RESET'] ?> л</span></p>
                     <?php endif; ?>
-                    <?php if(!empty($item['POWER'])): ?>
-                    <p class="product__text">Питание: <span><?=$item['POWER']?></span></p>
+                    <?php if (!empty($item['POWER'])): ?>
+                        <p class="product__text">Питание: <span><?= $item['POWER'] ?></span></p>
                     <?php endif; ?>
                 </div>
-                <?php if(!empty($item['PRICE'])): ?>
-                <div class="product__price"><?=number_format($item['PRICE'], 0, '.', ' ')?> ₽</div>
+
+                <?php if (!empty($priceRow['PRICE'])): ?>
+                    <div class="product__price"><?= number_format($priceRow['PRICE'], 0, '.', ' ') ?> ₽</div>
                 <?php endif; ?>
-                <div class="product__btns">
-                    <button class="button button--orange" onclick="addToCart(<?=$item['ID']?>)">Купить</button>
-                    <button class="button button--outline">Купить с установкой</button>
-                </div>
+
+                <form class="product__btns add-to-cart-form" action="/catalog/" method="post" enctype="multipart/form-data">
+                    <input type="hidden" name="quantity" value="1" class="form-control" id="QUANTITY<?= $item['ID'] ?>">
+                    <input type="hidden" name="action" value="ADD2BASKET">
+                    <input type="hidden" name="ajax_basket" value="Y">
+                    <input type="hidden" name="id" value="<?= $item['ID'] ?>" class="id-offer">
+                    <button type="button" class="button button--orange" data-product="<?= $item['NAME'] ?>" onclick="openCartPopupForProduct('<?= $item['NAME'] ?>') ">
+                        Купить
+                    </button>
+                    <button type="submit" class="button button--outline add-to-cart-button" name="actionADD2BASKET">
+                        В корзину
+                    </button>
+                </form>
             </div>
         </div>
     <?php endforeach;

local/components/era/calculator/templates/.default/template.php

@@ -247,8 +247,16 @@
                             <div class="product__price"><?=number_format($item['PRICE'], 0, '.', ' ')?> ₽</div>
                             <?php endif; ?>
                              <div class="product__btns">
-                                <button class="button button--orange" onclick="addToCart(<?=$item['ID']?>)">Купить</button>
-                                <button class="button button--outline">Купить с установкой</button>
+                    <form class="add-to-cart-form" action="<?=POST_FORM_ACTION_URI?>" method="post" enctype="multipart/form-data" style="display: inline;">
+                        <input type="hidden" name="PRODUCT_QUANTITY" value="1">
+                        <input type="hidden" name="action" value="ADD2BASKET">
+                        <input type="hidden" name="ajax_basket" value="Y">
+                        <input type="hidden" name="id" value="<?= $item['ID'] ?>">
+                        <button type="submit" class="button button--orange add-to-cart-button">Купить</button>
+                    </form>
+                    <button type="button" class="button button--outline">
+                        В корзину
+                    </button>
                 </div>
                             <?php if(!empty($item['REVIEWS'])): ?>
                             <div class="product__reviews">

local/templates/.default/js/custom.js

@@ -4,7 +4,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
     Fancybox.bind("[data-fancybox]");
 
-    document.body.addEventListener('submit', function(e) {
+    document.body.addEventListener('submit', function (e) {
         const form = e.target;
         if (form.matches('.add-to-cart-form')) {
             e.preventDefault();
@@ -14,7 +14,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
         }
     });
 
-    cartForm?.addEventListener('submit', function(e) {
+    cartForm?.addEventListener('submit', function (e) {
         e.preventDefault();
         e.stopImmediatePropagation();
 
@@ -25,7 +25,7 @@ document.addEventListener("DOMContentLoaded", (event) => {
 
 function cartCheckout(formElement) {
 
-    if(!formElement) return;
+    if (!formElement) return;
 
     const formData = new FormData(formElement);
     const submitButton = formElement.querySelector('button[type=submit]');
@@ -47,7 +47,8 @@ function addToCart(formElement) {
         submitButton.classList.add('is-loading');
     }
 
-    fetch(window.location.href, {
+    fetch(formElement.getAttribute('action'), { // чтоб работало по action формы
+        // fetch(window.location.href, {
         method: 'POST',
         body: formData
     })
@@ -192,7 +193,7 @@ function updateHistoryUI(history, containerId, inputId) {
     });
     // Повторить поиск по истории
     container.querySelectorAll('.header__search-btn--again').forEach(btn => {
-        btn.addEventListener('click', function(e) {
+        btn.addEventListener('click', function (e) {
             e.preventDefault();
             const val = this.getAttribute('data-value');
             const input = document.getElementById(inputId);
@@ -201,7 +202,7 @@ function updateHistoryUI(history, containerId, inputId) {
     });
     // Удалить элемент истории
     container.querySelectorAll('.header__search-btn--remove').forEach(btn => {
-        btn.addEventListener('click', function(e) {
+        btn.addEventListener('click', function (e) {
             e.preventDefault();
             const idx = +this.getAttribute('data-idx');
             history.splice(idx, 1);
@@ -223,12 +224,12 @@ function setupSearchHistory(formId, inputId, containerId, clearBtnId) {
     const clearBtn = document.getElementById(clearBtnId);
 
     if (form && input) {
-        form.addEventListener('submit', function(e) {
+        form.addEventListener('submit', function (e) {
             e.preventDefault();
             const val = input.value.trim();
             if (!val) return;
             // Не дублируем подряд одинаковые
-            if (!history.length || history[history.length-1] !== val) {
+            if (!history.length || history[history.length - 1] !== val) {
                 history.push(val);
                 if (history.length > 10) history = history.slice(-10); // максимум 10
                 setCookie(containerId, JSON.stringify(history));
@@ -239,7 +240,7 @@ function setupSearchHistory(formId, inputId, containerId, clearBtnId) {
         });
     }
     if (clearBtn) {
-        clearBtn.addEventListener('click', function(e) {
+        clearBtn.addEventListener('click', function (e) {
             e.preventDefault();
             history = [];
             setCookie(containerId, JSON.stringify(history));
@@ -277,7 +278,7 @@ function ajaxSearch(inputId, blockId, historyBlockId) {
     const input = document.getElementById(inputId);
     const historyBlock = document.getElementById(historyBlockId);
     if (!input) return;
-    input.addEventListener('input', function() {
+    input.addEventListener('input', function () {
         const val = input.value.trim();
         clearSearchResults(blockId);
         if (historyBlock) {
@@ -298,7 +299,7 @@ function ajaxSearch(inputId, blockId, historyBlockId) {
             });
     });
     // Скрывать результаты при потере фокуса
-    input.addEventListener('blur', function() {
+    input.addEventListener('blur', function () {
         setTimeout(() => clearSearchResults(blockId), 200);
         if (historyBlock && input.value.trim().length === 0) {
             historyBlock.style.display = '';
@@ -310,10 +311,10 @@ function setupSearchBlockFocus(inputId, blockId) {
     const input = document.getElementById(inputId);
     const block = document.getElementById(blockId);
     if (!input || !block) return;
-    input.addEventListener('focus', function() {
+    input.addEventListener('focus', function () {
         block.classList.add('active');
     });
-    input.addEventListener('blur', function() {
+    input.addEventListener('blur', function () {
         setTimeout(() => block.classList.remove('active'), 200);
     });
 }
@@ -323,7 +324,7 @@ function toggleSearchTopAndHistory(inputId, topId, historiesId) {
     const top = document.getElementById(topId);
     const histories = document.getElementById(historiesId);
     if (!input || !top || !histories) return;
-    input.addEventListener('input', function() {
+    input.addEventListener('input', function () {
         if (input.value.trim().length > 0) {
             top.style.display = 'none';
             histories.style.display = 'none';
@@ -332,7 +333,7 @@ function toggleSearchTopAndHistory(inputId, topId, historiesId) {
             histories.style.display = '';
         }
     });
-    input.addEventListener('blur', function() {
+    input.addEventListener('blur', function () {
         if (input.value.trim().length === 0) {
             setTimeout(() => {
                 top.style.display = '';
@@ -347,7 +348,7 @@ function addToHistory(query, containerId, inputId) {
     try {
         history = JSON.parse(getCookie(containerId) || '[]');
     } catch (e) { history = []; }
-    if (!history.length || history[history.length-1] !== query) {
+    if (!history.length || history[history.length - 1] !== query) {
         history.push(query);
         if (history.length > 10) history = history.slice(-10);
         setCookie(containerId, JSON.stringify(history));
@@ -356,7 +357,7 @@ function addToHistory(query, containerId, inputId) {
 }
 
 function setupResultClickToHistory(inputId, containerId) {
-    document.addEventListener('click', function(e) {
+    document.addEventListener('click', function (e) {
         const target = e.target.closest('.search-result-item');
         if (target) {
             const input = document.getElementById(inputId);
@@ -370,7 +371,7 @@ function setupResultClickToHistory(inputId, containerId) {
     }, true);
 }
 
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
     setupSearchHistory('header-search-form', 'header-search-input', 'header-search-histories', 'header-search-clear');
     setupSearchHistory('mobile-search-form', 'mobile-search-input', 'mobile-search-histories', 'mobile-search-clear');
     ajaxSearch('header-search-input', 'header-search-history-block', 'header-search-histories');
@@ -384,6 +385,11 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 
+// Открытие попапа для local/components/era/calculator/templates/.default/ajax.php
+function openCartPopupForProduct(productName) {
+    document.querySelector('.cart-popup__wrapper').classList.remove('cart-popup__wrapper--hidden');
+    document.getElementById('fast_product').value = productName;
+}
 
 
 // From main.js

local/templates/.default/js/main.js

@@ -140,9 +140,12 @@ parcelRegister("6aHKA", function (module, exports) {
     const cartBreadcrumbs = document.querySelector(".js-cart__breadcrumbs");
     const cartForm = document.getElementById("cart-form");
 
+
+    if (orderBtn) {
         orderBtn.addEventListener("click", () => {
             cartPopup.classList.remove("cart-popup__wrapper--hidden");
         });
+    }
 
     // Закрытие попапа крестом и кликом по фону
     closeBtn.addEventListener("click", e => {

local/templates/EraSeptik/footer.php

@@ -59,28 +59,99 @@ use Bitrix\Main\Page\Asset;
  <section class="tap-bar">
 <div class="tap-bar__item">
         <a class="tap-bar__link" href="/">
-	Главная </a>
-</div>
-<div class="tap-bar__item">
+            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_2717_16834)">
+                    <path
+                        d="M21.5 11.25v9a.75.75 0 0 1-.75.75H15.5a.75.75 0 0 1-.75-.75v-4.875a.375.375 0 0 0-.375-.375h-3.75a.375.375 0 0 0-.375.375v4.875a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75v-9c0-.398.158-.78.44-1.06l7.5-7.5a1.5 1.5 0 0 1 2.12 0l7.5 7.5a1.5 1.5 0 0 1 .44 1.06Z"
+                        fill="currentColor"
+                    ></path>
+                </g>
+                <defs>
+                    <clipPath id="clip0_2717_16834"><path fill="#fff" d="M.5 0h24v24H.5z"></path></clipPath>
+                </defs>
+            </svg>
+            <span>Главная</span>
+        </a>
+    </div>
+    <div class="tap-bar__item">
         <a class="tap-bar__link" href="/uslugi/">
-	Услуги </a>
-</div>
-<div class="tap-bar__item tap-bar__item--catalog">
+            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_2717_16839)">
+                    <path
+                        d="M24.35 9a6.75 6.75 0 0 1-9.463 6.188l-4.88 5.645a3 3 0 1 1-4.28-4.204c.013-.012.026-.025.04-.036l5.646-4.88a6.757 6.757 0 0 1 7.832-9.26.75.75 0 0 1 .368 1.236L16.1 7.5l.53 2.47 2.47.53 3.811-3.517a.75.75 0 0 1 1.237.368c.134.54.202 1.093.202 1.65Z"
+                        fill="currentColor"
+                    ></path>
+                </g>
+                <defs>
+                    <clipPath id="clip0_2717_16839"><path fill="#fff" d="M.6 0h24v24H.6z"></path></clipPath>
+                </defs>
+            </svg>
+            <span>Услуги</span>
+        </a>
+    </div>
+    <div class="tap-bar__item tap-bar__item--catalog">
         <button class="tap-bar__link js-catalog" type="button">
-	Каталог </button>
-</div>
-<div class="tap-bar__item">
+            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_2717_16844)">
+                    <path
+                        d="M21.2 4.6v6a.403.403 0 0 1-.116.283.392.392 0 0 1-.279.117h-7.502V3.4c0-.106.041-.208.115-.283a.392.392 0 0 1 .28-.117h5.922c.42 0 .821.169 1.117.469.297.3.463.707.463 1.131ZM10.702 3H4.78c-.418 0-.82.169-1.116.469A1.61 1.61 0 0 0 3.2 4.6v6c0 .106.042.208.116.283a.392.392 0 0 0 .279.117h7.502V3.4a.403.403 0 0 0-.115-.283.392.392 0 0 0-.28-.117Zm10.103 10h-7.502v7.6c0 .106.041.208.115.283a.392.392 0 0 0 .28.117h5.922c.42 0 .821-.169 1.117-.469.297-.3.463-.707.463-1.131v-6a.403.403 0 0 0-.116-.283.392.392 0 0 0-.279-.117ZM3.2 13.4v6c0 .424.166.831.463 1.131.296.3.698.469 1.116.469h5.923a.392.392 0 0 0 .28-.117.402.402 0 0 0 .115-.283V13H3.595a.392.392 0 0 0-.28.117.403.403 0 0 0-.115.283Z"
+                        fill="currentColor"
+                    ></path>
+                </g>
+                <defs>
+                    <clipPath id="clip0_2717_16844"><path fill="#fff" d="M.2 0h24v24H.2z"></path></clipPath>
+                </defs>
+            </svg>
+            <span>Каталог</span>
+        </button>
+    </div>
+    <div class="tap-bar__item">
         <a class="tap-bar__link" href="/cart/">
-	Корзина </a>
-</div>
-<div class="tap-bar__item tap-bar__item--tablet">
+            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_2717_16849)">
+                    <path
+                        d="M18.456 16.938a2.194 2.194 0 0 0 2.103-1.603l-2.103 1.602Zm0 0H9.19a2.192 2.192 0 0 1-2.111-1.603L3.79 3.483l-.012-.046H2.05a.688.688 0 1 1 0-1.374H4.3a.688.688 0 0 1 .663.503l.888 3.2.013.046H22.3a.688.688 0 0 1 .663.872l-2.404 8.651-2.103 1.602ZM8.001 18.805a1.437 1.437 0 1 1 1.598 2.39A1.437 1.437 0 0 1 8 18.805Zm9.75 0a1.437 1.437 0 1 1 1.598 2.39 1.437 1.437 0 0 1-1.598-2.39Z"
+                        fill="currentColor"
+                        stroke="#939393"
+                        stroke-width=".125"
+                    ></path>
+                </g>
+                <defs>
+                    <clipPath id="clip0_2717_16849"><path fill="#fff" d="M.3 0h24v24H.3z"></path></clipPath>
+                </defs>
+            </svg>
+            <span>Корзина</span>
+        </a>
+    </div>
+    <div class="tap-bar__item tap-bar__item--tablet">
         <a class="tap-bar__link" href="#">
-	Расчет </a>
-</div>
-<div class="tap-bar__item tap-bar__item--menu">
+            <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_2717_16854)">
+                    <path
+                        d="M19.15 2.25H5.65a1.5 1.5 0 0 0-1.5 1.5v16.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5V3.75a1.5 1.5 0 0 0-1.5-1.5Zm-10.5 16.5a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25Zm0-3.75a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25Zm3.75 3.75a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25Zm0-3.75a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25Zm3.75 3.75a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25Zm0-3.75a1.125 1.125 0 1 1 0-2.25 1.125 1.125 0 0 1 0 2.25Zm1.5-5.25a.75.75 0 0 1-.75.75h-9a.75.75 0 0 1-.75-.75V6a.75.75 0 0 1 .75-.75h9a.75.75 0 0 1 .75.75v3.75Z"
+                        fill="currentColor"
+                    ></path>
+                </g>
+                <defs>
+                    <clipPath id="clip0_2717_16854"><path fill="#fff" d="M.4 0h24v24H.4z"></path></clipPath>
+                </defs>
+            </svg>
+            <span>Расчет</span>
+        </a>
+    </div>
+    <div class="tap-bar__item tap-bar__item--menu">
         <button class="tap-bar__link js-menu" type="button">
-	Меню </button>
-</div>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clip-path="url(#clip0_2717_16859)">
+                    <path d="M14.625 12a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0ZM4.5 9.375a2.625 2.625 0 1 0 0 5.25 2.625 2.625 0 0 0 0-5.25Zm15 0a2.625 2.625 0 1 0 0 5.25 2.625 2.625 0 0 0 0-5.25Z" fill="currentColor"></path>
+                </g>
+                <defs>
+                    <clipPath id="clip0_2717_16859"><path fill="#fff" d="M0 0h24v24H0z"></path></clipPath>
+                </defs>
+            </svg>
+            <span>Меню</span>
+        </button>
+    </div>
  </section> <footer class="footer footer section">
 <div class="container">
 	<div class="footer__top">