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,9 +1,22 @@
-<?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'] ?>">
@@ -32,13 +45,23 @@ if (!empty($arResult['ITEMS'])):
                         <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>
+                <form class="product__btns add-to-cart-form" action="/catalog/" method="post" enctype="multipart/form-data">
-                    <button class="button button--outline">Купить с установкой</button>
+                    <input type="hidden" name="quantity" value="1" class="form-control" id="QUANTITY<?= $item['ID'] ?>">
-                </div>
+                    <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>
+                    <form class="add-to-cart-form" action="<?=POST_FORM_ACTION_URI?>" method="post" enctype="multipart/form-data" style="display: inline;">
-                                <button class="button button--outline">Купить с установкой</button>
+                        <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

@@ -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
     })
@@ -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,27 +59,98 @@ use Bitrix\Main\Page\Asset;
  <section class="tap-bar">
 <div class="tap-bar__item">
         <a class="tap-bar__link" href="/">
-	Главная </a>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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">