В процессе работы над последним магазином (wordpress + woocommerce)
столкнулась с пожеланием заказчика сделать выбор количества товара с
использованием кнопок “плюс” и “минус”. Что же, заказчик хочет, надо
делать. Итак, для реализации желаемого, воспользовалась вот этим методом, с использованием своих классов и стилей.
Давайте же попробуем придать полю “Количество” немного иной вид и функционал и в магазине на OpenCart – добавим ему кнопки “плюс и минус”. По умолчанию, данное поле – простой input, в который вводим количество с помощью клавиатуры, нет ни стрелочек, ни плюсов с минусами, ни выпадающего списка с вариантами количества. В общем, простое поле для ручного ввода количества.
Для работы нам потребуются следующие файлы шаблона:
catalog/view/theme/имя-шаблона/template/common/header.tpl
catalog/view/theme/имя-шаблона/template/product/product.tpl
catalog/view/theme/имя-шаблона/stylesheet/stylesheet.css
1. Открываем файл catalog/view/theme/имя-шаблона/template/product/product.tpl и находим строки с выводом поля для ввода кол-ва, добавления в закладки и сравнения, с кодом кнопки “Купить”:
и меняем его на
Привожу весь код целиком для удобства правки, в действительности же, меняется всего одна строка
на
Так что, если найти весь приведенный код не удается (например, используете сторонний шаблон), то ищите искомую строку.
Главное, подходить внимательно к правке кода, тем более если вы с ним не так часто работаете. Перепроверяйте свои действия – лишняя скобка, случайно удаленный закрывающий тег и т.д. могут привести к ошибкам.
2. Открываем файл catalog/view/theme/имя-шаблона/template/common/header.tpl и подключаем скрипт для работы добавленных кнопок “+ и -“, перед закрывающим тегом </head>:
При этом не забудьте сменить классы в скрипте (.quant, .my_minus,
.my_plus), если вы изменили их на свои в product.tpl. Если первый код
размещали без изменений, то и в скрипте ничего менять не надо.
3. Открываем файл со стилями – catalog/view/theme/имя-шаблона/stylesheet/stylesheet.css и добавляем нашему инпуту нужные стили. В используемом мною шаблоне я задала следующие стили:
В последнем блоке добавленных стилей (.my_minus, .my_plus) Вы можете изменить цвет кнопок, высоту поля, закругленность углов.
В итоге, в магазине заказчика на WordPress, поле количества приобрело нужный вид
На OpenCart (все действия производила на версии 1.5.6.4, но версия не столь важна, важен сам принцип) получилась следующая картина
Естественно, стандартного inputa для ввода количества вполне достаточно, но не редко же хочется чего-то эдакого, как-то да выделить свой магазин. В общем, кому идея пришлась по душе, дерзайте и не забудьте поделиться идеей с другими – комментарии и лайки приветствуются :)
Давайте же попробуем придать полю “Количество” немного иной вид и функционал и в магазине на OpenCart – добавим ему кнопки “плюс и минус”. По умолчанию, данное поле – простой input, в который вводим количество с помощью клавиатуры, нет ни стрелочек, ни плюсов с минусами, ни выпадающего списка с вариантами количества. В общем, простое поле для ручного ввода количества.
Для работы нам потребуются следующие файлы шаблона:
catalog/view/theme/имя-шаблона/template/common/header.tpl
catalog/view/theme/имя-шаблона/template/product/product.tpl
catalog/view/theme/имя-шаблона/stylesheet/stylesheet.css
1. Открываем файл catalog/view/theme/имя-шаблона/template/product/product.tpl и находим строки с выводом поля для ввода кол-ва, добавления в закладки и сравнения, с кодом кнопки “Купить”:
|
1
2
3
4
5
6
7
8
9
|
<div><?php echo $text_qty; ?>
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
<input type="button" value="<?php echo $button_cart; ?>" id="button-cart" class="button" />
<span> <?php echo $text_or; ?> </span>
<span class="links"><a onclick="addToWishList('<?php echo $product_id; ?>');"><?php echo $button_wishlist; ?></a><br />
<a onclick="addToCompare('<?php echo $product_id; ?>');"><?php echo $button_compare; ?></a></span>
</div>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<div><?php //echo $text_qty; ?>
<div class="my_quantity">
<span class="my_minus">-</span>
<input type="text" name="quantity" class="quant" value="1" size="5"/>
<span class="my_plus">+</span>
</div>
<input type="hidden" name="product_id" size="2" value="<?php echo $product_id; ?>" />
<input type="button" value="<?php echo $button_cart; ?>" id="button-cart" class="button" />
<span> <?php echo $text_or; ?> </span>
<span class="links"><a onclick="addToWishList('<?php echo $product_id; ?>');"><?php echo $button_wishlist; ?></a><br />
<a onclick="addToCompare('<?php echo $product_id; ?>');"><?php echo $button_compare; ?></a></span>
</div>
|
Привожу весь код целиком для удобства правки, в действительности же, меняется всего одна строка
|
1
|
<input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" />
|
на
|
1
2
3
4
5
|
<div class="my_quantity">
<span class="my_minus">-</span>
<input type="text" name="quantity" class="quant" value="1" size="5"/>
<span class="my_plus">+</span>
</div>
|
Главное, подходить внимательно к правке кода, тем более если вы с ним не так часто работаете. Перепроверяйте свои действия – лишняя скобка, случайно удаленный закрывающий тег и т.д. могут привести к ошибкам.
2. Открываем файл catalog/view/theme/имя-шаблона/template/common/header.tpl и подключаем скрипт для работы добавленных кнопок “+ и -“, перед закрывающим тегом </head>:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script type="text/javascript" >
$(document).ready(function() {
$('.my_minus').click(function () {
var $input = $(this).parent().find('.quant');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.my_plus').click(function () {
var $input = $(this).parent().find('.quant');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
});
</script>
|
3. Открываем файл со стилями – catalog/view/theme/имя-шаблона/stylesheet/stylesheet.css и добавляем нашему инпуту нужные стили. В используемом мною шаблоне я задала следующие стили:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
.my_quantity {
margin: 0 20px 0 0 !important; */
-moz-border-radius: 3px !important;
-webkit-border-radius: 3px !important;
border-radius: 3px !important;
width: 100px!important;
float: left;
border: 1px solid #E0E0E0 !important;
padding: 2px 0 2px 7px;
}
.quant {
background: none !important;
border: 0px solid #E0E0E0 !important;
border-left: medium none;
border-right: medium none;
display: inline;
height: 15px;
line-height: 21px;
margin: 0;
padding: 0 5px;
text-align: center;
vertical-align: middle;
width: 42px;
}
.my_minus {
padding: 0px 7px 1px 8px;
}
.my_plus {
padding: 0px 6px 1px 6px;
}
.my_minus, .my_plus {
position: relative;
display: inline;
height: 21px;
width: 21px;
line-height: 18px;
margin: 0;
vertical-align: middle;
border: none;
box-shadow: none;
font-weight: normal;
cursor: pointer;
-webkit-border-radius: 11px !important;
-moz-border-radius: 11px !important;
-ms-border-radius: 11px !important;
-o-border-radius: 11px !important;
border-radius: 11px !important;
background: #388BBE;
color: #fff !important;
}
|
В последнем блоке добавленных стилей (.my_minus, .my_plus) Вы можете изменить цвет кнопок, высоту поля, закругленность углов.
В итоге, в магазине заказчика на WordPress, поле количества приобрело нужный вид
На OpenCart (все действия производила на версии 1.5.6.4, но версия не столь важна, важен сам принцип) получилась следующая картина
Естественно, стандартного inputa для ввода количества вполне достаточно, но не редко же хочется чего-то эдакого, как-то да выделить свой магазин. В общем, кому идея пришлась по душе, дерзайте и не забудьте поделиться идеей с другими – комментарии и лайки приветствуются :)
Немає коментарів:
Дописати коментар