OpenCart автоматическое изменение цены в зависимости от опции без vqmod

В OpenCart, по умолчанию есть такое понятие как «Опция», созданная для того чтобы вы один раз создали товар, а потом могли вносить похожие товары но с каким-то отличиями, не дублируя при этом товары.

К примеру вы продаете сахар. Вы можете сделать кучу товаров с разными объемами сахара, к примеру карточки товара:

  1. Сахар (упакова) 1 кг — 10$
  2. Сахар (мешок) 5 кг — 45$
  3. Сахар (мешок) 10 кг — 80$
  4. Сахар (мешок) 15 кг — 120$
  5. Сахар (мешок) 25 кг — 190$

Согласитесь это очень много работы которая толком и не нужна никому. Гораздо удобнее завести один раз товар просто «Сахар» и с помощь опций добавить дополнительные веса: 5, 10, 15, 25 кг и указать что товар по умолчанию это 1 кг. А если покупатель (лид) выбирает обьем 5 кг то ему надо заплатить 10$ + 35$, если обьем 10 кг то цена будет 10$+ 70$, если обьем 25 кг то надо заплатить 10$ + 180$.

Казалось бы все удобно и понятно, но за одним исключением. Потенциального покупателя вполне можно запутать этой добавочной стоимостью, и тем самым вы потеряете конверсию. Намного лучше будет если покупатель при выборе опции сразу увидит сколько ему надо заплатить.

Чтобы решить эту задачу есть два варианта. Первый и самый простой — с помощью плагина на базе VQMOD. Второй — более сложный руками прописать код. В этой статье мы рассмотрим оба варианта.

Автоматическое изменение цены в Opencart в зависимости от опции VQMOD

Чтобы воспользоваться самым простым способом вам изначально надо, чтобы стоял VQMOD. После чего скачайте файл по ссылке (протестированная мною версия) или более новую версию и загрузите файл по пути:

1
vqmod/xml

на этом все. Все что вам осталось это проверить как работает модуль.

Если у вас не идет скачивание файла, а он открывается, просто нажмите на ссылку правой кнопкой мышки и выберите «загрузить файл по ссылке» как показано на картинке снизу.

opsii-opencart-1

Автоматическое изменение цены в Opencart в зависимости от опции без VQMOD

Многие пользователи жалуются что VQMOD открывает уязвимости в интернет магазине, и CMS начинает сильно тормозить, поэтому специально для них, в этом разделе рассмотрим каким образом можно сделать тоже самое, но только своими силами. Итак, приступим.

  1. Прежде всего сделайте резервную копию вашего магазина, как файлов так и базы mySQL.
  2. Скопируйте файл product.tpl с хостинга к вам на компьютер. Он находиться по пути:
    1
    
    catalog/view/theme/ваша тема/template/product/product.tpl
  3. Найдите код:
    1
    
    <div id="content"><?php echo $content_top; ?>

    и после него вставтье

    1
    
    <div id="thisIsOriginal" style="visibility: hidden; height:0px;"><?php echo $price; ?></div>
  4. Найдите строчку
    1
    
    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)

    и поменяйте ее на

    1
    
    (<?php echo $option_value['price_prefix']; ?><span id="newPrice"><?php echo $option_value['price']; ?></span>)
  5. найдите строчку
    1
    2
    
    <?php if (!$special) { ?>
           <?php echo $price; ?>

    и поменяйте ее на

    1
    2
    
    <?php if (!$special) { ?>
    <span id="priceUpdate"><?php echo $price; ?></span>
  6. Все. С этим файлом закончили. Загрузите его назад на хостинг
  7. Скопируйте к вам на компьютер файл header.tpl который находится по пути:
    1
    
    catalog/view/theme/ваша тема/template/common/header.tpl
  8. найдите код
    1
    
    </head>
  9. Сразу перед ним, вставьте один из следующих кодов. Если у вас валюта рубль вставьте код:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    <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>

    Если у вас другая валюта, к примеру гривны, доллар или евро, вставьте код:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    
    <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>

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

  10. Загрузите измененный файл назад на хостинг и проверьте все ли у вас работает.

На этом все, но если у вас остались какие-то вопросы, напишите в комментариях, попробую вам помочь.

загрузка...
3 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *