Opencart 2.x - Улучшаем Карточку Товара (1 Часть)

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 24 май 2017.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.485
    Симпатии:
    93.143
    Репутация:
    175
    Всем привет, сегодня мы с вами поработаем над карточкой товара, так как стандартная в OpenCart 2.x (OcStore) мне не очень нравится.

    OpenCart-20_thumb-2.jpg

    Список задач на сегодня:
    • 1. Работаем с product.tpl (файл шаблона)
    • 2. Работаем с product.php (файл перевода)
    • 3. Работаем с stylesheet.css (файл стилей)
    До:
    1.png

    После:
    2.png
    Приступим:

    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>
    смотрим что получилось:

    3.png

    Мне не нравятся кнопки сравнения и закладки, особенно не нравится их положение, давайте исправим? Найдём и вырежем эти строки (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, увеличили их размеры, добавили линии до и после кнопок и добавили надписи иконкам на устройства с высоким и средним разрешением экрана)

    смотрим:

    4.png

    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.мы добавили иконки для табов, заголовка рекомендуемых товаров и для ссылки написать отзыв)

    смотрим:

    5.png

    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.улучшим дизайн табов и исправим незначительные косяки стандартных стилей)

    Смотрим:

    5.png

    На сегодня всё, вскоре продолжим. Следите за нашими новостями.
     
    yurass7885 нравится это.
  2. Offline

    215151 Пользователь

    Сообщения:
    77
    Симпатии:
    200
    Репутация:
    1
    Ну наконец что-то интересное:bow:. Спасибо
     
  3. Offline

    Nvx Пользователь

    Сообщения:
    180
    Симпатии:
    55
    Репутация:
    1
    отлично. А размер окошка, где отображается товар как изменить? Слишком огромное это окошко ИМХО.
     
  4. Offline

    yurass7885 Пользователь

    Сообщения:
    4
    Симпатии:
    0
    Репутация:
    0
    Спасибо,отличная статься!