Search

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

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

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

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

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

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

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

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

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

2 תגובות...
  • אייל אביטל 30 מאי 2019, 17:52

    היי לך,

    אני עוקב תמיד אחר המאמרים שלך שהם מעולים וממש מוסיפים ערך מוסף וידע.

    אני גם בונה אתרים ועוסק קצת בקידום אבל לא ברמה שלך. אתה לדעתי נחשב מאסטר עם ידע יותר נרחב ועצום. במאמר שלך על הקפצת הודעה בהוספת מוצר לעגלת הקניות באתרי ווקומרס לא הצלחתי לבצע את ה "פשוט בצעו Enqueue" לא הבנתי גם איך אתה עושה זאת. את התהליך בשלבים : "הוסיפו את הקוד הבא לקובץ functions.php" + "כעת נמקם אותו אבסולוטית" ביצעתי כאמור .

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

    אשמח לדעת ואודה לך מקרב לב,

    שבוע טוב

  • שרית 1 מאי 2022, 10:36

    היי כאשר אני לוחצת על מעבר לסל הקניות
    זה נותן לי שגיאה דף זה אינו מקושר
    מה ניתן לעשות?

תגובה חדשה

Up!
לבלוג