OpenCart: Автоматическое изменение цены на странице товара (продукта) при изменении опции
Толковое объяснение как внедрить в магазин на OpenCart автоматическое изменение цены при выборе опции из выпадающего списка (selection option) составил Jack Davis. Публикуем этот метод с некоторыми правками для рублёвой валюты.
Внимание! Есть очень удачное дополнение, о котором подсказал Евгений. Оно как раз решает все проблемы, обсуждаемые в комментариях к нашей статье. И мы думаем будет правильно если те, кому интересно стабильное дополнение (решение приводимое ниже - тоже стабильно и даже бесплатно, но работает только если опции в формате списка и не работает для checkbox и radiobutton!!!), купят его на офф. сайте - Option Price Update (Redux).
После изучения скриптов движка магазина Jack решил реализовать эту feature на Javascript, а не PHP/MySQL, так как намного легче использовать элементы после того, как они загрузятся на страницу, вместо того, чтобы пытаться умничать, чтобы генерировать эти элементы. Также здорово помогает делу интергрированность JQuery в Opencart, что экономит время на подключение скриптов.
Подготовка страницы товара вашего OpenCart-магазина для автоматического обновления цены.
Итак, для начала вставим несколько строк в шаблон страницы товаров, чтобы потом можно было обращаться к элементам с помощью JQuery функций. Просто откройте файл шаблона страницы товаров:
- catalog/view/theme/[YOUR THEME]/template/product/product.tpl
Вверху вставляем div:
<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?> <div id="content"><?php echo $content_top; ?> <div id="thisIsOriginal" style="visibility: hidden; height:0px;"><?php echo $price; ?></div> <div class="breadcrumb">
Это даст функции JQuery информацию об исходной цене до всяких изменений оной!
Дальше обрамим показываемую цену в тег Span. Примерно 68 строка в коде:
<select name="option[<?php echo $option['product_option_id']; ?>]"> <option value=""><?php echo $text_select; ?></option> <?php foreach ($option['option_value'] as $option_value) { ?> <option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> <?php if ($option_value['price']) { ?> //Note that the following line has Span tags around the price (<?php echo $option_value['price_prefix']; ?><span id="newPrice"><?php echo $option_value['price']; ?></span>) // <?php } ?> </option> <?php } ?> </select>
Также добавляем тег span у цены отображаемой (а также у специальной цены (красной)), в котором и будет подменяться цена при выборе опции из списка (цвет, размер и т.д.):
<?php if ($price) { ?> <div class="price"><?php echo $text_price; ?> <?php if (!$special) { ?> //Here is the first priceUpdate span tag <span id="priceUpdate"><?php echo $price; ?></span> // <?php } else { ?> //Here is the second <span class="price-old"><?php echo $price; ?></span> <span class="price-new"><span id="priceUpdate"><?php echo $special; ?></span></span> // <?php } ?> <br />
Теперь всё готово к написанию функции для автоматического обновления цены, когда посетитель выбрал какую-либо опцию, для которой другая цена должнеа быть.
Строим функцию автоматического изменения цены в зависимости от выбранной из списка опции.
Теперь мы начнём писать функцию JQuery, которая начнёт изменять цену в зависимости от выбираемой опции! Мы поместим скрипт в файл header OpenCart, поэтому открываем шаблон хедера:
- catalog/view/theme/[YOUR THEME]/template/common/header.tpl
Ищем область, где написан код Google Analytics (прям перед закрываюшим </head>):
<![endif]--> <?php echo $google_analytics; ?> //This is where the function will go </head>
Сперва надо определить начальный блок JQuery и собрать цену по умолчанию и показываемую валюту и поместить их в несколько переменных, которые будут передаваться, когда меняется какая-либо опция из выпадающего списка:
<script type="text/javascript"> $(document).ready(function() { //This triggers the code when the selection option box is changed $('.option').change(function() { //This gets the original price from the div box we put in earlier var OriginalPrice = $('#thisIsOriginal').text(); //This collects the currency by tearing the first character from the original price //var OriginalCurrency = OriginalPrice.substring(0, 1); // для $, евро, фунта и др. валют, символ которых указывается перед ценой var OriginalCurrency = OriginalPrice.substring(OriginalPrice.length-3, OriginalPrice.length); // OriginalPrice.substring(0, 1); // для нашего рубля, когда валюта указывается после цифры цены //This removes the currency from the original price so it is just a number //OriginalPrice = OriginalPrice.substring(1); // для рубля первый символ не нужно удалять //we now have two separate variables with our currency and the original price }); });
Теперь, у нас есть текущая валюта и цена и всё что осталось, это взять новое значение цены из опции!
///This gets the text displayed by the selection box var newPriceValue = $('.option :selected').text(); //This gets the position of the Opening & Closing brackets in the text var position1 = newPriceValue.indexOf("("); var position2 = newPriceValue.indexOf(")"); //This section selects everything between the brackets, skipping out the currency symbol //position1 = position1+3; // если есть символ впереди цифры position1 = position1+1 // для рубля не пропускаем символ валюты впереди его просто нет, пропускает только скобку в надбавке цены //var finalPriceValue = newPriceValue.substring(position1, position2); var finalPriceValue = newPriceValue.substring(position1, position2-4); // формат цены в опциях (+10,00 р.) - с конца отступаем 4 символа //This stops the price changing if the option doesn't trigger an increase if(newPriceValue.indexOf('.') == -1) { finalPriceValue = "0"; } //This adds together the original price and the extra price shown in the selection box and rounds them to two decimal places finalPriceValue = parseFloat(finalPriceValue) + parseFloat(OriginalPrice); finalPriceValue = finalPriceValue.toFixed(2); //And this final part updates the price on the screen to show the number we have just created //$('#priceUpdate').text(OriginalCurrency + finalPriceValue); $('#priceUpdate').text(finalPriceValue + OriginalCurrency); // валюта после цифры в случае нашего рубля
И всё! Это просто использование элементов на странице для автоматического обновления цены на странице товара по выбору опции, можно придумать другие способы, но этот работает прекрасно. Ниже целиком вся функция для тех, кто хочет скопировать, скопируйте и вставьте в <head>. Не забудьте добавить теги span и div в шаблон страницы продукта!
для валюты слева (перед ценой):
<script type="text/javascript"> $(document).ready(function() { $('.option').change(function() { var OriginalPrice = $('#thisIsOriginal').text(); var OriginalCurrency = OriginalPrice.substring(0, 1); OriginalPrice = OriginalPrice.substring(1); var newPriceValue = $('.option :selected').text(); var position1 = newPriceValue.indexOf("("); var position2 = newPriceValue.indexOf(")"); position1 = position1+3; var finalPriceValue = newPriceValue.substring(position1, position2); if(newPriceValue.indexOf('.') == -1) { finalPriceValue = "0"; } finalPriceValue = parseFloat(finalPriceValue) + parseFloat(OriginalPrice); finalPriceValue = finalPriceValue.toFixed(2); $('#priceUpdate').text(OriginalCurrency + finalPriceValue); }); }); </script>
Для рубля:
<script type="text/javascript"> $(document).ready(function() { $('.option').change(function() { var OriginalPrice = $('#thisIsOriginal').text(); var OriginalCurrency = OriginalPrice.substring(OriginalPrice.length-3, OriginalPrice.length);// OriginalPrice.substring(0, 1); //OriginalPrice = OriginalPrice.substring(1); var newPriceValue = $('.option :selected').text(); var position1 = newPriceValue.indexOf("("); var position2 = newPriceValue.indexOf(")"); position1 = position1+1; var finalPriceValue = newPriceValue.substring(position1, position2-4); if(newPriceValue.indexOf('.') == -1) { finalPriceValue = "0"; } finalPriceValue = parseFloat(finalPriceValue) + parseFloat(OriginalPrice); finalPriceValue = finalPriceValue.toFixed(2); $('#priceUpdate').text(finalPriceValue + OriginalCurrency); }); }); </script>
Update
Рабочий пример: Access Panel Shop !
almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.
Вы можете почитать все статьи от almix'а.
- 0 Opencart: Скидки для пользователей, надо указывать в колонке "количество" значение, отличное от нуля! (02.07.2014)
- 0 Как оперативно создать интернет-магазин на основе шаблона OpenCart? (05.06.2014)
- 0 Opencart: Установка мета тега Keywords для главной страницы через админку (05.12.2013)
- 0 Opencart: война модулей FilterPro mega, Intelligent Product Labels, AStickers - Ajax стикеры (24.10.2013)
- 0 Opencart: Модуль Filter Product OpenCart_v1.5.x: Как скрывать недоступные опции в фильтре (23.10.2013)
- 0 Ошибка xml файла Opencart для Яндекс Маркета: <b>Notice</b>: iconv(): Detected an illegal character in input string... (04.09.2013)
- 0 Opencart: Выводить изображения подкатегорий на странице категории. (11.07.2013)
- 0 Opencart: Вывод атрибутов вместо описания в категориях. (23.10.2013)
- 0 Opencart: Обновление движка с версии 1.4.9 до 1.5.1.3! (05.02.2015)
- 0 Opencart: Вставляем имя покупателя в модуле JV_QuickOrder - быстрый заказ товара (22.04.2013)
- 0 OpenCart: Fancybox (или colorbox)+"cloud-zoom" одновременно. Значок-ссылка поверх изображения товара на просмотр в полный вид (03.06.2013)
- 0 OpenCart: Делаем шаблон растягиваемым и добавляем отступы. (10.01.2014)
- Как включить SSL и сделать редирект на HTTPS. На примере Opencart 2 (03.12.2017)
- Opencart 2: Цена за квадратный метр, за штуку и др. (05.10.2017)
- Opencart 2: Cлайдер Owl Carousel в OcStore 2.1.0.2. Что делать, если слайдер не работает? (10.05.2017)
- Opencart 2: Добавляем новую позицию в макет для вывода модуля (27.04.2017)
- SEO оптимизация хлебных крошек breadcrumbs в Opencart 2 (27.04.2017)
- Opencart 2: Закладки без регистрации (Wishlist without registration) (26.04.2017)
- Opencart 2: сделать разные валюты в админке и на сайте (24.04.2017)
- Opencart 2: OCMOD замена нескольких строк (12.04.2017)
- Как установить расширение в Opencart 2 (27.04.2017)
- Загрузка файлов (картинок) по ajax через форму для Opencart (04.09.2016)
- Opencart: Как не показывать какой-либо товар в списке на странице производителей? (29.07.2015)
- Порядок баннеров в Opencart (15.05.2015)
- Устанавливаем ionCube Loader на MAMP за пару минут. (06.02.2015)
46 комментариев
Делал на 1.5.1.3 на русской ocStore 1.5.1.3!
Все действительно работает!
Нужны всего лишь элементарные знания кода, тогда все будет работать четко и правильно! ;)
Большое спасибо за статью, функция очень пригодная!
Пожалуйста, Simon. Рад, что пользуетесь. Можно ещё дописать код для radio и может checkbox, если будете дорабатывать, черканите.
edit 09.04.2012: ЕСТЬ ДОРАБОТАННОЕ ДОПОЛНЕНИЕ - см. начало этой статьи, там ссылка на модуль.
чуть изменил:
1) объединил варианты для рубля и не рубля;
2) учитывается знак опции.
Код сырой, но вроде робит правильней) единственное но: для иностранных валют (как то доллар, евро и т.д.), у которых есть официальное обозначение, в настройках надо выставить отображение символа валюты слева от стоимости, для рубля - справа.
Код:
<script type="text/javascript">
$(document).ready(function() {
$('.option').change(function() {
var OriginalPrice = $('#thisIsOriginal').text();
if (isNaN(parseInt(OriginalPrice.substring(0, 1))))
{
var OriginalCurrency = OriginalPrice.substring(0,1);
//alert(OriginalCurrency);
OriginalPrice = OriginalPrice.substring(1);
var newPriceValue = $('.option :selected').text();
var position1 = newPriceValue.indexOf("(");
var position2 = newPriceValue.indexOf(")");
var signFinalPriceValue=newPriceValue.substring(position1+1, position1+2);
position1 = position1+3;
var finalPriceValue = newPriceValue.substring(position1, position2);
if(finalPriceValue.indexOf(',') == -1)
{
finalPriceValue = "0";
}
if (signFinalPriceValue=="-")
finalPriceValue = parseFloat(-finalPriceValue.replace(",",".")) + parseFloat(OriginalPrice.replace(",","."));
else
finalPriceValue = parseFloat(finalPriceValue.replace(",",".")) + parseFloat(OriginalPrice.replace(",","."));
finalPriceValue = finalPriceValue.toFixed(2);
$('#priceUpdate').text(OriginalCurrency + finalPriceValue.replace(".",","));
}
else
{
var OriginalCurrency = OriginalPrice.substring(OriginalPrice.length-3, OriginalPrice.length);
OriginalPrice = OriginalPrice.substring();
var newPriceValue = $('.option :selected').text();
var position1 = newPriceValue.indexOf("(");
var position2 = newPriceValue.indexOf(")");
position1 = position1+1;
var finalPriceValue = newPriceValue.substring(position1, position2-4);
if(finalPriceValue.indexOf(',') == -1)
{
finalPriceValue = "0";
}
finalPriceValue = parseFloat(finalPriceValue.replace(",",".")) + parseFloat(OriginalPrice.replace(",","."));
finalPriceValue = finalPriceValue.toFixed(2);
$('#priceUpdate').text(finalPriceValue.replace(".",",") + OriginalCurrency);
}
});
});
</script>
пишет "Цена: NaN грн. "
Александр, у вас гривны, 3 символа ("грн"), из-за этого к переменным position нужно другие добавки прибавлять. Я-то для рубля делал, у него один символ "р".
Олег, значит, что-то забыли...
http://loco.ru/materials/205-opencart-auto-update-price-option-selection#c333
у меня тоже не получилось(
Вот изображение до
http://imagepost.ru/?v=dof_1.JPG
и после
http://imagepost.ru/images/p/os/posle_8.JPG
@ Евгений и все кто использует для опций не выпадающий список: вариант в статье пока работает только для выпадающего списка. Можно расширить скрипт, но я не силён в Javascript ((
Если кто-то подскажет, как получить выделенный текст через javascript, то доработаю для остальных случаев (загвоздка в том, что в этих случаях присутствует <label>):
я уже запутался, думаю истина где-то между
ногкодамии
Помогите!
Кто сделает на движке 1.5.2.1 и шаблоне Shoppica 1.0.12 ?
За $
vanya.od@gmail.com
кому не жалко хотя бы рублей 30 пишите отдам. (отдал бы бесплатно, но сам покупал на много дороже)
Демо Видео:http://screencast.com/t/KjehMtVX
для версий v1.4.7, v1.4.8, v1.4.8b, v1.4.9, v1.4.9.1, v1.4.9.2, v1.4.9.3, v1.4.9.4, v1.4.9.5, v1.5.0, v1.5.0.1, v1.5.0.2, v1.5.0.3, v1.5.0.4, v1.5.0.5, v1.5.1, v1.5.1.1, v1.4.9.6, v1.5.1.2, v1.5.1.3, v1.5.2, v1.5.2.1
Сайт: http://www.mvdoors.ru/mezh_komnatn_dveri/dveri_laminirovannye/1g1.html
"р." (2 симв.) - вам для "руб." (4 симв)
(+10,00 р.) против вашего (+10,00 руб.)
поэтому у вас изменится position2
вот как-то так
но если планируете использовать для всех видов опций или даже когда несколько опций у одного товара и все вдияют на цену, то лучше всё же купить тот модуль. посмотрите - http://test.studio-textile.ru/postelnoe-belye/energetic-standard
спасибо большое! попробую чуть позже. что из этого получится сразу же отпишусь.
я подобный вопрос написал источнику =) посмотрим что он скажет.
а сколько стоит модуль ссылку на который мне дали ?
еще раз спасибо
Я готов его купить ) Сколько стоит и к кому обратиться.
Подсчет работает правильно но возврат на начальную цену не происходит. Метод тыка не подошел (
У источника в демо считает все правильно и осуществляется возврат на начальную цену)
магия )
У меня продукция как раз как на сайте на который вы мне дали ссылку. Подушки и одеяла.
Позиция подушка. Изначально у меня стоит цена допустим 500 руб а размер ее 50 х 70 см.
Выпадающей список выглядит у меня так:
(выберите размер...)
1. 50 х 70 см.
2. 70 х 70 см (+ 500)
Нажимаем на номер 2 подсчет происходит все правильно и рубли отображаются как надо (руб.) НО когда выбираем на номер 1. 50 х 70 см. то цена вместо 500 руб превращается в "NaN"
В демо источника это происходит нормально (
Спасибо вам большое за помощь. Оказывается, что и в "выберите вариант..." надо точки убирать=) все работает, все считает . Еще раз спасибо.
Не столь важно но спрошу, вы случайно не знаете как убрать копейки у цен в выпадающим списке? а то у меня основная цена без копеек. хочется что бы красиво =)
@Юра - В админке: Система --> Локализация --> Валюты --> Выбранная валюта --> Количество знаков после запятой - поставьте 0.
@Александр - по ссылке вообще не меняется цена от опции.
Немного переделал скрипт , т.к. столкнулся с проблемой что в опции, в скобках по мимо цены бывают другие параметры , а так как в скрипте выбор цены как раз по скобкам , пришлось сделать выбор по знаку (+ или -) , который всегда ставиться перед ценой
Модуль подходит ко всем версиям Opencart, как 1.4.х так и 1.5.х,
посмотрел контроллер php, ничего сложного нету, все оригинально и просто
если нужна помощь в установке обращайтесь
gdemonm@gmail.com
масло синтетическое 1л-40грн
масло синтетическое 4л-160грн
сейчас основная цена товара 40грн если покупаешь 1л то в корзину падает 40+40=80грн
если покупаешь 4л то в корзину падает 40+160=200грн
Очень нужно подскажите кто знает где править???
дополню дальше в админке товаров если ставишь в опциях 1л "0" то в выпадающем списке видно -1л и при этом основная цена на сайте (та что жирным отражаестя) тоже 0,00грн, но при покупке 1л в корзину падает правильно 40грн. т.е. плюсует основную цену из вкладки "Данные"
2,Соответственно и с 4л -120 (ставлю в админке) на сайте тоже в выпадающем списке видно 120 ( а должо быть 160) и в корзину добавляет 160грн.
Помогите не знаю что дальше делать
Пётр, вы указываете цену основную на вкладке Данные -> Цена (сколько стоит 1л), потом создаёте опции, для основной опции (1л), а её создать надо, оставляете надбавку 0 руб., а остальные пишете на сколько цена увеличилась, либо уменьшилась (плюсик или минусик).
Чтобы цена отображалась, а не надбавка, попробуйте в виде продукта прописать на php расчёт: переменная "цена" + переменная "добавка", в том месте где сейчас написана только добавка. Сам не делал так, но так как и цена, и добавка там присутствуют как переменные, то простое сложение должно сработать.
здравствуйте, спасибо за ответ, но дело в том что если я прописываю в опциях 1л пробел, 4л 120грн, 20л 760грн то в выпадающем списке клиент видит соответственно : (что уже не правильно)
1л,
4л(120грн),
20л(760грн)
при этом основная цена при выборе из выпадающего списка автоматом меняется на
0,00грн
160,00грн
760грн,00
а при нажатии кнопки купить в корзину падает правильно: 0+40=40грн
120+40=160грн
760+40=800грн
где-то в функции сумирует осн. цену (вкладка "основное") + опция выпадающий список
либо минусует (пробовал тоже) где отменить сумирование омн цены с опциями???
Здравствуйте!
Не сильна в коде. Сделала как поняла.
Получаю в цене товара на странице сайта:
Цена: //Here is the first priceUpdate span tag 0.00 // 0.00
У меня по умолчанию пока стоит 0.00 руб.
Перечень опций каждое значение опции прибавляется к предыдущему (набор мебели)
В идеале хочется чтобы цена менялась при выборе каждого значения опции. Подскажите как это лучше сделать..плиз..Опен Карт 1.5.3
Здравствуйте!
У вас нет случаем данной модификации для opencart версии 1.5.4.1?
Все сделал, работает с стандартной ценой, но как только ставишь акцию, вроде и скидка должны быть в читает все равно по той цене которая основная, и в корзину так отправляет.
Версия 1.5.4.1
Помогите разобраться в чем суть
Скрипт вставил вот этот
Всё отлично. Заработало. Спасибо автору!!!!
Только цена во всем магазине отображается с разделением разрядов (настроил в админке), а в этом модуле отображается без разделения разрядов (тысяч).
Нужно вместо 143000, отображать 143 000 (с пробелом). Где это можно настроить?