Як вимкнути ковзаючу кошик в мобільному вигляді теми Shoptimizer для WooCommerce?

9 Березня 2024 в 00:45 69

Під час використання теми Shoptimizer для WooCommerce може виникнути ситуація, коли необхідно вимкнути ковзаючий кошик в мобільному вигляді, зберігаючи при цьому функцію AJAX додавання товару. Ця проблема може виникнути через те, що стандартна настройка теми дозволяє лише повне вимкнення ковзаючого кошика. Проте, за допомогою CSS та JavaScript, можна досягти бажаного результату без необхідності внесення значних змін у код теми.

Почнемо з CSS. Медіазапити дозволяють застосовувати різні стилі до елементів в залежності від розміру екрану пристрою. Для приховання ковзаючого кошика на мобільних пристроях можна використати CSS правило, яке буде приховувати відповідний елемент при певному розмірі екрану.

@media only screen and (max-width: 768px) {
    .class-of-your-slide-out-cart {
        display: none !important;
    }
}

@media only screen and (max-width: 768px) {

.class-of-your-slide-out-cart {

display: none !important;

}

Цей CSS код приховає ковзаючий кошик, коли ширина екрану досягає або менше 768px, що є типовим значенням для мобільних пристроїв.

Проте, це лише приховує кошик візуально. Щоб також вимкнути його функціональність, можна скористатися JavaScript. Використайте JavaScript код, щоб вручну зупинити події, які відкривають або закривають ковзаючий кошик.

document.addEventListener('DOMContentLoaded', function() {
    var slideOutCart = document.querySelector('.class-of-your-slide-out-cart');
    if (slideOutCart) {
        slideOutCart.addEventListener('click', function(event) {
            event.stopPropagation();
        });
    }
});

document.addEventListener('DOMContentLoaded', function() {

var slideOutCart = document.querySelector('.class-of-your-slide-out-cart');

if (slideOutCart) {

slideOutCart.addEventListener('click', function(event) {

event.stopPropagation();

});

}

});

Цей JavaScript код перехоплює клік на елементі, що відповідає ковзаючому кошику, та зупиняє подальшу обробку події, щоб кошик не відкривався або не закривався.