0

Сайт на WordPress, тема BeTheme. Сайдбар WooCommerce с виджетами в мобильной версии отображается под всеми товарами, нужно отобразить вверху.

введите сюда описание изображения

введите сюда описание изображения

2
  • Сайт можете показать? 18 июн 2018 в 11:35
  • Да, конечно. Stockwood.by 18 июн 2018 в 12:33

1 ответ 1

0

Тут проще всего сделать на js.

jQuery(document).ready(function ($) {
    function getScrollbarWidth() {
        var outer = document.createElement("div");
        outer.style.visibility = "hidden";
        outer.style.width = "100px";
        outer.style.msOverflowStyle = "scrollbar"; // needed for WinJS apps

        document.body.appendChild(outer);

        var widthNoScroll = outer.offsetWidth;
        // force scrollbars
        outer.style.overflow = "scroll";

        // add innerdiv
        var inner = document.createElement("div");
        inner.style.width = "100%";
        outer.appendChild(inner);

        var widthWithScroll = inner.offsetWidth;

        // remove divs
        outer.parentNode.removeChild(outer);

        return widthNoScroll - widthWithScroll;
    }

    function moveSidebar() {
        var sidebar = $('.sidebar');
        var content = $('.sections_group');
        if (sidebar.length) {
            if (($(window).width() + getScrollbarWidth()) < 768) {
                sidebar.insertBefore(content);
            } else {
                sidebar.insertAfter(content);
            }
        }
    }

    // Resize handler
    $(window).resize(function () {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function () {
            moveSidebar();
        }, 300);
    }); 

    moveSidebar();  

});

После загрузки страницы и при изменении её размера вызывается функция moveSidebar(). В зависимости от ширины окна плюс ширины скроллбара (для точного соответствия css ширине), сайдбар переставляется перед контентом или после него.

2
  • А куда вставлять этот код? Можно подробнее? 17 дек 2018 в 15:17
  • Вставлять в отдельный файл, подключать через wp_enqueue_script() 17 дек 2018 в 16:30

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.