Сегодня мы с вами улучшим страницы категорий, результатов поиска, производителей, акций стандартного шаблона OpenCart 2.1. Мы добавим немного css стилей и изменим текст сортировок на иконки.

OpenCart-20_thumb.jpg

До:

category_uluchenie_01

После:

category_uluchenie_02

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

1. Работаем с файлами перевода (php)

2. Работаем с файлами шаблона (tpl)

3. Работаем с контроллерами (php)

4. Работаем со стилями (css)

Приступим:

1. Откроем файл ../catalog/language/russian/product/category.php и вместо этих строк:

14 - $_['text_sort']         = 'Сортировать:';

24 - $_['text_limit']        = 'Показывать:';

вставим эти:

14 - $_['text_sort']         = '<i class="fa fa-sort" aria-hidden="true"></i>';

24 - $_['text_limit']        = '<i class="fa fa-eye" aria-hidden="true"></i>';

 

1.1. Откроем файл ../catalog/language/russian/product/manufacturer.php и вместо этих строк:

17 - $_['text_sort']         = 'Сортировать:';

27 - $_['text_limit']        = 'Показывать:';

вставим эти:

17 - $_['text_sort']         = '<i class="fa fa-sort" aria-hidden="true"></i>';

27 - $_['text_limit']        = '<i class="fa fa-eye" aria-hidden="true"></i>';

 

1.2. Откроем файл ../catalog/language/russian/product/search.php и вместо этих строк:

20 - $_['text_sort']         = 'Сортировать:';

30 - $_['text_limit']        = 'Показывать:';

вставим эти:

20 - $_['text_sort']         = '<i class="fa fa-sort" aria-hidden="true"></i>';

30 - $_['text_limit']        = '<i class="fa fa-eye" aria-hidden="true"></i>';

 

1.3. Откроем файл ../catalog/language/russian/product/special.php и вместо этих строк:

14 - $_['text_sort']         = 'Сортировать:';

24 - $_['text_limit']        = 'Показывать:';

вставим эти:

14 - $_['text_sort']         = '<i class="fa fa-sort" aria-hidden="true"></i>';

24 - $_['text_limit']        = '<i class="fa fa-eye" aria-hidden="true"></i>';

 

1.4. Откроем файл ../catalog/language/russian/russian.php и после этих строк (57-58):

$_['button_grid']           = 'Сетка';
$_['button_map']            = 'Посмотреть на Google карте';

вставим эти:

$_['button_sort']           = 'Сортировать';
$_['button_limit']          = 'Показывать';

 

2. Откроем файл ../catalog/view/theme/default/template/product/category.tpl и вместо этой строки (65):

<label class="control-label" for="input-sort"><?php echo $text_sort; ?></label>

вставим эту:

<label class="control-label" for="input-sort" data-toggle="tooltip" title="<?php echo $button_sort; ?>"><?php echo $text_sort; ?></label>

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

<label class="control-label" for="input-limit"><?php echo $text_limit; ?></label>

вставим эту:

<label class="control-label" for="input-limit" data-toggle="tooltip" title="<?php echo $button_limit; ?>"><?php echo $text_limit; ?></label>

 

2.1. Откроем файл ../catalog/view/theme/default/template/product/manufacturer_info.tpl и вместо этой строки (39):

<label class="control-label" for="input-sort"><?php echo $text_sort; ?></label>

вставим эту:

<label class="control-label" for="input-sort" data-toggle="tooltip" title="<?php echo $button_sort; ?>"><?php echo $text_sort; ?></label>

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

<label class="control-label" for="input-limit"><?php echo $text_limit; ?></label>

вставим эту:

<label class="control-label" for="input-limit" data-toggle="tooltip" title="<?php echo $button_limit; ?>"><?php echo $text_limit; ?></label>

 

2.2. Откроем файл ../catalog/view/theme/default/template/product/search.tpl и вместо этой строки (80):

<label class="control-label" for="input-sort"><?php echo $text_sort; ?></label>

вставим эту:

<label class="control-label" for="input-sort" data-toggle="tooltip" title="<?php echo $button_sort; ?>"><?php echo $text_sort; ?></label>

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

<label class="control-label" for="input-limit"><?php echo $text_limit; ?></label>

вставим эту:

<label class="control-label" for="input-limit" data-toggle="tooltip" title="<?php echo $button_limit; ?>"><?php echo $text_limit; ?></label>

 

2.3. Откроем файл ../catalog/view/theme/default/template/product/special.tpl и вместо этой строки (28):

<label class="control-label" for="input-sort"><?php echo $text_sort; ?></label>

вставим эту:

<label class="control-label" for="input-sort" data-toggle="tooltip" title="<?php echo $button_sort; ?>"><?php echo $text_sort; ?></label>

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

<label class="control-label" for="input-limit"><?php echo $text_limit; ?></label>

вставим эту:

<label class="control-label" for="input-limit" data-toggle="tooltip" title="<?php echo $button_limit; ?>"><?php echo $text_limit; ?></label>

 

3. Откроем файл ../catalog/controller/product/category.php и после этих строк (125-126):

$data['button_list'] = $this->language->get('button_list');
$data['button_grid'] = $this->language->get('button_grid');

вставим эти:

$data['button_sort'] = $this->language->get('button_sort');
$data['button_limit'] = $this->language->get('button_limit');

 

3.1. Откроем файл ../catalog/controller/product/manufacturer.php и после этих строк (188-189):

$data['button_list'] = $this->language->get('button_list');
$data['button_grid'] = $this->language->get('button_grid');

вставим эти:

$data['button_sort'] = $this->language->get('button_sort');
$data['button_limit'] = $this->language->get('button_limit');

 

3.2. Откроем файл ../catalog/controller/product/search.php и после этих строк (154-155):

$data['button_list'] = $this->language->get('button_list');
$data['button_grid'] = $this->language->get('button_grid');

вставим эти:

$data['button_sort'] = $this->language->get('button_sort');
$data['button_limit'] = $this->language->get('button_limit');

 

3.3. Откроем файл ../catalog/controller/product/special.php и после этих строк (82-83):

$data['button_list'] = $this->language->get('button_list');
$data['button_grid'] = $this->language->get('button_grid');

вставим эти:

$data['button_sort'] = $this->language->get('button_sort');
$data['button_limit'] = $this->language->get('button_limit');

 

4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и после этих строк (743-747):

/* Missing focus and border color to overwrite bootstrap */
.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
background-image: none;
background-color: #df5c39;
}

вставим эти:

/* Sort & Limit */
.fa-sort, .fa-eye {
padding-top: 8px;
font-size: 16px;
text-align: left;
}

Результат:

category_uluchenie_02