首页 文章

Woocommerce添加到购物车链接Ajax在其他帖子或页面中启用

提问于
浏览 次
0

在Woocommerce中，我想在WordPress网站（不是产品页面）的简单页面上创建添加到购物车链接 .

所以我尝试了这段代码（其中123是产品ID）：

<a href="http://example.com/cart/?add-to-cart=123">Buy</a>

我已经在档案页面上启用了AJAX添加到购物车Woocommerce选项设置 .

但它不起作用，并且我的自定义“添加到购物车”链接未启用Ajax功能 .

如何在自定义链接上启用ajax add-to-cart（在除了woocommerce之外的其他页面中）？

php ajax wordpress woocommerce shortcode

3 回答

  • 2

    要在自定义添加到购物车按钮中启用ajax，至少有3种方法：

    • A simple HTML Ajax add to cart link:
    <a rel="nofollow" href="/?add-to-cart=37" data-quantity="1" data-product_id="123" data-product_sku="" class="add_to_cart_button ajax_add_to_cart">Add to cart</a>
    • Using Woocommerce existing [add_to_cart id='123'] shortcode （与上述用法相同）

    enter image description here

    enter image description here

    • The most customizable: A custom shortcode without price included （可自定义的按钮文本，附加类，数量和许多其他可能性）
    if( ! function_exists('custom_ajax_add_to_cart_button') && class_exists('WooCommerce') ) {
    function custom_ajax_add_to_cart_button( $atts ) {
        // Shortcode attributes
        $atts = shortcode_atts( array(
            'id' => '0', // Product ID
            'qty' => '1', // Product quantity
            'text' => '', // Text of the button
            'class' => '', // Additional classes
        ), $atts, 'ajax_add_to_cart' );

        if( esc_attr( $atts['id'] ) == 0 ) return; // Exit when no Product ID

        if( get_post_type( esc_attr( $atts['id'] ) ) != 'product' ) return; // Exit if not a Product

        $product = wc_get_product( esc_attr( $atts['id'] ) );

        if ( ! $product ) return; // Exit when if not a valid Product

        $classes = implode( ' ', array_filter( array(
            'button',
            'product_type_' . $product->get_type(),
            $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
            $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
        ) ) ).' '.$atts['class'];

        $add_to_cart_button = sprintf( '<a rel="nofollow" href="%s" %s %s %s class="%s">%s</a>',
            esc_url( $product->add_to_cart_url() ),
            'data-quantity="' . esc_attr( $atts['qty'] ) .'"',
            'data-product_id="' . esc_attr( $atts['id'] ) .'"',
            'data-product_sku="' . esc_attr( $product->get_sku() ) .'"',
            esc_attr( isset( $classes ) ? $classes : 'button' ),
            esc_html( empty( esc_attr( $atts['text'] ) ) ? $product->add_to_cart_text() : esc_attr( $atts['text'] ) )
        );

        return $add_to_cart_button;
    }
    add_shortcode('ajax_add_to_cart', 'custom_ajax_add_to_cart_button');
}

    此代码位于活动子主题（或主题）的function.php文件中 . 经过测试和工作 .

    USAGE:

    在帖子和页面文本编辑器中：

    [ajax_add_to_cart id='123' text='Buy']

    在PHP文件或模板中：

    echo do_shortcode( "[ajax_add_to_cart id='123' text='Buy']" );

    在php页面上插入HTML代码：

    <?php echo do_shortcode( "[ajax_add_to_cart id='123' text='Buy']" ); ?>

    enter image description here

    enter image description here

    隐藏Ajax“查看购物车”对于自定义短代码，要隐藏Ajax“查看购物车”行为，可以在返回$ add_to_cart_button之前添加代码;以下内容：$ style ='<style> a.added_to_cart.wc-forward {display：none！important; } </风格>';

    $ add_to_cart_button = $ style . $ add_to_cart_button;

    回复于
  • 4

    我建议你使用 [add_to_cart] Shortcode .

    使用默认参数最简单：

    [add_to_cart id="123" /]

    禁用默认样式并隐藏价格：

    [add_to_cart id="123" style="" show_price="false" /]

    See some sample output
    Sample output

    回复于
  • 0

    我用它作为我的插件，它工作正常：

    function wsb_add_to_cart_button( ) {
    global $product;

    $classes = implode( ' ',  array(
        'button',
        'product_type_' . $product->get_type(),
        $product->is_purchasable() && $product->is_in_stock() ? 'add_to_cart_button' : '',
        $product->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
    )  );

    return apply_filters( 'woocommerce_loop_add_to_cart_link',
        sprintf( '<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" data-quantity="%s" class="button %s product_type_%s">%s</a>',
            esc_url( $product->add_to_cart_url() ),
            esc_attr( $product->get_id() ),
            esc_attr( $product->get_sku() ),
            esc_attr( isset( $quantity ) ? $quantity : 1 ),
            esc_attr( isset( $classes ) ? $classes : 'button' ),
            esc_attr( $product->get_type() ),
            esc_html( $product->add_to_cart_text() )
        ),
    $product );
}

    用于显示按钮：

    <?php echo wsb_add_to_cart_button(); ?>
    回复于

相关问题