📌  相关文章
📜  wp wc 使用产品 ID 添加到购物车按钮 (1)

📅  最后修改于: 2023-12-03 15:21:15.177000             🧑  作者: Mango

使用产品ID添加到购物车按钮

在WordPress中,你可以使用WP/WC钩子和函数来编写自己的WordPress WooCommerce 插件。 有时,可能需要通过自己的代码添加到购物车按钮。

本文将介绍如何使用产品ID添加到购物车按钮。

步骤
1. 在single-product.php文件中添加以下代码
// 获取当前产品的 ID
$product_id = get_the_ID();

// 添加到购物车按钮代码
echo '<button class="single_add_to_cart_button button alt" data-product_id="' . esc_attr( $product_id ) . '">'. esc_html__( 'Add to cart', 'woocommerce' ) .'</button>';
2. 使用jQuery实现加载

添加到购物车按钮后,在点击时不会触发加入购物车操作。 因为它没有WooCommerce加入购物车功能所必需的数据。

以下是如何使用jQuery为按键添加事件侦听器,以便在添加到购物车。

jQuery(function($) {
    // 将产品添加到购物车
    $('button.single_add_to_cart_button').click(function() {
        var product_id = $(this).data('product_id');
        var ajax_url = wc_add_to_cart_params.ajax_url;

        $.ajax({
            type: 'POST',
            url: ajax_url,
            data: {
                'action': 'woocommerce_add_to_cart',
                'product_id': product_id
            },
            success: function(response) {
                // 在成功加入购物车后,执行相应的代码。
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // 加入购物车失败时,执行相应的代码。
            }
        });
    });
});

现在,每当用户点击“添加到购物车”按钮时,产品ID将被传递到服务器,并在购物车中添加相应的产品。

总结

现在你已经知道如何使用产品ID添加到购物车按钮了。 这是通过使用WooCommerce内置的AjaxAPI来实现的。

如果你有任何问题或需要帮助,请查看WooCommerce文档,或联系我们