Opencart 2.x - Cart Fly - Летающая Корзина

Тема в разделе "Модули и дополнения", создана пользователем admin, 27 окт 2017.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.733
    Симпатии:
    130.321
    Репутация:
    215
    Справа появляется плавающая кнопка с количеством товара в корзине и суммы.
    При нажатии на нее, переходит вверх к корзине и раскрывает ее.
    При нажатии кнопки Купить, появляется анимация полета товара и справа так же анимация на секунду "ОК"

    Во вложении модификатор и скрипты для реализации выше написанного.

    Установка.
    1. Скопировать и папки upload в корень
    2. Обновить кеш модификатора и кеш браузер апри необходимости
    3. В файл common.js внести изменения

    найти
    Код:
    // Cart add remove functions
    и ниже там где
    Код:
    $('#cart > button').html(
    вставим
    Код:
    $('#cart-total2').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
    а вот эту строчку удалим
    $('html, body').animate({ scrollTop: 0 }, 'slow');
    flyvcart.jpg
    Решение переведено на ocmod, адаптировано для темы по умолчанию, проверено на Opencart 2.3
     

    Вложения:

    • cartfly-2.3.zip
      Размер файла:
      4,1 КБ
      Просмотров:
      54
    adeli, Donnie, SCANDINAV21 и 41 другим нравится это.
  2. Offline

    CTPAHnick Пользователь

    Сообщения:
    17
    Симпатии:
    11
    Репутация:
    0
    А что нужно поменять для работы на Opencart 2.1?
     
  3. Offline

    CTPAHnick Пользователь

    Сообщения:
    17
    Симпатии:
    11
    Репутация:
    0
    Разобрался. Если у вас стикер-меню (при прокрутке прикрепляется сверху) и вам нет необходимости ставить предлагаемый сайд-бар корзины, то от всего модуля достаточно оставить в файле ocmod'а только это (уже адаптировано под шаблон ShopMe):

    Код:
    <?xml version="1.0" encoding="utf-8"?>
    <modification>
        <code>cartfly</code>
        <name>cartfly</name>
        <version>1.0</version>
      
        <file path="catalog/view/theme/shopme/template/common/cart.tpl">
            <operation error="skip">
                <search><![CDATA[
                    <div id="cart" class="valign">
                ]]></search>
                <add position="before"><![CDATA[
              
                <style>
                .flyer-img{display: block;width: 30px;height: 30px;border-radius: 50px;position: fixed;z-index: 9999;}
                #tip{position:fixed; top:80px; right:10px; z-index:10000; padding:13px 20px 10px;width:1px; height:42px; font-size:14px; text-align:center; color:#fff; background:#7cc935; display:none}
                </style>
                <div id="tip"><i class="fa fa-shopping-cart"></i>  Товар добавлен в корзину!</div>
                  
                <script src="catalog/view/javascript/jquery.fly.min.js"></script>
                <!--[if lte IE 9]>
                <script src="catalog/view/javascript/requestAnimationFrame.js"></script>
                <![endif]-->
                <script type="text/javascript">
                   $(function() {
    
                        $(".product-grid .btn-holder .btn-primary").click(function(event) {
                            var offset = $(".mini_cart").offset();                          
                            var img = $(this).parent().parent().parent().parent().find('.image').find('img').attr('src');
                            var flyer = $('<img class="flyer-img" src="' + img + '">');
    
                            flyer.fly({
                                start: {
                                    left: event.clientX,
                                    top: event.clientY
                                },
                                end: {
                                    left: offset.left + 20,
                                    top: offset.top - $(window).scrollTop(),
                                },
                                onEnd: function() {
                                   $("#tip").show().animate({width: '250px'}, 300).fadeOut(1500);
                                   this.destory();
                                }
                            });
                        });
                    });
                </script>
    
                ]]></add>
            </operation>      
        </file>        
    
    </modification>
    Далее разберем по строчкам код - его не так много.

    Блок со стилями .flyer-img - отвечает за летящую картинку (тут вас может интересовать размер), #tip — отвечает за стиль появляющегося оповещение после нажатия на кнопку Купить (или В корзину - у кого как).

    Далее по тексту кода сам блок оповещения <div id="tip"> - здесь и меняем текст оповещения. Забегая вперед - размер блока задан ниже в рамках javascript-функции обработки полета изображения — $("#tip").show().animate({width: '250px'}, 300).fadeOut(1500); — по ширине блока думаю понятно, а вот скорость исчезновения регулируется в fadeOut в милисекундах.

    После блока оповещения идет подключение нужных скриптов и далее уже сама функция обработки полета изображения.

    Первая строка функции при нестандартном шаблоне может меняться $(".product-grid .btn-holder .btn-primary").click(function(event) { . Если расшифровать ее на русский в действии, то получится так - при нажатии на объект со стилем .btn-primary начинается событие, которое описано внутри функции (.product-grid .btn-holder отвечают за стили вышестоящих блоков по иерархии вложенности. Мы через них более точно указываем место поиска нужного конечного объекта - кнопки Купить - на случай если есть похожий стиль в других ненужных нам блоках/кнопках).

    Далее по нажатию на кнопку Купить запускается сама функция полета изображенияflyer.fly({ — запускается она через описанную переменную выше - flyer. Теперь более подробно по этим переменным, т.к. они отвечают за:

    - offset (в переменную записывается позиция блока с указанным стилем, которая будет использована как конечная точка - куда прилетит изображение товара, здесь указываем стиль корзины - любой вложенности - либо самый первый либо самой иконки даже.)
    - img (в эту переменную записывается ссылка на изображение, которое мы отправим в полет. Через функции parent(). мы поднимаемся вверх по иерархии html структуры страницы начиная от кнопки купить, чтобы уже оттуда искать блок со стилем .image и далее по иерархи тэг <img> и у него забираем с атрибута src данные о ссылке на картинку.)
    - flyer (в эту переменную записывается сам html-блок тэга <img> с описанным ранее стилем .flyer-img и данными по местоположению изображения из переменной img.) Как раз эту переменную-картинку мы и будет запускать в полет.

    И вот сама функцию fly(), которая запускает переменную flyer по вложенным внутри координатам. Начинает (start:) с позиции кнопки Купить, и заканчивает (end:) на местоположении корзины с учетом данных по скроллингу страницы ($(window).scrollTop()), операторам +/- можно более точно регулировать конечные координаты полета.

    Как только "картинка прилетела" запускается обработка события (onEnd:), того, что будет происходить по "окончанию полета". В нашем случае запускается функция появления блока оповещения и затем его исчезновения.

    P.S. Думаю теперь каждый, хоть немного понимающий CSS и HTML, сможет сделать себе эффект полета товара в корзину, под свой даже нестандартный шаблон.
     
    Последнее редактирование: 28 окт 2017
    admin нравится это.
  4. Offline

    Einshteinnn2 Пользователь

    Сообщения:
    9
    Симпатии:
    0
    Репутация:
    0
    спасибо
     
  5. Offline

    Koko Пользователь

    Сообщения:
    5
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  6. Offline

    AAA1976 Пользователь

    Сообщения:
    5
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  7. Offline

    Sparjuk Пользователь

    Сообщения:
    23
    Симпатии:
    3
    Репутация:
    0
    Спасибо!
     
  8. Offline

    slavkovka Пользователь

    Сообщения:
    11
    Симпатии:
    4
    Репутация:
    0
    Спасибо
     
  9. Offline

    vitaliikit Пользователь

    Сообщения:
    8
    Симпатии:
    0
    Репутация:
    0
    спасибо
     
  10. Offline

    vitaliikit Пользователь

    Сообщения:
    8
    Симпатии:
    0
    Репутация:
    0
    осStore 2.3 не сработало ((
     
  11. Offline

    ricoo Пользователь

    Сообщения:
    1
    Симпатии:
    0
    Репутация:
    0
    То что искал, спасибо!
     
  12. Offline

    paulittop Пользователь

    Сообщения:
    1
    Симпатии:
    0
    Репутация:
    0
    спасибо
     
  13. Offline

    Merges Пользователь

    Сообщения:
    17
    Симпатии:
    2
    Репутация:
    0
    спасибо
     
  14. Offline

    Denismixi Пользователь

    Сообщения:
    2
    Симпатии:
    1
    Репутация:
    0
    Спасибо
     
  15. Offline

    jenya.1996 Пользователь

    Сообщения:
    2
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  16. Offline

    erikwhoisit Пользователь

    Сообщения:
    10
    Симпатии:
    1
    Репутация:
    0
    спасибо
     
  17. Offline

    Corsar Пользователь

    Сообщения:
    4
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  18. Offline

    wktp56 Пользователь

    Сообщения:
    18
    Симпатии:
    3
    Репутация:
    0
    Спасибо
     
  19. Offline

    anatoliy.1992 Пользователь

    Сообщения:
    11
    Симпатии:
    0
    Репутация:
    0
    Спасибо
     
  20. Offline

    MAXGRU Пользователь

    Сообщения:
    2
    Симпатии:
    1
    Репутация:
    0
    спасибо
     
    lumpi нравится это.