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

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

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

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

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

בכדי לעשות זאת הוסיפו את הקוד הבא לקובץ 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 הבא:

.addedToCart-msg {
    position: absolute;
    left: 20px;
    background: #fefefe;
    padding: 10px 10px;
    width: 260px;
    font-weight: 500;
    display: none;
    font-size: 14px;
    border: 2px solid #434d52;
    top: 100px;
}

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

בשלב זה נטרגט את ה 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 בעמוד מוצר יחיד, תאלצו לשנות קוד זה (ואת הקוד בפוסט המצורף) על מנת לראות את הנוטיפיקציה גם בעת הוספת מוצר בעמוד מוצר יחיד.

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