CMS OpenCart 3.0 переделываем шапку магазина (3 часть)

Всем привет, продолжаем работать с шапкой нашего интернет магазина на CMS OpenCart 3.0, сегодня мы переместим в шапку сравнение товаров (со страницы категорий), переделаем корзину и закладки.

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

  1. Работаем с файлом header.twig (../catalog/view/theme/default/template/common/header.twig)
  2. Работаем с файлом cart.twig (../catalog/view/theme/default/template/common/cart.twig)
  3. Работаем с файлом header.php (../catalog/language/ru-ru/common/header.php)
  4. Работаем с файлом cart.php (../catalog/language/ru-ru/common/cart.php)
  5. Работаем с файлом header.php (../catalog/controller/common/header.php)
  6. Работаем с файлом compare.php (../catalog/language/ru-ru/product/compare.php)
  7. Работаем с файлом common.js (../catalog/view/javascript/common.js)
  8. Работаем с файлом cart.php (../catalog/language/ru-ru/checkout/cart.php)
  9. Работаем с файлом category.twig (../catalog/view/theme/default/template/product/category.twig)

Приступим:

1. Откроем файл header.twig и вместо этой строки (85):

<a href="{{ wishlist }}" id="wishlist-total" title="{{ text_wishlist }}"><i class="fa fa-heart"></i> <span class="hidden-xs hidden-sm hidden-md">{{ text_wishlist }}</span></a>

вставим эти:

<a href="{{ compare }}" id="compare-total" data-toggle="tooltip" title="{{ text_compare }}"><i class="fa fa-sliders"></i> {{ text_compare }}</a>
<a href="{{ wishlist }}" id="wishlist-total" data-toggle="tooltip" title="{{ text_wishlist }}"><i class="fa fa-star"></i> {{ text_wishlist }}</a>

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

2. Откроем файл cart.twig и вместо этих строк (1-51):

<div id="cart" class="btn-group btn-block">
  <button type="button" data-toggle="dropdown" data-loading-text="{{ text_loading }}" class="btn btn-inverse btn-block btn-lg dropdown-toggle"><i class="fa fa-shopping-cart"></i> <span id="cart-total">{{ text_items }}</span></button>
  <ul class="dropdown-menu pull-right">
    {% if products or vouchers %}
    <li>
      <table class="table table-striped">
        {% for product in products %}
        <tr>
          <td class="text-center">{% if product.thumb %} <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" class="img-thumbnail" /></a> {% endif %}</td>
          <td class="text-left"><a href="{{ product.href }}">{{ product.name }}</a> {% if product.option %}
            {% for option in product.option %} <br />
            - <small>{{ option.name }} {{ option.value }}</small> {% endfor %}
            {% endif %}
            {% if product.recurring %} <br />
            - <small>{{ text_recurring }} {{ product.recurring }}</small> {% endif %}</td>
          <td class="text-right">x {{ product.quantity }}</td>
          <td class="text-right">{{ product.total }}</td>
          <td class="text-center"><button type="button" onclick="cart.remove('{{ product.cart_id }}');" title="{{ button_remove }}" class="btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td>
        </tr>
        {% endfor %}
        {% for voucher in vouchers %}
        <tr>
          <td class="text-center"></td>
          <td class="text-left">{{ voucher.description }}</td>
          <td class="text-right">x&nbsp;1</td>
          <td class="text-right">{{ voucher.amount }}</td>
          <td class="text-center text-danger"><button type="button" onclick="voucher.remove('{{ voucher.key }}');" title="{{ button_remove }}" class="btn btn-danger btn-xs"><i class="fa fa-times"></i></button></td>
        </tr>
        {% endfor %}
      </table>
    </li>
    <li>
      <div>
        <table class="table table-bordered">
          {% for total in totals %}
          <tr>
            <td class="text-right"><strong>{{ total.title }}</strong></td>
            <td class="text-right">{{ total.text }}</td>
          </tr>
          {% endfor %}
        </table>
        <p class="text-right"><a href="{{ cart }}"><strong><i class="fa fa-shopping-cart"></i> {{ text_cart }}</strong></a>&nbsp;&nbsp;&nbsp;<a href="{{ checkout }}"><strong><i class="fa fa-share"></i> {{ text_checkout }}</strong></a></p>
      </div>
    </li>
    {% else %}
    <li>
      <p class="text-center">{{ text_empty }}</p>
    </li>
    {% endif %}
  </ul>
</div>

вставим эту:

<a href="{{ cart }}" id="cart" data-toggle="tooltip" data-loading-text="{{ text_loading }}" title="{{ text_cart }}"><i class="fa fa-shopping-cart"></i> <span id="cart-total">{{ text_items }}</span></a>

3. Откроем файл header.php и вместо этой строки (4):

$_['text_wishlist']      = 'Закладки (%s)';

вставим эти:

$_['text_wishlist']      = 'Избранное (%s)';
$_['text_compare']       = 'Сравнение (%s)';

4. Откроем файл cart.php и вместо этой строки (3):

$_['text_items']     = 'Товаров %s (%s)';

вставим эту:

$_['text_items']     = '(%s)';

5. Откроем файл header.php и после этих строк (48-55):

// Wishlist
if ($this->customer->isLogged()) {
  $this->load->model('account/wishlist');

  $data['text_wishlist'] = sprintf($this->language->get('text_wishlist'), $this->model_account_wishlist->getTotalWishlist());
} else {
  $data['text_wishlist'] = sprintf($this->language->get('text_wishlist'), (isset($this->session->data['wishlist']) ? count($this->session->data['wishlist']) : 0));
}

вставим эти:

// Compare
$data['text_compare'] = sprintf($this->language->get('text_compare'), (isset($this->session->data['compare']) ? count($this->session->data['compare']) : 0));

а после этой строки (63):

$data['wishlist'] = $this->url->link('account/wishlist', '', true);

вставим эту:

$data['compare'] = $this->url->link('product/compare');

6. Откроем файл compare.php и вместо этой строки (19):

$_['text_compare']      = 'Сравнение товаров (%s)';

вставим эту:

$_['text_compare']      = 'Сравнение (%s)';

7. Откроем файл common.js и вместо этой строки (174):

$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

вставим эту:

$('#cart').html('<i class="fa fa-shopping-cart"></i> ' + json['total']);

вместо этой (202):

$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

вставим эту:

$('#cart').html('<i class="fa fa-shopping-cart"></i> ' + json['total']);

вместо этой (231):

$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

вставим эту:

$('#cart').html('<i class="fa fa-shopping-cart"></i> ' + json['total']);

вместо этой (266):

$('#cart > button').html('<span id="cart-total"><i class="fa fa-shopping-cart"></i> ' + json['total'] + '</span>');

вставим эту:

$('#cart').html('<i class="fa fa-shopping-cart"></i> ' + json['total']);

и вместо этой (300):

$('#wishlist-total span').html(json['total']);

вставим эту:

$('#wishlist-total').html(json['total']);

8. Откроем файл cart.php и вместо этой строки (6):

$_['text_items'] = 'Товаров %s  (%s)';

вставим эту:

$_['text_items'] = '(%s)';

9. Откроем файл category.twig и удалим эти строки (60-63):

<div class="col-md-3 col-sm-6">
  <div class="form-group"><a href="{{ compare }}" id="compare-total" class="btn btn-link">{{ text_compare }}</a></div>
</div>

а вместо этой строки (60):

<div class="col-md-4 col-xs-6">

вставим эту:

<div class="col-md-7 col-xs-6">

Обязательно чистим все кеши!

Результат нашей работы:

CMS OpenCart 3.0 переделываем шапку магазина (3 часть)
Дорабатываем шапку (3 часть)

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

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru

2 комментария

  1. Аватар

    Как всегда отлично! Хотелось бы статью по карточке товаров. Стандартная карточка кривовата, хочется дельных советов от профи!

Комментарии

Navigate