Jump to content
vivivor

Изменение сообщения о успешном добавлении в корзину

Recommended Posts

Собственно где находится html код этого сообщения или куда добавить свой

2012-12-24_000437.png

Хочу добавить туда две кнопки "Продолжить покупки" и "Оформить заказ", миниатюру товара и тд...

Share this post


Link to post
Share on other sites

header.tpl

<div id="notification"></div>

catalog/language/russian/checkout/cart.php

$_['text_success']		   = 'Товар <a href="%s">%s</a> добавлен в <a href="%s">корзину покупок</a>!';

Не забывайте про контролер, иначе будут выскакивать ошибки..

  • +1 1

Share this post


Link to post
Share on other sites

Таким способом эта надпись всегда будет висеть. Надо в сторону JS копать.

Share this post


Link to post
Share on other sites

Таким способом эта надпись всегда будет висеть. Надо в сторону JS копать.

это я к тому что там менять надо)) я же не говорю что именно это в div писать ))

Share this post


Link to post
Share on other sites

Собственно где находится html код этого сообщения или куда добавить свой

2012-12-24_000437.png

Хочу добавить туда две кнопки "Продолжить покупки" и "Оформить заказ", миниатюру товара и тд...

файл catalog/view/javascript/common.js, заменяешь строку


$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close"></div>');

на эту

$('#notification').html('<div class="success" style="display: none;">' + json['success'] + ' <a href="ссылка1">ссылка1</a> <a href="ссылка2">ссылка2</a>' + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close"></div>');

  • +1 1

Share this post


Link to post
Share on other sites

Может кто знает, как сделать, что-бы это сообщение само скрывалось через пару секунд?

Share this post


Link to post
Share on other sites

Может кто знает, как сделать, что-бы это сообщение само скрывалось через пару секунд?

вместо

$('.success').fadeIn('slow');

пишите

$('.success').fadeIn(1000).delay(2000).fadeOut(1500);

задержки можете какие захотите поставить, в данном случае будет висеть 2 секунды.

сделать это надо в нескольких местах.

если сделать изменение в common.js только в функции addToCart, то соответственно будет само исчезать только при покупке товара из списка товаров в категории или списка, сформированного поиском.

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

Share this post


Link to post
Share on other sites

sitecreator, спасибо большое, теперь буду знать, что это с помощью jquery сделано)

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

$('.success').slideDown(300).delay(2000).slideUp(300);

  • +1 1

Share this post


Link to post
Share on other sites

Приветствую всех! Подскажите как сделать, чтобы данное сообщение о покупке

$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close"></div>');

выводилось в той области страницы, где нажата кнопка "купить", а не вверху страницы.

Заранее спасибо!

Share this post


Link to post
Share on other sites

Приветствую всех! Подскажите как сделать, чтобы данное сообщение о покупке

$('#notification').html('<div class="success" style="display: none;">' + json['success'] + '<img src="catalog/view/theme/default/image/close.png" alt="" class="close"></div>');

выводилось в той области страницы, где нажата кнопка "купить", а не вверху страницы.

Заранее спасибо!

надо открыть файл catalog/view/theme/default/template/common/header.tpl

в самом низу есть строчка <div id="notification"></div>, вырезать ее и вставить в файл шаблона в нужном месте, но надо учесть, что вставить надо в каждом шаблоне, где могут выводиться такие сообщения.

Share this post


Link to post
Share on other sites

Может я не правильно обяснил - приношу извенения.

Поскольку товаров много и постоянное перебрасывание вверх страницы раздражает покупателя, хочу сделать вывод ссобщение о покупке товара на подобии базового, но только не вверху, а типа всплывающего сообщения только в "теле" страницы. В том или около того места товара, на котором покупатель жмет кнопку "купить".

Спасибо!

Share this post


Link to post
Share on other sites

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

#notification{
position: absolute;
right: 10px;
top: 10px;
}

этим сообщение будет выводится всегда справа вверху поверх сайта. чтобы убрать скроллинг вверх страниц надо в common.js в функции addToCart убрать строку вида $('.success').fadeIn('slow');

Share this post


Link to post
Share on other sites

Так будет выводиться вверху страницы, а надо в видимой области страницы- туда где смотрит пользователь :)

Чтобы убрать скроллинг вы, наверно, хотели сказать убрать $('html, body').animate({ scrollTop: 0 }, 'slow');

Предлагаю такой вариант:

в стилях задаем #notification {position: absolute;}

в конец common.js добавляем:

function MoveCenterScreen(objID) {
var innerHeight_ = window.innerHeight ? window.innerHeight : document.documentElement.offsetHeight;
var obj = document.getElementById(objID);
obj.style.left = ( document.body.clientWidth / 2 - obj.clientWidth / 2 + document.body.scrollLeft) + 'px';
obj.style.top = ( document.documentElement.scrollTop + innerHeight_ / 2 - obj.clientHeight / 2 + document.body.scrollTop) + 'px';
}

А также там, где надо в common.js - MoveCenterScreen('notification');

P.S.

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

Share this post


Link to post
Share on other sites

В дополнение еще вопрос:

Подскажите, в common.js , в ф-ции function addToCart есть строка $('.success').fadeIn('slow'); я ее заменил на $('.success').fadeIn(1000).delay(5000).fadeOut(1500);

Сообщение о добавлении товара в корзину скрывается после истечении времени, а кнопка закрыть (крестик) при нажатии не срабатывает - вдруг кому-то потребуется скрыть сообщение раньше?

Share this post


Link to post
Share on other sites

У меня такая же задача - добавить ссылку "Продолжить покупки" и "Оформление заказа", но изменения Common.js ничего не дают. Использую модуль Simple может проблема в нем? А можно добиться этого результата редактированием cart.php?

Share this post


Link to post
Share on other sites

Сделал все отлично - но на странице при изменинии карзины -сообщение не исчеает после 2 секунд - возможно ето надо в другом скрипте менять ? 

Подскажите кто в курсе 

Share this post


Link to post
Share on other sites

Подскажите вот файл common.js в нём код отвечающий за вспылающее сообщение о добавлении товара в корзину(оно не исчезает хочу чтобы исчезало после 1-2 сек) 

				if (json['success']) {
				
					html  = '<div id="modal-cart" class="modal fade">';
					html += '  <div class="modal-dialog">';
					html += '    <div class="modal-content">';
					html += '      <div class="modal-body alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button></div>';
					html += '    </div>';
					html += '  </div>';
					html += '</div>';

					$('body').append(html);

					$('#modal-cart').modal('show');
					
					setTimeout(function () {
						$('#cart-total').html(json['total']);
					}, 100);

Шаблон не стандартный coloring не могу настроить чтобы исчезало, помогите пож.

Share this post


Link to post
Share on other sites
В 13.01.2013 в 03:19, sitecreator сказал:

$('.success').fadeIn('slow');


У меня вообще такого кода нет в common.js
У меня версия OpenCart 2.1.0.1  там даже function addToCart  нет. Ну тоесть функция есть, но у её синтаксис совсем другой.

var cart = {
	'add': function(product_id, quantity) {
		$.ajax({
			url: 'index.php?route=checkout/cart/add',
			type: 'post',
			data: 'product_id=' + product_id + '&quantity=' + (typeof(quantity) != 'undefined' ? quantity : 1),
			dataType: 'json',
			beforeSend: function() {
				$('#cart > button').button('loading');
			},
			complete: function() {
				$('#cart > button').button('reset');
			},
			success: function(json) {
				$('.alert, .text-danger').remove();

				if (json['redirect']) {
					location = json['redirect'];
				}

				if (json['success']) {
					$('#content').parent().before('<div class="alert alert-success"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="close" data-dismiss="alert">&times;</button></div>');

					// Need to set timeout otherwise it wont update the total
					setTimeout(function () {
						$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');
					}, 100);

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

					$('#cart > ul').load('index.php?route=common/cart/info ul li');
				}
			},
	        error: function(xhr, ajaxOptions, thrownError) {
	            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
	        }
		});
	},


 

Edited by Klaus
опечатка

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.