Плавающая корзина Prestashop 1.6 [Sticky card Prestashop 1.6]

Опубликовал trace в блоге Блог trace. Просмотров: 1840

Плавающая корзина Prestashop 1.6 на примере стандартного шаблона.

Скриншоты:
s1.png s2.png s3.png s4.png s5.png

1. Отключаем SaaS
Удаляем папку: /themes/default-bootstrap/saas и все файлы *.map в папке /themes/default-bootstrap/css. Будем работать напрямую с css-файлами.

2. Редактируем css-файлы корзины
Открываем файл: themes/default-bootstrap/css/modules/blockcart/blockcart.css.
HTML:

#header .shopping_cart {
  position: relative;
  float: right;
  padding-top: 50px; }
меняем на
HTML:

#header .shopping_cart {
    position: absolute;
    right: 14px;
    top: 50px;
    width: 270px; }
И
HTML:

.shopping_cart {
  width: 270px; }
меняем на
HTML:

@media (min-width: 992px) and (max-width: 1199px) {
  #header .shopping_cart {
      width: 293px; } }

@media (max-width: 991px) {
  #header .shopping_cart {
      width: 220px; } }

@media (max-width: 767px) {
  #header .shopping_cart > a {
    text-align:center; }
  #header .shopping_cart {
     width: 100%;
     margin-top: 50px;
     position: static;
     right: 50%;} }
Теперь корзина выглядит ровно так же как выглядела и до этого, но всё же не совсем.

3. Редактируем js-файлы корзины
Открываем файл: themes/default-bootstrap/js/modules/blockcart/ajax-cart.js
И в самый конец добавляем следующее:
HTML:

$(function () {
    var $window = $(window),
        $body = $(document.body),
        $container = $('.container'),
        $cart = $('.shopping_cart'),
        scroll1Enabled,
        scroll2Enabled;

    $window.on('resize', windowSize);
    windowSize();

    function windowSize() {
        var width = $window.width();

        if (width <= 750) {
            if (!scroll1Enabled) {
                scroll1Enabled = true;
                scroll2Enabled = false;
                $window.on('scroll', scroll1)
                    .off('scroll', scroll2);
            }
            scroll1();
        } else {
            if (!scroll2Enabled) {
                scroll2Enabled = true;
                scroll1Enabled = false;
                $window.on('scroll', scroll2)
                    .off('scroll', scroll1);
            }
            scroll2();
        }
    }

    function scroll1() {
        if ($window.scrollTop() >= 340) {
            $cart.css({
                'position': 'fixed',
                'top': '0',
                'padding-top': '0',
                'width': '92%',
                'margin-top': '0px',
                'box-shadow': '0px 1px 4px 3px rgba(0,0,0,.4)',
                'z-index': '200000',
                'right': '4%'
            });
        } else {
            $cart.removeAttr('style');
        }
    }

    function scroll2() {
        if ($window.scrollTop() >= 160) {
            $cart.css({
                'position': 'fixed',
                'top': '0',
                'padding-top': '0',
                'width': '',
                'box-shadow': '0px 1px 4px 3px rgba(0,0,0,.4)',
                'z-index': '200000',
                'right': ($body.outerWidth(true) - $container.outerWidth()) / 2
            });
        } else {
            $cart.removeAttr('style');
        }
    }
});
Собственно всё)) В некоторых разрешениях корзина чуток съездает в право, но это совсем мелочи))
Буду рад если кто-то доработает или найдет ошибки.

И не забываем ставить лайки! :ay:

Вложения:

lounissess, Belena27089, Nato4ka_K и 7 другим нравится это.
  • caPRIZca
  • trace
  • zen1
Необходима авторизация