Цитата
Счетчик Кол-Ва Товара
#21
Отправлено 21 Декабрь 2012 - 03:06
#22
Отправлено 26 Декабрь 2012 - 01:43
Т.е. вот здесь добавить стрелочки для увеличения и уменьшения кол-ва товаров:
1. В каталоге, в табличном представлении товара
2. В каталоге, в виде списка товаров
3. На странице товара
А вот пример, как должно быть:
Естественно не цвета главное, а смысл и работа со стрелочками.
Заранее спасибо за помощь.
#23
Отправлено 26 Декабрь 2012 - 10:41
Интересно это повышает конверсию хоть на сотую процента, удобство ведь допольнительное по идее?)
#24
Отправлено 26 Декабрь 2012 - 10:51
<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
#25
Отправлено 26 Декабрь 2012 - 11:29
Вот только поламалось немного все в категории при отображении товара таблицей.
Можете глянуть, откат не делал пока.
Как исправить поломку в отображении товара таблицей?
#26
Отправлено 26 Декабрь 2012 - 11:56
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&form%5Bgoods_from%5D=&form%5Bgoods_mod_id%5D=19375743" title="Положить «Батарейки Energizer Base LR6 AA FSB4 (пальчиковые) 1/96» в корзину">Купить</a>
#27
Отправлено 26 Декабрь 2012 - 12:08
Теперь по другому поломато)
Что-то не то.
#28
Отправлено 26 Декабрь 2012 - 12:08
#30
Отправлено 26 Декабрь 2012 - 14:43
В шаблоне Товара таблицей найдите код:
<a class="blgreen" onclick="$('#goodsListFormId19375743').submit(); return false;" href="/cart/add/?hash=981a7c&form%5Bgoods_from%5D=&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&form%5Bgoods_from%5D=&form%5Bgoods_mod_id%5D=19375743" title="Положить «Батарейки Energizer Base LR6 AA FSB4 (пальчиковые) 1/96» в корзину" style="position: absolute; margin-left: 78px;">Купить</a>
#31
Отправлено 27 Декабрь 2012 - 04:22
Цитата
miyako (26 Декабрь 2012 - 14:43) писал:
В шаблоне Товара таблицей найдите код:
<a class="blgreen" onclick="$('#goodsListFormId19375743').submit(); return false;" href="/cart/add/?hash=981a7c&form%5Bgoods_from%5D=&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&form%5Bgoods_from%5D=&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}&form%5Bgoods_from%5D={goods.GOODS_FROM}&form%5Bgoods_mod_id%5D={goods.MIN_PRICE_NOW_ID}" title="Положить «{goods.NAME}» в корзину">Купить сейчас</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>
Думаю в таком виде пойдет пока
#32
Отправлено 27 Декабрь 2012 - 08:13
Видать места не хватало между нижней стрелочкой и нижнем полем.
В таком виде норм.
Сообщение отредактировал odissei: 27 Декабрь 2012 - 08:15
#33
Отправлено 12 Январь 2013 - 14:00
miyako (20 Декабрь 2012 - 08:30) писал:
[/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;}
А для моего сайта какой код потребуется искать?
#34
Отправлено 12 Январь 2013 - 14:14
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">
#35
Отправлено 12 Январь 2013 - 15:10
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">
#36
Отправлено 13 Январь 2013 - 08:43
ogonek7777 (12 Январь 2013 - 15:10) писал:
В шаблонах Товар и Товары замените строчку кода:
Кол-во: <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; }
#37
Отправлено 13 Январь 2013 - 17:08
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?
Большое спасибо!
#38
Отправлено 14 Январь 2013 - 07:51
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
добавление ограничение на вводимого количества
#39
Отправлено 14 Январь 2013 - 13:18
#40
Отправлено 14 Январь 2013 - 13:41
ogonek7777 (14 Январь 2013 - 13:18) писал:
Найти код:
.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; }
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных