Opencart - Автоматическое Изменение Цены На Странице Товара (продукта) При Изменении Опции

Тема в разделе "Модули и дополнения", создана пользователем admin, 18 июн 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.377
    Симпатии:
    81.576
    Репутация:
    175
    03-14-opencart-auto-update-price-option-selection.jpg
    При выборе какой-либо опции из списка select option цена будет изменяться в зависимости от добавки к цене для выбранной опции. Изменение срабатывает без перезагрузки страницы по ajax, ну и при заказе в корзину поступает товар с обновлённой ценой, так как применяется опция(и), что вносит поправку на основную цену.

    Толковое объяснение как внедрить в магазин на OpenCart автоматическое изменение цены при выборе опции из выпадающего списка (selection option) составил Jack Davis. Публикуем этот метод с некоторыми правками для рублёвой валюты.

    После изучения скриптов движка магазина 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>