כפתור Ajax 'הוסף לעגלה' בעמוד מוצר יחיד של ווקומרס

כברירת מחדל, ווקומרס משתמשת ב-AJAX להוספת מוצרים לעגלה בעמודי ארכיון ללא טעינת עמוד מחדש. אך כפתור ההוספה לעגלה בעמוד מוצר יחיד מבצע רענון מלא של העמוד.

מדריך זה מראה כיצד להפעיל הוספה לעגלה באמצעות AJAX בעמודי מוצר יחיד של ווקומרס באמצעות JavaScript מותאם ודריסת תבנית.

אם אינכם מבינים מה זה Ajax, אז לצורך העניין הכוונה היא להוסיף את המוצר לעגלה ללא רענון של העמוד.

שלב 1: JavaScript להוספה לעגלה באמצעות AJAX

ראשית, הגדירו את תצורת רענון ה-fragments, ואז צרפו את מטפל שליחת הטופס. ודאו שהסקריפט נטען עם wc-cart-fragments כתלות:

// Fragment refresh configuration
var $warp_fragment_refresh = {
    url: wc_cart_fragments_params.wc_ajax_url.toString().replace('%%endpoint%%', 'get_refreshed_fragments'),
    type: 'POST',
    success: function (data) {
        if (data && data.fragments) {
            $.each(data.fragments, function (key, value) {
                $(key).replaceWith(value);
            });
            $(document.body).trigger('wc_fragments_refreshed');
        }
    }
};

// AJAX add to cart on single product page
$('.entry-summary form.cart').on('submit', function (e) {
    e.preventDefault();
    var this_button = $('.single_add_to_cart_button');
    this_button.block({
        message: null,
        overlayCSS: {
            background: '#fff', opacity: 0.6
        }
    });
    var product_url = window.location,
        form = $(this);
    $.post(product_url, form.serialize() + '&_wp_http_referer=' + product_url, function (result) {
        var cart_dropdown = $('.widget_shopping_cart', result);
        // Update dropdown cart
        $('.widget_shopping_cart').replaceWith(cart_dropdown);
        // Refresh cart fragments
        $.ajax($warp_fragment_refresh);
        this_button.unblock();
    }).fail(function () {
        this_button.unblock();
    });
});

הוסיפו קוד זה לקובץ JavaScript וטענו אותו בתבנית עם wc-cart-fragments כתלות:

wp_enqueue_script( 'ajax-add-to-cart', get_stylesheet_directory_uri() . '/js/ajax-add-to-cart.js', array( 'jquery', 'wc-cart-fragments' ), '1.0', true );

שלב 2: דריסת תבנית כפתור ההוספה לעגלה

השלב השני הוא לדרוס את התבנית האחראית לכפתור ההוספה לעגלה. פעולה זו מעבירה את ערך ה-add-to-cart לשדה מוסתר כדי שה-JavaScript יוכל ליירט את שליחת הטופס.

העתיקו את הקובץ הנמצא במיקום הבא:

plugins/woocommerce/templates/single-product/add-to-cart/simple.php

לתבנית שלכם במיקום הבא:

themes/your theme name/woocommerce/single-product/add-to-cart/simple.php

זהו התהליך הסטנדרטי לדריסת תבניות ווקומרס. לאחר כל עדכון של ווקומרס, השוו את הקובץ הדרוס שלכם עם המקור כדי לוודא תאימות. גרסת התבנית מצוינת בראש כל קובץ.

כעת החליפו את השורה:

<button type="submit" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

בקוד הבא:

<input type="hidden" name="add-to-cart" value="<?php echo esc_attr( $product->get_id() ); ?>" />

<button type="submit" class="single_add_to_cart_button button alt"><?php echo esc_html( $product->single_add_to_cart_text() ); ?></button>

שאלות נפוצות

סיכום

הפעלת הוספה לעגלה באמצעות AJAX בעמודי מוצר יחיד של ווקומרס דורשת שני שלבים: מטפל JavaScript שמיירט את שליחת הטופס ומרענן cart fragments, ודריסת תבנית שמעבירה את מזהה המוצר לשדה input מוסתר.

זכרו לטעון את הסקריפט עם wc-cart-fragments כתלות, ותמיד בדקו את דריסות התבניות לאחר עדכוני ווקומרס. להרחבה על התאמת ווקומרס, ראו את המדריך שלנו על הוקים של ווקומרס.