Task: 6705 | Не работает AJAX добавление в корзину на подробной странице товара

wp-content/themes/cosmopet/modules/footer/assets/js/footer.js

@@ -42,54 +42,6 @@
                 }
             }
         });
-        // $(document.body).trigger('adding_to_cart', [$thisbutton, data]);
-
-        $.ajax({
-            type: 'post',
-            url: woocommerce_params.ajax_url,
-            data: data,
-            beforeSend: function (response) {
-                $form.find('.detail-block-form__submit, .store-add-to-cart').addClass('loading').attr('disabled', true)
-            },
-            complete: function (response) {
-                $form.find('.detail-block-form__submit, .store-add-to-cart').removeClass('loading').attr('disabled', false)
-            },
-            success: function (response) {
-                $('.modal__item.modal__basket').html(response['cart']);
-                if(response['cart_count'] > 0){
-                    $('.mini-profile__button--counter').removeClass('disabled').html(response['cart_count'])
-                }
-                else{
-                    $('.mini-profile__button--counter').addClass('disabled').html(response['cart_count'])
-                }
-                initCounters();
-                let modalF = document.querySelector('.modal'),
-                aside = document.querySelector('.modal__aside'),
-                device = window.screen.width;
-
-                if(!$.cookie('gp-cosmopet-cartadd')){
-                    modalF.classList.add('active');                
-                    $('.modal__basket').addClass('active');
-                    let thisContentElement = document.querySelector('.modal__basket');
-
-                    let width = thisContentElement.clientWidth;
-                    setTimeout(() => {
-                        if (device <= 720) {
-                            aside.style.width = `${device}px`;
-                            thisContentElement.style.opacity = 1;
-                            thisContentElement.style.filter = 'blur(0px)';
-                        }else{
-                            aside.style.width = `${width}px`;
-                            thisContentElement.style.opacity = 1;
-                            thisContentElement.style.filter = 'blur(0px)';
-                        }
-                    }, 10);
-
-                    $.cookie('gp-cosmopet-cartadd', 'true', { expires: 2 });
-                }
-                modalClose('.modal__close');
-            },
-        });
 
         return false;
     });

wp-content/themes/cosmopet/modules/layout/assets/css/gp-style-core.css

@@ -2198,3 +2198,22 @@ textarea{
 .modal__aside.active {
     right: 0;
 }
+
+.button.loading::before {
+    content: '';
+    height: 36px;
+    width: 36px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' width='200' height='200' style='shape-rendering: auto; display: block; background: transparent;'%3E%3Cg%3E%3Ccircle stroke-dasharray='164.93361431346415 56.97787143782138' r='35' stroke-width='10' stroke='%23000000' fill='none' cy='50' cx='50'%3E%3CanimateTransform keyTimes='0;1' values='0 50 50;360 50 50' dur='1s' repeatCount='indefinite' type='rotate' attributeName='transform'/%3E%3C/circle%3E%3Cg/%3E%3C/g%3E%3C!-- %5Bldio%5D generated by https://loading.io --%3E%3C/svg%3E");
+    background-size: contain;
+    background-repeat: no-repeat;
+}
+
+.button.loading {
+    font-size: 0;
+    color: transparent !important;
+    position: relative;
+}

wp-content/themes/cosmopet/modules/shop/components/cart/assets/js/cart.js

@@ -6,42 +6,41 @@ jQuery(document).ready(function($) {
     // });
     
     // Обновление количества через input
-$(document).on('change', '.counter__input', function () {
-    const $input = $(this);
-    const key = $input.data('key');
-    const quantity = parseInt($input.val(), 10);
-
-    if (quantity > 0) {
-        updateCart(key, quantity, false);
-
-        const $item = $input.closest('.modal-basket-item__control');
-        const $priceElement = $item.find('.woocommerce-Price-amount');
-        const currentPriceText = $priceElement.text().replace(/[^\d,]/g, '').replace(',', '.');
-        const currentTotal = parseFloat(currentPriceText);
-
-        // Защита от деления на 0
-        if (!isNaN(currentTotal) && currentTotal > 0) {
-            const oldQuantity = parseInt($input.prop('defaultValue'), 10);
-            const unitPrice = currentTotal / oldQuantity;
-            const newTotal = unitPrice * quantity;
-
-            // Получаем текущий символ валюты из разметки
-            const currencySymbol = $priceElement.find('.woocommerce-Price-currencySymbol').text().trim();
-
-            // Формируем новую цену с тем же символом
-            $priceElement.find('bdi').html(
-                newTotal.toLocaleString('ru-RU', { minimumFractionDigits: 0 }) +
-                '&nbsp;<span class="woocommerce-Price-currencySymbol">' + currencySymbol + '</span>'
-            );
-
-            // Обновить значение по умолчанию (чтобы расчёт unitPrice был корректен в следующий раз)
-            $input.prop('defaultValue', quantity);
-        }
-    } else {
-        removeItem(key);
-    }
-});
+    $(document).on('change', '.counter__input', function () {
+            const $input = $(this);
+            const key = $input.data('key');
+            const quantity = parseInt($input.val(), 10);
+
+            if (quantity > 0) {
+                updateCart(key, quantity, false);
+
+                const $item = $input.closest('.modal-basket-item__control');
+                const $priceElement = $item.find('.woocommerce-Price-amount');
+                const currentPriceText = $priceElement.text().replace(/[^\d,]/g, '').replace(',', '.');
+                const currentTotal = parseFloat(currentPriceText);
+
+                // Защита от деления на 0
+                if (!isNaN(currentTotal) && currentTotal > 0) {
+                    const oldQuantity = parseInt($input.prop('defaultValue'), 10);
+                    const unitPrice = currentTotal / oldQuantity;
+                    const newTotal = unitPrice * quantity;
+
+                    // Получаем текущий символ валюты из разметки
+                    const currencySymbol = $priceElement.find('.woocommerce-Price-currencySymbol').text().trim();
+
+                    // Формируем новую цену с тем же символом
+                    $priceElement.find('bdi').html(
+                        newTotal.toLocaleString('ru-RU', { minimumFractionDigits: 0 }) +
+                        '&nbsp;<span class="woocommerce-Price-currencySymbol">' + currencySymbol + '</span>'
+                    );
 
+                    // Обновить значение по умолчанию (чтобы расчёт unitPrice был корректен в следующий раз)
+                    $input.prop('defaultValue', quantity);
+                }
+            } else {
+                removeItem(key);
+            }
+    });
 
     
     $(document).on('click', '.modal__basket .counter__button.plus', function(e) {
@@ -406,4 +405,69 @@ $(document).on('change', '.counter__input', function () {
             }
         }
     });
+
+    $('.detail form.cart').on('submit', function(e) {
+            e.preventDefault();
+
+            var $form = $(this);
+            product_id = $form.find('button[name=add-to-cart]').val(),
+            quantity = $form.find('input.qty').val() || 1;
+            console.log(product_id);
+            $.ajax({
+                url: wc_add_to_cart_params.ajax_url,
+                type: 'POST',
+                data: {
+                    action: 'woocommerce_ajax_add_to_cart',
+                    product_id: product_id,
+                    quantity: quantity,
+                },
+                success: function(response) {
+                    if (response.error && response.product_url) {
+                        window.location = response.product_url;
+                        return;
+                    }
+
+                    updateCartFragment();
+                    openBasketOnFirstAdd();
+                },
+                error: function(xhr) {
+                    console.log('AJAX Error:', xhr.responseText);
+                    alert('Ошибка добавления товара.');
+                }
+            });
+        });
+});
+
+
+jQuery(function($){
+    $('form.cart').on('submit', function(e){
+        e.preventDefault();
+
+        var $form = $(this);
+        var $button = $form.find('button[type="submit"]');
+
+        var product_id = $button.val();
+        var quantity = $form.find('input.qty').val() || 1;
+        $.ajax({
+            type: 'POST',
+            url: wc_add_to_cart_params.ajax_url,
+            data: {
+                action: 'woocommerce_ajax_add_to_cart',
+                product_id: product_id,
+                quantity: quantity,
+            },
+            beforeSend: function() {
+                $button.addClass('loading');
+            },
+            success: function(response) {
+                if (response.error && response.product_url) {
+                    window.location = response.product_url;
+                    return;
+                }
+
+                $(document.body).trigger('added_to_cart', [response.fragments, response.cart_hash, $button]);
+                $button.removeClass('loading');
+            }
+        });
+    });
 });

wp-content/themes/cosmopet/modules/shop/components/cart/component-controller.php

@@ -11,3 +11,12 @@ add_filter('timber/context', function($context) {
     $context['cart_count'] = WC()->cart->get_cart_contents_count();
     return $context;
 });
+
+
+add_action('wp_enqueue_scripts', 'enable_ajax_add_to_cart_single');
+function enable_ajax_add_to_cart_single() {
+    if (is_product()) {
+        wp_enqueue_script('wc-add-to-cart-variation'); // для вариативных товаров
+        wp_enqueue_script('wc-add-to-cart'); // основной скрипт для добавления в корзину
+    }
+}

wp-content/themes/cosmopet/modules/shop/module-ajax-controller.php

@@ -143,3 +143,27 @@ function handle_remove_cart_item() {
         wp_send_json_error('Не удалось удалить товар из корзины');
     }
 }
+
+
+add_action('wp_ajax_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');
+add_action('wp_ajax_nopriv_woocommerce_ajax_add_to_cart', 'woocommerce_ajax_add_to_cart');
+
+function woocommerce_ajax_add_to_cart() {
+    $product_id = apply_filters('woocommerce_add_to_cart_product_id', absint($_POST['product_id']));
+    $quantity   = empty($_POST['quantity']) ? 1 : wc_stock_amount($_POST['quantity']);
+
+    $passed_validation = apply_filters('woocommerce_add_to_cart_validation', true, $product_id, $quantity);
+
+    if ($passed_validation && WC()->cart->add_to_cart($product_id, $quantity)) {
+        do_action('woocommerce_ajax_added_to_cart', $product_id);
+        WC_AJAX::get_refreshed_fragments();
+    } else {
+        $data = array(
+            'error'       => true,
+            'product_url' => apply_filters('woocommerce_cart_redirect_after_error', get_permalink($product_id), $product_id),
+        );
+        echo wp_send_json($data);
+    }
+
+    wp_die();
+}