screen width не могу юзать из чанков

Доброго дня. Помогите плз, как использовать screen width из чанков…

Как сделать чтобы оно заработало в чанке Navbar:
[[*screen_width:gt=`768`:then=`[[*screen_width]] меньше 768`:else=`[[*screen_width]] больше 768`]]

Из script.js оно работает без проблем:

$(document).ready(function() {
  var h_hght = 370; // высота шапки
  var h_mrg = 0;     // отступ когда шапка уже не видна
  var screen_width = screen.width;     // ширина экрана эзера
  var elem = $('#top-megamenu-nav');

  if (screen_width < 768) {   
    $(window).scroll(function(){
       var top = $(this).scrollTop();
       if (top + h_mrg < h_hght) {
        elem.css('top', (h_hght-top)); // что за top? 
       } else {
        elem.css('top', h_mrg);         // что за top? 
       }
     });
  }
});

2 вариант, либо надо из чанка Navbar загрузить мини корзину с помощью JS, но не получается.

<script type="text/javascript">
var html = div_2.innerHTML;
  if (screen.width > 768) {   
document.getElementById("div_2").innerHTML = '<div class="col-xs-12 col-sm-12 col-md-3 top-cart-row no-margin"><div class="top-cart-row-container">[[!msMiniCart]]</div></div>';
  }
</script>

3 вариант — не смог, но попробывал поместить screen.width в TV поле. Так можно вообще?
Думал вывести так:
[[*screen_width]]
А это во Ввод TV поля

4 вариант не придумал, как еще сделать чтобы миникорзина грузилась в разных div. Для мобил один id=div_1 для компов id=div_2 или как-то так. Можно сделать две миникорзины, одну Скрыть дисплей ноун или визибле xs можно, но тогда динамическое обновление товаров в одной из миникорзин ломается.

АндрейЧ

28 декабря 2019, 11:43

712

Комментарии: 2

Баха Волков

28 декабря 2019, 19:56

Прошу прощения, но я и посмеялся и поплакал.

Создаете 2 миникорзины (раз уж верстка такая), оберткам вместо id="msMiniCart" даете class="minicart" или любой другой.

Перепишем стили:

.minicart { font-size: .8em; }
.minicart h5 { margin: 0; }
.minicart .empty { display: block; }
.minicart .not_empty { display: none; }
.minicart.full .empty { display: none; }
.minicart.full .not_empty { display: block; }

Пишем скрипт и загружаем его после скрипта ms2:

<script>
    miniShop2.Cart.setup = function() {
        miniShop2.Cart.cart = '#msCart';
        miniShop2.Cart.miniCart = '.minicart';
        miniShop2.Cart.miniCartNotEmptyClass = 'full';
        miniShop2.Cart.countInput = 'input[name=count]';
        miniShop2.Cart.totalWeight = '.ms2_total_weight';
        miniShop2.Cart.totalCount = '.ms2_total_count';
        miniShop2.Cart.totalCost = '.ms2_total_cost';
        miniShop2.Cart.cost = '.ms2_cost';
    }
</script>

Поздравляю, у вас 2 рабочие миникорзины

АндрейЧ

28 декабря 2019, 21:30

Смех т.к. я долго пробывал сам придумать решение, думал все просто ))
Да верстка была именно такая, чтобы все работало если решу проблемы с миникорзиной.
Пока пришлось сломать верстку, чтобы за счет css решить этот вопрос.

Спасибо большое, мне бы научиться, немного подумать, поэтому подсказки помогают.

Вопрос. Не получится же вашим скриптом решить проблему или пробывать?
У меня в скрипте многое не стандартно assets/components/minishop2/js/web/default.js

Ошибся я в формулировке, 2 миникорзины работают, но в одной из них ломается динамическое добавление-удаление товаров без перезагрузки страницы, и синхронизация миникорзины с основной корзиной на странице cart.html/
Это наверное связано с msMiniCartDynamic

miniShop2.Cart = {
        callbacks: {
            add: miniShop2Config.callbacksObjectTemplate(),
            remove: miniShop2Config.callbacksObjectTemplate(),
            change: miniShop2Config.callbacksObjectTemplate(),
            clean: miniShop2Config.callbacksObjectTemplate()
        },
        setup: function () {
            miniShop2.Cart.cart = '#msCart';
            miniShop2.Cart.miniCart = '#msMiniCart';
            miniShop2.Cart.miniCartNotEmptyClass = 'full';
            miniShop2.Cart.countInput = 'input[name=count]';
            miniShop2.Cart.totalWeight = '.ms2_total_weight';
            miniShop2.Cart.totalCount = '.ms2_total_count';
            miniShop2.Cart.totalCost = '.ms2_total_cost';
        },
        initialize: function () {
            miniShop2.Cart.setup();
            if (!$(miniShop2.Cart.cart).length) {
                return;
            }
            miniShop2.$doc.on('change', miniShop2.Cart.cart + ' ' + miniShop2.Cart.countInput, function () {
                $(this).closest(miniShop2.form).submit();
            });
        },
        add: function () {
            var callbacks = miniShop2.Cart.callbacks;
            callbacks.add.response.success = function (response) {
                this.Cart.status(response.data);
            };
            miniShop2.send(miniShop2.sendData.formData, miniShop2.Cart.callbacks.add, miniShop2.Callbacks.Cart.add);
        },
        remove: function () {
            var callbacks = miniShop2.Cart.callbacks;
            callbacks.remove.response.success = function (response) {
                this.Cart.remove_position(miniShop2.Utils.getValueFromSerializedArray('key'));
                this.Cart.status(response.data);
            };
            miniShop2.send(miniShop2.sendData.formData, miniShop2.Cart.callbacks.remove, miniShop2.Callbacks.Cart.remove);
        },
        change: function () {
            var callbacks = miniShop2.Cart.callbacks;
            callbacks.change.response.success = function (response) {
                if (typeof(response.data.key) == 'undefined') {
                    this.Cart.remove_position(miniShop2.Utils.getValueFromSerializedArray('key'));
                }
                else {
                    $('#' + miniShop2.Utils.getValueFromSerializedArray('key')).find('');
                }
                this.Cart.status(response.data);
            };
            miniShop2.send(miniShop2.sendData.formData, miniShop2.Cart.callbacks.change, miniShop2.Callbacks.Cart.change);
        },
        status: function (status) {
            if (status['total_count'] < 1) {
                location.reload();
            }
            else {
                //var $cart = $(miniShop2.Cart.cart);
                var $miniCart = $(miniShop2.Cart.miniCart);
                if (status['total_count'] > 0 && !$miniCart.hasClass(miniShop2.Cart.miniCartNotEmptyClass)) {
                    $miniCart.addClass(miniShop2.Cart.miniCartNotEmptyClass);
                }
                $(miniShop2.Cart.totalWeight).text(miniShop2.Utils.formatWeight(status['total_weight']));
                $(miniShop2.Cart.totalCount).text(status['total_count']);
                $(miniShop2.Cart.totalCost).text(miniShop2.Utils.formatPrice(status['total_cost']));
                if ($(miniShop2.Order.orderCost, miniShop2.Order.order).length) {
                    miniShop2.Order.getcost();
                }
            }
        },
        clean: function () {
            var callbacks = miniShop2.Cart.callbacks;
            callbacks.clean.response.success = function (response) {
                this.Cart.status(response.data);
            };

            miniShop2.send(miniShop2.sendData.formData, miniShop2.Cart.callbacks.clean, miniShop2.Callbacks.Cart.clean);
        },
        remove_position: function (key) {
            $('#' + key).remove();
        }
    };

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.