Moushe.ru

Блог обо всём

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



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

23

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

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

1. Работаем с новыми поступлениями, изменим и переместим кнопку купить, встроим иконки в сравнение и в закладки, поработаем со стилями.

Приступим:

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

<div class="rating"><img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>

вставим эту:

<div class="rating"><img src="catalog/view/theme/bearstore/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" /></div>

после этой строки (23):

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

вставим эти:

<div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');">Закладки</a></div>
<div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');">Сравнение</a></div>

Теперь под кнопкой Купить у нас появились ссылки Закладки и Сравнение, но текст смотрится скучно, лучше сделать иконки.

1.1. Давайте найдём набор красивых иконок, к примеру я взял две иконки из этого иконочного набора: http://www.freevectorarchive.com/free-e-commerce-icons/ вот сами иконки (после подгонки размера, изменения формы и перекраски):

comparewishlist

Закидываем их в папку ../catalog/view/theme/bearstore/image. Возвращаемся к файлу ../catalog/view/theme/bearstore/template/module/featured.tpl и меняем строки (24-25):

<div class="wishlist"><a onclick="addToWishList('<?php echo $product['product_id']; ?>');">Закладки</a></div>
<div class="compare"><a onclick="addToCompare('<?php echo $product['product_id']; ?>');">Сравнение</a></div>

на эти:

<div id="product_jpg">
<a onclick="addToWishList('<?php echo $product['product_id']; ?>');" title="Добавить товар в ваши закладки"><img src="catalog/view/theme/bearstore/image/wishlist.jpg"/></a>
<a onclick="addToCompare('<?php echo $product['product_id']; ?>');" title="Добавить товар в сравнение товаров"><img src="catalog/view/theme/bearstore/image/compare.jpg"/></a>
</div>

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

.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 {
padding: 10px 5px 33px;
display: inline-block;
vertical-align: top;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #fff;
border-radius: 5px;
}

в самом конце файла вставим эти строки:

/* My Buttons */
input.button_bs {
cursor: pointer;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
background: #60a859;
}
input.button_bs:hover {
background: #9bda6a;
}
input.button_bs {
margin: 0;
border: 0;
height: 34px;
width: 104px;
padding: 0px 12px 0px 12px;
}
input.button_bs:hover {
background-position: 0px -24px;
}
.box-product .button_bs, #product_jpg {
display: none;
}
.box-product div:hover .button_bs, .box-product div:hover #product_jpg {
display:block;
position: absolute;
margin-top: 0px;
}
.box-product div:hover .button_bs {
margin-left: -6px;
}
.box-product div:hover #product_jpg {
margin-left: 101px;
}
#product_jpg a:hover {
-webkit-filter: brightness(110%);
}

1.3. Возвращаемся к файлу ../catalog/view/theme/bearstore/template/module/featured.tpl и вместо этой строки (23):

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

вставляем эту:

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

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

.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;
}

вставим эти:

.box_button {
margin-top: 10px;
}
.box_button a {
font: 18px Arial;
padding: 5px 10px;
background: #60a859;
color: #fff;
text-decoration: none;
}
.box_button a:hover {
background: #9bda6a;
}

вместо этих строк (641-652):

.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;
}

вставим эти:

.box-product .name a {
color: #60a859;
font: 18px Verdana;
width: 160px;
line-height: 14px;
text-decoration: none;
display: block;
margin-bottom: 4px;
}
.box-product .name a:hover {
text-decoration: underline;
}

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

.box-product > div:hover {
border: 1px solid #b3b747;
}

вставим эти:

.box-product > div:hover {
border: 1px solid #60a859;
}

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

3

На сегодня всё, продолжим в следующей статье.

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

  1. Катерина

    26.06.2014 at 10:30

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

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

      26.06.2014 at 22:10

      Шаг 1.3 в нём мы меняем код кнопки купить, в вашем случае этот код нужно не изменить, а удалить — тогда кнопок купить не будет вообще, ни всплывающих как в уроке, ни стандартных.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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