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


Заменить Тип Кнопки "в Корзину" В Списке Товаров


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

#1 bazilevs

bazilevs

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

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

Отправлено 15 Январь 2016 - 18:15

Режим просмотра товаров "Списком". Необходимо вместо кружка с иконкой корзины (2.png) установить кнопку "В корзину" как на странице индивидуального товара (1.png). кнопки добавить в избранное и к сравнению оставить такими же.

Как это можно сделать?

Спасибо!

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

  • 2.png
  • 1.png


#2 RedHead

RedHead

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

  • Модераторы
  • 1 052 сообщений

Отправлено 15 Январь 2016 - 19:12

Просмотр сообщенияbazilevs (15 Январь 2016 - 18:15) писал:

Режим просмотра товаров "Списком". Необходимо вместо кружка с иконкой корзины (2.png) установить кнопку "В корзину" как на странице индивидуального товара (1.png). кнопки добавить в избранное и к сравнению оставить такими же.

Как это можно сделать?

Спасибо!

Здравствуйте! В шаблоне Товары, замените строку:

<a class="add-cart btn-cart product-addcart btn-addto" title="В корзину" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}></a>

на:

<div class="add-to-cart-list">
				  <input type="hidden" name="form[goods_mod_id]" value="{GOODS_MOD_ID}" class="goodsDataMainModificationId" />
				  <input type="button" value="В корзину" id="button-cart" class="add-cart button btn-cart" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/>
					  </div>

В конец main.css вставьте:

.product-addto-wrap .add-to-cart-list .button {background: url('{ASSETS_IMAGES_PATH}btn-detail.png?design=orange') no-repeat 2px -6px;background-color: #f1942a;padding: 15px 10px 15px 50px;color: #fff;font-size: 133%;margin: 0 10px 10px 0;border:0;  overflow: hidden;  display: inline-block; width: 140px;}
.product-addto-wrap .add-to-cart-list .button:hover {background-color: rgba(247,146,66,.7);cursor:pointer;}


#3 bazilevs

bazilevs

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

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

Отправлено 18 Январь 2016 - 18:57

Спасибо, но это изменилось в режиме отображения товаров таблицей. А нам нужно в режиме "списком", как я просил выше

#4 RedHead

RedHead

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

  • Модераторы
  • 1 052 сообщений

Отправлено 18 Январь 2016 - 20:24

Просмотр сообщенияbazilevs (18 Январь 2016 - 18:57) писал:

Спасибо, но это изменилось в режиме отображения товаров таблицей. А нам нужно в режиме "списком", как я просил выше

Здравствуйте! В шаблоне ТОВАРЫ замените строку:
<a class="btn-addto add-cart" title="В корзину" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}><span class="icon-basket"></span></a>
на:
<div class="add-to-cart-list">
								  <input type="hidden" name="form[goods_mod_id]" value="{GOODS_MOD_ID}" class="goodsDataMainModificationId" />
								  <input type="button" value="В корзину" id="button-cart" class="add-cart button btn-cart" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/>
										  </div>

Просмотр сообщенияRedHead (18 Январь 2016 - 20:21) писал:

Здравствуйте! В шаблоне ТОВАРЫ замените строку (их было две: одна для вывода списком, вторая - для вывода таблицей):
<a class="btn-addto add-cart" title="В корзину" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}><span class="icon-basket"></span></a>
на:
<div class="add-to-cart-list">
								 <input type="hidden" name="form[goods_mod_id]" value="{GOODS_MOD_ID}" class="goodsDataMainModificationId" />
								 <input type="button" value="В корзину" id="button-cart" class="add-cart button btn-cart" title="Положить &laquo;{GOODS_NAME}&raquo; в корзину"/>
										 </div>

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

#5 bazilevs

bazilevs

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

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

Отправлено 19 Январь 2016 - 11:54

Спасибо. Стало намного лучше. Только как теперь сделать чтобы кнопка В корзину была не над остальными 2-мя, а в одну линейку по горизонтали?

#6 Юля123

Юля123

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

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

Отправлено 19 Январь 2016 - 12:25

Просмотр сообщенияbazilevs (19 Январь 2016 - 11:54) писал:

Спасибо. Стало намного лучше. Только как теперь сделать чтобы кнопка В корзину была не над остальными 2-мя, а в одну линейку по горизонтали?


Здравствуйте, в конце main.css добавьте код:

.add-to-cart-list {
	width: 28%;
	display: inline-block;
}

далее найдите код:

.products-list .item .product-addto-wrap .add-wishlist {background-position:2px -294px;}

и замените на код:

.products-list .item .product-addto-wrap .add-wishlist {
	background-position: 2px -294px;
	vertical-align: middle;
}

затем код:

.products-list .item .product-addto-wrap .add-compare {background-position:left -146px;}

замените на код:

.products-list .item .product-addto-wrap .add-compare {
	background-position: left -146px;
	vertical-align: middle;
}


#7 bazilevs

bazilevs

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

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

Отправлено 19 Январь 2016 - 13:20

Спасибо! И последний штрих - как сделать чтобы эти 3 кнопки были выровнены по вертикали. А то высота кнопки "В корзину" меньше кружков "в избранное" и "для сравнения". Выглядит как-то неаккуратно. Или уменьшить кружки или выровнять по центру.

#8 bazilevs

bazilevs

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

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

Отправлено 19 Январь 2016 - 13:41

Плюс ко всему, если я делаю поиск товара, то при отображении найденного списком все равно выводится кружок

#9 Юля123

Юля123

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

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

Отправлено 19 Январь 2016 - 14:16

Просмотр сообщенияbazilevs (19 Январь 2016 - 13:20) писал:

Спасибо! И последний штрих - как сделать чтобы эти 3 кнопки были выровнены по вертикали. А то высота кнопки "В корзину" меньше кружков "в избранное" и "для сравнения". Выглядит как-то неаккуратно. Или уменьшить кружки или выровнять по центру.

Первый вариант:

QIP Shot - Screen 129.png

В main.css найдите код:

.product-addto-wrap .add-to-cart-list .button {background: url('{ASSETS_IMAGES_PATH}btn-detail.png?design=orange') no-repeat 2px -6px;background-color: #f1942a;padding: 15px 10px 15px 50px;color: #fff;font-size: 133%;margin: 0 10px 10px 0;border:0;  overflow: hidden;  display: inline-block; width: 140px;}

замените на код:

.product-addto-wrap .add-to-cart-list .button {background: url('{ASSETS_IMAGES_PATH}btn-detail.png?design=orange') no-repeat 2px -6px;background-color: #f1942a;padding: 20px 10px 20px 50px;color: #fff;font-size: 133%;margin: 0 10px 10px 0;border:0;  overflow: hidden;  display: inline-block; width: 140px;}



Второй вариант:

QIP Shot - Screen 130.png


в main.css найдите код:

.products-list .item .product-addto-wrap .btn-addto {background-color: #f1942a;border-radius:100%;-moz-border-radius:100%;khtml-border-radius:100%;-webkit-border-radius:100%;width:54px;height:54px;display:inline-block;text-indent:-999em;margin-right:5px;}

и замените на код:

.products-list .item .product-addto-wrap .btn-addto {
	background-color: #f1942a;
	border-radius: 100%;
	-moz-border-radius: 100%;
	khtml-border-radius: 100%;
	-webkit-border-radius: 100%;
	width: 48px;
	height: 48px;
	display: inline-block;
	text-indent: -999em;
	margin-right: 5px;
}

далее найдите код:

.products-list .item .product-addto-wrap .add-wishlist {
		background-position: 2px -294px;
		vertical-align: middle;
}

.products-list .item .product-addto-wrap .add-compare {
		background-position: left -146px;
		vertical-align: middle;
}

и замените на код:

.products-list .item .product-addto-wrap .add-wishlist {
		background-position: 0px -295px;
		vertical-align: middle;
}
.products-list .item .product-addto-wrap .add-compare {
		background-position: -3px -148px;
		vertical-align: middle;
}


#10 bazilevs

bazilevs

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

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

Отправлено 19 Январь 2016 - 16:43

Спасибо. Первый вариант не устраивает, т.к. надпись на кнопке не по центру получается, а во втором кружки все равно получаются ниже чем прямоугольник. Даже на вашем скриншоте.

А как сделать чтобы при отображении результатов поиска и в акциях список товаров также отображался таким же образом (с конпкой "В корзину")?

#11 Danil

Danil

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

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

Отправлено 20 Январь 2016 - 14:35

Просмотр сообщенияbazilevs (19 Январь 2016 - 16:43) писал:

Спасибо. Первый вариант не устраивает, т.к. надпись на кнопке не по центру получается, а во втором кружки все равно получаются ниже чем прямоугольник. Даже на вашем скриншоте.

А как сделать чтобы при отображении результатов поиска и в акциях список товаров также отображался таким же образом (с конпкой "В корзину")?
Здравствуйте.
В шаблонах Просмотр акции и Поиск найдите код
<a class="btn-addto add-cart" title="В корзину" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}><span class="icon-basket"></span></a>
и замените на
<a class="add-to-cart-list" title="В корзину" {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE %}{% IF goods.MIN_REST_VALUE=0 %}style="display:none;"{% ENDIF %}{% ENDIF %}><span class="add-cart button btn-cart">В корзину</span></a>


#12 bazilevs

bazilevs

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

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

Отправлено 21 Январь 2016 - 12:58

Спасибо, только кнопка располагается чуть выше чем остальные кнопки. Как выровнять?

#13 Danil

Danil

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

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

Отправлено 21 Январь 2016 - 13:07

Просмотр сообщенияbazilevs (21 Январь 2016 - 12:58) писал:

Спасибо, только кнопка располагается чуть выше чем остальные кнопки. Как выровнять?
В main.css найдите
.product-addto-wrap .add-to-cart-list .button {background: url('{ASSETS_IMAGES_PATH}btn-detail.png?design=orange') no-repeat 2px -6px;background-color: #f1942a;padding: 15px 10px 15px 50px;color: #fff;font-size: 133%;margin: 0 10px 10px 0;border:0; overflow: hidden; display: inline-block; width: 140px;}
и замените на
.product-addto-wrap .add-to-cart-list .button {background: url('{ASSETS_IMAGES_PATH}btn-detail.png?design=orange') no-repeat 2px -6px;background-color: #f1942a;padding: 15px 10px 15px 50px;color: #fff;font-size: 133%;border:0; overflow: hidden; display: inline-block; width: 140px;vertical-align: middle;}


#14 bazilevs

bazilevs

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

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

Отправлено 27 Январь 2016 - 16:50

Добрый день

При просмотре магазина с мобильного телефона кнопка "купить" заползает под кнопку "в избранное". При том что ширины экрана достаточно для того чтобы разместить эти кнопки без наползания друг на друга.

#15 Юля123

Юля123

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

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

Отправлено 27 Январь 2016 - 17:28

Просмотр сообщенияbazilevs (27 Январь 2016 - 16:50) писал:

Добрый день

При просмотре магазина с мобильного телефона кнопка "купить" заползает под кнопку "в избранное". При том что ширины экрана достаточно для того чтобы разместить эти кнопки без наползания друг на друга.


Здравствуйте, в main.css после кода:

@media all and (max-width: 480px) {

добавьте код:

.add-to-cart-list {width: 55% !important;}


#16 bazilevs

bazilevs

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

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

Отправлено 03 Март 2016 - 15:43

Обнаружили ошибку в выдаче товаров списком, возможно это как-то связано с тем что делали в этой теме.

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

Товар «» успешно добавлен в вашу корзину


Сейчас в корзине 1 товар на сумму 0 рублей




В режиме просмотра сеткой всё работает нормально




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

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