Jump to content
Sign in to follow this  
baxabit

Полёт картинки товара в корзину при нажатии кнопки "Купить"

Recommended Posts

На просторах рунета нашёл способ визуализации покупки товара, путём "полёта" картинки товара в корзину.

Тема давняя и забытая походу, и нашёл только для ветки 1.5.1.3 (напоминаю, данный способ уже для 1.5.3.1 и 1.5.4.1 !!!)

Затем, порывшись, нашёл-таки адаптацию под 1.5.3.1

Тестил на 1.5.4.1

 

Итак.

В файле catalog/view/theme/<ваша тема>/template/product/product.tpl

заменяем кусок кода

<script type="text/javascript"><!--
$('#button-cart').bind('click', function() {
$.ajax({
  url: 'index.php?route=checkout/cart/add',
  type: 'post',
  data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
  dataType: 'json',
  success: function(json) {
   $('.success, .warning, .attention, information, .error').remove();
  
   if (json['error']) {
    if (json['error']['option']) {
     for (i in json['error']['option']) {
      $('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
     }
    }
   }
  
   if (json['success']) {
    $('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/<ваша тема>/image/close.png" alt="" class="close" /></div>');
    
    $('.success').fadeIn('slow');
    
    $('#cart-total').html(json['total']);
   
    $('html, body').animate({ scrollTop: 0 }, 'slow');
   }
  }
});
});
//--></script>

Меняем на

<script type="text/javascript"><!--
$(document).ready(function(){
$('#button-cart').bind('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('.product-info input[type=\'text\'], .product-info input[type=\'hidden\'], .product-info input[type=\'radio\']:checked, .product-info input[type=\'checkbox\']:checked, .product-info select, .product-info textarea'),
dataType: 'json',
success: function(json) {
$('.success, .warning, .attention, information, .error').remove();
if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
$('#option-' + i).after('<span class="error">' + json['error']['option'][i] + '</span>');
}
}
}
 
if (json['success']) {
$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close" /></div>');
 
$('.success').fadeIn('slow');
 
$('#cart-total').html(json['total']);
var image = $('#image').offset();
                        $('.cart-module').html(json['output']);
                        if($(".cart-module").length > 0){
                            var cart = $('.cart-module');
                            var cart_offset = cart.offset();
                        }else {
                            var cart = $('#cart');
                            var cart_offset = cart.offset();
                    }
                    $('#image').before('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; z-index:9999; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');
                    params = {
                        top : cart_offset.top + 'px',
                        left : cart_offset.left + 'px',
                        opacity : 0.0,
                        width : cart.width(),
                        height : cart.height()
                    };
                    $('#temp').animate(params, 'slow', false, function () {
                        $('#temp').remove();
                    });
}
}
});
});
}); 
//--></script>

В строке

$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt=""

не забываем заменить название своего шаблона

Share this post


Link to post
Share on other sites

Подскажите пжлст, как изменить скорость анимации полета в корзину ?

$('#temp').animate(params, 'slow', false, function () {  чтобы было меньше чем slow).

Кстати, когда делается много кликов на кнопку "Купить" - изображения накладываются друг на друга (если нажимать пару раз в секунду). Помогите с этими проблемками пожалуйста, по форуму аналогичных вопросов не нашел.. (версия 1.5.4.1)

 

Разобрался..

Edited by samoylia

Share this post


Link to post
Share on other sites

Добрый день!

Не получилось :(

версия 1.5.3.1

Share this post


Link to post
Share on other sites

Работает только когда со страницы товара покупаешь.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Similar Content

    • By OCdevWizard
      600.00 руб
      Скачать/Купить дополнение


      Всплывающая корзина PRO+
      ❖ ОПИСАНИЕ
      Модуль - всплывающая корзина. Этот модуль обеспечивает быстрый и комфортный доступ к корзине покупок. Большая и расширенная система настроек делают этот модуль абсолютно уникальным и гибким для каждого магазина.
       
      ❖ DEMO САЙТ
      Админка: demo / demo | Смотреть
      Каталог: Смотреть
       
      ❖ СОВМЕСТИМОСТЬ С OPENCART
      ❏ 2.0.0.0, 2.0.1.0, 2.0.1.1, 2.0.2.0, 2.0.3.1, 2.1.0.1, 2.1.0.2, 2.2.0.0, 2.3.0.2, 3.0.0.0, 3.0.1.1, 3.0.1.2, 3.0.2.0
       
      ❖ СОВМЕСТИМОСТЬ С OCSTORE
      ❏ 2.1.0.1, 2.1.0.1.1, 2.1.0.2, 2.1.0.2.1, 2.3.0.2, 2.3.0.2.1, 2.3.0.2.2, 2.3.0.2.3
       
      ❖ ВСТРОЕННЫЙ ПЕРЕВОД
      Украинский, Русский, Английский
       
      ❖ ДРУГИЕ МОДУЛИ ИЗ ЭТОЙ КОЛЛЕКЦИИ 
      ❏ Всплывающая корзина PRO

      ❖ ПРЕДПРОСМОТР


      ❖ ОСНОВНЫЕ ВОЗМОЖНОСТИ

       
      ❖ ДЕТАЛИЗИРОВАННЫЙ СПИСОК ВОЗМОЖНОСТЕЙ
      ❏ Модуль работает во всплывающем окне.
      ☑ Вы можете выбрать опции продукта, прежде чем добавлять их в корзину.
      ☑ Вы можете минимизировать JS-файл модуля (низкий и средний уровни).
      ☑ Вы можете восстановить ранее сохраненные продукты во всплывающем окне.
      ☑ Вы можете изменить содержимое блока Totals во всплывающем окне.
      ❏ Вы можете выбрать некоторые параметры продукта, что отображаются в всплывающем окне.
      ☑ Вы можете редактировать и восстанавливать CSS файлы модуля.
      ❏ Живая обработка (через Ajax).
      ❏ Многоязычная поддержка.
      ❏ Поддержка нескольких магазинов.
      ❏ Вы можете настраивать текстовые данные модуля.
      ❏ Вы можете переключать RTL или LTR текстовое направление в модуле.
      ❏ Вы можете выбрать с какой группой клиентов следует работать модулю.
      ❏ Вы можете настройте фон для модуля.
      ☑ Вы можете настроить эффекты анимации для модуля.
      ❏ Вы можете отображать блоки: купон, подарочный сертификат, бонусы, расчет доставки.
      ❏ Простая установка по OCmod.
      ❏ Дружелюбный для мобильных устройств.
      ☑ Функция «Сохранить продукты» на E-mail пользователя. Данные автоматически сохраняются в БД магазина. Вы можете увидеть эту информацию.
      ❏ Карусель для Up-sell и Cross-sell товаров.
      ❏ Вы можете выбирать товары для Cross-sell из: категорий, брендов или вручную из продуктов.
      ❏ Вы можете выбирать товары Up-sell.
      ❏ Вы можете создать свои собственные html шаблоны для e-mail уведомлений.
      ❏ Вы можете сохранить и восстановить настройки модуля.
      ❏ Модуль требует активацию лицензии.
      [NEW] в версии 1.0.3
      ❏ защита от спама Google reCAPTCHA v2 только для функций "Сохранения и Восстановления" товаров.
      ☑ новый тип модуля: Статичный модуль.
      ☑ функция склонения слов для блока корзины.
      ☑ возможность скрыть/показать длинный список товаров в модуле.
      ☑ - функциональные возможности модуля, которые отмеченные этим знаком доступны только для версии модуля PRO+.
       
      ❖ СИСТЕМНЫЕ ТРЕБОВАНИЯ
      ❏ Перед покупкой, пожалуйста воспользуйтесь бесплатной утилитой "Проверка совместимости системы", для проверки совместимости вашей системы с требованиями модуля.
      ❏ PHP: >= 5.6.
      ❏ Установленная cURL библиотека.
      ❏ Установленный ionCube Loader v10.2.
      ❏ Модуль работает и на localhost, но требует активного подключения к Интернет.
       
      ❖ ПОДДЕРЖКА
      ❏ Пожалуйста, используйте мою службу поддержки, чтобы запросить помощь или сообщить о ошибке.
      ❏ Пожалуйста, не используйте комментарии для сообщений об ошибках.
      ❏ Техническая поддержка предоставляется бесплатно. Обратите внимание, что платная техническая поддержка выполняется в случаях, когда существует конфликт с внешними модулями/продуктами/шаблонами. Пожалуйста, примите это с пониманием того, что разработчик не может сделать собственный модуль на 100% совместимым со всеми внешними расширениями. Вот почему в некоторых случаях необходимо адаптировать модуль к нестандартной конфигурации и системным настройкам магазина. Поэтому решение таких проблем будет оплачиваться отдельно от стоимости модуля.
       
      ❖ ЛИЦЕНЗИЯ
      ❏ Вы можете использовать модуль только на одном своем домене (например http://site.com), а также на под доменах этого домена (например http://test.site.com или http://site.com/test/).
      ❏ Вы не можете продавать или перепродавать этот модуль без письменного разрешения от автора (OCdevWizard).
      ❏ Вы не можете давать в качестве подарка или распространять этот модуль без письменного разрешения от автора (OCdevWizard).
      ❏ Вы не можете представлять этот модуль как ваш собственный. Пожалуйста уважайте время и труд, которое автор потратил на создание этого модуля.
      ❏ Вы не можете удалять копирайт из файлов модуля от автора (OCdevWizard).
      ❏ Вы должны использовать мою службу поддержки для активации лицензии модуля.
       
      ❖ НЕСОВМЕСТИМЫЕ МОДУЛИ (НЕ ВЕСЬ СПИСОК)
      ❏ Mijoshop, Aceshop
      Добавил OCdevWizard Добавлено 12.03.2018 Категория Покупки, оформление заказа, корзина Системные требования PHP >=5.6; Mysqli; cURL; IonCube Loader v10.2 Сайт разработчика http://ocdevwizard.com/ Метод активации По запросу в ЛС Ioncube Loader Требуется OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Да Старая цена 1400  
    • By matroskin92
      В административной панели сайта - экспорт выбранных заказов в один файл .XLSX
      Экспорт корзины клиента (в любом месте шаблона), а так же экспорт заказа из личного кабинета интернет-магазина
      Отправка корзины в формате .XLSX при создании заказа определенному Вами списку email-адресов
      Подойдет для генерирования коммерческого предложения.
       
      Модуль не зависит от используемого шаблона и работает со всеми популярными модулями оформления заказа. 
       
      ЧТО МОЖНО ВЫВЕСТИ ПО ТОВАРУ
      Название Описание Теги Изображения Модель (Код) Артикул Вес Количество Цена Стоимость Атрибуты (в рамках доработки еще все-что угодно, пишите)  
      ДОПОЛНИТЕЛЬНО
      Контактные данные магазина Итоговые данные (сумма, купон, доставка и т.д.) Строка с замечаниями (заметками)  
      КРОМЕ ЭТОГО МОЖНО
      Настроить отправку заказов в формате XLSX заданному списку email Раскрасить в дополнительный цвет ячейку с данными, если в ней содержится любое из ключевых слов  
      ЭКСПОРТ ЗАКАЗОВ
      Возможен одного заказа, так и нескольких (с объединением или нет) одинаковых товаров Как в административной панели, так и в корзине или на странице заказа в личном кабинете пользователя  
      ОФОРМЛЕНИЕ EXCEL-ЛИСТА ПОД СТИЛЬ МАГАЗИНА
      Гибкое оформление данных с выводом логотипа  
      ПРОСТАЯ УСТАНОВКА
      Установите библиотеку PHPExcel как обычный модуль Установите модуль для Вашей версии Opencart Активируйте в списке модулей и произведите необходимую настройку модуля. Добавьте вывод модуля в нужный в макет корзины, либо в макет отображения заказа в личном кабинете. Обновите кэш модификаторов По результатам работы модуля, пожалуйста, напишите отзыв.  
      ДЕМО
      OPENCART 3 / OCSTORE 3
      OPENCART 2.3 / OCSTORE 2.3
      Логин: demo
      Пароль: demo
       
      ДОРАБОТКИ ПОД ВАШИ ТРЕБОВАНИЯ
      За дополнительную плату модуль можно доработать до ваших требований выгрузки заказов (корзины).
       
      ПОДДЕРЖКА
      Техническая поддержка по электронной почте dev@matro.site
       
      ОСТАЛИСЬ ВОПРОСЫ?
      Напишите в личные сообщения.
    • By matroskin92
      690.00 руб
      Скачать/Купить дополнение


      Экспорт корзины/заказов в Excel
      В административной панели сайта - экспорт выбранных заказов в один файл .XLSX
      Экспорт корзины клиента (в любом месте шаблона), а так же экспорт заказа из личного кабинета интернет-магазина
      Отправка корзины в формате .XLSX при создании заказа определенному Вами списку email-адресов
      Подойдет для генерирования коммерческого предложения.
       
      Модуль не зависит от используемого шаблона и работает со всеми популярными модулями оформления заказа. 
       
      ЧТО МОЖНО ВЫВЕСТИ ПО ТОВАРУ
      Название Описание Теги Изображения Модель (Код) Артикул Вес Количество Цена Стоимость Атрибуты (в рамках доработки еще все-что угодно, пишите)  
      ДОПОЛНИТЕЛЬНО
      Контактные данные магазина Итоговые данные (сумма, купон, доставка и т.д.) Строка с замечаниями (заметками)  
      КРОМЕ ЭТОГО МОЖНО
      Настроить отправку заказов в формате XLSX заданному списку email Раскрасить в дополнительный цвет ячейку с данными, если в ней содержится любое из ключевых слов  
      ЭКСПОРТ ЗАКАЗОВ
      Возможен одного заказа, так и нескольких (с объединением или нет) одинаковых товаров Как в административной панели, так и в корзине или на странице заказа в личном кабинете пользователя  
      ОФОРМЛЕНИЕ EXCEL-ЛИСТА ПОД СТИЛЬ МАГАЗИНА
      Гибкое оформление данных с выводом логотипа  
      ПРОСТАЯ УСТАНОВКА
      Установите библиотеку PHPExcel как обычный модуль Установите модуль для Вашей версии Opencart Активируйте в списке модулей и произведите необходимую настройку модуля. Добавьте вывод модуля в нужный в макет корзины, либо в макет отображения заказа в личном кабинете. Обновите кэш модификаторов По результатам работы модуля, пожалуйста, напишите отзыв.  
      ДЕМО
      OPENCART 3 / OCSTORE 3
      OPENCART 2.3 / OCSTORE 2.3
      Логин: demo
      Пароль: demo
       
      ДОРАБОТКИ ПОД ВАШИ ТРЕБОВАНИЯ
      За дополнительную плату модуль можно доработать до ваших требований выгрузки заказов (корзины).
       
      ПОДДЕРЖКА
      Техническая поддержка по электронной почте dev@matro.site
       
      ОСТАЛИСЬ ВОПРОСЫ?
      Напишите в личные сообщения.
      Добавил matroskin92 Добавлено 07.03.2019 Категория Обмен данными Системные требования PHPExcel Сайт разработчика matro.site Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3 ocStore 3.0
      2.3 OpenCart.Pro, ocShop Opencart.pro 2.3 Обращение к серверу разработчика Нет Старая цена 0  
    • By rwebook
      300.00 руб
      Скачать/Купить дополнение


      Бонус за первую покупку | Бонус за першу покупку
      Внимание, персональная поддержка работает только по будням
       
      Модуль дает возможность добавления скидки, бонуса для пользователей которые еще не делали заказ
      Тем самым подстрекает их оформить заказ в вашем магазине
       
      Есть возможность выбрать тип скидки целая цена или %
      Есть возможность выбрать включение только для авторизованных пользователей
       
       
       
      demo -  https://9999.pp.ua/
       
      Установка
      1) обновить модификаторы
      2) установить плагин 3) обновить модификаторы
      Пожелания нового ф-ционала пишите в комментариях
      смотрите мои другие дополнения тут
      Добавил rwebook Добавлено 28.01.2020 Категория Бонусы, купоны, программы лояльности Системные требования Сайт разработчика Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 3.0
      2.3 ocStore 3.0
      2.3 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Нет Старая цена 400  
    • By Romaleg
      Всем привет, такая проблема, если залогинен клиент, в оформлении заказа при изменении данных и релоаде, выкидывает из авторизации, корзина - simple, путем махинаций понял, что это скорее всего модуль СДЭК чудит, ибо отключая его, все работает нормально. В журнале ошибок ничего такого нет. Забавно что при первой загрузке все норм, выкидывает только при релоаде, в поддержке simple сказали, что дело не в них, так как у них нет кода для выхода, так что писать в СДЭК. в СДЭКе тикеты читают не очень быстро, но ответили, что дело не в них скорее всего) сайт: https://bashpchel.com акк: test@test.ru пароль: 0000. 
      Буду рад любому совету куда копать, так как самому интересно. так же не против заплатить за работу.
  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.