Динамическая цена товара в OpenCart

Что это?

Очень часто, меня просят сделать динамическую цену на товар. Это означает, что когда пользователь выбирает те или иные опции к товару, его цена должна динамично изменяться, т.е. сразу. Например, мы выбираем опцию “Подсветка (+1500 руб)” и цена товара изменяется (стрелка 2).

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

Если вам нужна динамическая цена,

вам придется искать модули под вашу версию OpenCart
скорее, всего устанавливать vQmod , т.к. в последнее время модули его требуют
разбираться с настройками модуля.

А зачем? Если это можно сделать с помощью нескольких строчек кода на jQuery. Когда ваш проект “не горит”, рекомендую работать “чистым лезвием”, а не раздувать систему устанавливая модули на каждую мелочь.

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

Откроем шаблон представления “catalog\view\theme\default\template\product\product.tpl“, отвечающий за страницу с описанием товара.

Если мы используем опции типа radio, select или image, т.е. те опции, где выбор осуществляется по принципу “выбирается один из множества”.

То поступаем следующим образом, отыскиваем в коде следующий IF

<?php if ($option['type'] == 'radio') { ?>
  ...
  ...
<?php } ?>

P.S. если вам нужен select или image, делайте все по аналогии, только вместо if с $option['type'] == ‘radio’ ищите if с $option['type'] == ‘select‘ или c ‘image’.

В нем находим тэг input

<input type="radio" ... />

Добавляем в тэг input новый атрибут price.

<input price="<?php echo $option_value['price']; ?>" type="radio" ... />

P.S. многоточием я пометил все то, что идет после атрибута radio, удалять это не надо.

И самое главное, добавляем к тэгу input обработчик события OnClick, должно получится так:

<input price="<?php echo $option_value['price']; ?>" type="radio" ...

  onclick="
	//----- меняем цену товара в зависимости от цены выбранной опции ------

       length_trash=4; //длина отрезаемого куска "руб."

       if (typeof(price_select_old) == 'undefined') {
         price_select_old=0; //если переменная не объявлена, объявим её, переменная нужна для фиксации цены выбранной опции, что-бы было можно "откатиться назад" при выборе другой опции
       }										  											

       //узнаем текущую цену
       price_current_old=$('span.price-old').text();
       price_current_now=$('span.price-new').text();
       price_current_old=price_current_old.substring(0,price_current_old.length-length_trash);
       price_current_now=price_current_now.substring(0,price_current_now.length-length_trash);	
       //конец узнаем текущую цену

       //узнаем цену выбранной опции
       price_select=$(this).attr('price');
       price_select=price_select.substring(0,price_select.length-length_trash); 
       //конец узнаем цену выбранной опции

       //меняем цену на товар
       $('span.price-new').text(parseFloat(price_current_now)-parseFloat(price_select_old)+parseFloat(price_select)+' руб.');
       $('span.price-old').text(parseFloat(price_current_old)-parseFloat(price_select_old)+parseFloat(price_select)+' руб.');
       price_select_old=parseFloat(price_select); // фиксируем стоимость выбранной опции, т.к. при след. выборе опции ее нужно отнять, что-бы вернуть прежнюю цену товара
       //конец меняем цену на товар

   //------- конец меняем цену товара в зависимости от выбранной опции ----------
       " 
/>

Вот и все, теперь данная опция при выборе будет динамично изменять стоимость товара на странице.

Для опций типа checkbox, все также, находим input, добавляем также атрибут price, но обработчик события OnClik будет немного другой:

<input price="<?php echo $option_value['price']; ?>" type="checkbox" ...

   onclick="														  
	//----- меняем цену товара в зависимости от цены выбранной опции ------

       length_trash=4; //длина отрезаемого куска "руб."

       //узнаем текущую цену
       price_current_old=$('span.price-old').text();
       price_current_now=$('span.price-new').text();									  
       price_current_old=price_current_old.substring(0,price_current_old.length-length_trash);
       price_current_now=price_current_now.substring(0,price_current_now.length-length_trash);	
       //конец узнаем текущую цену

       //узнаем цену выбранного габарита
       price_select=$(this).attr('price');
       price_select=price_select.substring(0,price_select.length-length_trash); 
       //конец узнаем цену выбранного габарита

       //меняем цену на товар
       if ($(this).prop('checked')) {
          $('span.price-new').text(parseFloat(price_current_now)+parseFloat(price_select)+' руб.');
          $('span.price-old').text(parseFloat(price_current_old)+parseFloat(price_select)+' руб.');
       } else {
          $('span.price-new').text(parseFloat(price_current_now)-parseFloat(price_select)+' руб.');
          $('span.price-old').text(parseFloat(price_current_old)-parseFloat(price_select)+' руб.');											
       };
       //конец меняем цену на товар

   //----- конец меняем цену товара в зависимости от цены выбранной опции ------										  	  
		  "
/>

Единственное, что вам может понадобиться регулировать, так это параметр

length_trash=4; //длина отрезаемого куска "руб."

Он отвечает, за длину которую нужно отрезать от стоимости товара, что-бы получить значение-цифру в чистом виду. Значение “4” подходит для рублевой валюты – “руб.“, для любой другой вы можете настроить сами.