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

34

Приступим:

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

$_['text_wishlist']       = '(%s)';
$_['text_compare']        = '(%s)';

вставим эти:

$_['text_wishlist']       = '%s';
$_['text_compare']        = '%s';

1.2. Откроем файл ../catalog/language/russian/product/compare.php и вместо этой строки (21):

$_['text_compare']      = '(%s)';

вставим эту:

$_['text_compare']      = '%s';

1.3. Откроем файл ../catalog/language/russian/account/wishlist.php и вместо этой строки (8):

$_['text_wishlist'] = '(%s)';

вставим эту:

$_['text_wishlist'] = '%s';

Теперь количество товаров в сравнениях и в закладках отображаются без скобок, как количество товаров в корзине.

2.1. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и вместо этой строки (78):

<a href="?route=product/compare"><img src="catalog/view/theme/default/image/compare.png"></a>

вставим эту:

<a href="?route=product/compare"><img src="catalog/view/theme/default/image/compare.png" title="Перейти в сравнение товаров"></a>

вместо этой строки (82):

<a href="?route=account/wishlist"><img src="catalog/view/theme/default/image/wishlist.png"></a>

вставим эту:

<a href="?route=account/wishlist"><img src="catalog/view/theme/default/image/wishlist.png" title="Перейти в ваши закладки"></a>

2.2. Откроем файл ../catalog/view/theme/default/template/module/cart.tpl и вместо этой строки (2):

<a href="?route=checkout/cart"><img src="catalog/view/theme/default/image/cart.png"></a>

вставим эту:

<a href="?route=checkout/cart"><img src="catalog/view/theme/default/image/cart.png" title="Перейти в корзину"></a>

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

3. Если вам не нравятся выбранные мною иконки просто откройте папку ../catalog/view/theme/default/image/ и замените эти изображения:

cart.png, compare.png, wishlist.png

на любые другие изображения, рекомендую использовать размер 30px x 30px, хотя при желании вы можете выбрать изображения как больше, так и меньше (но возможно вам придётся поправить css стили).

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

#cart {
position: fixed;
background: #fff;
top: 40px;
right: 0px;
z-index: 9;
width: 50px;
padding: 5px;
border-top: 2px solid #ddd;
border-left: 2px solid #ddd;
border-bottom: 2px solid #ddd;
border-radius: 5px 0 0 5px;
}
#cart .heading {
padding-left: 20px;
position: relative;
z-index: 1;
}
#compare {
position: fixed;
background: #fff;
top: 110px;
right: 0px;
z-index: 9;
width: 50px;
padding: 5px;
border-top: 2px solid #ddd;
border-left: 2px solid #ddd;
border-bottom: 2px solid #ddd;
border-radius: 5px 0 0 5px;
}
#compare .heading {
padding-left: 20px;
position: relative;
z-index: 1;
}
#wishlist {
position: fixed;
background: #fff;
top: 180px;
right: 0px;
z-index: 9;
width: 50px;
padding: 5px;
border-top: 2px solid #ddd;
border-left: 2px solid #ddd;
border-bottom: 2px solid #ddd;
border-radius: 5px 0 0 5px;
}
#wishlist .heading {
padding-left: 20px;
position: relative;
z-index: 1;
}
#cart img, #compare img, #wishlist img {
padding-left: 10px;
}
#cart:hover, #compare:hover, #wishlist:hover {
background: #ddd;
}

вставим эти:

#cart, #compare, #wishlist {
position: fixed;
background: #fff;
right: 0px;
z-index: 9;
width: 50px;
padding: 5px;
border-top: 2px solid #ddd;
border-left: 2px solid #ddd;
border-bottom: 2px solid #ddd;
border-radius: 5px 0 0 5px;
}
#cart {
top: 40px;
}
#compare {
top: 110px;
}
#wishlist {
top: 180px;
}
#cart .heading, #compare .heading , #wishlist .heading {
padding-left: 20px;
position: relative;
z-index: 1;
}
#cart img, #compare img, #wishlist img {
padding-left: 10px;
}
#cart:hover, #compare:hover, #wishlist:hover {
background: #ddd;
}

Теперь немного объясню что делают некоторые строки CSS стилей, благо нам для изменения внешнего кода необходимы только некоторые из них:

#cart, #compare, #wishlist {
position: fixed; – задаёт фиксированное положение наших кнопок, то есть вы прокручиваете страницу магазина вниз, а кнопки всё равно остаются на одном месте
background: #fff; – фон наших кнопок, сейчас он у нас белого цвета (fff)
right: 0px; – отступ для кнопок с правой стороны, благодаря цифре 0 они прижаты к правой стороне нашего окна браузера
z-index: 9;
width: 50px; – ширина наших кнопок
padding: 5px; – внутренний отступ наших кнопок
border-top: 2px solid #ddd; – бордюр сверху (серая рамка вокруг кнопок)
border-left: 2px solid #ddd; – бордюр слева (серая рамка вокруг кнопок)
border-bottom: 2px solid #ddd; – бордюр снизу (серая рамка вокруг кнопок)
border-radius: 5px 0 0 5px; – закругления для бордюров
}
#cart {
top: 40px; – отступ сверху для кнопки в корзину
}
#compare {
top: 110px; – отступ сверху для кнопки сравнение товаров
}
#wishlist {
top: 180px; – отступ сверху для кнопки ваши закладки
}
#cart .heading, #compare .heading , #wishlist .heading {
padding-left: 20px; – отступ с левой стороны для цифр количества товаров (отодвигает цифры от левого угла в центр)
position: relative;
z-index: 1;
}
#cart img, #compare img, #wishlist img {
padding-left: 10px;
}
#cart:hover, #compare:hover, #wishlist:hover {
background: #ddd; – фон наших кнопок при наведении курсора мыши
}

Изменив стили и иконки вы можете изменить наши иконки до неузнаваемости или переместить их в иное место.

Пример:

1. Заменим изображения:

cartcomparewishlist

2. Заменим стили:

#cart, #compare, #wishlist {
position: fixed;
background: #4f5d73;
right: 10px;
z-index: 9;
width: 60px;
height: 60px;
padding: 5px;
border: 2px solid #ddd;
border-radius: 50px;
}
#cart {
top: 40px;
}
#compare {
top: 114px;
}
#wishlist {
top: 193px;
}
#cart .heading, #compare .heading , #wishlist .heading {
padding-left: 20px;
position: relative;
z-index: 1;
color: #fff;
font-size: 14px;
}
#cart img, #compare img, #wishlist img {
padding-left: 10px;
}
#cart:hover, #compare:hover, #wishlist:hover {
background: #006699;
}

и получим вот такой результат:

4

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