Октябрь 2017
Автор: Рубрика: Магазин opencart Комментариев нет

Opencart купить в один клик в всплывающем окне заказа

Opencart купить в один клик

Зайдем в файл myscript.js и напишем код для кнопки купить в один click в опенкарт магазине.

Кнопка будет выводится, под основной с названием добавить товар в корзину.

Напишем скрипт для кнопки опенкарт купить в один клик.

Пройдем по всем элементам списка товаров на главной странице product-thumb.

Применим each (function (e)), с указанием счетчика e, в каждом проходе цикла мы должны увеличить счетчик на один e +=1.

Счетчик нужен для раздачи уникальных классов каждому элементу.

По каждому классу будем вызывать всплывающее окно заказа.

Обратимся теперь к каждому product-thumb элементу и применяем действие $(this).find найти класс button-group.

Вставим в документ append ссылку с классом у кнопки button toclick.

После этого у всех карточек товаров появится вторая опция купить в один клик.

Код в myscript.js

Как добавить стили к новой кнопке читать тут.

Всплывающее окно заказа с помощью magnific-popup.

Мы добавили новую кнопку в опенкарт, теперь установим всплывающее окно по нажатию кнопки плагином popup.

Эти окна понадобятся еще и для функции заказать звонок, как быстрая форма обратной связи, если покупатель не хочет оформлять заказ через корзину магазина.

Изначально отменим popup окна, которые выводятся, только на главной странице.

Для этого сделаем модификатор и назовем его nopopup.ocmod.xml.

  1. Находим файл вывода окна file path=catalog/controller/product/product.php. И копируем из него две строки с путем к скрипту и стилям popup окна в наш модификатор.
  2. magnific-popup.min.js для скрипта делаем изменение replace в файле на пустоту.
  3. Для magnific-popup.css стиля установим замену на пустоту.

Код модификатора nopopup.ocmod.xml.



Скачать модификатор nopopup.ocmod.xml


Зайдем в административную панель опенкарт и установим новый модификатор.

Теперь добавим плагин для вывода на каждой странице сайта.

Заходим в header.tpl и добавляем строчку после плагина одинаковых размеров карточек товара jquery.magnific-popup.min.js.

Выше подключения стилей добавим magnific-popup.css.

В итоге мы просто переподключили плагин, чтобы он работал в любом месте.

Всплывающее окно заказа с помощью magnific-popup

Пишем функцию к кнопке купить в один клик для всплывающего окна.

Зайдем в файл myscript.js и продолжим.

Добавим к классу клика плагин всплывающего окна $(.toclick, .callback).magnificPopup.

Напишем с какими параметрами появится окно.

  • Для анимации приближения зададим класс mainClass: mfp-zoom-in.
  • removalDelay: 700 время анимации плагина.

Класс mfp-zoom-in для эффекта анимации лежит в файле mfp-zoom-in.css магазина, который нужно подключить к проекту.

Файл mfp-zoom-in.css можно скачать с официального сайта опенкарт или тут mfp-zoom-in.

Копируем файл в папку stylesheet ко всем стилям.

Чтобы подключить файл эффектов анимации всплывающего окна зайдем в основной файл стилей stylesheet.sass и пропишем в верхней части @import catalog/view/theme/my/stylesheet/mfp-zoom-in и сохраняем.

Пишем функцию к кнопке купить в один клик для всплывающего окна

Проверяем в браузере как будет всплывать окно.

всплывать окно opencart

Комментариев нет

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

Комментарии запрещены