Поддержка Темы и шаблоны Кнопки (+-) в теме Mystile

  • Всем привет! На сайте тема Mystile, WP+Woocommerce. Проблема вот в чем, в корзине перестают работать кнопки (+-) после удаления какого либо товара из самой корзины или при увеличении или уменьшении количества товара, они начинают работать только после обновления страницы (что не совсем удобно для пользователя).
    Что нужно проделать чтобы столкнуться с проблемой: Добавить 2 и более товара в корзину, перейти на страницу корзины /cart/, увеличить или уменьшить количество товара или вообще удалить один из товаров и нажать кнопку «обновить корзину», корзина обновиться и ПОТОМ если нажимать на кнопки (+-) они НЕбудут работать. Как это исправить?.. Буду безумно благодарен вашей помощи..

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 11 ответов — с 1 по 11 (всего 11)
  • Из-за аяксной перезагрузки блока слетают обработчики
    $('.quantity').on('click', '.plus', function(e) {
    и $('.quantity').on('click', '.minus',
    Думаю, стоит перецепить с .quantity на контейнер повыше, который не перегружается аяксом. Возможно, section.entry подойдет.

    Подскажите пожалуйста, где конкретно делать манипуляции? Я не прям новичок, но..

    где конкретно

    Там, где формируется/вставляется нижеследующий скрипт

    		    <script>
        jQuery(document).ready(function($){
        $('.quantity').on('click', '.plus', function(e) {
            $input = $(this).prev('input.qty');
            var val = parseInt($input.val());
            var step = $input.attr('step');
            step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
            $input.val( val + step ).change();
        });
        $('.quantity').on('click', '.minus', 
            function(e) {
            $input = $(this).next('input.qty');
            var val = parseInt($input.val());
            var step = $input.attr('step');
            step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
            if (val > 0) {
                $input.val( val - step ).change();
            } 
        });
    });
    </script>
    

    Угадать, где именно у вас прячется этот код, я, увы, не могу.

    Вот похожий код я нашел в function.php
    Я эти кнопки делал вот по этому мануалу, может я что то не так сделал или нужно в другое место вставить эти коды? https://gist.github.com/helgatheviking/6abe7385c23ba4238710ba6d1ccc5181

    add_filter( 'woocommerce_loop_add_to_cart_link', 'quantity_inputs_for_woocommerce_loop_add_to_cart_link', 10, 2 );
    function quantity_inputs_for_woocommerce_loop_add_to_cart_link( $html, $product ) {
    	if ( $product && $product->is_type( 'simple' ) && $product->is_purchasable() && $product->is_in_stock() && ! $product->is_sold_individually() ) {
    		$html = '<form action="' . esc_url( $product->add_to_cart_url() ) . '" class="cart" method="post" enctype="multipart/form-data">';
    		$html .= woocommerce_quantity_input( array(), $product, false );
    		$html .= '<button type="submit" class="button alt">' . esc_html( $product->add_to_cart_text() ) . '</button>';
    		$html .= '</form>';
    	}
    	return $html;
    }
    function kia_add_script_to_footer(){
        if( ! is_admin() ) { ?>
        <script>
        jQuery(document).ready(function($){
        $('.quantity').on('click', '.plus', function(e) {
            $input = $(this).prev('input.qty');
            var val = parseInt($input.val());
            var step = $input.attr('step');
            step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
            $input.val( val + step ).change();
        });
        $('.quantity').on('click', '.minus', 
            function(e) {
            $input = $(this).next('input.qty');
            var val = parseInt($input.val());
            var step = $input.attr('step');
            step = 'undefined' !== typeof(step) ? parseInt(step) : 1;
            if (val > 0) {
                $input.val( val - step ).change();
            } 
        });
    });
    </script>
    <?php }
    }
    add_action( 'wp_footer', 'kia_add_script_to_footer' );
    • Ответ изменён 4 года, 9 месяцев назад пользователем Oleg.

    может я что то не так сделал или нужно в другое место вставить эти коды?

    Всё так. Только в мануале, судя по всему, не учтено, что элемент, к которому прибинден ивент «click» может быть перезагружен аяксом.
    Я же написал: перецепить на не перезагружаемый аяксом контейнер, например на section.entry.

    вместо $('.quantity').on('click', ....
    попробовать $('section.entry').on('click',

    И пожалуйста, не забывайте о кнопке «code», кодга постите тут коды — без нее код превращается в нечитабельный мусор.

    • Ответ изменён 4 года, 9 месяцев назад пользователем Юрий.

    А где же этот контейнер найти?..
    Прошу прощения за код.

    А где же этот контейнер найти?..

    В html страницы 🙂 Жмете F12 в браузере и смотрите что там и как.

    Попробуйте в жабаскрипте вместо ‘.quantity’ поставить ‘section.entry’, как я выше написал.

    Дааааа!! Вторая версия сработала)))))
    Большое ЧЕЛОВЕЧЕСКОЕ спасибо ВАМ!!!

    Рано обрадовался…
    У меня теперь в корзине все работает как надо, но теперь кнопки (+-) перестали работать на странице с товаром, в категории и так далее.. Только в корзине все работает

    Попробуйте прицепить к body.
    $('body').on('click',...

    Вы гений! Спасибо еще раз!

Просмотр 11 ответов — с 1 по 11 (всего 11)
  • Тема «Кнопки (+-) в теме Mystile» закрыта для новых ответов.