Регистрация Войти
Вход на сайт
» » Исчезающее окно о добавлении товара в корзину магазина Opencart

Исчезающее окно о добавлении товара в корзину магазина Opencart

Просмотров: 17792
Комментариев: 10
Версия для печати

Наверняка многие пользователи бесплатного движка интернет-магазина Opencart замечали одну интересную особенность при добавлении товара в корзину. Кликая по кнопке "Купить" с главной страницы магазина (поз.1) происходит размещение товара в корзину, но в то же время вверху страницы появляется окно с надписью "Товар такой-то добавлен в корзину покупок!" (поз. 2).

 

Исчезающее окно о добавлении товара в корзину магазина Opencart

 

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

 

Исчезающее окно о добавлении товара в корзину магазина Opencart

 

Окно с уведомлением о добавлении товара в корзину в зависимости от шаблона магазина может не только появляться в верхней части (после верхнего меню), но и быть всплывающим и отображаться поверх страницы. Согласитесь, что каждый раз закрывать подобное появляющееся (или всплывающее) окно не всегда удобно. Ко всему этому, аналогичная ситуация происходит, если нажать на ссылки "В закладки" и "В сравнение". Появляются точно такие же окошки с соответствующими уведомлениями. Знаю, что данная ситуация многих владельцев магазинов на opencart-е откровенно раздражает (да и пользователей скорее всего тоже). Поэтому в этой маленькой статье я хотел бы предложить вариант решения этой проблемы. Суть его проста. При нажатии пользователем, например, на кнопку "Купить" - окно появляется где-то на пару секунд, информируя пользователя магазина о том, что товар благополучно был добавлен в корзину покупок и затем исчезает. В то же время товар отображается в корзине покупок (помещается в нее), а пользователь остается на странице, на которой был ранее. Все очень просто. Открываем файл product.tpl (путь catalog/view/theme/название шаблона/template/product/product.tpl). Ищем строки (примерно 359-366) таког вида:

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');

После них (в конце) вставляем:

document.location.href= self.location.href;

Далее открываем файл common.js. Если используется стандартная тема, то путь: catalog/view/javascript/common.js. Если в оформлении магазина участвуют каки-либо сторонние шаблоны, то файл common.js следует искать в их папках. Так вот, в файле common.js ищем строки с таким содержанием:

$('html, body').animate({ scrollTop: 0 }, 'slow');

Их будет три штуки. Это строки, примерно: 132, 153 и 175. Сразу, после каждой такой строки, добавляем:

document.location.href= self.location.href;

Сохраняем изменения в файлах и проверяем работу. Если все сделали правильно, то видим теперь, что после клика на кнопку купить вверху стандартного шаблона появляется и через 1-2 секунды исчезает окно с уведомлением о добавлении товара в корзину. Сам же товар успешно помещается в корзину. Аналогично появляются и исчезают окна при нажатии на ссылки "В закладки" и "В сравнение". Теперь пользователю не нужно щелкать на крестик, чтобы закрыть подобные появляющиеся окна и он по-прежнему остается на данной странице.

На всякий случай упомяну еще кое-какие моменты. Возможно кому-то они покажутся интересными. Если в файле common.js у функции добавления товара в корзину function addToCart вместо строчки

document.location.href= self.location.href;

вставить выражение вида:

window.location.href = 'index.php?route=checkout/cart';

то, пользователь, нажав на кнопку "Купить" на всех страницах сайта, кроме страницы с характеристиками и описанием товара (product.tpl), на секунду видит окно с информацией о добавлении товара в корзину, после исчезновения которого - далее попадает на страницу корзины покупок для дальнейшего, например, оформления. То же самое произойдет при нажатии у товара кнопки "Купить" со страниц категорий и сравнения товаров.

Аналогичным образом можно при добавлении товара в закладки и для перехода на страницу закладок использовать для функции добавления в закладки function addToWishList

window.location.href = 'index.php?route=account/wishlist';

а для добавления товара в список сравнения и перехода к странице сравнения товаров для функции добавления к сравнению function addToCompare используем

window.location.href = 'index.php?route=product/compare';

Статьи по теме Opencart:
Советы по настройке и оптимизации OpenCart


Рейтинг статьи:
  
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
Комментарии (10)
Артур 22 августа 2013 14:28
Немного напрягает факт что страничка перезагружается. Более красивое на мой взгляд решение:
setTimeout ("$('.success').fadeOut('slow');", 3000);
вставляем после
$('.success').fadeIn('slow');

Окошко плавно исчезает через 3000 милисекунд
Цитировать          1
Алексей 10 октября 2013 20:24
Здравствуйте. А Как со страницы сделать автоматическое перенаправление после нажатия на кнопку купить.
Цитировать          2
Алексей 10 октября 2013 20:25
*Со страницы самого товара
Цитировать          3
Алексей 10 октября 2013 20:27
Перенаправление в корзину. Извините чет нет тупит
Цитировать          4
Хороший 16 ноября 2013 01:25
Цитата: Артур
Немного напрягает факт что страничка перезагружается. Более красивое на мой взгляд решение:
setTimeout ("$('.success').fadeOut('slow');", 3000);
вставляем после
$('.success').fadeIn('slow');

Окошко плавно исчезает через 3000 милисекунд


Простите, а где это дописывать?
Цитировать          5
Андрей 24 ноября 2013 01:31
Просто в product.tpl замените
$('.success').fadeIn('slow');

на
$('.success').fadeIn(1000).delay(2000).fadeOut(1500);
Цитировать          6
Алекс 17 декабря 2013 03:22
А для новичков можно конкретно описать .... например что было ДО, и КАК НАДО, желательно с подсветкой, как на других например сайта делают, тогда и понятнее, и вопросы дополнительные почти не возникают!
Цитировать          7
Пользователь offline Офлайн Alexxey 18 декабря 2013 08:25
"ДО" было - это когда появляется окно, на которое указывает красная стрелочка с цифрой "2" в красном кружечке (см. рис. выше).
"ПОСЛЕ или КАК НАДО" - это когда данное окно не появляется...
Уж чего еще и где подсвечивать дополнительно - я не знаю. Файлы и строчки кода (что куда вставлять) я указал. Вроде проблем вызвать не должно. Плюс, народ в комментариях предложил свои интересные варианты по данной теме.
Цитировать          8
voron121 10 августа 2014 18:29
А как сделать то же самое для уведомлений с ошибками в опенкарт ?
Цитировать          9
Марианна 28 сентября 2015 20:49
Спасибо за статью, она мне пригодится, если дойдет как сделать это исчезающее сообщение, так как в том шаблоне в котором я пытаюсь это сделать, встроенная модальная корзина, которая как раз не нужна.
Цитировать          10
Оставить комментарий
Ваше имя: *
Ваш e-mail: *
Текст комментария:
Полужирный Наклонный текст Подчёркнутый текст Зачёркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Введите проверочный код (защита от спама):
код: ----