הקפצת הודעה לאחר הוספת מוצר לעגלת הקניות

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

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

הצגת נוטיפיקציה בעת הוספת מוצר לעגלת הקניות

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

בכדי לעשות זאת הוסיפו את הקוד הבא לקובץ functions.php בתבנית שלכם (עדיף כמובן להשתמש בתבנית בת):

<?php
//****** DON'T COPY ABOVE THIS LINE ******//

function savvy_add_to_cart_msg() { ?>
    <div class="addedToCartMsg" style="display: none;">
        המוצר נוסף לעגלה...
    </div>
    <?php
}
add_action( 'wp_footer', 'savvy_add_to_cart_msg' );

כעת נמקם אותו ונעצב אותו מעט בכדי שיהיה ברור וקריא באמצעות ה-CSS הבא:

.addedToCartMsg {
    position: fixed;
    left: 20px;
    bottom: 20px;
    background: #fefefe;
    padding: 10px 15px;
    width: 260px;
    font-weight: 500;
    display: none;
    font-size: 14px;
    border: 2px solid #434d52;
    border-radius: 4px;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

הקפצת ההודעה שיצרנו בעת הוספת מוצר

בשלב זה נטרגט את ה-Event המתבצע בעת הוספת מוצר לעגלה באמצעות JavaScript. אותו Event מחזיר לכם בין היתר מידע על המוצר שהתווסף ומידע נוסף כגון האלמנט (הכפתור) עליו לחצתם בעת הוספת המוצר.

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

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

על כל מקרה, הנה הקוד שעליכם להוסיף על מנת להקפיץ את האלמנט שיצרנו בעת הוספת מוצר בעמודי ארכיון המוצרים של ווקומרס:

(function($){
    $('body').on( 'added_to_cart', function(e, fragments, cart_hash, this_button){
    
        // console.log('added_to_cart');
        // console.log(fragments);
        // console.log(cart_hash);
        // console.log(this_button);
    
        var cartMsg = $('.addedToCartMsg');
        cartMsg.fadeIn(400);

        setTimeout(function () {
            cartMsg.fadeOut(400);
        }, 1500);
    });

})(jQuery);

פשוט בצעו Enqueue לקוד זה בפוטר של האתר ותראו תוצאה דומה לזו שהצגנו בדוגמה החיה מעלה (אל תשכחו להוסיף את תגית ה-<script> הפותחת והסוגרת).

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

משתמשים ב-WooCommerce Blocks?

אם החנות שלכם משתמשת ב-WooCommerce Blocks (עגלה ותשלום מבוססי בלוקים), ה-Event של jQuery בשם added_to_cart עשוי לא להיות מופעל. WooCommerce Blocks משדרים Event מקורי של DOM בשם wc-blocks_added_to_cart במקום. ניתן להאזין לו כך:

document.body.addEventListener('wc-blocks_added_to_cart', function() {
    var cartMsg = document.querySelector('.addedToCartMsg');
    cartMsg.style.display = 'block';

    setTimeout(function() {
        cartMsg.style.display = 'none';
    }, 1500);
});

גישה זו משתמשת ב-Vanilla JavaScript ולא דורשת jQuery כלל, מה שהופך אותה לאלטרנטיבה קלה יותר לחנויות מבוססות בלוקים. למידע נוסף על הוקים ואירועים ב-WooCommerce, עיינו במדריך להוקים של ווקומרס.

שאלות נפוצות

אם אתם צריכים עזרה או יש לכם שאלות, אתם מוזמנים לשאול בתגובות. בהצלחה!