如何在不重新加载 woocommerce 页面的情况下添加到购物车? [英] How to add to cart without reloading page on woocommerce?

问题描述

我正在建立一个网站，我想在主页面和商店页面上展示产品的选项和变化.

我使用此代码来完成:

/*** 替换循环中的添加到购物车按钮.*/函数iconic_change_loop_add_to_cart() {remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10);add_action('woocommerce_after_shop_loop_item', 'iconic_template_loop_add_to_cart', 10);}add_action('init', 'iconic_change_loop_add_to_cart', 10);/*** 对可变产品使用单个添加到购物车按钮.*/函数iconic_template_loop_add_to_cart() {全球$产品；如果(！$product->is_type('变量')){woocommerce_template_loop_add_to_cart();返回;}remove_action('woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20);add_action('woocommerce_single_variation', 'iconic_loop_variation_add_to_cart_button', 20);woocommerce_template_single_add_to_cart();}/*** 自定义变量添加到购物车按钮循环.**删除数量选择器并简化.*/函数iconic_loop_variation_add_to_cart_button() {全球$产品；?><div class="woocommerce-variation-add-to-cart changes_button"><button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() );?></按钮><input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>"/><input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>"/><input type="hidden" name="variation_id" class="variation_id" value="0"/>

<?php}

而且效果很好，但是如果您将产品添加到购物车，也会将您发送到该产品的页面.所以我添加了这个代码，所以页面只是重新加载.

函数iconic_add_to_cart_form_action( $redirect ) {如果(！is_archive()){返回 $redirect;}返回 '​​';}add_filter('woocommerce_add_to_cart_form_action', 'iconic_add_to_cart_form_action');

有人可以帮我吗?我想在不重新加载或将客户发送到另一个页面的情况下添加产品.

谢谢！！

解决方案

只需将您的 icons_loop_variation_add_to_cart_button 函数更改为此，因为我为此添加到购物车按钮添加了 ID:

/*** 自定义变量添加到购物车按钮循环.**删除数量选择器并简化.*/函数iconic_loop_variation_add_to_cart_button(){全球$产品；?><div class="woocommerce-variation-add-to-cart changes_button"><button type="submit" class="custom_add_to_cart single_add_to_cart_button button"><?php echo esc_html($product->single_add_to_cart_text());?></按钮><input type="hidden" name="add-to-cart" value="<?php echo absint($product->get_id()); ?>"/><input type="hidden" name="product_id" value="<?php echo absint($product->get_id()); ?>"/><input type="hidden" name="variation_id" class="variation_id" value="0"/>

<?php}

这里是 Ajax 代码:

jQuery(document).ready(function ($) {严格使用"；$('.custom_add_to_cart').click(function (e) {e.preventDefault();var id = $(this).next().next().attr('value');变量数据 = {product_id: id,数量:1};$(this).parent().addClass('loading');$.post(wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'), data, function (response) {如果(！响应){返回;}如果(响应.错误){alert("自定义按摩");$('.custom_add_to_cart').parent().removeClass('loading');返回;}如果(响应){var url = woocommerce_params.wc_ajax_url;url = url.replace("%%endpoint%%", "get_refreshed_fragments");$.post(url, function (data, status) {$(".woocommerce.widget_shopping_cart").html(data.fragments["div.widget_shopping_cart_content"]);如果(数据片段){jQuery.each(data.fragments, function (key, value) {jQuery(key).replaceWith(value);});}jQuery("body").trigger("wc_fragments_refreshed");});$('.custom_add_to_cart').parent().removeClass('loading');}});});});

我刚刚在我的本地主机上测试了你的代码，它运行良好

I'm building a website and I want to show the options of the products with variations on the main and shop page.

I use this code to acomplished that:

/**
 * Replace add to cart button in the loop.
 */
function iconic_change_loop_add_to_cart() {
    remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
    add_action( 'woocommerce_after_shop_loop_item', 'iconic_template_loop_add_to_cart', 10 );
}

add_action( 'init', 'iconic_change_loop_add_to_cart', 10 );

/**
 * Use single add to cart button for variable products.
 */
function iconic_template_loop_add_to_cart() {
    global $product;

    if ( ! $product->is_type( 'variable' ) ) {
        woocommerce_template_loop_add_to_cart();
    return;
    }

remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
    add_action( 'woocommerce_single_variation', 'iconic_loop_variation_add_to_cart_button', 20 );

    woocommerce_template_single_add_to_cart();
}

/**
 * Customise variable add to cart button for loop.
 *
 * Remove qty selector and simplify.
 */
function iconic_loop_variation_add_to_cart_button() {
    global $product;

    ?>
    <div class="woocommerce-variation-add-to-cart variations_button">
        <button type="submit" class="single_add_to_cart_button button"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>
        <input type="hidden" name="add-to-cart" value="<?php echo absint( $product->get_id() ); ?>" />
        <input type="hidden" name="product_id" value="<?php echo absint( $product->get_id() ); ?>" />
        <input type="hidden" name="variation_id" class="variation_id" value="0" />
    </div>
    <?php
}

And works great, but if you add a product to the cart, also sends you to the page of that product. So I add this code, so the page just reloads.

function iconic_add_to_cart_form_action( $redirect ) {
    if ( ! is_archive() ) {
        return $redirect;
    }

    return '';
}
add_filter( 'woocommerce_add_to_cart_form_action', 'iconic_add_to_cart_form_action' );

Can someone help me? I want to add the product withou reloading or sending the clientes to another page.

Thanks!!

解决方案

Just change your iconic_loop_variation_add_to_cart_button function to this as i added an ID for this add to cart button:

/**
 * Customise variable add to cart button for loop.
 *
 * Remove qty selector and simplify.
 */
  function iconic_loop_variation_add_to_cart_button()
{
    global $product;

    ?>
    <div class="woocommerce-variation-add-to-cart variations_button">
        <button   type="submit" class="custom_add_to_cart single_add_to_cart_button button"><?php echo esc_html($product->single_add_to_cart_text()); ?></button>
        <input type="hidden" name="add-to-cart" value="<?php echo absint($product->get_id()); ?>" />
        <input type="hidden" name="product_id" value="<?php echo absint($product->get_id()); ?>" />
        <input type="hidden" name="variation_id" class="variation_id" value="0" />
    </div>
    <?php
}

and here is the Ajax code:

jQuery(document).ready(function ($) {
  "use strict";

  $('.custom_add_to_cart').click(function (e) {
    e.preventDefault();
    var id = $(this).next().next().attr('value');
    var data = {
      product_id: id,
      quantity: 1
    };
    $(this).parent().addClass('loading');
    $.post(wc_add_to_cart_params.wc_ajax_url.toString().replace('%%endpoint%%', 'add_to_cart'), data, function (response) {

      if (!response) {
        return;
      }
      if (response.error) {
        alert("Custom Massage ");
        $('.custom_add_to_cart').parent().removeClass('loading');
        return;
      }
      if (response) {

        var url = woocommerce_params.wc_ajax_url;
        url = url.replace("%%endpoint%%", "get_refreshed_fragments");
        $.post(url, function (data, status) {
          $(".woocommerce.widget_shopping_cart").html(data.fragments["div.widget_shopping_cart_content"]);
          if (data.fragments) {
            jQuery.each(data.fragments, function (key, value) {

              jQuery(key).replaceWith(value);
            });
          }
          jQuery("body").trigger("wc_fragments_refreshed");
        });
        $('.custom_add_to_cart').parent().removeClass('loading');

      }

    });

 });
});

I Just tested with your code on my local host and it's working fine

这篇关于如何在不重新加载 woocommerce 页面的情况下添加到购物车?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！