Всем привет, продолжим делать наш шаблон Wape для CMS OpenCart 1.5 (OcStore).

OcStore15512

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

1. Работаем с хлебными крошками

2. Работаем с видом: Список – Сетка

3. Изменяем вид: Список

Приступим:

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

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>

вставим эти строки:

<?php echo $header; ?>
<?php echo $column_left; ?><?php echo $column_right; ?>

(мы просто разделили первую строку на две части)

теперь вырежем эти строки (4-8):

<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>

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

и вставим их после первой строки.

До:

wape_02_01

После:

wape_02_02

1.1. Откроем файл ../catalog/view/theme/wape/template/product/compare.tpl и вырежем эти строки (7-11):

<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>

и вставим их после первой строки.

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

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>

вставим эти строки:

<?php echo $header; ?>
<?php echo $column_left; ?><?php echo $column_right; ?>

вырежем эти строки (4-8):

<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>

и вставим их после первой строки.

1.3. Откроем файл ../catalog/view/theme/wape/template/product/manufacturer_list.tpl и вместо этой строки (1):

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>

вставим эти строки:

<?php echo $header; ?>
<?php echo $column_left; ?><?php echo $column_right; ?>

вырежем эти строки (4-8):

<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>

и вставим их после первой строки.

1.4. Откроем файл ../catalog/view/theme/wape/template/product/product.tpl и вместо этой строки (1):

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>

вставим эти строки:

<?php echo $header; ?>
<?php echo $column_left; ?><?php echo $column_right; ?>

вырежем эти строки (4-8):

<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>

и вставим их после первой строки.

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

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>

вставим эти строки:

<?php echo $header; ?>
<?php echo $column_left; ?><?php echo $column_right; ?>

вырежем эти строки (4-8):

<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>

и вставим их после первой строки.

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

<?php echo $header; ?><?php echo $column_left; ?><?php echo $column_right; ?>

вставим эти строки:

<?php echo $header; ?>
<?php echo $column_left; ?><?php echo $column_right; ?>

вырежем эти строки (4-8):

<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
<?php } ?>
</div>

и вставим их после первой строки.

Теперь я хочу чтобы в хлебных крошках вместо Главная, была иконка домика, поэтому я сделаю ещё один шаг, ну а вы как хотите.

1.6. Откроем файл ../catalog/language/russian/russian.php и вместо этой строки (12):

$_['text_home']             = 'Главная';

вставим эту:

$_['text_home']             = '<i class="fa fa-home" aria-hidden="true" title="Главная"></i>';

Результат:

wape_02_03

Если вы хотите видеть и значок и надпись то вставьте такую строку:

$_['text_home']             = '<i class="fa fa-home" aria-hidden="true" title="Главная"></i> Главная';

2. Откроем файл ../catalog/language/russian/product/category.php и вместо этих строк (16-17):

$_['text_list']         = 'Список';
$_['text_grid']         = 'Сетка';

вставим эти:

$_['text_list']         = '<i class="fa fa-th-list" aria-hidden="true"></i> Список';
$_['text_grid']         = '<i class="fa fa-th" aria-hidden="true"></i> Сетка';

Результат:

wape_02_04

2.1. Откроем файл ../catalog/language/russian/product/manufacturer.php и вместо этих строк (19-20):

$_['text_list']         = 'Список';
$_['text_grid']         = 'Сетка';

вставим эти:

$_['text_list']         = '<i class="fa fa-th-list" aria-hidden="true"></i> Список';
$_['text_grid']         = '<i class="fa fa-th" aria-hidden="true"></i> Сетка';

2.2. Откроем файл ../catalog/language/russian/product/search.php и вместо этих строк (21-22):

$_['text_list']         = 'Список';
$_['text_grid']         = 'Сетка';

вставим эти:

$_['text_list']         = '<i class="fa fa-th-list" aria-hidden="true"></i> Список';
$_['text_grid']         = '<i class="fa fa-th" aria-hidden="true"></i> Сетка';

2.3. Откроем файл ../catalog/language/russian/product/special.php и вместо этих строк (16-17):

$_['text_list']         = 'Список';
$_['text_grid']         = 'Сетка';

вставим эти:

$_['text_list']         = '<i class="fa fa-th-list" aria-hidden="true"></i> Список';
$_['text_grid']         = '<i class="fa fa-th" aria-hidden="true"></i> Сетка';

3. Вновь откроем файл ../catalog/view/theme/wape/template/product/category.tpl и вырежем эти строки (131-135):

var price = $(element).find('.price').html();

if (price != null) {
html += '<div class="price">' + price  + '</div>';
}

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

$('.product-list > div').each(function(index, element) {
html  = '<div class="right">';

Вот что у нас должно получиться:

wape_02_05

3.1. Вновь откроем файл ../catalog/view/theme/wape/template/product/manufacturer_info.tpl и вырежем эти строки (100-104):

var price = $(element).find('.price').html();

if (price != null) {
html += '<div class="price">' + price  + '</div>';
}

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

$('.product-list > div').each(function(index, element) {
html  = '<div class="right">';

3.2. Вновь откроем файл ../catalog/view/theme/wape/template/product/search.tpl и вырежем эти строки (189-193):

var price = $(element).find('.price').html();

if (price != null) {
html += '<div class="price">' + price  + '</div>';
}

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

$('.product-list > div').each(function(index, element) {
html  = '<div class="right">';

3.3. Вновь откроем файл ../catalog/view/theme/wape/template/product/special.tpl и вырежем эти строки (92-96):

var price = $(element).find('.price').html();

if (price != null) {
html += '<div class="price">' + price  + '</div>';
}

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

$('.product-list > div').each(function(index, element) {
html  = '<div class="right">';

Витрина конечно стала выглядеть страшно, но мы это поправим в следующем шаге.

wape_02_06

3.4. Откроем файл ../catalog/view/theme/wape/stylesheet/stylesheet.css и вместо этих строк (955-964):

.product-list .price {
float: right;
height: 130px;
margin-left: 8px;
text-align: center;
color: #333333;
font-size: 12px;
border-left: 1px solid #EEEEEE;

}

вставим эти:

.product-list .price {
margin-bottom: 10px;
color: #333333;
font-size: 14px;
}

а вместо этих строк (920-926):

.product-list .right {
height: 130px;
float: right;
padding-left: 18px;
border-left: 1px solid #EEEEEE;

}

вставим эти:

.product-list .right {
height: 130px;
float: right;
padding-left: 18px;
text-align: center;
}

а вместо этих строк (977-990):

.product-list .wishlist a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left center no-repeat;
}
.product-list .compare a {
color: #333333;
text-decoration: none;
padding-left: 18px;
display: block;
background: url('../image/add.png') left 60% no-repeat;
}

вставим эти:

.product-list .wishlist a, .product-list .compare a  {
color: #333333;
text-decoration: none;
}
.product-list .wishlist a:hover, .product-list .compare a:hover {
color: #999999;
}

Результат:

wape_02_07

На сегодня всё, следите за нашими новостями и до новых встреч.