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

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

אך אותו כפתור אינו בעמוד מוצר יחיד (Single Product Page) אינו משתמש ב Ajax ובכדי לגרום לו לעשות זאת יש להוסיף מעט קוד. בפוסט קצר זה נראה כיצד לאפשר שימוש ב Ajax להוספת מוצר לעגלה גם בעמוד מוצר יחיד של ווקומרס.

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

הוספת Event בעת לחיצה על כפתור הוסף לעגלה בעמוד מוצר יחיד

זה ה Javascript שעליכם להוסיף בכדי לבצע זאת:

$('.entry-summary form.cart').on('submit', function (e) {

    e.preventDefault();

    let this_button = $('.single_add_to_cart_button');

    this_button.block({
        message: null,
        overlayCSS: {
            background: '#fff', opacity: 0.6
        }
    });

    let product_url = window.location,
        form = $(this);

    $.post(product_url, form.serialize() + '&_wp_http_referer=' + product_url, function (result) {
        let cart_dropdown = $('.widget_shopping_cart', result);

        // update dropdown cart
        $('.widget_shopping_cart').replaceWith(cart_dropdown);

        // update fragments
        $.ajax($warp_fragment_refresh);

        this_button.unblock();

    });
});;

על מנת לעדכן את עגלת הקניות ניצור את הפונקציה הבאה:

// Ajax add to cart on Single Product page
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');
        }
    }
};

בסופו של דבר הקוד נראה כך:

$('.entry-summary form.cart').on('submit', function (e) {

    e.preventDefault();

    let this_button = $('.single_add_to_cart_button');

    this_button.block({
        message: null,
        overlayCSS: {
            background: '#fff', opacity: 0.6
        }
    });

    let product_url = window.location,
        form = $(this);

    $.post(product_url, form.serialize() + '&_wp_http_referer=' + product_url, function (result) {
        let cart_dropdown = $('.widget_shopping_cart', result);

        // update dropdown cart
        $('.widget_shopping_cart').replaceWith(cart_dropdown);

        // update fragments
        $.ajax($warp_fragment_refresh);

        this_button.unblock();

    });
});


// Ajax add to cart on Single Product page
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');
        }
    }
};

קוד זה עליכם להוסיף לקובץ 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>

זהו, בזאת סיימתם… שאלות ורעיונות יתקבלו בברכה בתגובות מטה 🙂

The post is based on the following article (with some changes)…