Перейти к публикации
Поиск в
  • Дополнительно...
Искать результаты, содержащие...
Искать результаты в...

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


RGB
 Поделиться

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

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


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


old-popups-promo.jpg
old-popups-link.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.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
    Не проверялось
  • Звернення до сервера розробника
    Нет

 

  • +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 не будет работать если есть хоть какие-то изменения в затрагиваемых кусках кода, будь то даже лишний пробел, именно поэтому я и советую делать ручную установку, чтобы внимательно скопировать все куда нужно - тем более там пара строчек кода и с этим должен справиться даже менеджер по продажам :)

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

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

Тогда в 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

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

Создайте аккаунт или войдите в него для комментирования

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

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас
 Поделиться

×
×
  • Создать...

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

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