Moushe.ru

Блог обо всём

OpenCart 2.3 улучшаем карточку товара (1 часть)



Всем привет, сегодня мы с вами поработаем над карточкой товара, так как стандартная в OpenCart 2.3 (OcStore) мне не очень нравится.

Список задач на сегодня:

  • 1. Работаем с product.tpl (файл шаблона)
  • 2. Работаем с product.php (файл перевода)
  • 3. Работаем с stylesheet.css (файл стилей)

До:

После:

Приступим:

1. Откроем файл ../catalog/view/theme/default/template/product/product.tpl и вырежем вот эту строку (126):

<h1><?php echo $heading_title; ?></h1>

(P.S.пустую строку не оставляем!)

и вставим её после этой строки (16):

<div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>

(P.S.этим мы переместим заголовок h1 – название товара в верхнюю часть страницы – под хлебные крошки)

product_one

Мне не нравятся соц. кнопки используемые в карточке товара, давайте их удалим? Если вам они тоже не нравятся удалите эти строки (314-317):

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style" data-url="<?php echo $share; ?>"><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> <a class="addthis_button_tweet"></a> <a class="addthis_button_pinterest_pinit"></a> <a class="addthis_counter addthis_pill_style"></a></div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-515eeaf54693130e"></script>
<!-- AddThis Button END –>

Теперь изменим блок с количеством товара и кнопкой купить – хочу сделать их в один ряд, вместо этих строк (291-297):

<div class="form-group">
<label class="control-label" for="input-quantity"><?php echo $entry_qty; ?></label>
<input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control" />
<input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
<br />
<button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><?php echo $button_cart; ?></button>
</div>

вставим эти:

<div class="form-group form-inline">
<label class="control-label" for="input-quantity"><?php echo $entry_qty; ?></label>
<input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control input-lg" />
<input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
<button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-default btn-lg"><?php echo $button_cart; ?></button>
</div>

смотрим что получилось:

Мне не нравятся кнопки сравнения и закладки, особенно не нравится их положение, давайте исправим? Найдём и вырежем эти строки (123-126):

<div class="btn-group">
<button type="button" data-toggle="tooltip" class="btn btn-default" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product_id; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" class="btn btn-default" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product_id; ?>');"><i class="fa fa-exchange"></i></button>
</div>

и вставим их после этих строк (293-296):

<?php if ($minimum > 1) { ?>
<div class="alert alert-info"><i class="fa fa-info-circle"></i> <?php echo $text_minimum; ?></div>
<?php } ?>

(P.S. – мы переместили кнопки сравнение и закладки под кнопку в корзину)

Теперь нам необходимо изменить кнопки Сравнение и закладки на полноразмерной версии сайта и оставить их текущий вид только для телефонов и планшетов.

Вместо этих строк (296-299):

<div class="btn-group">
<button type="button" data-toggle="tooltip" class="btn btn-default" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product_id; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" class="btn btn-default" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product_id; ?>');"><i class="fa fa-exchange"></i></button>
</div>

вставим эти:

<hr>
<div class="btn-group">
<button type="button" data-toggle="tooltip" class="btn btn-success btn-lg" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product_id; ?>');"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm"><?php echo $button_wishlist; ?></span></button>
<button type="button" data-toggle="tooltip" class="btn btn-warning btn-lg" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product_id; ?>');"><i class="fa fa-exchange"></i> <span class="hidden-xs hidden-sm"><?php echo $button_compare; ?></span></button>
</div>
<hr>

(P.S.просто покрасили кнопки в стандартные цвета bootstap, увеличили их размеры, добавили линии до и после кнопок и добавили надписи  иконкам на устройства с высоким и средним разрешением экрана)

смотрим:

2. Откроем файл ../catalog/language/ru-ru/product/product.php и вместо этих строк:

  • 16$_['text_write']                              = 'Написать отзыв';
  • 21$_['text_related']                            = 'Рекомендуемые товары';
  • 43$_['tab_description']                         = 'Описание';
  • 44$_['tab_attribute']                           = 'Характеристики';
  • 45$_['tab_review']                              = 'Отзывы (%s)';

вставим эти:

  • 16$_['text_write']                              = '<i class="fa fa-commenting" aria-hidden="true"></i> Написать отзыв';
  • 21$_['text_related']                            = '<i class="fa fa-thumbs-o-up" aria-hidden="true"></i> Рекомендуемые товары';
  • 43$_['tab_description']                         = '<i class="fa fa-bars" aria-hidden="true"></i> Описание';
  • 44$_['tab_attribute']                           = '<i class="fa fa-cogs" aria-hidden="true"></i> Характеристики';
  • 45$_['tab_review']                              = '<i class="fa fa-comments-o" aria-hidden="true"></i> Отзывы (%s)';

(P.S.мы добавили иконки для табов, заголовка рекомендуемых товаров и для ссылки написать отзыв)

смотрим:

3. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла вставим эти строки:

/* tabs product */
.nav.nav-tabs {
border: none;
}
.nav.nav-tabs li {
border: 1px solid #ddd;
margin:  0 5px 0 0;
}
.nav.nav-tabs li.active {
border: 1px solid #000;
}
.nav.nav-tabs li:hover {
border: 1px solid #000;
background: #fff;
}
.nav.nav-tabs li a, .nav.nav-tabs li a:hover, .nav.nav-tabs li a.active, .nav.nav-tabs li:hover a, .nav.nav-tabs li.active a {
border: none;
background: #fff;
}
.nav.nav-tabs li a {
color: #999;
font-size: 15px;
}
.nav-tabs li:hover a, .nav-tabs li.active a {
color: #000;
}
/*bug-fix*/
.input-lg {
height: 41px;
}
@media (max-width:798px) {
.input-lg {
width: 50%;
display: inline;
vertical-align: middle;
}
}

(P.S.улучшим дизайн табов и исправим незначительные косяки стандартных стилей)

Смотрим:

На сегодня всё, вскоре продолжим. Вступайте в нашу группу ВК и следите за нашими новостями.

3 Комментария

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

CAPTCHA image
*

© 2017 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика