Moushe.ru

Блог обо всём

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



Как я и обещал вам в прошлой статье, мы займёмся центральной частью нашего шаблона, надеюсь вы выполнили своё небольшое домашнее задание и создали 12 товаров для нашего великолепнейшего интернет-магазина.

16

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

1. Исправим Seo url нашей категории Все медведи

2. Работаем с модулем рекомендуемые

3. Установим и настроим модуль приветствие

4. Поработаем с CSS

5. Исправим косячок кнопки Все медведи

Приступим:

1. Откроем админку: Каталог – Категории – Все медведи – Изменить – Данные — SEO URL:

Вместо: All-bears указываем All_bears

2.1. Если вы не знаете как выводить в модули товары то я объясню как это делать, открываем админку:

Дополнения – Модули – Рекомендуемые – Изменить:

Ставим лимит товаров 10, размер изображений 160 x 220

и в поле товары вбиваем буквы из названия вашего товара:

2

Добавив 10 товаров жмём кнопку сохранить.

2.2. Откроем файл ../catalog/view/theme/bearstore/template/module/featured.tpl и после этих строк (23-25):

<div class="cart"><input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button" /></div>
</div>
<?php } ?>

добавим эту строку:

<div class="box_button"><a href="All_bears">Все медведи</a></div>

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

$_['heading_title'] = 'Рекомендуем';

вставим эту:

$_['heading_title'] = 'Новые поступления';

Откроем файл ../admin/language/russian/module/featured.php и вместо этой строки (3):

$_['heading_title']       = 'Рекомендуемые';

вставим эту:

$_['heading_title']       = 'Новые поступления';

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

3.1. Давайте сделаем приветственный текст для наших покупателей, и разместим его на домашней странице, идём в админку:

Дополнения – Модули – Приветствие – Изменить – Добавить модуль

так как я не писатель придумайте текст сами, после этого настроим модуль по картинке:

4

3.2. Откроем файл ../catalog/view/theme/bearstore/template/module/welcome.tpl и вместо этих строк (1-2):

<div class="welcome"><?php echo $heading_title; ?></div>
<?php echo $message; ?>

вставим эти:

<div class="box">
<div class="box-heading"><?php echo $heading_title; ?></div>
<div class="box-content">
<?php echo $message; ?>
</div>
</div>

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

$_['heading_title'] = 'Добро пожаловать в %s';

вставим эту:

$_['heading_title'] = 'Добро пожаловать в Интернет-магазин %s';

Смотрим на что теперь похожа главная страница нашего интернет-магазина:

5

3.4. Стало симпатичнее, но шрифт в приветствии не очень, нужно подправить, снова откроем файл ../catalog/view/theme/bearstore/template/module/welcome.tpl и вместо этой строки (4):

<?php echo $message; ?>

вставим эту:

<div id="my_text"><?php echo $message; ?></div>

3.5. Откроем файл ../catalog/view/theme/bearstore/stylesheet/stylesheet.css и после этих строк (1628-1630):

.banner div img {
margin-bottom: 20px;
}

добавим эти:

/* Welcome */
#my_text {
font: 17px Verdana;
}

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

.box {
margin-bottom: 20px;
}
.box .box-heading {
-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;
border: 1px solid #DBDEE1;
background: url('../image/background.png') repeat-x;
padding: 8px 10px 7px 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: 14px;
color: #333;
}
.box .box-content {
background: #FFFFFF;
-webkit-border-radius: 0px 0px 7px 7px;
-moz-border-radius: 0px 0px 7px 7px;
-khtml-border-radius: 0px 0px 7px 7px;
border-radius: 0px 0px 7px 7px;
border-left: 1px solid #DBDEE1;
border-right: 1px solid #DBDEE1;
border-bottom: 1px solid #DBDEE1;
padding: 10px;
}

вставим эти:

.box {
margin-bottom: 20px;
text-align: center;
}
.box .box-heading {
background: #b3b747;
padding: 10px 15px;
font: 18px Arial;
line-height: 14px;
color: #fff;
}
.box .box-content {
padding: 10px;
}

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

.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
width: 168px;
display: inline-block;
vertical-align: top;
margin-right: 20px;
margin-bottom: 20px;
}

#column-left   .box-product > div , #column-right .box-product > div{
width: 155px;
margin-right: 0px;
}

#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
border: 1px solid #E7E7E7;
}
.box-product .name a {
color: #38B0E3;
font-weight: bold;
text-decoration: none;
display: block;
margin-bottom: 4px;
}

вставим эти:

.box-product {
width: 100%;
overflow: auto;
}
.box-product > div {
padding: 10px 5px;
display: inline-block;
vertical-align: top;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
border-radius: 5px;
}
.box-product > div:hover {
border: 1px solid #b3b747;
}
#column-left   .box-product > div , #column-right .box-product > div{
width: 155px;
}
#column-left + #column-right + #content .box-product > div {
width: 119px;
}
.box-product .image {
display: block;
margin-bottom: 0px;
}
.box-product .image img {
padding: 3px;
}
.box-product .name a {
color: #b3b747;
font: 16px Arial;
width: 160px;
line-height: 14px;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .name a:hover {
color: #000;
}

вместо этих строк (653):

.box-product .price {
display: block;
font-weight: bold;
color: #333333;
margin-bottom: 4px;
}

вставим эти:

.box-product .price {
display: block;
font-weight: bold;
color: #333333;
font: 18px Arial;
margin-bottom: 4px;
}
.box_button {
margin-top: 10px;
}
.box_button a {
font: 18px Arial;
padding: 5px;
color: #fff;
background: #b3b747;
border: 1px solid #b3b747;
border-radius: 5px;
text-decoration: none;
}
.box_button a:hover {
color: #000;
background: #fff;
border: 1px solid #000;
}

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

5. Если вы наведёте курсор мыши на кнопку Все медведи, вы увидите ужас Улыбка это мой косяк, сейчас исправим. Откроем файл ../catalog/view/theme/bearstore/template/module/featured.tpl и вместо этих строк (26-27):

<div class="box_button"><a href="All_bears">Все медведи</a></div>
</div>

вставим эти:

</div>
<div class="box_button"><a href="All_bears">Все медведи</a></div>

(да-да, мы просто поменяли строки местами)

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

6

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

  1. Здравствуйте! Я делал всё как вы написали, но привествие у меня не показывается и ссылка «все ведмеди» не работает, при переходе по ней викидывает вот что — Object not found!

    The requested URL was not found on this server. The link on the referring page seems to be wrong or outdated. Please inform the author of that page about the error.

    If you think this is a server error, please contact the webmaster.
    Error 404
    localhost
    06/13/14 19:58:41
    Apache/2.2.27 (Win32)

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

      14.06.2014 at 21:29

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

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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