הבלטת מוצר ראשון בכל קטגוריה בווקומרס

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

				
					<script>
jQuery(document).ready(function($) {
    // מאזין לאירוע של JET לאחר הסינון או האיפוס
    $(document).on('jet-filter-content-rendered', function() {
        // בודק אם יש פילטרים פעילים
        if ($('.jet-remove-all-filters__button').is(':visible')) {
            // משנה את הרקע, הגבול, ורדיוס הגבול של המוצר הראשון
            $('.e-loop-item:first-of-type').css({
                'background': 'var(--e-global-color-6a42c46)',
                'border': '2px solid var(--e-global-color-secondary)',
                'border-radius': '20px',
                'position': 'relative'
            });

            // מוסיף תגית "מומלץ" אם לא קיימת
            if (!$('.e-loop-item:first-of-type .recommended-badge').length) {
                $('.e-loop-item:first-of-type').append('<span class="recommended-badge">מומלץ</span>');
            }
        } else {
            // מאפס את הרקע, הגבול, ורדיוס הגבול של המוצר הראשון אם אין פילטרים פעילים
            $('.e-loop-item').css({
                'background': '',
                'border': '',
                'border-radius': ''
            });

            // מסיר את תגית "מומלץ"
            $('.e-loop-item .recommended-badge').remove();
        }
    });
});
</script>

<style>
/* עיצוב תגית "מומלץ" */
.recommended-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--e-global-color-7d1c216);
    color: black;
    padding: 5px 10px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 12px;
    z-index: 10;
}
</style>

				
			

קודים נוספים

התפריט הוא אחד הדברים הראשונים שאנשים רואים כשהם נכנסים לאתר.עוד לפני שקוראים טקסט או לוחצים [...]

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

אם אתם בונים אתרים רספונסיביים, אתם יודעים שטיפוגרפיה יכולה להיות כאב ראש – במיוחד כשצריך [...]