Опции товара 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>

Вот и все :)

Скачать VQMOD

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

Комментарии (1)

  1. Роман 31 июля 2016, 10:09
    0 #

    Добрый день!
    Большое спасибо за полезное решение!

    Хотелось бы уточнить. Возможно ли сделать данное решение не для checkboxа, а для radio кнопок? И если можно, что нужно сделать для этого?
    Спасибо большое!