Moushe.ru

Блог обо всём

Создание магазина BearStore (11 часть)



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

1

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

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

2. Переместим ссылку Сравнение товаров (выведем её в шапке в меню навигации)

3. Изменим стили кнопок

Приступим:

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

Откроем папку ../catalog/view/theme/bearstore/template/account и в файлах:

  • account.tpl
  • address_form.tpl
  • address_list.tpl
  • download.tpl
  • edit.tpl
  • forgotten.tpl
  • login.tpl
  • newsletter.tpl
  • order_info.tpl
  • order_list.tpl
  • password.tpl
  • register.tpl
  • return_form.tpl
  • return_info.tpl
  • return_list.tpl
  • reward.tpl
  • transaction.tpl
  • voucher.tpl
  • wishlist.tpl

вырезаем эти строки:

<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>

(номера строк не указываю, так как они меняются от файла к файлу)

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

<?php echo $header; ?>

В качестве примера:

Код до изменений:

<?php echo $header; ?>
<?php if ($success) { ?>
<div class="success"><?php echo $success; ?></div>
<?php } ?>
<?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>
<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>

Код после изменения:

<?php echo $header; ?>
<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>
<?php if ($success) { ?>
<div class="success"><?php echo $success; ?></div>
<?php } ?>
<?php echo $column_left; ?><?php echo $column_right; ?>
<div id="content"><?php echo $content_top; ?>

Проделаем эту операцию в файлах:

папка affiliate:

  • account.tpl
  • edit.tpl
  • forgotten.tpl
  • login.tpl
  • password.tpl
  • payment.tpl
  • register.tpl
  • tracking.tpl
  • transaction.tpl

папка checkout:

  • checkout.tpl

папка common:

  • success.tpl

папка error:

  • not_found.tpl

папка information:

  • contact.tpl
  • information.tpl
  • sitemap.tpl

папка product:

  • category.tpl
  • compare.tpl
  • manufacturer_info.tpl
  • manufacturer_list.tpl
  • product.tpl
  • search.tpl
  • special.tpl

(мы внесли правки во все файлы где есть вывод хлебных крошек, правда некоторые файлы мы не будем использовать: возврат, скачиваемые товары и т.д.)

1.1. Откроем файл ../catalog/view/theme/bearstore/stylesheet/stylesheet.css и вместо этих строк (349-364):

.breadcrumb {
background: url('../image/background.png') repeat-x transparent;
border: 1px solid #DBDEE1;
-webkit-border-radius: 7px 7px 0px 0px;
-moz-border-radius: 7px 7px 0px 0px;
-khtml-border-radius: 7px 7px 0px 0px;
border-radius: 7px 7px 0px 0px;
color: #CCCCCC;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
padding-left: 10px;
}
.breadcrumb a {
color:#000;
}

вставим эти:

.breadcrumb {
background: #f9ffef;
border: 1px solid #60a859;
border-radius: 0 0 7px 7px;
height: 30px;
line-height: 30px;
margin-bottom: 10px;
padding-left: 10px;
}
.breadcrumb a {
color: #60a859;
}
.breadcrumb a:hover {
color: #007148;
}

вместо этих строк (328-334):

#menu {
background: #60a859;
color: #fff;
height: 40px;
margin-top: 15px;
margin-bottom: 15px;
}

вставим эти:

#menu {
background: #60a859;
color: #fff;
height: 40px;
margin-top: 15px;
margin-bottom: 0px;
}

1.2. Откроем файл ../catalog/view/theme/bearstore/stylesheet/slideshow.css и вместо этих строк (90-94):

.slideshow .nivoSlider {
position: relative;
background: #fff url('../image/loading.gif') no-repeat 50% 50%;
margin-bottom: 20px;
}

вставим эти:

.slideshow .nivoSlider {
position: relative;
background: #fff url('../image/loading.gif') no-repeat 50% 50%;
margin-top: 20px;
margin-bottom: 20px;
}

2. Откроем файл ../catalog/view/theme/bearstore/template/product/category.tpl и удалим эту строку (57):

<div class="product-compare"><a href="<?php echo $compare; ?>" id="compare-total"><?php echo $text_compare; ?></a></div>

2.1. Откроем файл ../catalog/view/theme/bearstore/template/product/search.tpl и удалим эту строку (63):

<div class="product-compare"><a href="<?php echo $compare; ?>" id="compare-total"><?php echo $text_compare; ?></a></div>

2.2. Откроем файл ../catalog/view/theme/bearstore/template/common/header.tpl вместо этих строк (98-104):

<div id="menu">
<a href="<?php echo $home; ?>"><?php echo $text_home; ?></a>|
<a href="All_bears">Все медведи</a>|
<a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a>|
<a href="oplata_dostavka">Оплата и доставка</a>|
<a href="contacts">Контакты</a>
</div>

вставим эти:

<div id="menu">
<a href="<?php echo $home; ?>"><?php echo $text_home; ?></a>|
<a href="All_bears">Все медведи</a>|
<a href="<?php echo $wishlist; ?>" id="wishlist-total"><?php echo $text_wishlist; ?></a>|
<a href="<?php echo $compare; ?>" id="compare-total"><?php echo $text_compare; ?></a>|
<a href="oplata_dostavka">Оплата и доставка</a>|
<a href="contacts">Контакты</a>
</div>

2.3. Откроем файл ../catalog/language/russian/common/header.php и после этих строк (3-4):

$_['text_home']           = 'Главная';
$_['text_wishlist']       = 'Закладки (%s)';

вставим эту:

$_['text_compare']        = 'Сравнение (%s)';

2.4. Откроем файл ../catalog/controller/common/header.php и после этих строк (40-41):

$this->data['text_home'] = $this->language->get('text_home');
$this->data['text_wishlist'] = sprintf($this->language->get('text_wishlist'), (isset($this->session->data['wishlist']) ? count($this->session->data['wishlist']) : 0));

вставим эту:

$this->data['text_compare'] = sprintf($this->language->get('text_compare'), (isset($this->session->data['compare']) ? count($this->session->data['compare']) : 0));

после этих строк (50-51):

$this->data['home'] = $this->url->link('common/home');
$this->data['wishlist'] = $this->url->link('account/wishlist', '', 'SSL');

вставим эту:

$this->data['compare'] = $this->url->link('product/compare', '', 'SSL');

2.5. Откроем файл ../catalog/language/russian/product/category.php и удалим эту строку (14):

$_['text_compare']      = 'Сравнение товаров (%s)';

2.6. Откроем файл ../catalog/language/russian/product/search.php и удалим эту строку (19):

$_['text_compare']      = 'Сравнение товаров (%s)';

3.1. Откроем файл ../catalog/view/theme/bearstore/stylesheet/stylesheet.css и вместо этих строк (510-537):

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font: 14px Arial, Helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
background: url('../image/button.png') repeat-x;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
a.button {
display: inline-block;
text-decoration: none;
padding: 6px 12px 6px 12px;
}
input.button {
margin: 0;
border: 0;
height: 24px;
padding: 0px 22px 0px 22px;
}
a.button:hover, input.button:hover {
background-position: 0px -24px;
color: #000;
}

вставим эти:

a.button, input.button {
cursor: pointer;
color: #FFFFFF;
line-height: 12px;
font: 14px Arial, Helvetica, sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
background: #60a859;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
a.button {
display: inline-block;
text-decoration: none;
padding: 6px 12px 6px 12px;
}
input.button {
margin: 0;
border: 0;
height: 24px;
padding: 0px 22px 0px 22px;
}
a.button:hover, input.button:hover {
background: #9bda6a;
color: #000;
}

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

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

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

  1. Вячеслав

    01.07.2014 at 09:55

    Добрый день, скажите как сделать меню по центру чтоб было а не по левому краю уже всю голову сломал(

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

      01.07.2014 at 11:07

      Пишите в контакт с ссылкой на сайт, в комментарии код нельзя вставить.

  2. Здравствуйте, может не по теме немного но онь интересно как добавить слово поиск или введите текст в строку поиска, чтобы при клике на строку поиска слово пропадало? Знаю вы маг и волшебник)). Сайт http://dobrofey.ru/

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

      09.07.2014 at 12:03

      Заполняйте placeholder=»» (нужное слово ввести в кавычки).

  3. Здравствуйте, Владислав. Я только начинаю, и спасибо вам за уроки, они очень пригодились) Как можно с вами связаться? Я хотел бы задать несколько вопросов . Спасибо за ответ

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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