Перейти к содержимому


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


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 108

#1 Inc

Inc

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 364 сообщений
  • ГородMoscow

Отправлено 30 Июнь 2011 - 15:16

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

<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>

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

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 218 сообщений

Отправлено 01 Июль 2011 - 06:39

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

#3 Inc

Inc

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 364 сообщений
  • ГородMoscow

Отправлено 01 Июль 2011 - 10:37

Просмотр сообщенияVaccina (01 Июль 2011 - 06:39) писал:

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

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

#4 support

support

    Активный участник

  • Модераторы
  • 3 686 сообщений
  • ГородМосква

Отправлено 01 Июль 2011 - 15:27

Просмотр сообщения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 %}

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

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

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

#5 Inc

Inc

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 364 сообщений
  • ГородMoscow

Отправлено 01 Июль 2011 - 19:19

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

#6 ruslan

ruslan

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 03 Июль 2011 - 00:40

Так ничего  и не понял, куда что вставлять. Нельзя ли мне объяснить подробнее.
У меня совсем другой код
 <!-- Список товаров. Таблица -->
		<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>
	  <!-- /Список товаров. Таблица -->


#7 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 218 сообщений

Отправлено 04 Июль 2011 - 11:50

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

#8 ruslan

ruslan

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 04 Июль 2011 - 21:09

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

#9 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 218 сообщений

Отправлено 05 Июль 2011 - 09:30

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

#10 ruslan

ruslan

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 06 Июль 2011 - 22:11

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

#11 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 218 сообщений

Отправлено 07 Июль 2011 - 18:33

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

Для решения этой задачи будет достаточно изменить немного код в файле 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

#12 ruslan

ruslan

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 09 Июль 2011 - 22:36

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

#13 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 218 сообщений

Отправлено 11 Июль 2011 - 08:24

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

#14 ruslan

ruslan

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 11 Июль 2011 - 23:44

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

#15 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 218 сообщений

Отправлено 12 Июль 2011 - 20:19

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

#16 ruslan

ruslan

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 16 Июль 2011 - 18:14

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

#17 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 218 сообщений

Отправлено 16 Июль 2011 - 20:39

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

#18 ruslan

ruslan

    Пользователь

  • Пользователи
  • PipPip
  • 24 сообщений

Отправлено 18 Июль 2011 - 22:26

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

#19 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 218 сообщений

Отправлено 20 Июль 2011 - 00:41

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

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


#20 Emiliya

Emiliya

    Пользователь

  • Пользователи
  • PipPip
  • 15 сообщений
  • ГородЯкутск

Отправлено 01 Декабрь 2011 - 07:36

Просмотр сообщенияVaccina (01 Июль 2011 - 06:39) писал:

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


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

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




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных