Оценок: 2

Опции товара 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
Оценок: 2

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

  1. Здравствуйте, хорошая идея, поможете с установкой? По стоимости договоримся.
    OPENCART.CMS Версия 2.1.0.2.2

    Геннадий 27 мая 2021, 08:35 0
    • Здравствуйте! Наверное лучше немного иначе, да и статью стоило бы уже переписать… напишите на vl@onenv.ru

      Владимир 27 мая 2021, 21:38 0
    • А на ОС 2.3 такая полезная вещь есть? Попробовал самостоятельно переделать — не получилось (((

      Сергей 14 июля 2019, 02:04 0
      • Добрый день. У меня ничего не вышло
        помогите пожалуйста оригинальный файл который лежит в папке темы магазина (не дефолтная) product.tpl на яндекс диске
        h ttps://yadi.sk/d/ub636I9UaGd46g

        Алексей 05 ноября 2018, 01:40 0
        • Здесь же не один файл меняется… остальные так же нужны, что бы видеть что именно не выходит. Через vqmod пробовали?
          Opencart 1.5?

          Владимир 05 ноября 2018, 20:14 0
        • Добрый день!
          Большое спасибо за полезное решение!

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

          Роман 31 июля 2016, 10:09 +1
          Надежный хостинг VPS серверов
          • Свои ISO образы
          • VDS с оплатой раз и навсегда
          • Аренда VDS на любой срок, с оплатой по дням
          • Большое разнообразие конфигураций
          • Дата-центры в ЕС и России
          + скидка 10%