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

[RGB]

Завантажити / Придбати розширення

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

---

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

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

Как многие знают, стандартное уведомление при добавлении товара в корзину является малозаметным, к тому же мельтешение экрана при автоматической прокрутке вверх раздражает многих покупателей (нарушается принцип ожидаемого результата, так как откуда покупателю знать, что экран крутится вверх для показа уведомления). Чтобы избавиться от этой проблемы, я у себя в магазине давно использовал простое решение с небольшим изменением стандартных функций, которым хочу поделится (вдруг кто не знает) и которое основано на использовании функциональности 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:"" });

 

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

Установка (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.13
• Категорія
  Модули
• Системные требования
• Метод активации
  Без активации
• Ioncube Loader
  Нет
• ocStore
  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
  Не проверялось
• Звернення до сервера розробника
  Нет

 

[Nameless]

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

[RGB]

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

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

 

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

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

[Nameless]

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

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

 

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

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

 

 

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

[RGB]

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

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

например это

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

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

 

:

[Nameless]

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

[RGB]

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

[Nameless]

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

[sergok]

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

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

[RGB]

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

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

[sergok]

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

[RGB]

В ручную установку копать

[sergok]

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

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

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

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

[RGB]

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

[sergok]

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

[RGB]

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

[sergok]

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

[Alteya]

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

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

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

например это

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

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

 

:

 

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

[sergok]

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

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

Но не уверен

[RGB]

вместо

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

вот так

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

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

[Alteya]

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

[dimOk]

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

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

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

[RGB]

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

width: '500px',

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

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

[Ivan123]

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

[RGB]

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