Moushe.ru

Блог обо всём

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



До:                                                      После:

2final

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

1. Переместим поиск

2. Изменим панель навигации

3. Сделаем кнопки соц. сетей в шапке

4. Перекрасим ссылки — категории и хлебные крошки

5. Изменим кнопку в корзину и добавим кнопку подробнее (переход к описанию товара)

6. Добавим кнопки соц. сетей в карточку товара

Давайте же начнём резать стандартный шаблон Сердитая рожица

1. Откроем stylesheet.css (..\catalog\view\theme\Comp4You\stylesheet) и ищем код:

#search {
padding-top: 7px;
padding-left: 5px;
color: #FFF;
font-weight: bold;
}

переделаем:

#search {
padding-top: 7px;
padding-left: 5px;
color: #FFF;
font-weight: bold;
float: right;
}

Перекрасим кнопку поиска и тд. , из зелёных превратим их в оранжевые (..\catalog\view\theme\Comp4You\image):

button_leftbutton_right  button_leftbutton_right

(просто замените старые картинки этими)

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

.button span {
color: #fff;
display: block;
padding: 4px 12px 5px 5px;
background: url('../image/button_right.png') top right no-repeat;
}

исправим на это:

.button span {
color: #000;
display: block;
padding: 4px 12px 5px 5px;
background: url('../image/button_right.png') top right no-repeat;
}

2. Перекрасим 3 картинки:

header_1_leftheader_1_centerheader_1_right

Откроем теперь header.tpl (..\catalog\view\theme\Comp4You\template\common) и ищем это:

<div class="div4"><a href="<?php echo str_replace('&', '&amp;', $home); ?>" id="tab_home"><?php echo $text_home; ?></a>
<?php if (!$logged) { ?>
<a href="<?php echo str_replace('&', '&amp;', $login); ?>" id="tab_login"><?php echo $text_login; ?></a>
<?php } else { ?>
<a href="<?php echo str_replace('&', '&amp;', $logout); ?>" id="tab_logout"><?php echo $text_logout; ?></a>
<?php } ?>
<a href="<?php echo str_replace('&', '&amp;', $account); ?>" id="tab_account"><?php echo $text_account; ?></a><a href="<?php echo str_replace('&', '&amp;', $cart); ?>" id="tab_cart"><?php echo $text_cart; ?></a></div>

вставляем после этого кода:

<div class="div5">
<div class="left"></div>
<div class="right"></div>
<div class="center">

В stylesheet.css меняем этот код:

#header .div4 {
width: 510px;
clear: right;
float: right;
height: 32px;
padding-right: 14px;
}
#header .div4 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
background: url('../image/tab_1.png') no-repeat;
text-align: center;
color: #333333;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div4 a.selected {
background: url('../image/tab_2.png') no-repeat;
color: #FFF;
padding-bottom: 10px;
z-index: 3;
}

на этот:

#header .div4 {
width: 510px;
float: left;
height: 32px;
padding-right: 14px;
padding-top: 3px;
}
#header .div4 a {
float: left;
margin-right: 2px;
width: 100px;
height: 18px;
padding-top: 9px;
padding-bottom: 9px;
text-align: center;
color: #000;
text-decoration: none;
font-size: 14px;
font-weight: bold;
position: relative;
z-index: 1;
}
#header .div4 a.selected {
color: #FFF;
padding-bottom: 10px;
z-index: 3;
}

3. Идём на сайт яндекса: http://api.yandex.ru/share/ и настраиваем какие кнопки вам нужны, после этого копируем код (мой вариант):

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div>

создадим для них div001 и вставим код кнопок в него:

<div class="div001">
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div>
</div>

Теперь откроем header.tpl и вставим его на строчку выше этого кода:

<div class="div3"><center>
Наш телефон: 8 (000) 000 - 00 - 00<br>
Часы работы: с 10.00 до 20.00 <br>
</center></div>

Откроем stylesheet.css и вставим после этого:

#header .div2 {
float: left;
padding-top: 15px;
padding-left: 15px;
}

такой код:

#header .div001 {
float: right;
padding-top: 15px;
padding-right: 15px;
}

Кнопочки поменяли своё местоположение Улыбка

4. В stylesheet.css изменяем это:

a, a:visited {
color: #1B57A3;
text-decoration: underline;
cursor: pointer;
}
a:hover {
text-decoration: none;
}

на это:

a, a:visited {
color: #000;
cursor: pointer;
font-weight: bold;
text-decoration: none;
font-size: 13px;
}
a:hover {
color: #fa9441;
cursor: pointer;
text-decoration: none;
font-weight: bold;
font-size: 13px;
}

Исправим это:

#category ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-left: 12px;
list-style: url('../image/bullet_1.png');
}

на это:

#category ul {
margin-top: 0px;
margin-bottom: 0px;
margin-left: 8px;
padding-left: 12px;
list-style: none;
}

Немного передвинем номер телефона и тд. из этого:

#header .div3 {
float: center;
padding-top: 100px;
height: 38px;
color: #000000;
font-size: 14px;
text-transform: uppercase;
}

сделаем это:

#header .div3 {
float: center;
padding-top: 20px;
height: 38px;
color: #000000;
font-size: 14px;
text-transform: uppercase;
}

Теперь кнопки соц. сетей и наш телефон (и адрес магазина если вы его добавляли) на одной высоте. Улыбка

5. Открываем файлы bestseller_home.tpl, featured_home.tpl, latest_home.tpl, special_home.tpl (..\catalog\view\theme\Comp4You\template\module) и category.tpl  (..\catalog\view\theme\Comp4You\template\product) и меняем в них эту строчку:

<a class="button_add_small" href="<?php echo $products[$j]['add']; ?>" title="<?php echo $button_add_to_cart; ?>" >&nbsp;</a>

на эту:

<center>
<a href="<?php echo $products[$j]['href']; ?>" title="" > Подробнее </a> /
<a href="<?php echo $products[$j]['add']; ?>" title="" > Купить </a>
</center>

P.S. – Из-за того что мы сделали надписи на русском языке файлы нужно сохранять в UTF-8 (блокнот – сохранить как – выбрать кодировку utf-8), не задавайте вопрос про кракозябры в комментах. Улыбка

6. Открываем файл product.tpl (..\catalog\view\theme\Comp4You\template\product)

и после этого кода:

<?php echo $text_no_rating; ?>
<?php } ?></td>
</tr>
<?php } ?>
</table>
<br />

Вставляем кнопки:

<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir"></div>

Любуемся на результат проделанной работы:

final

На этом наш шаблон можно считать оконченным. Следите за новостями. Улыбка

62 Комментария

  1. Андрей

    12.10.2011 at 01:38

    Все сделал по инструкции. Но кнопки Главная Войти Кабинет Корзина не сдвигаются в оранжевую зону. Вообще становятся белыми. Кмк в коде (с #header .div4 { ) ошибка

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

      12.10.2011 at 21:22

      #header .div4 { ) — почему скобки разные ???

    • Андрей

      16.10.2011 at 14:43

      Разобрался. Там надо было чуть выше поставить код.
      Скобки одинаковые.

  2. Почти все получилось — но корзина, которая наверху не работает.
    Если отключить стандартный модуль корзины в админке то товар улетает в неизвестном направлении)))) но в корзину не попадает.
    И еще, в 10 уроке делали кнопку красивую под товаром «В корзину» — она тоже не работает почему-то, при нажатии открывает страницу с товаром.

    • Ан нет, все работает.
      Только как сделать чтобы при нажатии кнопочки «В корзину» покупатель сам не уходил в корзину, а оставался на странице выбора товара?
      И еще вопросик — у меня название товаров бывает на 1, 2 или 3 строчки, и из-за этого соттветственно смещается кнопочка «В корзину», хотелось бы чтобы все было красиво, на одном уровне. Это как то можно побороть?

    • Андрей

      16.10.2011 at 14:44

      А у меня не работает. При выключении корзины, срабатывает только с главной страницы. Как сделали, чтобы не улетал товар в неизвестность, а попадал в корзину сделать??

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

      16.10.2011 at 22:00

      Скачайте этот шаблон с моего блога и попробуйте в нём, если в нём нет такой проблемы, значит у вас где-то закралась ошибка.

    • Татьяна

      20.10.2011 at 03:03

      У меня тоже не работает, если с главной страницы нажимаешь под товаром купить, когда 2 кнопки купить/подробнее, то попадает в корзину, а если провалиться в товар через подробнее, то кнопка добавить в корзину не работает, срабатывает, только если включить стандартный модуль корзина…
      И в Вашем шаблоне такая же ошибка..

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

    12.10.2011 at 21:32

    Перемещение в корзину сделано в коде php, как исправить пока не смотрел, а кнопку можно исправить только если переделывать карточку товара. Если будет время заморочусь переделкой.

  4. Андрей

    16.10.2011 at 14:49

    А можете подсказать, как сделать, чтобы вверху было имя, ну чтобы видно было, что человек зашел на сайт

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

    16.10.2011 at 21:58

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

  6. Татьяна

    18.10.2011 at 00:49

    Владислав, почему-то все надписи на русском языке выходят в виде вопросов, в UTF-8 в блокноте сохраняла (если не сохранять, то получаются ромбики) и даже, когда Ваш готовый шаблон устанавливаю, вместо русских слов вопросики… Почему может быть?

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

    18.10.2011 at 10:19

    Вы когда устанавливали cms какую кодировку базы данных выбрали ? И какая кодировка в браузере выбрана при просмотре сайта ? Дайте ссылку на сайт.

  8. Татьяна

    18.10.2011 at 17:48

    Кодировка в браузере стоит UTF-8, при установке cms не знаю, где посмотреть, что я ставила, это мой первый сайт, opencart ставила по урокам, выложенным в сети 2010г. (не вашим)

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

    18.10.2011 at 19:55

    Татьяна, а вы русские надписи писали в блокноте или другом редакторе ? Перепишите их в блокноте и сохраните в utf-8. 🙂

    • Татьяна

      18.10.2011 at 20:04

      Я копировала из этого блога в блокнот и сохраняла utf-8. Попробую сейчас руками в блокноте набрать…
      Но ведь, когда ставлю Ваш шаблон, выложенный здесь, ничего не правя, тоже вопросы получаются…

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

    18.10.2011 at 20:34

    Забавная проблемка, у вас платный хостинг ? Обратитесь в тех поддержку, напишите им что у вас кодировка неверно отображается.

    • Татьяна

      18.10.2011 at 21:03

      да платный, timeweb, спрошу у них сегодня

    • Татьяна

      19.10.2011 at 11:32

      Служба поддержки ответила, что проблема заключается в том, что файлы шаблона сохранены в кодировке UTF8 with BOM. BOM это небольшой код, который вставляется перед началом файла. Некоторым системам это требуется. А для некоторых систем это нарушает отображение содержимого файлов.
      В одном месте они мне сами поправили, а вот там где телефоны и корзина нет….
      Значит надо искать эти кодики в файлах и удалять?

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

      19.10.2011 at 12:23

      Сохраните их блокнотом в другой кодировке — русские слова могут измениться, после этого сохраните текстовым редактором — без bom, по моему это можно сделать в notepad++ и других продвинутых текстовых редакторах 🙂

    • Татьяна

      19.10.2011 at 15:56

      Спасибо, поняла!

  11. Татьяна

    20.10.2011 at 03:09

    Владислав, еще вопрос! 🙂
    Как можно отредактировать надписи «наши телефоны, время работы»? Поменять их шрифт, размер, цвет? Какой редактор для этого можно использовать?

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

    20.10.2011 at 20:34

    Татьяна, вот этот код отвечает за размер шрифта и тд:
    #header .div3 {
    float: center;
    padding-top: 20px;
    height: 38px;
    color: #000000; (цвет букв)
    font-size: 14px; (размер шрифта - букв)
    text-transform: uppercase; (перевод букв в верхний регистр - все буквы заглавные)
    }

    • Татьяна

      24.10.2011 at 02:49

      Спасибо, здесь разобралась!
      Владислав, а подскажите, как сделать, чтобы картинка в шапке (как у Вас в блоге картинка с бабочкой) стала резиновой, в зависимости от ширины экрана?

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

      24.10.2011 at 11:05

      Вот вам ссылка — http://funky-s.ru/articles-webmaster/—css—ie—qq- 🙂

    • Татьяна

      26.10.2011 at 02:17

      Владислав, а в какой файл это нужно добавлять, после какой строки, поясните, пожалуйста, для супер-новичков 😉
      Еще вот здесь нашла устранение такой проблемы (Масштабируемый логотип (Шапка сайта)), но файла с таким кодом не нахожу, чтобы исправить…
      http://opencartforum.ru/topic/3403-%D1%80%D0%B5%D0%B7%D0%B8%D0%BD%D0%BE%D0%B2%D1%8B%D0%B9-%D0%B8%D0%BB%D0%B8-%D1%84%D0%B8%D0%BA%D1%81%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D1%8B%D0%B9/

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

      26.10.2011 at 19:48

      stylesheet.css - #header .div2 {
      float: left;
      padding-top: 15px;
      padding-left: 15px;
      }

      Вот это править нужно — но только если вы вставляли картинку в шапку сайта через админ панель магазина. 🙂
      Если не справитесь сами могу в пятницу или субботу помочь с дизайном вашего сайта, просто скиньте свой шаблон мне на мыло — hruhru.87@mail.ru

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

    20.10.2011 at 20:55

    Из карточки товара товар не отправляется в корзину- там стоит скрипт, нужно переписывать 🙁

  14. Татьяна

    24.10.2011 at 04:46

    Владислав, подскажите еще, пожалуйста!
    Как можно в описание товара добавить ссылку на документ pdf, расположенный на моем же сайте, и в какую папку эти документы pdf нужно загружать, если загружать к картинкам выдает ошибку…

    • Татьяна

      24.10.2011 at 04:50

      все, с pdf получилось, имя неправильно указывала 🙂

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

      24.10.2011 at 10:52

      🙂

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

    24.10.2011 at 11:18

    Вижу тема достаточно популярна у посетителей, и пора написать ещё несколько уроков по созданию шаблонов для OpenCart’а, ждите, скоро они появятся на блоге 🙂

  16. Вячеслав

    04.11.2011 at 18:57

    Подскажите, разобрались уже с корзиной? То есть когда заходишь посмотреть товар подробнее и нажимаешь «добав в корзину» то товар улитает в левый верхний угол, и в корзине ничего не добовляется!

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

      06.11.2011 at 15:39

      Пока ещё не возился — ездил в деревню на 3 дня (по личным причинам), так что придётся подождать ещё. 🙂

    • vkontakte.ru Сява Коринной

      06.11.2011 at 16:25

      Исправь пожалуйста эту проблему. Очень надо. Из всех шаблонов остановился на этом. Но вот с корзиной проблема. С нетерпением жду.

  17. vkontakte.ru Сява Коринной

    09.11.2011 at 00:15

    Я извиняюсь за напоминание, но всёже. Вы смотрели что там с корзиной?

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

      09.11.2011 at 20:07

      Извините что ещё не исправил проблемку , просто не хватает времени у меня много работы и до всего не доходят руки — не могу делать всё одновременно. 🙁

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

      09.11.2011 at 22:39

      Проблемка исправлена — шаблон можно скачать уже сейчас.

  18. Роман

    09.11.2011 at 17:22

    Возникла необходимость в подобный шаблон вставить две ссылки, вход и регистрация чуть левее кнопок соц. сетей в шапке.
    В файл header
    над вставил

    < *a href="index.php?route=account/login" rel="nofollow">вход
    < *a href="index.php?route=account/create" rel="nofollow">регистрация

    Визуально ссылки выглядят как и нужно но не могу поместить их в верхний правый уголок. Как нужно представить эти ссылки в header чтоб их можно было двигать и редактировать из stylesheet, или как реализовать данную затею.

    И возможно ли сделать так чтоб когда человек был авторизован эти ссылки менялись на «мой кабинет» и «выход» заранее спасибо.

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

      09.11.2011 at 20:13

      В header.tpl вставляем эти ссылки в такой код:
      < *div class="div003">
      < */div>

      * — нужно убрать, без них этот код здесь не отобразится 🙂

      И в stylesheet.css добавим это:

      #header .div003 a{
      float: right;
      padding-top: 15px;
      padding-right: 15px;
      }

      поиграв с этим кодом можно сделать то что вам нужно.

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

    09.11.2011 at 23:08

    Внимание, из-за проблем с корзиной урок был укорочен, но не расстраивайтесь, вы можете скачать этот шаблон с полностью работающей корзиной. 🙂

  20. vkontakte.ru Сява Коринной

    10.11.2011 at 15:53

    А не подскажите что нужно на что исправить(заменить) там где была проблема с корзиной? Так как шаблон немного переделал и проще исправить в одном файле, чем скачивать Ваш шаблон и его переделовать мне заного.

    • vkontakte.ru Сява Коринной

      10.11.2011 at 15:58

      p.s. Кстате при скачке файла пишет что файл удалён. То есть скачать нельзя.

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

      10.11.2011 at 21:11

      Ссылка исправлена, править нужно 2 файла и создать 3 новых, поэтому так задержал переделку — вчера потратил около 3 часов на это дело (+ пара других задач). 🙂

  21. vkontakte.ru Сява Коринной

    11.11.2011 at 23:18

    А где объяснения как вставить корзину в шапку? Раньше было. Я просто решил удалить корзину сверху. Причины 2. 1-я причина: когда добавляешь товар, то стоимость его не сразу отображается в корзине сверху. Это не удобно. И вторая причина: при нажатии «добавить в корзину» в «подробнее» товара, товар можно добавить лишь раз, то есть последующее нажатия «добавить в корзину просто не работает». Если эти проблемы убрать, то можно было бы оставить так как Вы сделали, если же нет, то придётся вернуть обратно модуль корзины. Что скажите? Ели как говорится не хотите доделовать, то хотелось бы убрать корзину так как было, но вот в Ваших уроках я этого уже не вижу 🙁

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

      11.11.2011 at 23:50

      Когда появится свободное время я сделаю урок про переделку корзины, но сейчас перегружен на работе + делаю сайт другу + пишу новые посты + ответы на комментарии 🙂

      Вам нужно в header.tpl удалить код между этими строками:

      < *div class="div3">< *center>
      Наш телефон: 8 (000) 000 - 00 - 00
      Часы работы: с 10.00 до 20.00
      < */center>< */div>

      *тот что у вас тут*

      < *div class="div5">
      < *div class="left">< */div>
      < *div class="right">< */div>
      < *div class="center">

      Если хотите можете скинуть свой шаблон мне на почту и я удалю следы кривой корзины.

    • vkontakte.ru Сява Коринной

      13.11.2011 at 18:01

      Какой ваш email? Корзину я удалил удачно. Но вот когда поставил модуль корзины, появились небольшие «глюки» в правой части шаблона. Хотелось что бы Вы посмотрели. Куда можно скинуть шаблон?

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

    13.11.2011 at 21:18

    Моё мыло — hruhru.87@mail.ru

  23. Вячеслав

    29.11.2011 at 19:09

    Добрый день. А не подскажите как поменять число товаров в колонке на главной странице? В каталоге товаров нашёл как. Там в файле catalog.tpl вместо числа 4, я поставил 3, но вот на главной не поменялось, не подскажите где посмотреть?

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

    29.11.2011 at 22:01

    Открываем папку с модулями и правим эти файлы — bestseller_home, featured_home, latest_home, special_home, потом совершаем увлекательное путешествие в папку product и правим category, manufacturer, product (внизу файла), search (тоже внизу), special ну вот вроде бы и всё.

  25. Вячеслав

    30.11.2011 at 17:38

    Вроде всё работает Спасибо огромное!

  26. Сделал этот пункт- изменим кнопку в корзину и добавим кнопку подробнее (переход к описанию товара) Получилось в internet explorer в категория сверху нормально,а снизу товар сносит вправо, во все остальных браузерах нормально. Что надо сделать. С Уважением!

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

      28.12.2011 at 21:30

      Пришлите скриншот на мыло hruhru.87@mail.ru и файлы stylesheet.css и category.tpl будем смотреть

    • отправил. Спасибо

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

      28.12.2011 at 22:37

      Всё готово, проверьте почту 🙂

    • Большое спасибо. Всё отлично. С Уважением

  27. Вячеслав

    17.01.2012 at 01:41

    Подскажи пожалуйста. У меня есть две кнопки в товарах «подробнее» и «купить» Как их можно заменить вместо текста на «нарисованную кнопку»?

  28. Подскажите этот шаблон будучи переделанным уже скачать где-то можно?) Спрашиваю не во имя лени, а во имя отсутствия времени) Заранее спасибо

  29. Доброго! Прочитав пост и ответы на комментарии так и не нашел ответа на вопрос «как исправить не рабочюю корзину» на подробной странице товара. Пожалуйста распишите подробнее что где изменять, чтобы не только я понял, но и другие пользователи которые в этом нуждаются. Возможно лучше сделать это в виде нового поста, т.к. тема интересная. Спасибо)

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

      27.06.2013 at 01:29

      Статья 2011 года, я больше не работаю с этой версией OpenCart’а.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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