הוסף לעגלה – Ajax בעמוד מוצר יחיד של ווקומרס

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

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

אך אותו כפתור אינו בעמוד מוצר יחיד (Single Product Page) אינו משתמש ב 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)…

רועי יוסף
רועי יוסף

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

0תגובות...

השאירו תגובה

פעימות
Up!