Сообщений в теме: 364

[odissei]

Только в моем случае

Цитата

<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:20px;" maxlength="12" value="1" title="Количество" class="text_q" />

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

[odissei]

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

Т.е. вот здесь добавить стрелочки для увеличения и уменьшения кол-ва товаров:
1. В каталоге, в табличном представлении товара


2. В каталоге, в виде списка товаров


3. На странице товара



А вот пример, как должно быть:


Естественно не цвета главное, а смысл и работа со стрелочками.


Заранее спасибо за помощь.

[odissei]

Еще в корзине неплохо было бы такие стрелочки добавить.

Интересно это повышает конверсию хоть на сотую процента, удобство ведь допольнительное по идее?)

[miyako]

В шаблонах Товары и Товар заменяете примерно следующий код:

<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:20px;" maxlength="12" value="1" title="Количество" class="text_q">

на :

<div class="numeric_input">
<input type="text" class="text_q" name="form[goods_mod_quantity]" id="quantity_wanted" value="1" title="Количество" maxlength="12"
onkeydown="this.blur()"/><div style="margin-top: -3px;">
<input type="button" class="up_button"
onclick="this.parentNode.previousSibling.value++" />
<input type="button" class="down_button"
onclick="this.parentNode.previousSibling.value--" />
</div>
</div>
<div class="clear"></div>

В main.csstemplate нужно добавить следующий код:

.numeric_input {
margin:auto;
}
.numeric_input div {
float:left;
width:20px;
}
.up_button, .down_button {
height:10px;
width:10px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center;
}
.up_button {
background-image:url({ASSETS_IMAGES_PATH}bg_up.jpg);

}
.down_button {
background-image:url({ASSETS_IMAGES_PATH}bg_down.jpg);
}

А также найти там же код:

input.text_q{border: solid 1px #E8E8E8;padding:2px;font: bold 12px Verdana, Geneva, sans-serif; color:#CC0000;} /*рамка-поле вокруг цифры, шрифт цифры*/

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

input.text_q {
float:left;
text-align:right;
width:20px;
height:16px;
border: solid 1px #E8E8E8;
padding: 2px;
margin:2px;
font: bold 12px Verdana, Geneva, sans-serif;
color: #C00;
}

В файлы (Сайт>Редактор тем) загрузите изображения с именем bg_down.jpg, bg_up.jpg

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

• 
• 

[odissei]

Спс, неплохо.
Вот только поламалось немного все в категории при отображении товара таблицей.
Можете глянуть, откат не делал пока.

Как исправить поломку в отображении товара таблицей?

[miyako]

odissei (26 Декабрь 2012 - 11:29) писал:

Спс, неплохо.
Вот только поламалось немного все в категории при отображении товара таблицей.
Можете глянуть, откат не делал пока.

Как исправить поломку в отображении товара таблицей?

В шаблоне Товара таблицей вставьте вместо выше написанного следующий код:

<div class="numeric_input" style="position: relative; margin-top: -25px;">
<input type="text" class="text_q" name="form[goods_mod_quantity]" id="quantity_wanted" value="1" title="Количество" maxlength="12" onkeydown="this.blur()"><div style="margin-top: -3px; width=11px;">
<input type="button" class="up_button" onclick="this.parentNode.previousSibling.value++">
<input type="button" style="margin-left: -3px;" class="down_button" onclick="this.parentNode.previousSibling.value--">
</div>
</div>
<div class="clear"></div>

после кнопки "Купить", то есть примерно после следующего кода:

<a class="blgreen" onclick="$('#goodsListFormId19375743').submit(); return false;" href="/cart/add/?hash=981a7c&amp;form%5Bgoods_from%5D=&amp;form%5Bgoods_mod_id%5D=19375743" title="Положить «Батарейки Energizer Base LR6 AA FSB4 (пальчиковые) 1/96» в корзину">Купить</a>

[odissei]

Сделал так..

Теперь по другому поломато)
Что-то не то.

[ALEXp]

да, стрелочки, то что надо

[miyako]

odissei (26 Декабрь 2012 - 12:08) писал:

Сделал так..

Теперь по другому поломато)
Что-то не то.

Вы не в то место вставили код, поэтому лучше сделай-те бэкап и вставьте еще раз по инструкции написанной выше.

[miyako]

Чтобы у вас не прыгала кнопка купить при наведении:
В шаблоне Товара таблицей найдите код:

<a class="blgreen" onclick="$('#goodsListFormId19375743').submit(); return false;" href="/cart/add/?hash=981a7c&amp;form%5Bgoods_from%5D=&amp;form%5Bgoods_mod_id%5D=19375743" title="Положить «Батарейки Energizer Base LR6 AA FSB4 (пальчиковые) 1/96» в корзину">Купить</a>

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

<a class="blgreen" onclick="$('#goodsListFormId19375743').submit(); return false;" href="/cart/add/?hash=153207&amp;form%5Bgoods_from%5D=&amp;form%5Bgoods_mod_id%5D=19375743" title="Положить «Батарейки Energizer Base LR6 AA FSB4 (пальчиковые) 1/96» в корзину" style="position: absolute; margin-left: 78px;">Купить</a>

[odissei]

Цитата

miyako (26 Декабрь 2012 - 14:43) писал:

Чтобы у вас не прыгала кнопка купить при наведении:
В шаблоне Товара таблицей найдите код:

<a class="blgreen" onclick="$('#goodsListFormId19375743').submit(); return false;" href="/cart/add/?hash=981a7c&amp;form%5Bgoods_from%5D=&amp;form%5Bgoods_mod_id%5D=19375743" title="Положить «Батарейки Energizer Base LR6 AA FSB4 (пальчиковые) 1/96» в корзину">Купить</a>

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

<a class="blgreen" onclick="$('#goodsListFormId19375743').submit(); return false;" href="/cart/add/?hash=153207&amp;form%5Bgoods_from%5D=&amp;form%5Bgoods_mod_id%5D=19375743" title="Положить «Батарейки Energizer Base LR6 AA FSB4 (пальчиковые) 1/96» в корзину" style="position: absolute; margin-left: 78px;">Купить</a>

Попробовал так делать, решил - пусть лучше прыгает. position: absolute - ломает дизайн, параметр absolute жестко привязывает кнопку (она не дергается больше), но остальные элементы шаблона ее просто не замечают - в итоге происходят наложения всякие, и как не пытался с помощью margin их все собрать в нормальную кучу, так и не получилось.

С кодом немного поигрался, в итоге выбрал вот такие отступы:
В шаблоне товар:

Цитата

  <!-- Стрелочки кол-ва товара -->
<div style="margin-top: 4px;" class="numeric_input">
<input type="text" class="text_q" name="form[goods_mod_quantity]" id="quantity_wanted" value="1" title="Количество" maxlength="12"
onkeydown="this.blur()"/><div style="margin-top: -1px;">
<input type="button" class="up_button"
onclick="this.parentNode.previousSibling.value++" />
<input type="button" class="down_button"
onclick="this.parentNode.previousSibling.value--" />
</div>
</div>

В шаблоне Товары для списка:

Цитата

<!-- Стрелки для кол-ва товара-->
<div style="margin-top: 15px;" class="numeric_input">
<input type="text" style="margin-top: 5px;" class="text_q" name="form[goods_mod_quantity]" id="quantity_wanted" value="1" title="Количество" maxlength="12"
onkeydown="this.blur()"/><div style="margin-top: 0px;">
<input type="button" class="up_button"
onclick="this.parentNode.previousSibling.value++" />
<input type="button" class="down_button"
onclick="this.parentNode.previousSibling.value--" />
</div>
</div>
<a class="whtgray" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{goods.NAME}&raquo; в корзину">Купить сейчас</a>

В шаблоне Товары для таблицы:

Цитата

<a class="blgreen" onclick="$('#goodsListFormId{goods.MIN_PRICE_NOW_ID}').submit(); return false;" href="{CART_ADD_GOODS_MODIFICATION_URL | url_amp}?hash={HASH | url_amp}&amp;form%5Bgoods_from%5D={goods.GOODS_FROM}&amp;form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить &laquo;{goods.NAME}&raquo; в корзину" style="margin-left: 45px;">Купить</a>
<!-- Стрелочки кол-ва товаро -->
   <div class="numeric_input" style="position: relative; margin-top: -22px;">
<input type="text" style="margin-left: 50px;" class="text_q" name="form[goods_mod_quantity]" id="quantity_wanted" value="1" title="Количество" maxlength="12" onkeydown="this.blur()"><div style="margin-top: -3px; width=11px;">
<input type="button" class="up_button" onclick="this.parentNode.previousSibling.value++">
<input type="button" class="down_button" onclick="this.parentNode.previousSibling.value--">
</div>
</div>

Думаю в таком виде пойдет пока

[odissei]

Кстати когда приподнял поле кол-ва со стрелочками, в Шаблоне товаров (таблицей), кнопка купить также дергается чуток, но теперь табличку товара не ломает.

Видать места не хватало между нижней стрелочкой и нижнем полем.

В таком виде норм.

Сообщение отредактировал odissei: 27 Декабрь 2012 - 08:15

[ogonek7777]

miyako (20 Декабрь 2012 - 08:30) писал:

В панели управления магазином, в разделе "Сайт" > "Редактор тем" в блоке "Стили и скрипты" находим файл main.csstemplate, открываем его и находим следующий код:

[/font][/color]
[color=#282828][font=helvetica, arial, sans-serif]input.text{border: solid 1px #E8E8E8;padding:2px;font: italic 12px Verdana, Geneva, sans-serif;}

Заменяем на:

input.text_q{border: solid 1px #E8E8E8;padding:2px;font: italic 12px Verdana, Geneva, sans-serif;}

А для моего сайта какой код потребуется искать?

[miyako]

ogonek7777 (12 Январь 2013 - 14:00) писал:

А для моего сайта какой код потребуется искать?

Попробуйте следующую строчку:

<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:20px;" maxlength="12" value="1" title="Количество" class="text">

[ogonek7777]

miyako (12 Январь 2013 - 14:14) писал:

Попробуйте следующую строчку:

<input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:20px;" maxlength="12" value="1" title="Количество" class="text">

Вы не поняли меня. Указанная Вами строка, как я вижу, из Товара, а мне надо аналог строки из CSS

[miyako]

ogonek7777 (12 Январь 2013 - 15:10) писал:

Вы не поняли меня. Указанная Вами строка, как я вижу, из Товара, а мне надо аналог строки из CSS

В шаблонах Товар и Товары замените строчку кода:

Кол-во: <input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:20px;" maxlength="12" value="1" title="Количество" class="text">

на:

<div class="numeric_input"><p style="
	float: left;
	padding: 3px;
	margin: 0px;
	position: relative;
">
Кол-во: </p>
<input type="text" class="text_q" name="form[goods_mod_quantity]" id="quantity_wanted" value="1" title="Количество" maxlength="12" onkeydown="this.blur()"><div style="margin-top: -2px;">
<input type="button" class="up_button" onclick="this.parentNode.previousSibling.value++"> <br>
<input type="button" class="down_button" onclick="this.parentNode.previousSibling.value--">
</div>
</div>

В файл main.csstemplate вставьте код:

.numeric_input {
margin:auto;
position: absolute;
width: 100px;
}
.numeric_input div {
float:left;
width: 10px;
}
.up_button, .down_button {
height:10px;
width:10px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center;
}
.up_button {
background-image:url({ASSETS_IMAGES_PATH}bg_up.jpg);
}
.down_button {
background-image:url({ASSETS_IMAGES_PATH}bg_down.jpg);
}
input.text_q {
float: left;
text-align:right;
width:20px;
height:16px;
border: solid 1px #E8E8E8;
padding: 2px;
font: bold 12px Verdana, Geneva, sans-serif;
color: #C00;
}

[ogonek7777]

miyako (13 Январь 2013 - 08:43) писал:

В шаблонах Товар и Товары замените строчку кода:

Кол-во: <input type="text" name="form[goods_mod_quantity]" id="quantity_wanted" style="width:20px;" maxlength="12" value="1" title="Количество" class="text">

на:

<div class="numeric_input"><p style="
float: left;
padding: 3px;
margin: 0px;
position: relative;
">
Кол-во: </p>
<input type="text" class="text_q" name="form[goods_mod_quantity]" id="quantity_wanted" value="1" title="Количество" maxlength="12" onkeydown="this.blur()"><div style="margin-top: -2px;">
<input type="button" class="up_button" onclick="this.parentNode.previousSibling.value++"> <br>
<input type="button" class="down_button" onclick="this.parentNode.previousSibling.value--">
</div>
</div>

В файл main.csstemplate вставьте код:

.numeric_input {
margin:auto;
position: absolute;
width: 100px;
}
.numeric_input div {
float:left;
width: 10px;
}
.up_button, .down_button {
height:10px;
width:10px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center;
}
.up_button {
background-image:url({ASSETS_IMAGES_PATH}bg_up.jpg);
}
.down_button {
background-image:url({ASSETS_IMAGES_PATH}bg_down.jpg);
}
input.text_q {
float: left;
text-align:right;
width:20px;
height:16px;
border: solid 1px #E8E8E8;
padding: 2px;
font: bold 12px Verdana, Geneva, sans-serif;
color: #C00;
}

Получилось очень хорошо! Хотелось бы немного подправить:
соединить стрелки без пробела к центру,
убрать рамку вокруг стрелок.

И еще вопрос: на что влияют:

.numeric_input {
margin:auto;
position: absolute;
width: 100px;
}

И можно ли отсчет ограничить таким образом, чтобы нельзя было выставить сумму меньше 0?

Большое спасибо!

[miyako]

ogonek7777 (13 Январь 2013 - 17:08) писал:

Получилось очень хорошо! Хотелось бы немного подправить:
соединить стрелки без пробела к центру,
убрать рамку вокруг стрелок.

И еще вопрос: на что влияют:

.numeric_input {
margin:auto;
position: absolute;
width: 100px;
}

И можно ли отсчет ограничить таким образом, чтобы нельзя было выставить сумму меньше 0?

Большое спасибо!

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

.up_button, .down_button {
height: 10px;
width: 10px;
background-color: white;
background-repeat: no-repeat;
background-position: center;
}

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

.up_button, .down_button {
height: 10px;
width: 10px;
background-color: white;
background-repeat: no-repeat;
background-position: center;
float: left;
border:0px;/*убирает рамку*/
}

найдите код:

.numeric_input div {
float: left;
width: 10px;
}

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

.numeric_input div {
float: left;
width: 10px;
margin-top:1px; /*если без рамки то поставьте значение 2px*/
}

В шаблоне Товар найдите код:

<div class="numeric_input"><p style="
float: left;
padding: 3px;
margin: 0px;
position: relative;
">
Кол-во: </p>
<input type="text" class="text_q" name="form[goods_mod_quantity]" id="quantity_wanted" value="1" title="Количество" maxlength="12" onkeydown="this.blur()"><div style="margin-top: -2px;">
<input type="button" class="up_button" onclick="this.parentNode.previousSibling.value++"> <br>
<input type="button" class="down_button" onclick="this.parentNode.previousSibling.value--">
</div>
</div>

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

 <script language="JavaScript"> 
 function addone(i) {	 
		ta1=document.getElementById("quantity_wanted");
		ta1.value=parseInt(ta1.value)+i;
		if (parseInt(ta1.value) <= 0) { ta1.value=0; }

	}
</script>  
<div class="numeric_input"><p style="
float: left;
padding: 3px;
margin: 0px;
position: relative;
">
Кол-во: </p>
<input type="text" class="text_q" name="form[goods_mod_quantity]" id="quantity_wanted" value="1" title="Количество" maxlength="12" onkeydown="this.blur()"><div style="margin-top: -2px;">
<input type="button" class="up_button" onclick="addone(1)">
<input type="button" class="down_button" onclick="addone(-1)">
</div>
</div>

Сообщение отредактировал miyako: 14 Январь 2013 - 08:20
добавление ограничение на вводимого количества

[ogonek7777]

Спасибо! А как мне все это выровнять с кнопкой купить и ценой по нижней линии? Самой не получилось((

[Koderhan]

ogonek7777 (14 Январь 2013 - 13:18) писал:

Спасибо! А как мне все это выровнять с кнопкой купить и ценой по нижней линии? Самой не получилось((

В файле main.css.
Найти код:

.numeric_input {
margin:auto;
position: absolute;
width: 100px;
}
.numeric_input div {
float:left;
width: 10px;margin-top:2px; /*если без рамки то поставьте значение 2px*/
}
.up_button, .down_button {
height:10px;
width:10px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center;
float: left;
border:0px;/*убирает рамку*/
}
.up_button {
background-image:url(/web/upload/assets/images/29/28748/bg_up.jpg);
}
.down_button {
background-image:url(/web/upload/assets/images/29/28748/bg_down.jpg);
}
input.text_q {
float: left;
text-align:right;
width:20px;
height:16px;
border: solid px #E8E8E8;
padding: 2px;
font:  12px Calibri, Verdana, Geneva, sans-serif;
color: #000;
}

Заменить:

.numeric_input {
margin:auto;
position: absolute;
width: 100px;
height: 20px;
}
.numeric_input div {
float:left;
width: 10px;margin-top:2px; /*если без рамки то поставьте значение 2px*/
}
.up_button, .down_button {
height:10px;
width:10px;
background-color:#fff;
background-repeat:no-repeat;
background-position:center;
float: left;
border:0px;/*убирает рамку*/
}
.up_button {
background-image:url(/web/upload/assets/images/29/28748/bg_up.jpg);
margin-top: -1px;
}
.down_button {
background-image:url(/web/upload/assets/images/29/28748/bg_down.jpg);
margin-top: 4px;
}
input.text_q {
float: left;
text-align:right;
width:20px;
height: 18px;
border: solid px #E8E8E8;
padding: 2px;
font:  12px Calibri, Verdana, Geneva, sans-serif;
color: #000;
}