למה עמוד עגלה באלמנטור נראה כל כך רע במובייל? בואו נתקן את זה.

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

נתחיל מהסוף- זאת התוצאה לאחר כל השינויים שנעשה:

אז מה בעצם הבעיה במובייל של עמוד העגלה?

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

בואו נראה רגע איך זה נראה כרגע:

הבעיות במבנה הקיים:

1. עומס קוגניטיבי ומבנה עמוס בתוכן- כדי להפוך את הטבלה שיש בדסקטופ לרספונסיבית ווקמרס מוסיף בכל שורה את הכותרת עם נקודותיים (למשל "product:").
2. קושי בשינו כמות פריטים- השדה של הכמות עבור כל מוצר הוא שדה מספר, העריכה שלו לא נוחה מספיק (אנחנו רוצים שיהיה קל לגולש להזמין יותר ממוצר אחד ולהגדיל את העגלה בקליק אחד).
3. הכי חשוב: איפה הכפתור מעבר לתשלום? – בגלל שהטבלת מוצרים תופסת הרבה שורות, ומתחתיה השדה של הקו קופון תופס עוד מקום, בעצם ״דחפנו״ למטה את הכפתור הכי חשוב לנו: הכפתור מעבר לתשלום (צ׳ק אווט).

לא לדאוג, אנחנו נטפל בהכל יחד.

מה זה עומס קוגניטיבי ולמה כדאי להמנע ממנו?

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

במקרה של הטבלת מוצרים שלנו, הנה הנקודת התחלה:

והנה התוצאה שנגיע אליה:

נתחיל:

הוספת כפתורי פלוס / מינוס בעמוד עגלה (לשינוי כמות פריטים)

את הקוד הבא נוסיף לקובץ functions.php של התבנית שלנו.
הוא מוסיף כפתורים של פלוס ומינוס ליד השדה של הכמות בעגלה, וכך מאפשר שינוי יותר אינטואיטיבי של הכמות.

/* 
 * Add plus / minus button on cart page - Code by LEMON - LMN.co.il 
 */

add_action( 'woocommerce_before_quantity_input_field', 'lmn_display_quantity_minus_button' );

function lmn_display_quantity_minus_button() {
    // Add minus button only on cart page - Code by LEMON SHLIF
    if ( ! is_cart() ) return;
    echo '<button type="button" class="minus" >-</button>';
}

add_action( 'woocommerce_after_quantity_input_field', 'lmn_display_quantity_plus_button' );

function lmn_display_quantity_plus_button() {
    // Add plus button only on cart page - Code by LEMON SHLIF
    if ( ! is_cart() ) return;
    echo '<button type="button" class="plus" >+</button>';
}

add_action( 'woocommerce_before_cart', 'lmn_enqueue_cart_quantity_script' );

function lmn_enqueue_cart_quantity_script() {
    // Enqueue script to manage and update cart quantity on cart page, including removal when quantity is one - Code by LEMON SHLIF
    if ( ! is_cart() ) return;

    wc_enqueue_js( "
        function lmn_apply_quantity_buttons() {
            jQuery('.cart_item').on('click', 'button.plus, button.minus', function() {
                var qty = jQuery(this).closest('.cart_item').find('.qty');
                var val = parseFloat(qty.val());
                var max = parseFloat(qty.attr('max'));
                var min = parseFloat(qty.attr('min'));
                var step = parseFloat(qty.attr('step'));

                if (jQuery(this).is('.plus')) {
                    if (max && (max <= val)) {
                        qty.val(max);
                    } else {
                        qty.val(val + step);
						qty.change(); // Trigger change event to update cart
						jQuery(this).closest('form').find('button[name=\"update_cart\"]').trigger('click');
                    }
                } else {
                    if (val <= 1) {
                        // Trigger the remove product link if quantity is 1 or less
                        jQuery(this).closest('.cart_item').find('td.product-remove a.remove').click();
                    } else {
                        qty.val(val - step);
                        qty.change(); // Trigger change event to update cart
						jQuery(this).closest('form').find('button[name=\"update_cart\"]').trigger('click');
                    }
                }
            });

        }

        // Run the function initially on document ready
        jQuery(document).ready(function($) {
            lmn_apply_quantity_buttons();
        });

        // Reapply the function each time the cart is updated
        jQuery(document.body).on('updated_wc_div', function() {
            lmn_apply_quantity_buttons();
        });
    " );
}Code language: PHP (php)

וזה הקוד CSS שהולך עם הקוד הקודם,
את הCSS אפשר להכניס בעמוד עגלה עצמו:

/* Quantity buttons styling */
.quantity button {
    color: #000;
    padding: 2px;
    width: 21px;
    height: 21px;
    line-height: 0px;
    border-color: #000;
}

.quantity button:hover,
.quantity button:focus {
    color: #fff;
    background: #000;
}

/* Styling for quantity input */
.qty {
    width: 20px !important;
    text-align: center !important;
    border: none !important;
    -moz-appearance: textfield;
}

.qty::-webkit-outer-spin-button,
.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}Code language: CSS (css)

עיצוב טבלת מוצרים בעמוד העגלה (קוד CSS)

בהמשך לקוד הבא, יש להוסיף את הקוד CSS בעמוד עגלה: (אפשר על הוידג׳ט עגלה עצמו במתקדם > CSS מותאם).
חשוב לבדוק שהקוד מתאים גם לכם כמו שצריך, ועובד טוב במצבים שונים: מוצרי וריאציות וכו׳. ייתכן שיידרשו התאמות לקוד.

/* Mobile cart layout - Code by LEMON - LMN.co.il */

@media only screen and (max-width: 768px) {
    /* Hide specific table elements on mobile for cleaner layout */
    .e-shop-table .cart td:before,
    .product-remove,
    .product-price {
        display: none !important;
    }

    /* Cart item row styling */
    tr.cart_item {
        display: flex !important;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 10px;
        padding: 10px 20px !important;
        align-items: center;
    }

    /* Thumbnail adjustment to appear first */
    td.product-thumbnail {
        display: block !important;
        order: 1;
    }

    /* Product name configuration */
    td.product-name {
        display: flex !important;
        flex-direction: row;
        flex-grow: 1;
        order: 2;
        min-width: 100px;
    }
    td.product-name a {
        text-align: left;
    }

    /* Subtotal positioning */
    td.product-subtotal {
        order: 3;
    }

    /* Quantity field positioning and styling */
    td.product-quantity {
        order: 4;
        margin-left: -5px;
    }
}   
   Code language: CSS (css)

אזור קוד קופון – צמצום לשורה אחת (קוד CSS)

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

וככה עם הקוד:

/* Coupon column layout adjustments - Code by LEMON - LMN.co.il */

@media only screen and (max-width: 768px) {
    .elementor-widget-woocommerce-cart .woocommerce .coupon-col {
        display: flex !important;
        margin-bottom: -10px !important;
    }
    
    .elementor-widget-woocommerce-cart .woocommerce .coupon-col-start {
        padding-right: 10px !important;
    }
    
    .coupon-col-end {
        margin-top: 1px !important;
    }
}Code language: CSS (css)

כפתור ׳המשך לתשלום׳ צף (צמוד לתחתית המסך)

הקוד הזה ידאג שהכפתור יופיע תמיד בתחתית המסך, כמו באתר הבא.

/* Sticky checkout button at the bottom of the page - Code by LEMON - LMN.co.il */

@media only screen and (max-width: 768px) {
    .wc-proceed-to-checkout {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 20px !important;
        z-index: 1000; /* Ensure it's above other content */
    }
    #enable-toolbar {
        display: none;
    }
}Code language: CSS (css)

אופציונלי – אנימציית הברקה לכפתור ׳המשך לתשלום׳

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

/* Shining effect animation for .checkout-button - Code by LEMON - LMN.co.il  */

.checkout-button::before {
    content: ""; 
    position: absolute; 
    top: -50%; 
    left: -50%;
    width: 200%;
    height: 200%; 
    background: linear-gradient(60deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%); /* Linear gradient for the shine */
    animation: shine 3s linear infinite; /* Defines the animation */
}

@keyframes shine {
    0% {
        transform: translateX(-100%); /* Starts from the initial position */
    }
    100% {
        transform: translateX(100%); /* Moves from left to right */
    }
}Code language: CSS (css)

לסיכום- הקוד CSS המלא (עם כמה תוספות קטנות)

/* Mobile cart layout - Code by LEMON - LMN.co.il */

@media only screen and (max-width: 768px) {
    /* Hide specific table elements on mobile for cleaner layout */
    .e-shop-table .cart td:before,
    .product-remove,
    .product-price {
        display: none !important;
    }

    /* Cart item row styling */
    tr.cart_item {
        display: flex !important;
        flex-wrap: nowrap;
        flex-direction: row;
        gap: 10px;
        padding: 10px 20px !important;
        align-items: center;
    }

    /* Thumbnail adjustment to appear first */
    td.product-thumbnail {
        display: block !important;
        order: 1;
    }

    /* Product name configuration */
    td.product-name {
        display: flex !important;
        flex-direction: row;
        flex-grow: 1;
        order: 2;
        min-width: 100px;
    }
    td.product-name a {
        text-align: left;
    }

    /* Subtotal positioning */
    td.product-subtotal {
        order: 3;
    }

    /* Quantity field positioning and styling */
    td.product-quantity {
        order: 4;
        margin-left: -5px;
    }
    
    

    /* Coupon column layout adjustments */

    .elementor-widget-woocommerce-cart .woocommerce .coupon-col {
        display: flex !important;
        margin-bottom: -10px !important;
    }
    
    .elementor-widget-woocommerce-cart .woocommerce .coupon-col-start {
        padding-right: 10px !important;
    }
    
    .coupon-col-end {
        margin-top: 1px !important;
    }


    /* Sticky checkout button at the bottom of the page */

    .wc-proceed-to-checkout {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 20px !important;
        z-index: 1000; /* Ensure it's above other content */
    }
    
    #enable-toolbar {
        display: none;
    }

}


/* Quantity buttons styling */
.quantity button {
    color: #000;
    padding: 2px;
    width: 21px;
    height: 21px;
    line-height: 0px;
    border-color: #000;
}

.quantity button:hover,
.quantity button:focus {
    color: #fff;
    background: #000;
}

/* Styling for quantity input */
.qty {
    width: 20px !important;
    text-align: center !important;
    border: none !important;
    -moz-appearance: textfield;
}

.qty::-webkit-outer-spin-button,
.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Shining effect animation for .checkout-button - Code by LEMON - LMN.co.il  */

.checkout-button::before {
    content: ""; 
    position: absolute; 
    top: -50%; 
    left: -50%;
    width: 200%;
    height: 200%; 
    background: linear-gradient(60deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%); /* Linear gradient for the shine */
    animation: shine 3s linear infinite; /* Defines the animation */
}

@keyframes shine {
    0% {
        transform: translateX(-100%); /* Starts from the initial position */
    }
    100% {
        transform: translateX(100%); /* Moves from left to right */
    }
}



/* Cart totals table adjustments */
.woocommerce .cart_totals table.shop_table td {
    padding-right: 0px !important;
}

/* Shipping method styling */
ul#shipping_method {
    width: 200px;
    text-align: right;
}

/* Shipping row styling for better layout */
tr.shipping td {
    display: flex !important;
}

/* Hide footer */
footer {
    display: none;
}


Code language: CSS (css)