Кнопки Сравнение и Желание как на rozetka.com.ua

Сегодня мы будем делать кнопки Сравнение и Желание как на rozetka.com.ua.

Пустые слова:
Многие смотрят на этот интерне-магазин и говорят: «А я бы сделал лучше… Я бы тут поправил… А вот тут я считаю багом…» и все в этом роде. Знаете кто эти люди? Верно – неудачники. Конечно нет ничего идеального, но розетка – это магазин на который можно и, наверное, нужно ровняться. Это действительно высоконагруженное детище, которое работает очень даже хорошо. Так вот, сегодня мини-уроком будет по «слизыванию» внешнего вида кнопок « Сравнение » и « Закладки » с розетки на нами любимый OpenCart.

Версия на которой это делал я: OpenCart 2.2.0.0 (March 2, 2016).

1. Сделаем стили для кнопок Сравнение и Желание как на rozetka.com.ua в stylesheet.css (catalog/view/theme/default/stylesheet/):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.sprite {
background-image: url("../image/sprite_.png") !important;
background-repeat: no-repeat;
}
.Wishlist {
width: 25px;
background-position: -2px 0;
}
.Wishlist:hover {
background-position: -2px -48px;
}
.compare {
width: 28px;
background-position: -0px -73px;
}
.compare:hover {
background-position: -0px -97px;
}
.wishlist, .compare {
display: inline-block;
height: 22px;
cursor: pointer;
}

Кнопки Сравнение и Желание готовы.

2. Пол урока позади. Мы уже излили ведро пота, ноги подкашиваются, руки трясутся… но результат влечет и мы открываем product.tpl (catalog/view/theme/default/template/product/):
Находим и комментируем (на всякий случай) это:

1
2
3
4
5
6
7

<button type="button" data-toggle="tooltip" class="btn btn-default" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product_id; ?>');"><i class="fa fa-heart"></i></button>
<button type="button" data-toggle="tooltip" class="btn btn-default" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product_id; ?>');"><i class="fa fa-exchange"></i></button>

После того уставляем это:

<a class="sprite wishlist" data-toggle="tooltip" title="<?php echo $button_wishlist; ?>" onclick="wishlist.add('<?php echo $product_id; ?>');"></a>
<a class="sprite compare" data-toggle="tooltip" title="<?php echo $button_compare; ?>" onclick="compare.add('<?php echo $product_id; ?>');"></a>

3. Вот оно, финишная прямая… Загружаем ЭТО изображение (спрайт) вот сюда: catalog/view/theme/default/image/.

4. Обновляем страницу описание товара и идем в душ.

На этом все. И да, очень неплохо смотрится под ценой, например вот так:

С уважение и надеждой на лучшее, ProIN.

Кнопки Сравнение и Желание как на rozetka.com.ua: 3 комментария

Алексей
07.04.2017 в 08:35

Спасибо за статью. Сделаю у себя на сайте. А как сделать такие значки в шапке сайта вместо надписей «Закладки» и «Сравнение товаров»?

Ответить
1. ProIN автор
  07.04.2017 в 20:07
  
  Добрый вечер. Если у Вас есть рабочий сайт — дайте ссылку и я вам сделаю.
  
  Ответить
  1. Алексей
    08.04.2017 в 18:19
    
    Здравствуйте. Рабочего сайта пока нет. Я его сейчас делаю. По дизайну должны быть значки вместо надписей. Закладки еще поменять знаю как и где и то, как-то криво получается. Где сменить надпись на картинку для сравнения товаров, найти не могу. Все языковые файлы уже просмотрел. Может подскажите как это сделать. Спасибо.
    
    Ответить