Moushe.ru

Блог обо всём

OpenCart делаем шаблон Photo4You (3 часть)



Что-то забросил я создание этого шаблона, значит будем исправляться.

До:                                                       После:

Do7

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

Отключим ненужные (на мой взгляд) модули

Перенесём нужные модули в левую колонку

Растянем центральную колонку на место правой

Сделаем 5 товаров в ряд

Изменим левую колонку

И так приступим, откроем админку сайта и отключим: Хиты продаж, Рекомендуемые, Информация и Ссылки. Переносим модуль корзины в левый блок. Делаем порядок сортировки для корзины — 1, категориям – 2, производителям – 3. Смотрим на то что у нас получилось:

1

Откроем stylesheet.css (..\catalog\view\theme\Photo4You\stylesheet) найдём этот код:

#content {
margin-left: 190px;
margin-right: 190px;
margin-bottom: 10px;
}

и отключим правую колонку:

#content {
margin-left: 190px;
margin-right: 0px;
margin-bottom: 10px;
}

Смотрим на сайт:

2

Между товарами очень большие промежутки, давайте сделаем по 5 товаров в строку, откроем latest_home.tpl (..\catalog\view\theme\Photo4You\template\module) и ищем эти строки:

<?php for ($i = 0; $i < sizeof($products); $i = $i + 4) { ?>
<tr>
<?php for ($j = $i; $j < ($i + 4); $j++) { ?>
<td style=»width: 25%;»><?php if (isset($products[$j])) { ?>

и изменим их на эти:

<?php for ($i = 0; $i < sizeof($products); $i = $i + 5) { ?>
<tr>
<?php for ($j = $i; $j < ($i + 5); $j++) { ?>
<td style=»width: 20%;»><?php if (isset($products[$j])) { ?>

Любуемся на витрину:
3

Не так уж и плохо получилось, сделаем тоже самое для bestseller_home.tpl , featured_home.tpl и special_home.tpl, перейдём в папку product (..\catalog\view\theme\Photo4You\template) и сделаем тоже самое во всех файлах, кроме файла rewiew.

Поздравляю у вас отлично получается, теперь изменим дизайн модулей в правой колонке, открываем папку с  модулями (..\catalog\view\theme\Photo4You\template\module) и для начала выберем cart.tpl и меняем это:

<div id=»module_cart» class=»box»>

на это:

<div id=»module_cart» class=»box_new»>

В середине модуля удалим  эту строку (34строка):

<div class=»bottom»>&nbsp;</div>

Откроем модуль category.tpl и сделаем тоже самое, из этого:

<div class=»box»>
<div class=»top»><img src=»catalog/view/theme/default/image/category.png» alt=»» /><?php echo $heading_title; ?></div>
<div id=»category» class=»middle»><?php echo $category; ?></div>
<div class=»bottom»>&nbsp;</div>
</div>

это:

<div class=»box_new»>
<div class=»top»><img src=»catalog/view/theme/default/image/category.png» alt=»» /><?php echo $heading_title; ?></div>
<div id=»category» class=»middle»><?php echo $category; ?></div>
</div>

и открываем третий модуль manufacturer.tpl и изменим это:

<div class=»box»>

на это:

<div class=»box_new»>

Нижнюю часть не трогаем, пусть остаётся как есть – она будет закрывать все три модуля. Улыбка

Закинем эти картинки в папку image (..\catalog\view\theme\Photo4You):

box_new_topbox_new_bottom

Откроем stylesheet.css (..\catalog\view\theme\Photo4You\stylesheet) и добавим в него такой код:

.box_new {
margin-bottom: 0px;
background: url(‘../image/box_new_top.jpg’) no-repeat;
}
.box_new .top {
padding: 8px 0px 8px 18px;
color: #ffffff;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.box_new .top img {
float: left;
margin-right: 5px;
}
.box_new .middle {
border-left: 1px solid #0381a3;
border-right: 1px solid #0381a3;
background: #FFFFFF;
padding: 10px;
}
.box_new .bottom {
height: 5px;
background: url(‘../image/box_new_bottom.jpg’) no-repeat;
}

Смотрим результат:

4

Хммм… а может вырежем картинки у названия категорий и дадим каждому блоку свою шапку ?

Опять откроем cart.tpl и удалим этот код:

<img src=»catalog/view/theme/default/image/basket.png» alt=»» />

Откроем category.tpl и заменим код файла на этот:

<div class=»box_new1″>
<div class=»top»><?php echo $heading_title; ?></div>
<div id=»category» class=»middle»><?php echo $category; ?></div>
</div>

Откроем manufacturer.tpl и заменим код файла на этот:

<div class=»box_new2″>
<div class=»top»><?php echo $heading_title; ?></div>
<div class=»middle» style=»text-align: center;»>
<select onchange=»location = this.value»>
<option value=»»><?php echo $text_select; ?></option>
<?php foreach ($manufacturers as $manufacturer) { ?>
<?php if ($manufacturer[‘manufacturer_id’] == $manufacturer_id) { ?>
<option value=»<?php echo str_replace(‘&’, ‘&amp;’, $manufacturer[‘href’]); ?>» selected=»selected»><?php echo $manufacturer[‘name’]; ?></option>
<?php } else { ?>
<option value=»<?php echo str_replace(‘&’, ‘&amp;’, $manufacturer[‘href’]); ?>»><?php echo $manufacturer[‘name’]; ?></option>
<?php } ?>
<?php } ?>
</select>
</div>
<div class=»bottom»>&nbsp;</div>
</div>

Закинем в папку image эти картинки:

box_top1box_top2box_bottom1

Откроем stylesheet.css и изменяем наш код:

.box_new {
margin-bottom: 0px;
background: url(‘../image/box_new_top.jpg’) no-repeat;
}
.box_new .top {
padding: 8px 0px 8px 18px;
color: #ffffff;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.box_new .middle {
border-left: 1px solid #0381a3;
border-right: 1px solid #0381a3;
background: #FFFFFF;
padding: 10px;
}

.box_new1 {
margin-bottom: 0px;
background: url(‘../image/box_top1.jpg’) no-repeat;
}
.box_new1 .top {
padding: 8px 0px 8px 18px;
color: #ffffff;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.box_new1 .middle {
border-left: 1px solid #03a352;
border-right: 1px solid #03a352;
background: #FFFFFF;
padding: 10px;
}

.box_new2 {
margin-bottom: 0px;
background: url(‘../image/box_top2.jpg’) no-repeat;
}
.box_new2 .top {
padding: 8px 0px 8px 18px;
color: #ffffff;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
.box_new2 .middle {
border-left: 1px solid #a38403;
border-right: 1px solid #a38403;
background: #FFFFFF;
padding: 10px;
}
.box_new2 .bottom {
height: 5px;
background: url(‘../image/box_bottom1.jpg’) no-repeat;
}

Смотрим на результат:

5

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

7

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

На сегодня всё, а то я уже устал, да и статья не самая короткая получилась. До новых встреч. Улыбка

9 Комментариев

  1. Роман

    06.12.2011 at 20:01

    А никто не подскажет сложно ли реализовать счетчик товаров в категориях и как это сделать! Заранее благодарен.

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      06.12.2011 at 23:05

      На оф. форуме был материал по этой теме, делать не особо сложно — немного переделать контроллер и добавить код выводящий количество в модуль категорий.

  2. Роман

    06.12.2011 at 23:54

    А ссылочкой добрые люди не поделятся? ))

  3. Владислав,а можно ссылку на депозите,с темой?

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      11.12.2011 at 21:29

      Уже завтра увидите её на главной странице сайта. Ждать осталось недолго. 🙂

    • Ок,буду ждать:)

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      12.12.2011 at 00:55

      Всё, можете качать — шаблон доступен для скачки 🙂

    • Спасибо!
      Владислав,у меня возник еще один вопрос:
      Вы ни где не встречали классический шаблон из версии 1.4х для 1.5.1.3 ?

    • Владислав Храмцов
      vkontakte.ru Владислав Храмцов

      12.12.2011 at 20:07

      Я пока не работал с OpenCart 1.5, поэтому и шаблоны не смотрел. 🙁

Добавить комментарий

Your email address will not be published.

*

CAPTCHA image
*

© 2016 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика