Сегодня мы будем делать кнопки Сравнение и Желание как на 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.
Спасибо за статью. Сделаю у себя на сайте. А как сделать такие значки в шапке сайта вместо надписей «Закладки» и «Сравнение товаров»?
Добрый вечер. Если у Вас есть рабочий сайт — дайте ссылку и я вам сделаю.
Здравствуйте. Рабочего сайта пока нет. Я его сейчас делаю. По дизайну должны быть значки вместо надписей. Закладки еще поменять знаю как и где и то, как-то криво получается. Где сменить надпись на картинку для сравнения товаров, найти не могу. Все языковые файлы уже просмотрел. Может подскажите как это сделать. Спасибо.
Здравствуйте
помогите советом
у меня опенкарт 1.5.4
хочу Желание как на rozetka.com.ua
как сделать?
Здравствуйте.
Вы сейчас говорите о кнопках или сам модуль «Желание»?
Здравствуйте.
У вас в статье пишется .. Сегодня мы будем делать кнопки Сравнение и Желание как на rozetka.com.ua.на OpenCart 2
у меня опенкарт 1.5.4
Поможете мне ? , как сделать так же но на опенкарт 1.5.4