В этом посте мы расскажем вам о трех способах, которые с легкостью помогут вам изменить карточку товара:
1. Добавление описания для опции
2. Добавление количества на складе для опций продукта
3. Удаление цены в опциях
Предложенная реализация придаст вашей странице продукта более четкий, информативный и аккуратный вид, который, несомненно, произведет положительное впечатление на ваших клиентов.
Добавление описания для опции
Добавление описания к опциям продукта является хорошим способом для того, чтобы дать своим клиентам четкое представление о различных видах продукции, которую может предложить ваш интернет-магазин. Обеспечение клиентов информацией — это всегда хорошая идея, потому что это даст им более глубокое понимание того, что ожидать, когда они закажут вашу продукцию. Это, с другой стороны, приведет к увеличению доверия и уверенности в вашем магазине.
Ниже мы покажем вам, как можно реализовать эту функцию в простой и быстрой форме.
Создание OCMod файла
Процедура начинается с создания ocmod файла, используя любой текстовый редактор. Сохраните файл как namebyyourchoice.ocmod.xml и не забывайте, что расширение ocmod.xml является обязательным.
<modification> <name>Add description to product options</name> <version>1.0</version> <link></link> <author></author> <code>add_description_to_product_options</code> <file path="admin/language/*/catalog/option.php"> <operation> <search><![CDATA[$_['entry_sort_order'] = 'Sort Order';]]></search> <add position="after"><![CDATA[$_['entry_description'] = 'Description:';]]></add> </operation> </file> <file path="admin/controller/catalog/option.php"> <operation> <search><![CDATA[$data['entry_sort_order'] = $this->language->get('entry_sort_order');]]></search> <add position="after"><![CDATA[ $data['entry_description'] = $this->language->get('entry_description'); ]]></add> </operation> <operation> <search><![CDATA[public function index() {]]></search> <add position="after"><![CDATA[ $query = $this->db->query("DESC " . DB_PREFIX . "option_value_description description"); if (!$query->num_rows) { $this->db->query("ALTER TABLE " . DB_PREFIX . "option_value_description ADD description TEXT CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL"); } ]]></add> </operation> </file> <file path="admin/model/catalog/option.php"> <operation> <search><![CDATA[ $this->db->query("INSERT INTO " . DB_PREFIX . "option_value_description SET option_value_id = '" . (int)$option_value_id . "', language_id = '" . (int)$language_id . "', option_id = '" . (int)$option_id . "', name = '" . $this->db->escape($option_value_description['name']) . "'"); ]]></search> <add position="replace"><![CDATA[ $this->db->query("INSERT INTO " . DB_PREFIX . "option_value_description SET option_value_id = '" . (int)$option_value_id . "', language_id = '" . (int)$language_id . "', option_id = '" . (int)$option_id . "', name = '" . $this->db->escape($option_value_description['name']) . "', description = '" . $this->db->escape($option_value_description['description']) . "'"); ]]></add> </operation> <operation> <search><![CDATA[ $option_value_description_data[$option_value_description['language_id']] = array('name' => $option_value_description['name']); ]]></search> <add position="replace"><![CDATA[ $option_value_description_data[$option_value_description['language_id']] = array('name' => $option_value_description['name'], 'description' => $option_value_description['description']); ]]></add> </operation> </file> <file path="admin/view/template/catalog/option_form.tpl"> <operation> <search><![CDATA[ <label class="col-sm-2 control-label" for="input-sort-order"><?php echo $entry_sort_order; ?></label> ]]></search> <add position="before"><![CDATA[ <label class="col-sm-2 control-label" for="input-sort-order"><?php echo $entry_description; ?></label> ]]></add> </operation> <operation> <search><![CDATA[ <td colspan="3"></td> ]]></search> <add position="replace"><![CDATA[ <td colspan="4"></td> ]]></add> </operation> <operation> <search><![CDATA[ <td class="text-left required"><?php echo $entry_option_value; ?></td> ]]></search> <add position="after"><![CDATA[ <td class="text-left">Option Value Description</td> ]]></add> </operation> <operation> <search><![CDATA[ <td class="text-left required"><?php echo $entry_option_value; ?></td> ]]></search> <add position="replace"><![CDATA[ <td class="text-left required" style="width:30%;"><?php echo $entry_option_value; ?></td> ]]></add> </operation> <operation> <search><![CDATA[ <?php echo $footer; ?> ]]></search> <add position="after"><![CDATA[ <script type="text/javascript"> <?php foreach ($languages as $language) { ?> $("#description-<?php echo $option_value_row; ?>-<?php echo $language['language_id']; ?>").summernote({height: 100}); <?php } ?> </script> ]]></add> </operation> <operation> <search><![CDATA[ <td class="text-left"><a href="" id="thumb-image<?php echo $option_value_row; ?>" data-toggle="image" class="img-thumbnail"><img src="<?php echo $option_value['thumb']; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" /></a> ]]></search> <add position="before"><![CDATA[ <!--ProductOption Description Start--> <td class="text-left"> <div class="tabbable"> <div class="tab-navigation"> <ul class="nav nav-tabs mainMenuTabs"> <?php $class="active"; foreach ($languages as $language) { ?> <li class="<?php echo $class; ?>"><a href="#tab-<?php echo $language['code']; ?>" data-toggle="tab"><img src="view/image/flags/<?php echo $language['image']; ?>"/></a></li> <?php $class="";}?> </ul> </div> <div class="tab-content"> <?php $class=" active"; foreach ($languages as $language) { ?> <div id="tab-<?php echo $language['code']; ?>" language-id="<?php echo $language['language_id']; ?>" class="row-fluid tab-pane<?php echo $class; ?> language"><div> <textarea language-id="<?php echo $language['language_id']; ?>" name="option_value[<?php echo $option_value_row; ?>][option_value_description][<?php echo $language['language_id']; ?>][description]" id="description-<?php echo $option_value_row; ?>-<?php echo $language['language_id']; ?>"><?php echo isset($option_value['option_value_description'][$language['language_id']]) ? $option_value['option_value_description'][$language['language_id']]['description'] : ''; ?></textarea> <?php $class="";} ?> </div> </div> </td> <script type="text/javascript"> <?php foreach ($languages as $language) { ?> $("#description-<?php echo $option_value_row; ?>-<?php echo $language['language_id']; ?>").summernote({height: 100}); <?php } ?> </script> <!--ProductOption Description End--> ]]></add> </operation> <operation> <search><![CDATA[ html += ' <td class="text-left"><a href="" id="thumb-image' + option_value_row + '" data-toggle="image" class="img-thumbnail"><img src="<?php echo $placeholder; ?>" alt="" title="" data-placeholder="<?php echo $placeholder; ?>" /></a><input type="hidden" name="option_value[' + option_value_row + '][image]" value="" id="input-image' + option_value_row + '" /></td>'; ]]></search> <add position="before"><![CDATA[ html += '<td class="text-left">'; html += ' <div class="tabbable">'; html += ' <div class="tab-navigation">'; html += ' <ul class="nav nav-tabs mainMenuTabs">'; <?php $class="active"; foreach ($languages as $language) { ?> html += ' <li class="<?php echo $class; ?>"><a href="#tab-<?php echo $language['code']; ?>" data-toggle="tab"><img src="view/image/flags/<?php echo $language['image']; ?>"/></a></li>'; <?php $class="";}?> html += ' </ul>'; html += ' </div>'; html += ' <div class="tab-content">' <?php $class="active"; foreach ($languages as $language) { ?> html += ' <div id="tab-<?php echo $language['code']; ?>" language-id="<?php echo $language['language_id']; ?>" class="row-fluid tab-pane<?php echo $class; ?> language"><div>'; html += ' <textarea language-id="<?php echo $language['language_id']; ?>" name="option_value[<?php echo $option_value_row; ?>][option_value_description][<?php echo $language['language_id']; ?>][description]" id="description-<?php echo $option_value_row; ?>-<?php echo $language['language_id']; ?>"><?php echo isset($option_value['option_value_description'][$language['language_id']]) ? $option_value['option_value_description'][$language['language_id']]['description'] : ''; ?></textarea>'; <?php $class="";} ?> html += ' </div>'; html += ' </div>'; html += '</td>'; ]]></add> </operation> </file> <file path="catalog/controller/product/product.php"> <operation> <search><![CDATA[$data['text_tags'] = $this->language->get('text_tags');]]></search> <add position="after"><![CDATA[ $data['text_view'] = $this->language->get('text_view'); ]]></add> </operation> <operation> <search><![CDATA['name' => $option_value['name'],]]></search> <add position="after"><![CDATA[ 'description' => html_entity_decode($option_value['description'], ENT_QUOTES, 'UTF-8'), ]]></add> </operation> </file> <file path="catalog/language/*/product/product.php"> <operation> <search><![CDATA[$_['text_error'] = 'Product not found!';]]></search> <add position="after"><![CDATA[ $_['text_view'] = 'view more'; ]]></add> </operation> </file> <file path="catalog/model/catalog/product.php"> <operation> <search><![CDATA['name' => $product_option_value['name'],]]></search> <add position="after"><![CDATA[ 'description' => (isset($product_option_value['description']) ? $product_option_value['description'] : ''), ]]></add> </operation> </file> <file path="catalog/view/theme/*/template/product/product.tpl"> <operation> <search><![CDATA[(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)]]></search> <add position="after"><![CDATA[ <?php } ?> <?php if(isset($option_value) && $option_value['description']) { ?> <a class="view" id="<?php echo $option_value['option_value_id']; ?>"> View more </a> <div id="desc_<?php echo $option_value['option_value_id']; ?>" style="display:none"> <?php echo $option_value['description'] ?> </div> ]]></add> </operation> <operation> <search><![CDATA[ <?php echo $footer; ?> ]]></search> <add position="before"><![CDATA[ <script> $(document).ready(function(){ $('.view').hover(function(){ $("#desc_".concat(this.id)).fadeIn(500) },function(){ $("#desc_".concat(this.id)).fadeOut(500) }) }); </script> ]]></add> </operation> </file> </modification>
Добавление количества на складе для опций продукта
В дополнение к описанию параметров продукта, добавление количества товара к вашей продукции также увеличивает количество информации о продукции доступной для Ваших клиентов. Кроме того, эта реализация может иметь положительное влияние на показатели переходов. А ограниченный объем количества создает ощущение срочности, уменьшает колебания и, таким образом, повышает готовность к покупке.
<modification> <name>Add product quantity to product options</name> <version>1.0</version> <link></link> <author></author> <code>quantity_to_product_options</code> <file path="catalog/view/theme/*/template/product/product.tpl"> <operation> <search><![CDATA[ (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)]]></search> <add position="after"><![CDATA[ <?php } if (isset($option_value['quantity']) && $option_value['quantity'] > 10) { ?> [<?php echo $option_value['quantity']; ?> <?php echo $text_pcs; ?>] <?php } elseif ($option_value['quantity']) { ?> [<span style="color: #F00"><?php echo str_replace('{quant}', $option_value['quantity'], $text_only); ?></span>] ]]></add> </operation> </file> <file path="catalog/controller/product/product.php"> <operation> <search><![CDATA['name' => $option_value['name'],]]></search> <add position="after"><![CDATA['quantity' => $option_value['quantity'],]]></add> </operation> <operation> <search><![CDATA[$data['entry_qty'] = $this->language->get('entry_qty');]]></search> <add position="after"><![CDATA[ $data['text_pcs'] = $this->language->get('text_pcs'); $data['text_only'] = $this->language->get('text_only'); ]]></add> </operation> </file> <file path="catalog/language/*/product/product.php"> <operation> <search><![CDATA[$_['entry_qty'] = 'Qty';]]></search> <add position="after"><![CDATA[ $_['text_pcs'] = 'pcs.'; $_['text_only'] = ' Only {quant} pcs. left '; ]]></add> </operation> </file> </modification>
Изменение цвета
Когда наличие товара — менее 10 штук, цвет количества становится красным. Это может быть изменено путем добавления цвета в следующем фрагменте кода:
<span style="color: #F00"><?php echo str_replace('{quant}', $option_value['quantity'],$text_only); ?></span>
Удаление цены в опциях
Еще одно небольшое изменение — это удаление цены у опции товара.
Для большинства розничных продавцов эта функция весьма позитивна. Однако, для некоторых покупателей эта функция нежелательна, ведь когда они делают заказ и выбирают опцию товара — в корзине видят цену выше основной. Тем не менее, если вы готовы «принять этот риск», необходимо следовать ранее упомянутым шагам и использовать следующий код:
<modification> <name>Remove option price</name> <version>1.0</version> <link></link> <author></author> <code>remove_option_price</code> <file path="catalog/view/theme/*/template/product/product.tpl"> <operation> <search><![CDATA[<?php foreach ($option['product_option_value'] as $option_value) { ?>]]></search> <add position="after"><![CDATA[<?php unset($option_value['price']); $option_value['price'] ="";?>]]> </add> </operation> </file> </modification>
Вывод:
Конечный результат, который вы получите после применения трех модификаций, должен быть похож на этот:
Мы надеемся, что вы будете применять данные этапы для настройки ваших вариантов продукции. Они являются полезным и эффективным способом для достижения конечной цели — удовлетворения потребностей ваших клиентов и увеличения продаж.
prod_options_add_descr.xml
prod_options_add_quantity.xml
prod_options_remove_price.xml
От автора: приветствую вас, друзья. Итак, мы продолжаем цикл статей, посвященных знакомству с одной из популярнейших CMS для создания интернет-магазинов – OpenCart (Опенкарт). В этой статье мы немного изменим стандартный вид карточки товара, где описание, характеристики и отзывы разбиты по вкладкам. Мы уберем вкладки и сделаем это с помощью специального модуля.
В принципе, карточка товаров в OpenCart в теме по умолчанию продумана и сделана достаточно качественно. Она способна разместить большое количество информации и при этом разместить все это компактно, занимая минимум места. В частности, этому способствуют вкладки (табы), благодаря которым описание, характеристики и отзывы фактически занимаю треть от необходимого места. Вот как это выглядит по умолчанию:
Однако, дизайнерские задумки бывают разными и вполне возможно перед вами может встать задача убрать вкладки и разместить эти данные один за другим, без табов. Сделать это достаточно просто в коде темы. Но также можно обойтись и без этого, обратившись к помощи модулей. Давайте воспользуемся таким модулем, доступен он по следующей ссылке.
Скачиваем и распаковываем файл модуля — product_description_expand.ocmod.xml. После этого устанавливаем его в меню Дополнения – Установка дополнений.
Бесплатный курс по PHP программированию
Освойте курс и узнайте, как создать динамичный сайт на PHP и MySQL с полного нуля, используя модель MVC
В курсе 39 уроков | 15 часов видео | исходники для каждого урока
Получить курс сейчас!
Как обычно, после установки нового модификатора, идем в меню Дополнения – Менеджер дополнений и сбрасываем там кэш дополнений. Собственно, это все. После очистки кэша можно идти на сайт и проверять изменения. Теперь карточка товаров отображается развернутой, без вкладок.
На этом сегодня все. Больше об OpenCart вы можете узнать из наших бесплатных или платных уроков.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Смотреть видео
В этом материале мы научимся изменять вкладки на карточке товара Opencart. Не забудьте сделать бэкап или копии изменяемых страниц перед началом работы!
Итак, по умолчанию в дефолтном шаблоне опенкарт (ocStore 2.3 – мне нравится эта версия) есть всего три вкладки на странице товара: описание, характеристики и отзывы. Сначала научимся скрывать вкладку описание, если его нет (а его нет у многих товаров, это не редкость).
Редактируем файл catalogviewthemedefaulttemplateproductproduct.tpl – именно он отвечает за вывод товара (продукта). Находим строчку:
<li class="active"><a href="#tab-description" data-toggle="tab"><?php echo $tab_description; ?></a></li>
И меняем её на:
<?php if ($description) {
echo '<li class="active"><a href="#tab-description" data-toggle="tab">'.$tab_description.'</a></li>';
}
?>
А вот эту:
<div class="tab-pane active" id="tab-description"><?php echo $description; ?></div>
На эти:
<?php
if ($description) {
echo '<div class="tab-pane active" id="tab-description">'.$description.'</div>';
}
?>
Что мы делаем? Просто проверяем существование переменной $description, и если в ней что-то есть, то вкладку показываем. Заодно немного химичим и с активной вкладкой (так как изначально она по умолчанию активна).
Теперь о том, как добавить новую вкладку для карточки товара. Просто создаем еще один пункт в списке ссылок, открывающих вкладки:
<li><a href="#tab-dost" data-toggle="tab">Доставка</a></li>
А также див с соответствующим ид, в котором все будет отображаться:
<div class="tab-pane" id="tab-dost">Текст по доставке</div>
Вот так мы научились в опенкарт (ocStore) скрывать описание товара на карточке товара, если его (описания) нет, а также создавать новые вкладки. Есть вопросы? Пишите.
Автор этого материала — я — Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML — то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.
заметки, opencart
Комментарии
Алексей: Ситуация такая в шаблоне по умолчанию в опенкарт 2.3.х создание таба идет через админку непосредственно при заполнении товара, но стоит мне изменить шаблон то созданный таб не отображается, пробовал скопировать product.tpl в свой шаблон но таб так и не появляется. Как быть?