Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


RGB

Recommended Posts

Бесплатные всплывающие уведомления 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:

 

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

Надіслати
Поділитися на інших сайтах


вместо

<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',
Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.