显示woocommerce消息叠加格或提示无刷新页面 [英] show woocommerce messages in overlay div or tooltip without page refresh

问题描述

我试图摆脱重定向/重装的，当用户添加一个产品或获取一个信息消息在我woocommerce店。我只是想显示在工具提示中的添加到购物车的消息或覆盖格，让他们继续购物没有renavigate到店。

AJAX添加到购物车启用

所以我的问题是： 我能做些什么，而不刷新整个页面显示此消息？

编辑：的人也许有用，我的继承人 FINAL code：

  $（'。add_to_cart_button，.single_add_to_cart_button）。点击（函数（五）{
                VAR produkt_id;
                如果（$（本）.attr（'数据的product_id'）== undefined）的{
                    produkt_id = $（'输入[类型=隐藏]'）VAL（）。
                } 其他 {
                    produkt_id = $（本）.attr（'数据的product_id'）;
                }


                无功量;
                如果（$（本）.hasClass（'single_add_to_cart_button'）==真）{
                    如果（$（'数量'）。VAL（）=='1'）{
                        金额= $（'数量'）VAL（）。
                    }
                    的console.log（金额+'single_add_to_cart_button'）;
                }
                其他 {
                    量='1';
                    的console.log（金额+'add_to_cart_button'）;
                }




                功能addToCart（produkt_id）{
                    $阿贾克斯（{
                        键入：POST，
                        网址：'添加到购物车='+ produkt_id，
                        数据：{'PRODUCT_ID'：produkt_id，
                            量：量}，
                        成功：函数（响应，textStatus，jqXHR）{
                        // 回电话

                        } / *，
                         数据类型：JSON* /
                    }）;
                }
                即preventDefault（）;
                addToCart（produkt_id）;
   }）;
 

解决方案

你的意思是这样的： 如果你做的功能addedToChart它会做一个Ajax和创造一个消息，在页面顶部

  $（文件）。在（'点击'，'。add_to_cart_button'，功能（五）{
    即preventDefault（）;
    addedToCart（$（本）的.d​​ata（'PRODUCT_ID'））;
}）;
    功能addedToCart（ID）{
        $阿贾克斯（{
          键入：POST，
          网址：some.php
          数据：{PRODUCT_ID：ID}，
          成功：函数（）{
            $（'身体'）prePEND（'＆LT; D​​IV的风格=的位置是：固定;高度：20像素;宽度：100％;背景色：红色;文本对齐：中心;＆GT;增加图表＆LT ; / DIV＆GT;'）;
          }
        }）;
    }
 

I am trying to get rid of the redirect/reload when the user is adding a product or gets a info message in my woocommerce shop. I just want to show the "added to cart" message in a tooltip or overlay div and let them continue shopping without renavigate to the shop.

AJAX add to cart is enabled

so my question is: what can I do to display this messages without refreshing the whole page?

EDIT: maybe useful for anyone, heres my FINAL CODE:

$('.add_to_cart_button, .single_add_to_cart_button').click(function(e) {
                var produkt_id;
                if ($(this).attr('data-product_id') == undefined) {
                    produkt_id = $('input[type=hidden]').val();
                } else {
                    produkt_id = $(this).attr('data-product_id');
                }


                var amount;
                if ($(this).hasClass('single_add_to_cart_button') == true) {
                    if ($('.qty').val() !== '1') {
                        amount = $('.qty').val();
                    }
                    console.log(amount + ' single_add_to_cart_button');
                }
                else {
                    amount = '1';
                    console.log(amount + ' add_to_cart_button');
                }




                function addToCart(produkt_id) {
                    $.ajax({
                        type: 'POST',
                        url: '?add-to-cart=' + produkt_id,
                        data: {'product_id': produkt_id,
                            'quantity': amount},
                        success: function(response, textStatus, jqXHR) {
                        // callback

                        }/*,
                         dataType: 'JSON'*/
                    });
                }
                e.preventDefault();
                addToCart(produkt_id);
   });

解决方案

Do you mean something like this: if you do the function "addedToChart" it will do a ajax and creat a message at top of the page

$(document).on('click','.add_to_cart_button',function(e) {
    e.preventDefault();
    addedToCart($(this).data('product_id'));
});
    function addedToCart(id){
        $.ajax({
          type: "POST",
          url: "some.php",
          data: { product_id: id},
          success: function(){
            $('body').prepend('<div style="position:fixed; height:20px; width:100%; background-color:red; text-align:center;">Added to chart</div>');
          }
        });
    }

这篇关于显示woocommerce消息叠加格或提示无刷新页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！