Опции товара opencart: checkbox как картинка, выводим в виде карусели (+ vqmod)

Вносим изменения в отображение такого варианта вывода опций товара, как чекбокс. Отобразим в виде карусели, чекбокс заменим изображением опции. Для самых ленивых вконце xml-файл для vqmod :)

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

А вот так будет выглядеть после изменений (картинки взяты случайные, зеленым выделены отмеченные):

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

Учитывая, что карусель в опенкарте уже есть, каких-либо дополнительных файлов не понадобится. Необходимо только указать пути к таблице стилей и скрипту карусели для страницы товара.

1. Добавляем css и js в контроллер товара. Открываем "/catalog/controller/product/product.php" и в public function index (где-нибудь после 230 строки.. там видно будет) добавляем следующее:

$this->document->addScript('catalog/view/javascript/jquery/jquery.jcarousel.min.js');
$this->document->addStyle('catalog/view/theme/default/stylesheet/carousel.css');

2. Теперь осталось внести изменения в шаблон. Открываем "/catalog/view/theme/default/template/product/product.tpl"

2.1. Находим (строки 123-131 по умолчанию):

<?php foreach ($option['option_value'] as $option_value) { ?>
    <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
    <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
    <?php if ($option_value['price']) { ?>
        (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
    <?php } ?>
    </label>
    <br />
<?php } ?>

И заменяем следующим (добавил комментарии внутри):

<!--СТИЛИ, можно перенести в css файл-->
<style>input[type="checkbox"] {
    display:none;
}
input[type="checkbox"] + label.imaga {
    display: block; width: 50px; height: 50px; vertical-align: middle; cursor: pointer; margin: 5px auto; padding: 0px 1.5px; border: 3px solid #fff;
}
input[type="checkbox"]:checked + label.imaga {border: 3px solid green;}
</style>
<!--Блок карусели-->
<div id="carousel-op">
    <ul class="jcarousel-skin-opencart">
    <?php foreach ($option['option_value'] as $option_value) { ?>
        <li class="optionimage">
            <!--Чекбокс, будет скрыт-->
            <input type="checkbox" name="option[<?php echo $option['product_option_id']; ?>][]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" />
            <!--Выведем label, который будет отображен вместо чекбокса. Для отображения картинки зададим ее как фон-->
            <label class="imaga" style="background-image:url(<?php echo $option_value['image']; ?>);" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"></label>
            <!--Название опции и цена-->
            <label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
                <?php if ($option_value['price']) { ?>
                    (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                <?php } ?>
            </label>
        </li>
    <?php } ?>
    </ul>
</div>

2.2. Осталось добавить небольшой скрипт в конец файла (после <?php echo $content_bottom; ?></div> - где то после 350й строки):

<script type="text/javascript">
    $('#carousel-op ul').jcarousel({
        vertical: false,
        <!--Количество одновременно отображаемых элементов-->
        visible: 3,
        <!--Сколько пролистывать-->
        scroll: 2,
        auto: 0,
        animation: "slow",
    });
</script>

Вот и все :)