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


Редактирование Окна Добавления Товара В Корзину

Автор svarob-shop, 27 июня 2014 22:59

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

#1 svarob-shop

svarob-shop

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

  • Пользователи
  • PipPip
  • 39 сообщений
  • ГородНижний Новгород

Отправлено 27 Июнь 2014 - 22:59

Сделать из стандартного всплывающего окна "Товар ... успешно добавлен в корзину" на аналогичную другого сайта.
Адрес сайта: http://svarob.ru/

Прикрепленные изображения

  • 2014-06-27 23-47-28 Скриншот экрана.png
  • 2014-06-27 23-48-00 Скриншот экрана.png

#2 Dars

Dars

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

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 28 Июнь 2014 - 18:23

Просмотр сообщенияsvarob-shop (27 Июнь 2014 - 22:59) писал:

Сделать из стандартного всплывающего окна "Товар ... успешно добавлен в корзину" на аналогичную другого сайта.
Адрес сайта: http://svarob.ru/
В шаблоне "Ajax добавление товара в корзину" замените присутствующий там код на этот:
<div class="alignCenter">
  {% IF FORM_NOTICE %}<h3 class="{% IF FORM_NOTICE_IS_GOOD %}green{% ELSE %}errorMessage{% ENDIF %}">{FORM_NOTICE | nl2br}</h3>{% ENDIF %}
   
  {% FOR cart_items %}
{% IF FORM_GOODS_MOD_ID = cart_items.GOODS_MOD_ID %}
  <div class="cart_add">
	<div class="left">
	  <div class="image goods-image-medium" style="float:left;margin-right:10px;"><a href="{cart_items.GOODS_URL}"><img class="goods-image-medium" src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{cart_items.GOODS_IMAGE_MEDIUM}{% ENDIF %}"></a></div>
	</div>
	<div class="right">
	  <div class="name">
	 <a title="Перейти на страницу &laquo;{cart_items.GOODS_NAME}&raquo;" href="{cart_items.GOODS_URL}">
	  {cart_items.GOODS_NAME}
	  <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара -->
	  {% IFNOT cart_items.distinctive_properties_empty %}<span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span>{% ENDIF %}
	</a>
   </div>
	  <div class="price">
		<span class="price-new">Ваша цена: <span>{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span></span>
	  </div>
   <div class="countcart">
	 <span>Количество:&nbsp;&nbsp;<span style="color:#f00;">{cart_items.ORDER_LINE_QUANTITY}</span></span>
		  <a href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" class="close">×</a>
   </div>
	</div>
  </div>
  {% ENDIF %}
  {% ENDFOR %}
 
  <p>Сейчас в корзине товаров
  <strong class="newCartCount">
	{% IF cart_count_empty %}
	  <span class="red">0</span> шт.
	{% ELSE %}
	  {% FOR cart_count %}
		{cart_count.COUNT}{cart_count.MEASURE_NAME}{% IFNOT cart_count.last %},{% ENDIF %}
	  {% ENDFOR %}
	{% ENDIF %}
  </strong>
  на сумму
  <strong class="newCartSum">
	{% IF cart_count_empty %}
	  <span class="red">0</span> {CURRENCY_NAME}.
	{% ELSE %}
	  {% FOR cart_sum %}
		{cart_sum.NOW_WITH_DISCOUNT | money_format}<br />
	  {% ENDFOR %}
	{% ENDIF %}
  </strong>
  </p>
   
  <p>Вы можете перейти к оформлению заказа или продолжить покупки.</p>
  <p><a class="messageBoxToCart" href="{CART_URL}">Перейти в корзину</a> &nbsp; &nbsp; <a class="nyroModalClose" href="#">Продолжить покупки</a></p>
</div>
<!-- Обновление данных корзины -->
<script>
$('#cartSum').html($('.newCartSum').html());
$('#cartCount').html($('.newCartCount').html());
</script>

Затем в main.css добавьте:
.cart_add {float:left;width:95%;padding:10px;border: 1px solid #000;margin-bottom: 10px;}
.cart_add .left {float:left;width:50%;}
.cart_add .left img {max-width:200px;}
.cart_add .right {float:right;width:50%;text-align:left;}
.cart_add .right .name {padding:6px 0 6px 0;}
.cart_add .right .name a {font-size:18px;}
.cart_add .right .price {padding:4px 0;}
.cart_add .right .price-new {font-size:14px;}
.cart_add .right .price-new span {color:#f00;}
.cart_add .right .price-new span .num {font-size:18px;}
.cart_add .right .countcart {padding:4px 0;}
.cart_add .right .countcart span {font-size:14px;}
.cart_add .right .countcart span span {font-size:18px;}
.cart_add .right .countcart a {font-size:20px;}

#3 svarob-shop

svarob-shop

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

  • Пользователи
  • PipPip
  • 39 сообщений
  • ГородНижний Новгород

Отправлено 28 Июнь 2014 - 20:37

Просмотр сообщенияDars (28 Июнь 2014 - 18:23) писал:

В шаблоне "Ajax добавление товара в корзину" замените присутствующий там код на этот:
<div class="alignCenter">
{% IF FORM_NOTICE %}<h3 class="{% IF FORM_NOTICE_IS_GOOD %}green{% ELSE %}errorMessage{% ENDIF %}">{FORM_NOTICE | nl2br}</h3>{% ENDIF %}

{% FOR cart_items %}
{% IF FORM_GOODS_MOD_ID = cart_items.GOODS_MOD_ID %}
<div class="cart_add">
<div class="left">
	 <div class="image goods-image-medium" style="float:left;margin-right:10px;"><a href="{cart_items.GOODS_URL}"><img class="goods-image-medium" src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{cart_items.GOODS_IMAGE_MEDIUM}{% ENDIF %}"></a></div>
</div>
<div class="right">
	 <div class="name">
	 <a title="Перейти на страницу &laquo;{cart_items.GOODS_NAME}&raquo;" href="{cart_items.GOODS_URL}">
	 {cart_items.GOODS_NAME}
	 <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара -->
	 {% IFNOT cart_items.distinctive_properties_empty %}<span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span>{% ENDIF %}
</a>
</div>
	 <div class="price">
	 <span class="price-new">Ваша цена: <span>{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span></span>
	 </div>
<div class="countcart">
	 <span>Количество:&nbsp;&nbsp;<span style="color:#f00;">{cart_items.ORDER_LINE_QUANTITY}</span></span>
		 <a href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" class="close">×</a>
</div>
</div>
</div>
{% ENDIF %}
{% ENDFOR %}

<p>Сейчас в корзине товаров
<strong class="newCartCount">
{% IF cart_count_empty %}
	 <span class="red">0</span> шт.
{% ELSE %}
	 {% FOR cart_count %}
	 {cart_count.COUNT}{cart_count.MEASURE_NAME}{% IFNOT cart_count.last %},{% ENDIF %}
	 {% ENDFOR %}
{% ENDIF %}
</strong>
на сумму
<strong class="newCartSum">
{% IF cart_count_empty %}
	 <span class="red">0</span> {CURRENCY_NAME}.
{% ELSE %}
	 {% FOR cart_sum %}
	 {cart_sum.NOW_WITH_DISCOUNT | money_format}<br />
	 {% ENDFOR %}
{% ENDIF %}
</strong>
</p>

<p>Вы можете перейти к оформлению заказа или продолжить покупки.</p>
<p><a class="messageBoxToCart" href="{CART_URL}">Перейти в корзину</a> &nbsp; &nbsp; <a class="nyroModalClose" href="#">Продолжить покупки</a></p>
</div>
<!-- Обновление данных корзины -->
<script>
$('#cartSum').html($('.newCartSum').html());
$('#cartCount').html($('.newCartCount').html());
</script>

Затем в main.css добавьте:
.cart_add {float:left;width:95%;padding:10px;border: 1px solid #000;margin-bottom: 10px;}
.cart_add .left {float:left;width:50%;}
.cart_add .left img {max-width:200px;}
.cart_add .right {float:right;width:50%;text-align:left;}
.cart_add .right .name {padding:6px 0 6px 0;}
.cart_add .right .name a {font-size:18px;}
.cart_add .right .price {padding:4px 0;}
.cart_add .right .price-new {font-size:14px;}
.cart_add .right .price-new span {color:#f00;}
.cart_add .right .price-new span .num {font-size:18px;}
.cart_add .right .countcart {padding:4px 0;}
.cart_add .right .countcart span {font-size:14px;}
.cart_add .right .countcart span span {font-size:18px;}
.cart_add .right .countcart a {font-size:20px;}

Просто супер! Спасибо!

Теперь. Как убрать затемнение страницы при открытии окна?

#4 Dars

Dars

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

  • Пользователи
  • PipPipPipPip
  • 1 410 сообщений

Отправлено 28 Июнь 2014 - 20:50

Просмотр сообщенияsvarob-shop (28 Июнь 2014 - 20:37) писал:

Просто супер! Спасибо!

Теперь. Как убрать затемнение страницы при открытии окна?
Добавьте в main.css строку:
#nyroModalBg {background:none !important;}

#5 svarob-shop

svarob-shop

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

  • Пользователи
  • PipPip
  • 39 сообщений
  • ГородНижний Новгород

Отправлено 28 Июнь 2014 - 21:47

Просмотр сообщенияDars (28 Июнь 2014 - 20:50) писал:

Добавьте в main.css строку:
#nyroModalBg {background:none !important;}
Спасибо огромное! Вы просто молодцы! Все нравиться!
Думаю, что эта тема еще актуальна и я к ней еще вернусь.

#6 User

User

    Продвинутый пользователь

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

Отправлено 10 Июль 2014 - 11:47

А покажите, пожалуйста, классы "messageBoxToCart" и "nyroModalClose", а то в мокко их нет, и вместо кнопок просто ссылки получаются.

#7 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 10 Июль 2014 - 11:58

Просмотр сообщенияUser (10 Июль 2014 - 11:47) писал:

А покажите, пожалуйста, классы "messageBoxToCart" и "nyroModalClose", а то в мокко их нет, и вместо кнопок просто ссылки получаются.

Здравствуйте, уточните пожалуйста что именно вы хотите сделать

#8 User

User

    Продвинутый пользователь

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

Отправлено 10 Июль 2014 - 14:08

В общем-то сделал уже, просто, и в исходном шаблоне "Ajax добавление товара в корзину" для кнопки
Перейти в корзину
прописан класс "messageBoxToCart", а самого класса нет в main.css, поэтому, вместо ожидаемой красивой кнопки видим просто унылую ссылку, как на скринах в первом сообщении.

#9 Castiel

Castiel

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

  • Модераторы
  • 3 519 сообщений
  • ГородНижний Новгород

Отправлено 10 Июль 2014 - 14:12

Просмотр сообщенияUser (10 Июль 2014 - 14:08) писал:

В общем-то сделал уже, просто, и в исходном шаблоне "Ajax добавление товара в корзину" для кнопки
Перейти в корзину
прописан класс "messageBoxToCart", а самого класса нет в main.css, поэтому, вместо ожидаемой красивой кнопки видим просто унылую ссылку, как на скринах в первом сообщении.

Если такого класса в main.css нету, вы можете его просто добавить сами и указать нужные стили для него.

#10 Egik

Egik

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

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

Отправлено 04 Октябрь 2014 - 11:04

Просмотр сообщенияCastiel (10 Июль 2014 - 14:12) писал:

Если такого класса в main.css нету, вы можете его просто добавить сами и указать нужные стили для него.
Добрый день, а подскажите для не очень разбирающихся где и что надо добавить (чтоб было как на втором скрине)

#11 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 04 Октябрь 2014 - 11:29

Просмотр сообщенияEgik (04 Октябрь 2014 - 11:04) писал:

Добрый день, а подскажите для не очень разбирающихся где и что надо добавить (чтоб было как на втором скрине)
Здравствуйте,
замените код из файла "Ajax добавление товара в корзину"
на 
<style>
  .cart_add {float:left;width:95%;padding:10px;border: none;margin-bottom: 10px;height: 174px;}
.cart_add .left {float:left;width:50%;}
.cart_add .left img {max-width:200px;}
.cart_add .right {float:right;width:50%;text-align:left;}
.cart_add .right .name {padding:6px 0 6px 0;}
.cart_add .right .name a {font-size:18px;}
.cart_add .right .price {padding:4px 0;}
.cart_add .right .price-new {font-size:14px;}
.cart_add .right .price-new span {color:#f00;}
.cart_add .right .price-new span .num {font-size:18px;}
.cart_add .right .countcart {padding:4px 0;}
.cart_add .right .countcart span {font-size:14px;}
.cart_add .right .countcart span span {font-size:18px;}
.cart_add .right .countcart a {font-size:20px;}
.alignCenter p {
font-size: 18px;
}
#bloc:hover {
padding: 7px;
background: #6DD7E0;
color: #fff;
border-radius: 16px;
}
</style><div class="alignCenter">
  {% IF FORM_NOTICE %}<h3 class="{% IF FORM_NOTICE_IS_GOOD %}green{% ELSE %}errorMessage{% ENDIF %}">{FORM_NOTICE | nl2br}</h3>{% ENDIF %}
  
  {% FOR cart_items %}
{% IF FORM_GOODS_MOD_ID = cart_items.GOODS_MOD_ID %}
  <div class="cart_add">
		<div class="left">
		  <div class="image goods-image-medium" style="float:left;margin-right:10px;"><a href="{cart_items.GOODS_URL}"><img class="goods-image-medium" src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png{% ELSE %}{cart_items.GOODS_IMAGE_MEDIUM}{% ENDIF %}"></a></div>
		</div>
		<div class="right">
		  <div class="name">
		 <a title="Перейти на страницу &laquo;{cart_items.GOODS_NAME}&raquo;" href="{cart_items.GOODS_URL}">
		  {cart_items.GOODS_NAME}
		  <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара -->
		  {% IFNOT cart_items.distinctive_properties_empty %}<span>({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</span>{% ENDIF %}
		</a>
   </div>
		  <div class="price">
				<span class="price-new">Ваша цена: <span>{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span></span>
		  </div>
   <div class="countcart">
		 <span>Количество:&nbsp;&nbsp;<span style="color:#f00;">{cart_items.ORDER_LINE_QUANTITY}</span></span>
				  <a href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" class="close">×</a>
   </div>
		</div>
	   
  </div>
  {% ENDIF %}
  {% ENDFOR %}

  <p>Сейчас в корзине товаров
  <strong class="newCartCount">
		{% IF cart_count_empty %}
		  <span class="red">0</span> шт.
		{% ELSE %}
		  {% FOR cart_count %}
				{cart_count.COUNT}{cart_count.MEASURE_NAME}{% IFNOT cart_count.last %},{% ENDIF %}
		  {% ENDFOR %}
		{% ENDIF %}
  </strong>
  на сумму
  <strong class="newCartSum">
		{% IF cart_count_empty %}
		  <span class="red">0</span> {CURRENCY_NAME}.
		{% ELSE %}
		  {% FOR cart_sum %}
				{cart_sum.NOW_WITH_DISCOUNT | money_format}<br />
		  {% ENDFOR %}
		{% ENDIF %}
  </strong>
  </p>
  

  <p> &nbsp; &nbsp; <a class="nyroModalClose" href="#">Продолжить покупки</a>&nbsp; &nbsp; <a class="messageBoxToCart" href="{CART_URL}" id="bloc">Оформить заказ</a></p>
</div>
<!-- Обновление данных корзины -->
<script>
$('#cartSum').html($('.newCartSum').html());
$('#cartCount').html($('.newCartCount').html());
</script>

#12 Egik

Egik

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

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

Отправлено 04 Октябрь 2014 - 12:05

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

Прикрепленные изображения

  • 1.png
  • 2.png

#13 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 04 Октябрь 2014 - 12:16

Просмотр сообщенияEgik (04 Октябрь 2014 - 12:05) писал:

хотелось еще поправить кнопки, чтоб при наведение курсора на кнопку оформить заказ она не выделялось в оболочку а принимала вид как кнопка продолжить покупки (при тех же действиях). И надпись в низу "сейчас в корзине товаров......"  изменить  на  "В корзине товаров ......."  и сместить немного левее чтоб на фото не заезжала как сейчас.
Здравствуйте. В main.css добавьте
#bloc:hover {
padding: 0!important;
background: none!important;
color: #00205B!important;
border-radius: 0!important;
}

#14 Egik

Egik

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

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

Отправлено 04 Октябрь 2014 - 12:19

Просмотр сообщенияAlekseys (04 Октябрь 2014 - 12:16) писал:

Здравствуйте. В main.css добавьте
#bloc:hover {
padding: 0!important;
background: none!important;
color: [font=Consolas, 'Lucida Console', monospace][size=3]#00205B[/size][/font]!important;
border-radius: 0!important;
}
теперь при наведение на "оформить заказ" эта кнопка вообще пропадает!

#15 Alekseys

Alekseys

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

  • Пользователи
  • PipPipPipPip
  • 2 355 сообщений

Отправлено 04 Октябрь 2014 - 12:21

Просмотр сообщенияEgik (04 Октябрь 2014 - 12:19) писал:

теперь при наведение на "оформить заказ" эта кнопка вообще пропадает!
Прошу прощения, была допущена ошибка, инструкцию поправил, измените вставленный блок на
#bloc:hover {
padding: 0!important;
background: none!important;
color: #00205B!important;
border-radius: 0!important;
}

#16 Egik

Egik

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

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

Отправлено 04 Октябрь 2014 - 12:26

Просмотр сообщенияAlekseys (04 Октябрь 2014 - 12:21) писал:

Прошу прощения, была допущена ошибка, инструкцию поправил, измените вставленный блок на
#bloc:hover {
padding: 0!important;
background: none!important;
color: #00205B!important;
border-radius: 0!important;
}
теперь все супер, можно еще решить вопрос с текстом? (надпись в низу "сейчас в корзине товаров......"  изменить  на  "В корзине товаров ......."  и сместить немного правей чтоб на фото не заезжала как сейчас.)

#17 Vaccina

Vaccina

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

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

Отправлено 04 Октябрь 2014 - 18:18

В шаблоне Ajax добавление товара в корзину найдите и замените данную фразу, также этом шаблоне найдите:
<p>Сейчас в корзине товаров
замените на:
<p style="padding-left:20px;">Сейчас в корзине товаров

#18 Egik

Egik

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

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

Отправлено 04 Октябрь 2014 - 19:45

Просмотр сообщенияVaccina (04 Октябрь 2014 - 18:18) писал:

В шаблоне Ajax добавление товара в корзину найдите и замените данную фразу, также этом шаблоне найдите:
<p>Сейчас в корзине товаров
замените на:
<p style="padding-left:20px;">Сейчас в корзине товаров
не чего не поменялось,также заходит на фото, а при замене фразы (сейчас в корзине товаров) на (В корзине товаров) "В" улетает в верхний правый угол

#19 Vaccina

Vaccina

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

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

Отправлено 04 Октябрь 2014 - 19:51 

<p style="padding-left:20px;">Сейчас в корзине товаров
замените на:
<div style="clear:both;"></div>
<p style="padding-left:20px;">В корзине товаров

#20 Egik

Egik

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

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

Отправлено 04 Октябрь 2014 - 20:17

Просмотр сообщенияVaccina (04 Октябрь 2014 - 19:51) писал:

<p style="padding-left:20px;">Сейчас в корзине товаров
замените на:
<div style="clear:both;"></div>
<p style="padding-left:20px;">В корзине товаров
спасибо все получилось, прошу помочь в последнем штрихе, все что обведено черным чтоб начиналось от красной полосы

Прикрепленные изображения

  • Безымянный.png

Обратно в Корзина


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Мокко
  5. → Корзина
  6. Privacy Policy