twixed.ru huh… nothing interesting here

22Янв/154

Модуль `Size option` для OpenCart 2.0.1.1

Быстрым набегом отмечу здесь мой первый модуль для OpenCart 2.0: Size option.
В то время, как мне приходилось дорабатывать сайт под управлением OpenCart 1.5, я совсем не озадачивался использованием VQMod, и вносил изменения прямо в core файлы. Я знаю, что это плохая привычка, но тратить время на освоение этого патчера реального времени не хотелось. Сейчас же, когда я начал работу над очередным сайтом с нуля, я решил использовать последнюю версию OC, и делать это правильно.
Первой же задачей, которую OC не мог реализовать из коробки - ввод произвольных размеров продукта, и вычисление финальной стоимости от площади. Сперва я, конечно, методом проб и ошибок, вносил изменения прямо в файлы ядра, но, получив на каком-то этапе удовлетворяющий моим требованиям код, вернул их в начальное состояние, а все необходимые изменения выделил в модуль для OCMod.

Казалось бы, всё просто: пользователь вводит необходимые ему размеры продукта (высота и ширина), а OpenCart высчитывает получаемую площадь и соответствующую стоимость. Главной сложностью был список доступных типов опции. Он был намертво прибит к контроллерам и вьюшкам админки и фронт-енда. Пришлось расширять этот список, добавив новую опцию в раздел "Вводимые":

shot_01_new_option

После чего опции продуктов, созданные с новым типом "Size", становятся доступными для привязывания к продуктам, имея лишь один настраиваемый параметр - стоимость квадратного (метра, дюйма, фута):

shot_02_product_option

Соотвественно, этот параметр каким-то образом отображается и на странице продукта. Правда, на этой странице стоимость продукта не меняется, но под полями ввода указывается расчитанная стоимость за указанную площадь:

shot_03_product_page

Ну, и в самой корзине, после добавления продукта в оную, опция указана как и прочие, под наименованием, а расчитываемая стоимость этой опции влияет на конечную стоимость единицы продукта:

shot_04_shopping_cart

Стоит отметить несколько моментов:

  • локализация этим модулем практически не поддерживается, поэтому перед его загрузкой на сайт необходимо изменить текст в xml-файле модуля;
  • поддерживаемая версия OpenCart - 2.0.1.1, и на других модуль не тестировался;
  • по умолчанию модуль патчит тему `default`, для использования в кастомных темах, необходимо вотнуть в файл "/catalog/view/theme/{theme_name}/template/product/product.tpl" код, приведённый ниже;
  • ну, и, само собой, на уже изменённые (прямо или через расширения) файлы этот модуль может просто "не встать".

Страница модуля на сайте расщирений OpenCart: "Size" option type
Сам модуль, доступный для загрузки с этого сайта: opencart_option_type_size.ocmod.xml

Код для использования опции "Size" в кастомной теме (необходимо поместить его в цикл "foreach ($options as $option)"):

            <?php if ($option['type'] == 'size') { ?>
            <div class="form-group<?php echo ($option['required'] ? ' required' : ''); ?>">
              <!-- label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>"><?php echo $option['name']; ?></label -->
              <input type="hidden" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option['value']; ?>" placeholder="<?php echo $option['name']; ?>" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control" readonly="true" />
              <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>-length">Length (ft):</label>
              <input type="text" name="length_<?php echo $option['product_option_id']; ?>" value="1" placeholder="Length" id="input-option<?php echo $option['product_option_id']; ?>-length" class="form-control" />
              <label class="control-label" for="input-option<?php echo $option['product_option_id']; ?>-width">Width (ft):</label>
              <input type="text" name="width_<?php echo $option['product_option_id']; ?>" value="1" placeholder="Width" id="input-option<?php echo $option['product_option_id']; ?>-width" class="form-control" />
              <div id="total-option<?php echo $option['product_option_id']; ?>" style="font-weight:900;"></div>
            </div>
            <script type="text/javascript">
              function calculateSize<?php echo $option['product_option_id']; ?>(){
                var price = <?php echo $option['value']; ?>;
                var length = jQuery('#input-option<?php echo $option['product_option_id']; ?>-length').val();
                length = isNaN(parseFloat(length)) ? 1 : parseFloat(length);
                jQuery('#input-option<?php echo $option['product_option_id']; ?>-length').val(length)
                var width = jQuery('#input-option<?php echo $option['product_option_id']; ?>-width').val();
                width = isNaN(parseFloat(width)) ? 1 : parseFloat(width);
                jQuery('#input-option<?php echo $option['product_option_id']; ?>-width').val(width)
                var area = length * width;
                var total = area * price;
                if (!isNaN(parseFloat(total))) {
                  jQuery('#total-option<?php echo $option['product_option_id']; ?>').html('Price for ' + area + ' sq.ft. will be $' + total);
                } else {
                  jQuery('#total-option<?php echo $option['product_option_id']; ?>').html('');
                }
                jQuery('#input-option<?php echo $option['product_option_id']; ?>').val(length + 'x' + width);
              }
              jQuery('document').ready(function(){
                calculateSize<?php echo $option['product_option_id']; ?>();
                jQuery('#input-option<?php echo $option['product_option_id']; ?>-length').on('change',calculateSize<?php echo $option['product_option_id']; ?>);
                jQuery('#input-option<?php echo $option['product_option_id']; ?>-width').on('change',calculateSize<?php echo $option['product_option_id']; ?>);
              });
            </script>
            <?php } ?>

Post to Twitter Post to Digg Post to Facebook Post to Google Buzz Send Gmail Post to LinkedIn

Комментарии (4) Пинги (0)
  1. Вопрос, а зачем городить огород с опцией size если можно просто сделать две опции text, назвать их ширина и высота и скрипт повесить на них по onchange ?

    • Всё дело в том, что нужно не только отображать произведение в корзине на фронтенде, но и считать стоимость продукции и налог на бэкенде. В таком случае простого javascript onchange будет явно не достаточно. (;

  2. Hi,

    It does not work on my 2.0.1.1. It does not even show up in the «Type» menu of «Options».
    Is there additional settings to enable this?
    Thanx!


Leave a comment

Нет обратных ссылок на эту запись.