Перейти к содержанию
RGB

[Поддержка] Бесплатные всплывающие уведомления Free Popup Cart (vqmod)

Рекомендуемые сообщения

Бесплатные всплывающие уведомления Free Popup Cart (vqmod)


Бесплатные всплывающие уведомления Free Popup Cart (vqmod)


of-mod-po-01.jpg

of-mod-fo-02-01.jpgof-mod-fo-02-02.jpgof-mod-fo-02-03.jpg

Описание старой версии

Что это и зачем это нужно

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

Аналогичным способом открываются превью картинок товара, так что грех не использовать то, что уже встроено в движок. Кроме того, такие же уведомления при добавлении товара в закладки и в сравнения, можно так же легко заменить с помощью этого дополнения. Все тестировалось на дефолтном шаблоне версии 1.5.4.1, должно работать на всех версиях, начиная с 1.5.2.1

Если у вас более новая версия, чем 1.5.4.1, то возможная причина неработающих на главной уведомлений указана в теме поддержки.

Как это работает

Для появления уведомлений об успешном добавления товара в корзину, добавлении товара в закладки или в сравнения, используется практически одинаковый механизм. В этом простом дополнении стандартный механизм изменяется, используется вызов окна colorbox с нужными нам параметрами, например для всплывающего окна при добавлении товара в корзину:

$.colorbox({width: '500px',  transition: 'elastic', html: "<div class='free_popup_cart'>" + json['success'] + "<br /><a class='button' href='index.php?route=checkout/checkout'>Оформить заказ</a></div>", title:"" });

Соответственно в жизни это выглядит вот так (стандартный шаблон):

67fL+.png

Установка (vqmod)

При использовании vqmod вся установка заключается в копировании содержимого папки upload, никакие файлы не должны быть перезаписаны. Если используется тема с названием отличным от default, советую поменять в xml-файле имя темы default на вашу тему в двух строчках

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

и

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/free_popup_cart.css" />

Если у вас шаблон нестандартный и сильно изменен (или вы просто не хотите использовать vqmod), то лучше выполнить ручную установку.

Ручная установка (без vqmod)

В общем случае любое дополнение с vqmod можно установить без него, если выполнить все замены, указанные в xml-файле. Для этого дополнения нужно сделать несколько замен (* - имя вашей темы).

0) Сделать резервные копии затрагиваемых файлов (catalog/view/theme/*/template/common/header.tpl, catalog/view/theme/*/template/product/product.tpl)

1) В файле catalog/view/theme/*/template/common/header.tpl:

После

<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

добавить

<script type="text/javascript" src="catalog/view/javascript/free_popup_cart.js"></script>

Как вариант, можно не добавлять эту строчку, а перенести измененные функции (addToCart, addToWishList и addToCompare) из файла free_popup_cart.js в common.js

И после

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />

добавить

<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/free_popup_cart.css" />

2) В файле catalog/view/theme/*/template/product/product.tpl

Найти начало функции

$('#button-cart').bind('click', function() {

и заменить в ней это

			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']);								$('html, body').animate({ scrollTop: 0 }, 'slow'); 			}	

на это

				if (json['success']) {        $.colorbox({width: '500px',  transition: 'elastic', html: "<div class='free_popup_cart'>" + json['success'] + "<br /><a class='button' href='index.php?route=checkout/checkout'>Оформить заказ</a></div>", title:"" });        $('#cart-total').html(json['total']);      }

Не забудьте сохранить файл в кодировке UTF8, чтобы вместо квадратиков видеть русские буквы.

3) Все готово!

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


  • Добавил
    RGB
  • Добавлено
    16.07.2013
  • Категория

 

  • +1 8

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Автор, спасибо! А можно рядом добавить еще кнопку "продолжить покупки" для возврата в магазин и здорово было бы сделать еще маленькую картинку товара добавленного в корзину

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Автор, спасибо! А можно рядом добавить еще кнопку "продолжить покупки" для возврата в магазин

Так есть крестик же

 

и здорово было бы сделать еще маленькую картинку товара добавленного в корзину

идея неплохая, надо над этим подумать

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Автор, спасибо! А можно рядом добавить еще кнопку "продолжить покупки" для возврата в магазин

Так есть крестик же

 

>и здорово было бы сделать еще маленькую картинку товара добавленного в корзину

идея неплохая, надо над этим подумать

 

 

Он может ввести в заблуждение покупашек, мало ли подумают, что если на него нажать то все удалится из корзины)) не зря же ставят везде кнопки "продолжить покупки"

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну это понятно
Тогда в xml-файле добавьте после (для страницы товара, и в free_popup_cart.js по аналогии)

<a class='button' href='index.php?route=checkout/checkout'>Оформить заказ</a>

например это

<br /><br /><a onclick='$(window).colorbox.close();'>Продолжить покупки</a>

Получится вот так (со стилями сами поиграйтесь, может вы хотите кнопку такую же, как у оформления)

 

AzZB+.png:

  • +1 2

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо! Правда заработало почему то когда внес изменения в файл free_popup_cart.js free_popup_cart.zip

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В файле free_popup_cart.js - функция для вывода уведомления при покупке со страниц категории, поиска, производителя и т.п., а в xml-файле (который вносит изменения в product.tpl) - функция для вывода уведомления при покупке со страницы товара, в ОС такое вот загадочное разделение в общем то одинаковых функций

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо за разъяснение!  Протестировал на теме Fashioncart-полет отличный и Fancicart тут почему то происходит некое подвисание браузера (мозилу использую) при нажатие на кнопку купить

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А у меня не работает на странице продукта, работает только на витрине, это так надо, или я что-то упустил ?

Со страниц категории, главной и поиска работает, а вот с самого описания товара нет.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

должно работать, если не меняли product.tpl

делайте ручную установку

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А если не работает, то куда копать ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Честно говоря не в курсе, но помоему у Вас в файле xml есть ошибка

		<operation>
			<search position="before" offset="1" index="1">
			<![CDATA[
				if (json['success']) {
			]]>
			</search>
			<add>
			<![CDATA[
				/*
			]]>
			</add>
		</operation>

меня смущает вот это /* помоему там что-то должно быть или я не прав?

Потому как именно это действие управляет всплывающим окном в карточке самого товара, когда ручками отредактировал product.tpl то всё заработало.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Нет-нет, все правильно, это начало комментируемой части кода, в результате работы vqmod старый скрипт закомментируется, а после него добавится новый. Можно было конечно обойтись без этого и сделать просто замену, но я решил что лучше сохранить оригинальную часть скрипта, вдруг кто-то захочет вернуть как было.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Странно тогда, потому как изменение кода только файла product.tpl приводит к нормальному функционированию всего скрипта, а это означает что не так как надо работет xml , возможно именно у меня, ну да ладно, потом разберусь

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

vqmod не будет работать если есть хоть какие-то изменения в затрагиваемых кусках кода, будь то даже лишний пробел, именно поэтому я и советую делать ручную установку, чтобы внимательно скопировать все куда нужно - тем более там пара строчек кода и с этим должен справиться даже менеджер по продажам :)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну пока работает как ни странно, всё через vqmod кроме product.tpl :-)

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ну это понятно

Тогда в xml-файле добавьте после (для страницы товара, и в free_popup_cart.js по аналогии)

<a class='button' href='index.php?route=checkout/checkout'>Оформить заказ</a>

например это

<br /><br /><a onclick='$(window).colorbox.close();'>Продолжить покупки</a>

Получится вот так (со стилями сами поиграйтесь, может вы хотите кнопку такую же, как у оформления)

 

AzZB+.png:

 

Извините за плоскоголовость,но какой код писать,чтоб кнопка была ПРОДОЛЖИТЬ ПОКУПКИ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Наверное вместо onclick использовать class button

<br /><a class='button'='$(window).colorbox.close();'>Продолжить покупки</a>

Но не уверен

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

вместо

<a onclick='$(window).colorbox.close();'>Продолжить покупки</a>

вот так

<a class='button' onclick='$(window).colorbox.close();'>Продолжить покупки</a>

разве не работает?

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ура! Ура! Ура!! Работает!!!

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Ребят, а у меня почему-то не так компактно выглядит, как у вас.

У меня на всю высоту экрана растягивается окошко http://clip2net.com/s/5xCodL

Подскажите пожалуйста, как это исправить?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Укажите вместе с высотой

width: '500px',

и ширину, например так

width: '500px', height: '300px',

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

А как добавить такое только к закладкам? минуя корзину

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

В xml-файле оставьте только то, что касается wishlist

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От OCdevWizard
      400.00 руб · Срок продления: 200.00 руб за год
      Скачать/Купить дополнение


      Всплывающая корзина PRO


      Модуль - всплывающая корзина. Этот модуль обеспечивает быстрый и комфортный доступ к корзине покупок. Большая и расширенная система настроек делают этот модуль абсолютно уникальным и гибким для каждого магазина.всплывающая корзина,корзина,popup cart,shopping cart,корзина+опции,попап корзина,модуль корзины,корзина покупок
       

       
      Админка: demo / demo | Смотреть
      Каталог: Смотреть
       


      ❏ 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
       


      ❏ 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 уведомлений.
      ❏ Вы можете сохранить и восстановить настройки модуля.
      ❏ Модуль требует активацию лицензии.
      ☒ - функциональные возможности модуля, которые отмеченные этим знаком доступны только для версии модуля 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 Добавлено 13.03.2018 Категория Модули Системные требования PHP >=5.6; Mysqli; cURL; IonCube Loader v10.2 Сайт разработчика http://ocdevwizard.com/ Старая цена 1200 Метод активации По запросу в ЛС Ioncube Loader Требуется OpenCart 3.0
      2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось  
    • От 29aleksey
      300.00 руб
      Скачать/Купить дополнение


      Popup с Подтверждением | Информацией
      Всплывающее окно с информацией или окно с подтверждением при умелом использовании увеличивают конверсию от 10 до 30%;
      Модуль Popup с Подтверждением | Информацией позволяет Вам настроить окна следующим образом:
      Окно с подтверждением - пользователь не сможет закрыть окно пока не примет Ваши условия либо отклонит их и тогда его перенаправит по указанной вами ссылке!
      Окно с важной Информацией - для вывода новой акции на сайте, смене домена в ближайшие время, ну или другой важной информации

      Логин : demo
      пароль: demo
      В настройках Popup окна есть 2 метода
      Session Cookie - окно будет показываться в каждой новой вкладке или при след открытии браузера
      Cookie - окно будет показано один раз, до истечения срока действия куков
      В настройках есть стилизация высплывающего окна.
      Можно изменить цвет окна и выбрать нужные Вам иконки в заголовок онка и на кнопки
      Цвет Фона Заголовка
      Цвет текста Заголовка
      Иконка в Заголовке
      Цвет Фона кнопки Принять
      Цвет Фона кнопки Принять при наведении
      Цвет рамки кнопки Принять
      Цвет рамки кнопки Принять при наведении
      Цвет текста кнопки Принять
      Цвет текста кнопки Принять при наведении
      Иконка кнопки Принять
      Цвет Фона кнопки Отклонить
      Цвет Фона кнопки Отклонить при наведении
      Цвет рамки кнопки Отклонить
      Цвет рамки кнопки Принять при наведении
      Цвет текста кнопки Отклонить
      Цвет текста кнопки Отклонить при наведении
      Иконка кнопки Отклонить
      Цвет Фона подвала всплывающее окно



      Установка:
      Загрузить содержимое папки upload в корень сайта
      в Extension Installer (Менеджер дополнений) нажать кнопку обновить.
      Открыть модули , установить модуль Popup c Подтверждением | Информацией [29aleksey] и настроить как Вам нужно.
      Добавил 29aleksey Добавлено 26.10.2016 Категория Модули Системные требования Сайт разработчика Старая цена Метод активации Ioncube Loader OpenCart ocStore OpenCart.Pro, ocShop  
    • От 29aleksey
      Всплывающее окно с информацией или окно с подтверждением при умелом использовании увеличивают конверсию от 10 до 30%;
      Модуль Popup с Подтверждением | Информацией позволяет Вам настроить окна следующим образом:
      Окно с подтверждением - пользователь не сможет закрыть окно пока не примет Ваши условия либо отклонит их и тогда его перенаправит по указанной вами ссылке!
      Окно с важной Информацией - для вывода новой акции на сайте, смене домена в ближайшие время, ну или другой важной информации

      Логин : demo
      пароль: demo
      В настройках Popup окна есть 2 метода
      Session Cookie - окно будет показываться в каждой новой вкладке или при след открытии браузера
      Cookie - окно будет показано один раз, до истечения срока действия куков
      В настройках есть стилизация высплывающего окна.
      Можно изменить цвет окна и выбрать нужные Вам иконки в заголовок онка и на кнопки
      Цвет Фона Заголовка
      Цвет текста Заголовка
      Иконка в Заголовке
      Цвет Фона кнопки Принять
      Цвет Фона кнопки Принять при наведении
      Цвет рамки кнопки Принять
      Цвет рамки кнопки Принять при наведении
      Цвет текста кнопки Принять
      Цвет текста кнопки Принять при наведении
      Иконка кнопки Принять
      Цвет Фона кнопки Отклонить
      Цвет Фона кнопки Отклонить при наведении
      Цвет рамки кнопки Отклонить
      Цвет рамки кнопки Принять при наведении
      Цвет текста кнопки Отклонить
      Цвет текста кнопки Отклонить при наведении
      Иконка кнопки Отклонить
      Цвет Фона подвала всплывающее окно



      Установка:
      Загрузить содержимое папки upload в корень сайта
      в Extension Installer (Менеджер дополнений) нажать кнопку обновить.
      Открыть модули , установить модуль Popup c Подтверждением | Информацией [29aleksey] и настроить как Вам нужно.
    • От xprolance
      300.00 руб
      Скачать/Купить дополнение


      Оригинальный размер фото товара
      Модификатор помогает отказаться от создания новых размерных картинок для всплывающего окна в товаре, вместо них во всплывающем окне открываются сами оригиналы (по прямым путям минуя кеш).
       
      Улучшения после установки:
      внятные изображения товара для покупателей сохранение оригинальных пропорций фото (без добавления белых полей) всплывающее окно на русском языке значительная экономия места на сервере  
      Демо до
      Демо после
       
      В обоих демо использованы одни и те же картинки.
       
      Если вы используете на своём сайте водяные знаки на картинках, то данная доработка вам не подойдёт.
      При использовании модификатора рекомендуется предварительно оптимизировать все загружаемые фото максимум до 1200х900px.
       
      История версий
       
      Добавил xprolance Добавлено 22.07.2016 Категория Прочее Системные требования VQMOD, OCMOD Метод активации Без активации Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1
      1.5.5
      1.5.4.1
      1.5.3.1 ocStore 2.3
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х
      OcShop 1.5.6.4.х  
    • От xprolance
      Модификатор помогает отказаться от создания новых размерных картинок для всплывающего окна в товаре, вместо них во всплывающем окне открываются сами оригиналы (по прямым путям минуя кеш).
       
      Улучшения после установки:
      внятные изображения товара для покупателей сохранение оригинальных пропорций фото (без добавления белых полей) всплывающее окно на русском языке значительная экономия места на сервере  
      Демо до
      Демо после
       
      В обоих демо использованы одни и те же картинки.
       
      Если вы используете на своём сайте водяные знаки на картинках, то данная доработка вам не подойдёт.
      При использовании модификатора рекомендуется предварительно оптимизировать все загружаемые фото максимум до 1200х900px.
       
      История версий
       
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.