Как Сделать Всплывающее Окно, Которое Должно Появляться После Нажатия На Кнопку Корзины С Предложением Продолжить Покупки Или Перейти В Корзину?

Подскажите, пожалуйста, кто-нибудь знает, как сделать всплывающее окно, аналогичное имеющемуся в карточке товара сообщению, которое появляется после нажатия на кнопку "в корзину", после чего посетителю предлагается выбрать одно из действий (продолжить покупки или перейти к оформлению заказа) или закрыть всплывающее окно. Я сделала корзину в каталоге товаров (список) в виде ссылки

<a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Купить «{goods.NAME}»">КУПИТЬ</a>

Собственно, теперь не хватает всплывающего окна. Если кто-то знает, пришлите код и подскажите, куда его встраивать...

ответила Вам тут http://forum.storela...-в-раздел-и-тд/

Vaccina (01 Июль 2011 - 06:39) писал:

Спасибо! Я прочитала эту ветку, но там обсуждается встраивание кнопки корзины и количество добавляемого в корзину товара, а также изменение текста, а мне нужно добавить к корзине всплывающее окно, как на странице с товаром, а на той ветке этого нет. Какой код и куда его нужно добавить, чтобы при клике на корзинку покупатель НЕ перенаправлялся на страницу с оформлением заказа, а получал всплывающее окно с выбором действия, по аналогии с работой корзины в карточке товара? Заранее спасибо!

Kristy (01 Июль 2011 - 10:37) писал:

Данный код с использованием ссылки подходит как раз для метода когда нужно быстро вставить простенький код. Для всплывающего окна лучше использовать код из этой ветки форума с формой. Вот этот:

			<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post">
			  <div>
				<input type="hidden" name="hash" value="{HASH}" />
				<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				<input type="submit" value="В корзину" />
			  </div>
			</form>

Поскольку там объяснялся механизм как работает форма, и была не стилизованная кнопка, модифицируем код, чтобы была и кнопка и форма.

			<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}">
			  <div>
				<input type="hidden" name="hash" value="{HASH}" />
				<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				<a class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Положить &laquo;{goods.NAME}&raquo; в корзину" href="#">В корзину</a>
			  </div>
			</form>

Далее вернёмся к основной задаче - отправка формы без перехода на страницу корзины. Для этого наш волшебный код немного модифицируем, добавив специальный класс, по которому будем определять на какие кнопки вешать действие всплывающего окна. Назовём его "goodsListForm". Получится вот такой код:

			<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
			  <div>
				<input type="hidden" name="hash" value="{HASH}" />
				<input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				<input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				<a class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Положить &laquo;{goods.NAME}&raquo; в корзину" href="#">В корзину</a>
			  </div>
			</form>

Теперь осталось повесить всплывающее окно на эти формы. Для этого нужно подкрутить в разделе "Сайт" > "Редактор тем" javascript файл main.js. Там найти код:

  // Добавление товара в корзину через ajax
  $('.goodsDataForm, .goodsToCartFromCompareForm').submit(function(){

и заменить его на:

  // Добавление товара в корзину через ajax
  $('.goodsDataForm, .goodsToCartFromCompareForm, .goodsListForm').submit(function(){

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

<a class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Положить «{goods.NAME}» в корзину" href="#">В корзину</a>

Изначально список выглядел так:

	{% IF GOODS_VIEW_TYPE=1 %}
	  <!-- Список товаров. Список -->
	  {% FOR goods %}
		<div class="listing">
		  <div class="imagem"><a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div>
	
		  <div class="contm">
			<h3><a href="{goods.URL}">{goods.NAME}</a></h3>
			<p>
			  {goods.DESCRIPTION_SHORT}
			</p>
			<p>
			  Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br />
			  {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
				Цена без учёта скидки: <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
			  {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
				Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
			  {% ENDIF %}
			</p>
			<p>
			  <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
				<div>
				  <input type="hidden" name="hash" value="{HASH}" />
				  <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				  <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				  <a class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Положить «{goods.NAME}» в корзину" href="#">В корзину</a>
				</div>
			  </form>
			</p>
			<p>
			  <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
			</p>
		  </div>
		  <div class="clr"></div>
		</div>
	  {% ENDFOR goods %}
	  <!-- /Список товаров. Список -->
	{% ELSE %}

Стало так:

	{% IF GOODS_VIEW_TYPE=1 %}
	  <!-- Список товаров. Список -->
	  {% FOR goods %}
		<div class="listing">
		  <div class="imagem"><a href="{goods.URL}"><img {% IF goods.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-medium.png" width="220"{% ELSE %}src="{goods.IMAGE_SMALL}"{% ENDIF %} alt="{goods.NAME}" /></a></div>
	
		  <div class="contm">
			<h3><a href="{goods.URL}">{goods.NAME}</a></h3>
			<p>
			  {goods.DESCRIPTION_SHORT}
			</p>
			<p>
			  Цена сейчас: <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a><br />
			  {% IF goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT>goods.MIN_PRICE_NOW %}
				Цена без учёта скидки: <a href="{goods.URL_MIN_PRICE_NOW_WITHOUT_DISCOUNT}" class="lineThrough">{goods.MIN_PRICE_NOW_WITHOUT_DISCOUNT | money_format}</a>
			  {% ELSEIF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
				Старая цена: <a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
			  {% ENDIF %}
			</p>
			<p>
			  <form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goodsListFormId{goods.MIN_PRICE_NOW_ID}" class="goodsListForm">
				<div>
				  <input type="hidden" name="hash" value="{HASH}" />
				  <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				  <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				  <a class="readmore" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" title="Положить «{goods.NAME}» в корзину" href="#">В корзину</a>
				</div>
			  </form>
			</p>
			<p>
			  <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
			</p>
		  </div>
		  <div class="clr"></div>
		</div>
	  {% ENDFOR goods %}
	  <!-- /Список товаров. Список -->
	{% ELSE %}

Проверяем, должно работать. У меня это выглядит в браузере так:



Далее если хотим чтобы там тоже отображалась такая кнопка для списка товаров, то копируем этот кусок кода по шаблонам "Поиск" и "Просмотр акции". Полный код всех шаблонов приложил архивом:
 tocartbutton.zip   11,95К   224 Количество загрузок:

P.S. Если требуется также добавить кнопку в корзину на главной, то измените код шаблона "HTML". Полный код шаблона "html" я добавил в архив бонусом.

Большое спасибо за развернутый ответ! Сделала так, как Вы написали и все заработало так, как надо, с первого раза! Супер!  

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

 <!-- Список товаров. Таблица -->
		<table>
		  {% FOR goods %}
			<td class="goodsListItem">  
			  <div class="goodsListItemBlock withBorder cornerAll">
				<table class="goodsListItemImage">
				  <tr>
					<td>
					  <a href="{goods.URL}"><img src="{% IF goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-other.png{% ELSE %}{goods.IMAGE_OTHER}{% ENDIF %}" alt="{goods.NAME}" /></a>
					</td>
				  </tr>
				</table>
				
				<h3 class="goodsListItemName"><a href="{goods.URL}">{goods.NAME}</a></h3>
				<div>
				  {goods.DESCRIPTION_SHORT}
				</div>
				<div class="goodsListItemPriceNew">
				  <a href="{goods.URL_MIN_PRICE_NOW}">{goods.MIN_PRICE_NOW | money_format}</a>
				</div>  
				<div class="goodsListItemPriceOld">
				  {% IF goods.MIN_PRICE_OLD>goods.MIN_PRICE_NOW %}
					<a href="{goods.URL_MIN_PRICE_OLD}" class="lineThrough">{goods.MIN_PRICE_OLD | money_format}</a>
				  {% ENDIF %}
				</div>
				<table class="goodsListItemButtonsTable">
				  <tr>
					<td>
					  <a class="readmore" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Добавить в корзину">В корзину</a>
					</td>
					<td>
					  <a class="readmore" title="{goods.NAME}" href="{goods.URL}">Подробнее</a>
					</td>
				  </tr>
				</table>
			  </div>
			</td>
		  {goods.index | is_divided("2","</tr><tr>","")}
		  {% ENDFOR goods %}
		</table>
	  <!-- /Список товаров. Таблица -->

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

Ну хорошо, пускай этот код куда угодно приспосабливается... Я уже целый месяц прошу, чтобы объяснили что куда вставлять, чтобы сделать всплывающее окно применительно к моему сайту...Неужели так сложно...

Объясните пожалуйста свою проблему нормально. Есть тема где вам отвечали http://forum.storela...ch__1#entry4244

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

Хм. добавлю перепост из ветки выше

Для решения этой задачи будет достаточно изменить немного код в файле main.js, чтобы формы отправлялись для списка товаров через ajax. Для этого откройте js файл, найдите в нём с помощью встроенного поиска браузера (CTRL+F) следующий код:

  // Добавление товара в корзину через ajax
  $('.goodsDataForm, .goodsToCartFromCompareForm').submit(function(){
	$(this).nyroModalManual({
	  formIndicator: 'ajax_q',  // Value added when a form is sent
	  minWidth: 450, // Minimum width
	  minHeight: 140, // Minimum height
	  gallery: null // Gallery name if provided
	});
	return false;
  });

и измените его на вот такой:

  // Добавление товара в корзину через ajax
  $('.goodsDataForm, .goodsToCartFromCompareForm, .goodsListItem form').submit(function(){
	$(this).nyroModalManual({
	  formIndicator: 'ajax_q',  // Value added when a form is sent
	  minWidth: 450, // Minimum width
	  minHeight: 140, // Minimum height
	  gallery: null // Gallery name if provided
	});
	return false;
  });

После этого добавление товара в корзину не будет перекидывать Вас сразу в корзину.

ссылка на пост http://forum.storela...ndpost__p__1305

Заменил, все равно перебрасывает сразу в корзину....

Изменения делали которые расположены по той же ссылке выше постом http://forum.storela...ndpost__p__1281
??

Так вот я и прошу, чтобы мне объяснили приминительно к моему шаблону, что куда надо вставить.

Хм. все изменения делаются в шаблоне "Товары", а так же в файле main.js
Вам нужно просто сравнивать свой код и приведенный, после делать изменения которые отличаются. Это все применимо к тому если у вас уже есть изменения в шаблоне. Если у вас стандартный шаблон, то достаточно простого метода замены.

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

Хм. просто объясните более детально что вы делали, чего хотите добиться, что не получается. Какие ошибки возникают, какие темы читали, какой код вставляли. Так же сообщите адрес вашего сайта.

Сайт podari-prikol.ru
Необходимо, чтобы в товарах при нажатии на кнопку "в корзину" - показывалось всплывающее окно с предложением либо продолжить покупки или перейти в корзину. Сейчас  сразу перекидывает в корзину.

Попробуйте в шаблоне "Товары" найти кнопку "В корзину" она у вас выглядит примерно так

<a class="readmore" href="/cart/add/?hash=447131&form%5Bgoods_from%5D=&form%5Bgoods_mod_id%5D=1847855" title="Добавить в корзину">В корзину</a>

далее ниже добавьте

<form action="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}" method="post" id="goods-form-{goods.MIN_PRICE_NOW_ID}">
				<div>
				  <input type="hidden" name="hash" value="{HASH}" />
				  <input type="hidden" name="form[goods_from]" value="{goods.GOODS_FROM}" />
				  <input type="hidden" name="form[goods_mod_id]" value="{goods.MIN_PRICE_NOW_ID}" />
				  <input type="text" name="form[goods_mod_quantity]" style="width:43px;" maxlength="12" value="1" title="Количество" />
				  <a class="readmore" style="margin-top:9px;" onclick="$('#goods-form-{goods.MIN_PRICE_NOW_ID}').submit();return false;" href="#" >В корзину</a>
				</div>
			  </form>

затем в файле main.js

найдите

 // Добавление товара в корзину через ajax
  $('.goodsDataForm, .goodsToCartFromCompareForm').submit(function(){
	$(this).nyroModalManual({
	  formIndicator: 'ajax_q',  // Value added when a form is sent
	  minWidth: 450, // Minimum width
	  minHeight: 140, // Minimum height
	  gallery: null // Gallery name if provided
	});
	return false;
  });

далее замените на

  // Добавление товара в корзину через ajax
  $('.goodsDataForm, .goodsToCartFromCompareForm, .goodsListItem form').submit(function(){
	$(this).nyroModalManual({
	  formIndicator: 'ajax_q',  // Value added when a form is sent
	  minWidth: 450, // Minimum width
	  minHeight: 140, // Minimum height
	  gallery: null // Gallery name if provided
	});
	return false;
  });

Vaccina (01 Июль 2011 - 06:39) писал:

Пожалуйста Помогите! Вроде сделала все как написано было в той ветке, но никак не могу изменить место расположение кнопки " В корзину". В общем я добавила кнопку "Подробнее", после чего сразу стало перебрасывать в корзину, я решила одновременно исправить это и добавить кнопку "Количество", В итоге кнопка "Подроднее" находится справа от изображения товара, а кнопки "Количество" и "В корзину" под изображением. А мне надо, чтобы они были под кнопкой "Подробнее", точнее располагались тоже справа от Изображения товара, т.е. как тут http://forum.storela...t&attach_id=123

Что-то я пока лазила пыталась все сделать сама и в итоге у меня вообще перестало работать всплывающее окно, я щас заплачу, помогите пожалуйста, уже надо запускаться, а никак с программой сладить не могу.