Продолжим создавать наш новый шаблон для сайта поставщика/дистрибьютора. В этом материале мы выведем в шапку ссылки на новые страницы, удалим больше не нужные модули, настроим модули новости и баннер, немного изменим код модуля новостей.

OcStore15512

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

1. Меню навигации и каталог

2. Настроим модули

3. Изменим модуль новостей

Приступим:

1. Откроем файл ../catalog/view/theme/postavka/template/common/header.tpl и удалим эти строки (63-64):

<div id="top">
</div>

удаляем эти строки (76-78):

<div class="links">
<a href="<?php echo $home; ?>"><?php echo $text_home; ?></a>
</div>

вместо этих строк (77-105):

<?php if ($categories) { ?>
<div id="menu">
<ul>
<?php foreach ($categories as $category) { ?>
<li><?php if ($category['active']) { ?>
<a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
<?php } else { ?>
<a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
<?php } ?>

<?php if ($category['children']) { ?>
<div>
<?php for ($i = 0; $i < count($category['children']);) { ?>
<ul>
<?php $j = $i + ceil(count($category['children']) / $category['column']); ?>
<?php for (; $i < $j; $i++) { ?>
<?php if (isset($category['children'][$i])) { ?>
<li><a href="<?php echo $category['children'][$i]['href']; ?>"><?php echo $category['children'][$i]['name']; ?></a></li>
<?php } ?>
<?php } ?>
</ul>
<?php } ?>
</div>
<?php } ?>
</li>
<?php } ?>
</ul>
</div>
<?php } ?>

вставим эти:

<div id="menu">
<ul>
<li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>
<li><a href="category">Каталог</a></li>
<li><a href="where_to_buy">Где купить</a></li>
<li><a href="about">О компании</a></li>
<li><a href="contacts">Контакты</a></li>
</ul>
</div>

1.1. Откроем файл ../catalog/view/theme/postavka/stylesheet/stylesheet.css и удалим эти строки (92-98):

#top {
height: 30px;
border-top: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
background: #F8F8F8;
}

(удаляем и код и пустую строку под ним)

удаляем эти строки (281-315):

#header #welcome {
position: absolute;
top: 7px;
left: 7px;
z-index: 5;
width: 298px;
text-align: left;
color: #999999;
}
#header #welcome a{
color: #000;
}
#header .links {
position: absolute;
left: 290px;
top: 8px;
font-size: 10px;
padding-right: 10px;
z-index:11;
}
#header .links a {
float: left;
display: block;
padding: 0px 0px 0px 7px;
color: #000;
text-decoration: underline;
font-size: 12px;
}
#header .links a:hover {
text-decoration: none;
}
#header .links a + a {
margin-left: 8px;
border-left: 1px solid #CCC;
}

вместо этих строк (282-362):

#menu {
background: #585858;
border-bottom: 1px solid #000000;
height: 37px;
margin-bottom: 15px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
-khtml-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0px 2px 2px #DDDDDD;
-moz-box-shadow: 0px 2px 2px #DDDDDD;
box-shadow: 0px 2px 2px #DDDDDD;
padding: 0px 5px;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
padding: 6px 5px 5px 0px;
}
#menu > ul > li:hover {
}
#menu > ul > li > a {
font-size: 13px;
color: #FFF;
line-height: 14px;
text-decoration: none;
display: block;
padding: 6px 10px 6px 10px;
margin-bottom: 5px;
z-index: 6;
position: relative;
}
#menu > ul > li:hover > a, #menu > ul > li > a.active {
background: #000000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
#menu > ul > li > div {
display: none;
background: #FFFFFF;
position: absolute;
z-index: 5;
padding: 5px;
border: 1px solid #000000;
-webkit-border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-khtml-border-radius: 0px 0px 5px 5px;
border-radius: 0px 0px 5px 5px;
background: url('../image/menu.png');
}
#menu > ul > li:hover > div {
display: table;
}
#menu > ul > li > div > ul {
display: table-cell;
}
#menu > ul > li ul + ul {
padding-left: 20px;
}
#menu > ul > li ul > li > a {
text-decoration: none;
padding: 4px;
color: #FFFFFF;
display: block;
white-space: nowrap;
min-width: 120px;
}
#menu > ul > li ul > li > a:hover {
background: #000000;
}
#menu > ul > li > div > ul > li > a {
color: #FFFFFF;
}

вставим эти:

#menu {
background: #000;
height: 40px;
margin-bottom: 15px;
padding: 0;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
position: relative;
float: left;
z-index: 20;
}
#menu a {
font-size: 14px;
color: #FFF;
text-decoration: none;
display: block;
padding: 12px 10px;
}
#menu a:hover {
background: #20b2aa;
}

1.2. Чтобы сильно не заморачиваться с категориями, я делаю очень просто, создаём новую категорию Каталог, присваиваем ей SEO URL: category, открываем все остальные наши категории и в качестве родительской категории присваиваем всем категорию Каталог.

2. Поработаем немного в админке:

Админка – Дополнения – Модули - Новости+ – Изменить – Символы – 100 - Позиция – Верх – Сохранить

Админка – Дополнения – Модули - Информация – Удалить

(мы вывели все ссылки в шапку – теперь нам этот модуль не нужен)

Админка – Дополнения – Модули - Категории – Удалить

Админка – Дополнения – Модули - Баннер – Изменить – Расположение – Низ страницы – Сохранить

3. Откроем файл ../catalog/view/theme/postavka/template/module/news.tpl и вместо этих строк (7-40):

<div class="box">
<div class="box-heading">
<?php if($icon) { ?>
<div style="float: left; margin-right: 8px;"><img src="catalog/view/theme/default/image/message.png" alt="" /></div>
<?php } ?>
<?php if($customtitle) { ?>
<?php echo $customtitle; ?>
<?php } ?>
</div>
<div class="box-content">
<?php foreach ($news as $news_story) { ?>
<div class="box-news">

<?php if ($show_headline) { ?>
<h4><?php echo $news_story['title']; ?></h4>
<?php } ?>
<p>
<a class="newsa" href="<?php echo $news_story['href']; ?>">
<img style="margin-bottom: 1px; vertical-align: middle;" src="catalog/view/theme/default/image/message-news.png" alt="" />
</a>
<span><?php echo $news_story['posted']; ?></span>
</p>

<p><a class="newsimage" href="<?php echo $news_story['href']; ?>"><?php if ($news_story['thumb']) { ?><img  src="<?php echo $news_story['thumb']; ?>"><?php } ?></a><?php echo $news_story['description']; ?> .. </p>
<p><a class="button" href="<?php echo $news_story['href']; ?>"> <?php echo $text_more; ?></a></p>
</div>
<?php } ?>
<?php if($showbutton) { ?>
<div style="text-align:right;">
<a href="<?php echo $newslist; ?>" class="button"><span><?php echo $buttonlist; ?></span></a>
</div>
<?php } ?>
</div>
</div>

вставим эти:

<div class="box">
<div class="box-heading">
<?php if($customtitle) { ?>
<?php echo $customtitle; ?>
<?php } ?>
</div>
<div class="box-content">
<?php foreach ($news as $news_story) { ?>
<div class="box-news">
<?php if ($show_headline) { ?>
<span><?php echo $news_story['posted']; ?></span>
<a class="newsa" href="<?php echo $news_story['href']; ?>"><h4><?php echo $news_story['title']; ?></h4></a>
<?php } ?>
<p><a class="newsimage" href="<?php echo $news_story['href']; ?>"><?php if ($news_story['thumb']) { ?><img  src="<?php echo $news_story['thumb']; ?>"><?php } ?></a>
<?php echo $news_story['description']; ?> .. </p>
</div>
<?php } ?>
<p><a class="button" href="index.php?route=information/news"> Все новости</a></p>
</div>
</div>

Результат наших трудов:

ocstore_5_1

На сегодня всё, до новых встреч.