В предыдущих частях этого урока мы рассмотрели основные аспекты разработки карточки товара в OpenCart. Теперь настало время углубиться в более сложные элементы, которые могут значительно улучшить удобство использования и внешний вид страницы продукта.
Добавление вкладок на страницу продукта
Одним из распространенных способов структурирования информации на странице продукта является использование вкладок. Это позволяет разделить различные типы данных, такие как описание, характеристики, отзывы и другие, на отдельные секции, что облегчает навигацию для пользователей.
В OpenCart создание вкладок на странице продукта достаточно просто. Разработчику необходимо отредактировать файл product.tpl, расположенный в каталоге catalog/view/theme/default/template/product/. Внутри этого файла следует найти участок кода, отвечающий за отображение описания продукта, и добавить необходимые HTML-теги для создания вкладок.
Ниже приведен пример кода, который создает три вкладки: «Описание», «Характеристики» и «Отзывы»:
<ul class="nav nav-tabs"> <li class="active"><a href="#tab-description" data-toggle="tab">Описание</a></li> <li><a href="#tab-specification" data-toggle="tab">Характеристики</a></li> <li><a href="#tab-review" data-toggle="tab">Отзывы</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab-description"> <?php echo $description; ?> </div> <div class="tab-pane" id="tab-specification"> <?php if ($attribute_groups) { ?> <table class="table table-bordered"> <?php foreach ($attribute_groups as $attribute_group) { ?> <thead> <tr> <td colspan="2"><strong><?php echo $attribute_group['name']; ?></strong></td> </tr> </thead> <tbody> <?php foreach ($attribute_group['attribute'] as $attribute) { ?> <tr> <td><?php echo $attribute['name']; ?></td> <td><?php echo $attribute['text']; ?></td> </tr> <?php } ?> </tbody> <?php } ?> </table> <?php } ?> </div> <div class="tab-pane" id="tab-review"><?php echo $review; ?></div> </div> В этом коде создается неупорядоченный список (<ul>) с классом nav nav-tabs, который содержит элементы списка (<li>) для каждой вкладки. Внутри каждого элемента списка находится ссылка (<a>) с атрибутом data-toggle="tab" и href, указывающим на идентификатор (id) соответствующего содержимого вкладки.
Содержимое каждой вкладки помещается внутри элемента <div> с классом tab-pane и соответствующим идентификатором (id). Первая вкладка («Описание») имеет дополнительный класс active, что означает, что она будет отображаться по умолчанию при загрузке страницы.
Для вкладки «Характеристики» используется таблица (<table>), в которой перечисляются атрибуты продукта, полученные из базы данных OpenCart.
После добавления этого кода в файл product.tpl и обновления страницы в браузере, на странице продукта должны появиться вкладки, позволяющие пользователям переключаться между различными типами информации.
Добавление галереи изображений
Другим важным элементом, который часто встречается на страницах продуктов, является галерея изображений. Она позволяет пользователям просматривать несколько изображений товара, что дает им более полное представление о его внешнем виде и деталях.
В OpenCart создание галереи изображений также достаточно простое. Разработчику необходимо отредактировать файл product.tpl и найти участок кода, отвечающий за отображение основного изображения продукта. Обычно это выглядит следующим образом:
<div class="image"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" data-zoom-image="<?php echo $popup; ?>" /></div>Чтобы создать галерею изображений, необходимо добавить дополнительный код для отображения миниатюр изображений. Ниже приведен пример кода, который создает горизонтальную галерею миниатюр:
<?php echo $popup; ?>" /> </div> <div class="image-additional"> <?php if ($images) { ?> <ul class="thumbnails"> <?php foreach ($images as $image) { ?> <li><a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" data-image="<?php echo $image['popup']; ?>" data-zoom-image="<?php echo $image['popup']; ?>"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></li> <?php } ?> </ul> <?php } ?> </div> В этом коде добавлен новый <div> с классом image-additional, который содержит неупорядоченный список (<ul>) с классом thumbnails. Внутри этого списка находятся элементы списка (<li>), каждый из которых содержит ссылку (<a>) и миниатюру изображения (<img>).
Цикл <?php foreach ($images as $image) { ?> используется для перебора всех дополнительных изображений продукта, полученных из базы данных OpenCart. Для каждого изображения создается элемент списка с ссылкой и миниатюрой.
Атрибут data-image используется для указания URL полноразмерного изображения, а атрибут data-zoom-image используется для указания URL изображения, которое будет отображаться при наведении курсора на миниатюру (если используется функция увеличения изображения).
После добавления этого кода в файл product.tpl и обновления страницы в браузере, под основным изображением продукта должна появиться горизонтальная галерея миниатюр.
Добавление опций продукта
Многие интернет-магазины предлагают пользователям выбирать дополнительные опции для продуктов, такие как цвет, размер, комплектация и т.д. В OpenCart добавление опций продукта также довольно простое.
Разработчику необходимо отредактировать файл product.tpl и найти участок кода, отвечающий за отображение кнопки «В корзину». Обычно это выглядит следующим образом:
<div class="cart"> <div> <?php if ($price) { ?> <p> <span class="price-new"><?php echo $price; ?></span> <?php if ($price_old) { ?> <span class="price-old"><?php echo $price_old; ?></span> <?php } ?> </p> <?php } ?> <div class="product-qty"> <span class="qty"><?php echo $entry_qty; ?></span> <div class="qty-input"> <input type="text" name="quantity" size="2" value="<?php echo $minimum; ?>" /> <a class="qty-minus">-</a> <a class="qty-plus">+</a> </div> </div> <button type="button" id="button-cart" class="btn btn-primary btn-lg"><span><?php echo $button_cart; ?></span></button> </div> </div>Чтобы добавить опции продукта, необходимо вставить код для отображения этих опций перед кнопкой «В корзину». Ниже приведен пример кода, который выводит список опций с раскрывающимися списками:
<?php if ($options) { ?> <div class="options"> <h3><?php echo $text_option; ?></h3> <?php foreach ($options as $option) { ?> <?php if ($option['type'] == 'select') { ?> <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> <select name="option[<?php echo $option['product_option_id']; ?>]" id="input-option<?php echo $option['product_option_id']; ?>" class="form-control"> <option value=""><?php echo $text_select; ?></option> <?php foreach ($option['product_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']) { ?> (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>) <?php } ?> </option> <?php } ?> </select> </div> <?php } ?> <?php } ?> </div> <?php } ?> В этом коде используется условная конструкция <?php if ($options) { ?>, чтобы проверить, имеются ли опции для данного продукта.
Внутри цикла <?php foreach ($options as $option) { ?> проверяется тип каждой опции с помощью условия <?php if ($option['type'] == 'select') { ?>. Если тип опции — выпадающий список, то генерируется HTML-код для отображения этой опции.
Код содержит <div> с классом form-group, внутри которого находится элемент <label> для названия опции и элемент <select> для выпадающего списка значений опции.
Цикл <?php foreach ($option['product_option_value'] as $option_value) { ?> используется для перебора всех доступных значений опции. Для каждого значения создается элемент <option> внутри <select>. Если для значения опции задана дополнительная цена, она отображается в скобках рядом с названием значения.
Этот код следует вставить перед кнопкой «В корзину» в файле product.tpl. После обновления страницы в браузере, на странице продукта должны отображаться опции с выпадающими списками.
Для других типов опций, таких как радиокнопки, чекбоксы или ввод текста, также можно добавить соответствующий HTML-код внутри цикла <?php foreach ($options as $option) { ?>, используя условные конструкции для проверки типа опции ($option['type']).
Добавление блока «Также рекомендуем»
Еще одним популярным элементом на страницах продуктов является блок «Также рекомендуем», который предлагает пользователям похожие или дополняющие товары. Это может помочь увеличить средний чек и повысить удовлетворенность клиентов, предлагая им релевантные товары.
В OpenCart добавление такого блока достаточно простое. Разработчику необходимо отредактировать файл product.tpl и вставить следующий код в нужное место (например, после блока с описанием продукта):
<?php if ($related_products) { ?> <div class="related-products"> <h3>Также рекомендуем</h3> <div class="product-carousel"> <?php foreach ($related_products as $product) { ?> <div class="product-item"> <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div> <div class="caption"> <h4><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></h4> <p class="price"><?php echo $product['price']; ?></p> <div class="rating"> <?php for ($i = 1; $i <= 5; $i++) { ?> <?php if ($product['rating'] < $i) { ?> <span class="fa fa-stack"><i class="fa fa-star-o fa-stack-2x"></i></span> <?php } else { ?> <span class="fa fa-stack"><i class="fa fa-star fa-stack-2x"></i></span> <?php } ?> <?php } ?> </div> </div> </div> <?php } ?> </div> </div> <?php } ?> Этот код проверяет наличие связанных продуктов с помощью условия <?php if ($related_products) { ?>. Если связанные продукты есть, создается <div> с классом related-products, внутри которого находится заголовок «Также рекомендуем» и блок <div> с классом product-carousel.
Внутри product-carousel находится цикл <?php foreach ($related_products as $product) { ?>, который перебирает все связанные продукты и генерирует HTML-код для каждого из них. Каждый продукт отображается в <div> с классом product-item, который содержит изображение, название, цену и рейтинг продукта.
После добавления этого кода в файл product.tpl и обновления страницы в браузере, на странице продукта должен появиться блок «Также рекомендуем», содержащий карусель с похожими или дополняющими товарами.
Обратите внимание, что для корректного отображения этого блока может потребоваться дополнительное форматирование с помощью CSS-стилей, а также настройка JavaScript для работы карусели.
Заключение
В этой статье мы рассмотрели несколько важных элементов, которые могут значительно улучшить удобство использования и внешний вид страницы продукта в OpenCart. Добавление вкладок, галереи изображений, опций продукта и блока «Также рекомендуем» позволит предоставить пользователям более полную информацию о товаре и предложить им дополнительные релевантные продукты.
Хотя приведенные примеры кода могут потребовать некоторой настройки и стилизации, они дают хорошую основу для начала работы с этими элементами в вашем интернет-магазине на OpenCart.
