添加ajax以添加到購物車按鈕并防止頁面重新加載

我想知道如何改進下面的代碼。它完全 100% 作業，但我想使用 ajax 以便我們可以防止頁面在將產品添加到購物車后重新加載。

下面的代碼添加了兩個按鈕來直接將 6 或 12 件商品添加到購物車。但是，如果我單擊一個按鈕，則頁面會重新加載。我怎樣才能用 ajax 做得更好？

add_action( 'woocommerce_after_add_to_cart_button', 'additional_simple_add_to_cart', 20 );
function additional_simple_add_to_cart() {
    
    global $product;

    // Only for simple product type
    if( ! $product->is_type('simple') ) return;
                
        // Only for products from category "bier" AND/OR "Cider"
        if ( has_term( array('bier', 'cider', 'getraenke'), 'product_cat', $product->get_id() ) ) {
        
        // Open parent layout wrapper
        echo '<div >';
            
        // Open child left layout wrapper
        echo '<div >';
            
            // Only display when more than 6 are available
            if( $product->get_stock_quantity() >= 6 ) {

                $href = '?add-to-cart=' . esc_attr( $product->get_id() ) . '&quantity=6';
                $class = 'single_add_to_cart_button-6 button alt';
                $style = 'display: inline-block; margin-top: 12px;';
                $button_text = __( "6er Pack", "woocommerce" );

                // Output add to cart button
                echo '<a rel="no-follow" href="'.$href.'" hljs-variable">$class.'" style="'.$style.'">'.$button_text.'</a>';
                                
            }
            
            else {
                echo '<a >6er Pack<p >(Ausverkauft)</p></a>';
            }
            
            // Close child left layout wrapper
            echo '</div>';
            
            // Open child right layout wrapper
            echo '<div >';

            // Only display when more than 12 are available
            if( $product->get_stock_quantity() >= 12 ) {

                $href = '?add-to-cart=' . esc_attr( $product->get_id() ) . '&quantity=12';
                $class = 'single_add_to_cart_button-12 button alt';
                $style = 'display: inline-block; margin-top: 12px;';
                $button_text = __( "12er Pack", "woocommerce" );

                // Output add to cart button
                echo '<a rel="no-follow" href="'.$href.'" hljs-variable">$class.'" style="'.$style.'">'.$button_text.'</a>';
                
            }
            
            else {
                echo '<a >12er Pack<p >(Ausverkauft)</p></a>';
            }

            // Close child right layout wrapper
            echo '</div>';
            
            // Close parent layout wrapper
            echo '</div>';
            
            // Open wrapper shipping info
            echo '<div >';
            
            // Output Info text for "bier" or "cider" products
            //echo '<p >W?hle 6, 9-12 oder 24 Biere einer Brauerei aus.</p>';
            //echo '<p >*Spezial Angebote z.B Probierpakete sind von dieser Beschr?nkung ausgeschlossen.</p>';
            
            // Tsting link to vendor
            global $product;
            $seller = get_post_field( 'post_author', $product->get_id());
            $author  = get_user_by( 'id', $seller );
            $vendor = dokan()->vendor->get( $seller );

            $store_info = dokan_get_store_info( $author->ID );

            if ( !empty( $store_info['store_name'] ) ) { 

            // Output Info text for "bier" or "cider" products
            echo '<p >W?hle 6, 9-12 oder 24 Biere einer Brauerei aus.</p>';
                
            // Output Vendor link
            printf( '<i ></i><a  href="%s">Mehr von %s</a>', $vendor->get_shop_url(),  $vendor->get_shop_name() );

            // Output shipping Info             
            echo '<p >*Spezial Angebote z.B Probierpakete sind von dieser Beschr?nkung ausgeschlossen. Versand wird je Brauerei berechnet.</p>';

            }
      
            // Close wrapper shipping info
            echo '</div>';
        }
}

uj5u.com熱心網友回復：

在您的所有產品上，您已經擁有將商品添加到購物車的按鈕，為它們指定一個類（例如添加到購物車）并為其添加另一個屬性 data-id。

<button type="button" class="add-to-cart" data-id="product-id">Add to Cart</button>

在您的 JS 中，您呼叫 button.add-to-cart 類的 click 事件偵聽器。使用querySelector()獲取點擊按鈕的data-id，將帶有ajax呼叫的產品ID發送到你的php代碼，在ajax的回呼（回傳）中，回傳購物車中物品的數量::我建議購物車計數器（您可以在其中顯示購物車中有多少商品）有一個 ID，您可以使用該 ID 在添加到購物車 ajax 呼叫回傳時進行更新。

uj5u.com熱心網友回復：

Woocommerce 提供 Ajax 添加到購物車功能

按照這個方法

儀表板>> woocommerce >> 設定>> 產品>> 檢查（在檔案上啟用AJAX 添加到購物車按鈕）選項

<a href="?add-to-cart=420" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="420" data-product_sku="" aria-label="Add “Product Simple only” to your cart" rel="nofollow">Add to cart</a>

標籤：php 阿贾克斯 求购

上一篇：如何通過Ajax呼叫更新資料表

下一篇：最近7天到當前的原始SELECT（不帶FROM）