在 Woocommerce 中的自定义添加到购物车按钮上启用 ajax

Question

在 WooCommerce 中，我想在我的自定义添加到卡片按钮上启用 Ajax。您可以在我的网站here 上查看。任何帮助表示赞赏。

这是我使用简码从产品类别创建产品链接的代码：

function woo_category_design_caa1( $atts ) {
    $category_id = $atts['category'];

    if(class_exists('WooCommerce')){
        $args = array(
            'post_type'             => 'product',
            'post_status'           => 'publish',
            'posts_per_page'        => -1,
            'tax_query'             => array(
                array(
                    'taxonomy'      => 'product_cat',
                    'field'         => 'term_id', //This is optional, as it defaults to 'term_id'
                    'terms'         => $category_id,
                    'operator'      => 'IN' // Possible values are 'IN', 'NOT IN', 'AND'.
                )
            )
        );

        if( $term = get_term_by('id', $category_id, 'product_cat')){
            $cat_name =  $term->name;
        }

        $products_list = new WP_Query($args);
        if($products_list->have_posts()){
            $tableHtml = '';
            $tableHtml .= '<div class="menu1">';
            $tableHtml .= "<div class='heading-menu' id='a" . $category_id . "'>".$cat_name."</div>";
            $tableHtml .= '<ul>';
            while($products_list->have_posts()){
                $products_list->the_post();
                $_product = wc_get_product(get_the_ID());
                if($_product->is_type( 'variable' )){
                    $args = array(
                        'post_type'     => 'product_variation',
                        'post_status'   => array( 'private', 'publish' ),
                        'numberposts'   => -1,
                        'orderby'       => 'menu_order',
                        'order'         => 'asc',
                        'post_parent'   => get_the_ID() // $post->ID
                        );
                        $variations = get_posts( $args );
                        $price ='';
                        $var_title = '';
                        $link_1 = '';
                        foreach($variations as $variation){
                            $var_title = $var_title . "/" . $variation->post_title;
                            //$price = $price . "/" . get_post_meta($variation->ID, '_regular_price', true);
                            $price = $price . '<a class="btn-link-atc" href="/order-online/?add-to-cart='.get_the_ID().'&variation_id='.$variation->ID.'"> ' . $variation->post_title .' &#x20b9; '. get_post_meta($variation->ID, '_regular_price', true) . ' </a>';
                        }
                }else{
                    $price = '<a class="btn-link-atc" href="/order-online/?add-to-cart='.get_the_ID().'">Add To Cart &#x20b9; '.get_post_meta(get_the_ID(), '_regular_price', true).'</a>';
                    //$price = get_post_meta(get_the_ID(), '_regular_price', true);
                }
                $tableHtml .= '<li>
                <div class="title">'.get_the_title().'</div><span>'.$price.'</span></li>';
            }
            $tableHtml .=  '</ul>';
            $tableHtml .=  '</div>';

            return $tableHtml;
            //return ' ';
        }
        else {
            return "Nothing Found.";
        }
    }
    else {
        return "Problem fetching data !";
    }


}
add_shortcode('woo_products_from_category_type1', 'woo_category_design_caa1');

Answer 1

已更新...您的代码有很多小错误，我已经完全重新审视它以启用 Ajax 添加到购物车功能，即使在产品变体上也是如此（这不是那么简单）。

我已将您的简码从 [woo_category_design_caa1] 重命名为 [products_from_cat]...您的函数名称保持不变。

这是启用 Ajax 添加到购物车的正确功能代码：

if( ! function_exists('woo_category_design_caa1') && class_exists('WooCommerce') ) {
    function woo_category_design_caa1( $atts ) {
        // Shortcode attributes
        $atts = shortcode_atts( array(
            'category' => '', // <= Set the default product category ID
        ), $atts, 'products_from_cat' );

        $products = new WP_Query( array(
            'post_type'      => 'product',
            'post_status'    => 'publish',
            'posts_per_page' => -1,
            'tax_query'      => array( array(
                'taxonomy' => 'product_cat',
                'field'    => 'term_id',
                'terms'    => $atts['category'],
                'operator' => 'IN',
            ) )
        ) );

        if($products->have_posts()):
            $term_name = get_term( $atts['category'], 'product_cat')->name; // The product category Name

            $output = '<div class="menu1">
            <div class="heading-menu" id="a' . $atts["category"] . '">'.$term_name.'</div>
            <ul>';
            while( $products->have_posts() ): $products->the_post();
                $product = wc_get_product($products->post->ID); // The WC_Product object (instance)
                $type = $product->get_type();

                if( $product->is_type( 'variable' ) && $product->is_in_stock() ){
                    $variations_ids = $product->get_visible_children(); // Get the variations IDs
                    $class = 'btn-link-atc';
                    $buttons = array();

                    foreach( $variations_ids as $variation_id ){
                        $variation = wc_get_product($variation_id); // The WC_Product_Variation object (instance)
                        // Get the variation attributes
                        $variation_attributes = $variation->get_attributes();
                        $attributes = array();
                        foreach( $variation_attributes as $taxonomy => $term_slug ){
                            $attributes[] = get_term_by( 'slug', $term_slug, $taxonomy )->name;
                        }
                        $attributes = ' - ' . implode( ' - ', $attributes );
                        // Get the correct button classes
                        $class = implode( ' ', array_filter( array(
                            'btn-link-atc',
                            'button',
                            'product_type_' . $variation->get_type(),
                            $product->is_purchasable() && $variation->is_in_stock() ? 'add_to_cart_button' : '',
                            $variation->supports( 'ajax_add_to_cart' ) ? 'ajax_add_to_cart' : '',
                        ) ) );
                        $price = $variation->get_price();
                        if($variation->is_in_stock()){
                            $buttons[] = sprintf( '<a rel="nofollow" href="%s" data-quantity="1" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
                                esc_url( $variation->add_to_cart_url() ),
                                esc_attr( $variation->get_id() ),
                                esc_attr( empty( $variation->get_sku() ) ? $product->get_sku() : $variation->get_sku() ),
                                esc_attr( isset( $class ) ? $class : 'btn-link-atc button' ),
                                esc_html( $variation->add_to_cart_text() ) . $attributes . ' - ' . wc_price($price)
                            );
                        }
                    }
                    $add_to_cart = implode(' <br />', $buttons);
                } elseif( ! $product->is_type( 'variable' ) && $product->is_in_stock() ){
                    $class = implode( ' ', array_filter( array(
                        'btn-link-atc',
                        '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' : '',
                    ) ) );
                    $price = $product->get_price();
                    $add_to_cart = sprintf( '<a rel="nofollow" href="%s" data-quantity="1" data-product_id="%s" data-product_sku="%s" class="%s">%s</a>',
                        esc_url( $product->add_to_cart_url() ),
                        esc_attr( $product->get_id() ),
                        esc_attr( $product->get_sku() ),
                        esc_attr( isset( $class ) ? $class : 'btn-link-atc button' ),
                        esc_html( $product->add_to_cart_text() ) . ' - ' . wc_price($price)
                    );
                }
                $output .= '<li><div class="title">'.$product->get_title().'</div><span>'.$add_to_cart.'</span></li>';
            endwhile;
            $output .=  '</ul>
            </div>';

            wp_reset_postdata();
            wp_reset_query();

            return $output;
        else:
            return "Nothing Found.";
        endif;
    }
    add_shortcode('products_from_cat', 'woo_category_design_caa1');
}

此代码位于您的活动子主题（或主题）的 function.php 文件中。 经过测试且有效。

---

---

每次将产品添加到购物车时，都会出现一个“查看购物车”按钮……您可以使用以下 CSS 规则将其隐藏：

a.added_to_cart.wc-forward {
    display:none;
}