Moushe.ru

Блог обо всём

OcStore 2.1 (OpenCart 2.1) переделываем корзину



Всем привет, в этой статье мы переделаем корзину нашего интернет магазина.

OpenCart-20

До:

ocstore_2-1_cart_01

После:

ocstore_2-1_cart_02

ocstore_2-1_cart_03

Приступим:

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

$_['text_items']     = '%s товар(ов) - %s';

вставим эту:

$_['text_items']     = '%s - %s';

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

$_['text_items']               = '%s товар(ов) - %s';

вставим эту:

$_['text_items']               = '%s - %s';

3. Откроем файл ../catalog/view/theme/default/template/common/header.tpl и удаляем эту строку (95):

<div class="col-sm-3"><?php echo $cart; ?></div>

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

<body class="<?php echo $class; ?>">

вставим эту:

<div id="my_cart"><?php echo $cart; ?></div>

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

/* cart */

добавим эти:

#my_cart {
position: fixed;
top: 8%;
right: 0px;
z-index: 99;
}

(эти строки задают положение нашей корзине и позволяют корзине перекрывать другие элементы – меню, слайдер и т.д.)

если вам не нравится чёрная кнопка корзины поправьте эти стили (154-158):

#cart > .btn {
font-size: 12px;
line-height: 18px;
color: #FFF;
}

к примеру так:

#cart > .btn {
font-size: 12px;
color: #FFF;
height: 80px;
width: 100px;
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
border-color: #1f90bb #1f90bb #145e7a;
}
#cart > .btn > .fa {
font-size: 30px;
display: block;
padding-bottom: 10px;
}

(частично стили взяты с меню категорий + добавил стили для иконки корзины, размер кнопки регулируется с помощью height и width)

если фиксированные размеры вам не нужны, стили можно обрезать:

#cart > .btn {
font-size: 12px;
color: #FFF;
background-color: #229ac8;
background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
border-color: #1f90bb #1f90bb #145e7a;
}
#cart > .btn > .fa {
font-size: 30px;
display: block;
padding-bottom: 10px;
}

Результат:

ocstore_2-1_cart_02

Поиграв стилями можно сделать и так:

#cart > .btn {
font-size: 12px;
color: #000;
background: #fff;
border-left: 2px solid #F44336;
border-top: 2px solid #F44336;
border-bottom: 2px solid #F44336;
border-right: 2px dotted #F44336;
border-radius: 10px 0 0 10px;
box-shadow: none;
text-shadow: none;
}
#cart > .btn:hover {
border-left: 2px solid #B71C1C;
border-top: 2px solid #B71C1C;
border-bottom: 2px solid #B71C1C;
border-right: 2px dotted #B71C1C;
}
#cart > .btn > .fa {
color: #F44336;
font-size: 30px;
display: block;
padding-bottom: 10px;
}
#cart > .btn:hover > .fa {
color: #B71C1C;
}

(изменили фон, бордюры, убрали ненужную тень, добавили бордюрам и иконке корзины смену цвета при наведении курсором мыши)

Результат:

ocstore_2-1_cart_03

Можно сделать даже круглую кнопку, но это уже самостоятельно Подмигивающая рожица

На сегодня всё, до новых встреч.

39 Комментариев

  1. Дмитрий

    03.03.2016 at 19:35

    Однако 🙂 спасибо большое.

  2. Дмитрий

    03.03.2016 at 23:59

    Подскажите по поводу выпадающего меню, если оно находится слева, то обрезано, справа также обрезано. как его отредактировать для себя?
    http://s013.radikal.ru/i324/1603/b5/e43016715e93.png
    http://s017.radikal.ru/i429/1603/75/bfa287d1bb99.png

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

      04.03.2016 at 00:01

      Дайте ссылку на свой сайт

  3. Извиняюсь конечно, что не по теме. И не знаю можно ли занести этот вопрос в сложный, но если все таки нет.То не могли бы вы помочь. Есть сайт на ocstore, нужно полностью убрать верхнюю панель, а так же убрать некоторые пункты в футере. Как это можно сделать? Шаблон не стандарт, но приближен к нему.

  4. Любовь

    18.03.2016 at 15:48

    уважаемый автор!
    в уроке по изменению корзины ничего не сказано,как убрать старую корзину.
    у меня на сайте теперь две корзины.
    как убрать старую корзину?

  5. Смотрящий

    31.03.2016 at 17:33

    Возникает косяк при покупке, стили меняются, корзина меняет цвет и расположение изменяется, выравниваются по горизонтали с ценой (были друг над другом).

  6. Смотрящий

    31.03.2016 at 18:56

    Спасибо, проверю.
    Подкину пару идей.

    Обзор и установка модулей оплаты
    Установка SSL сертификата

    Думаю, что для многих актуально.

  7. Добрый день! На примере вашей статьи менял корзину, но в другом стиле. Сейчас при добавлении товара корзина становится прежней, а точнее вместо моего значка появляется fa fa-shopping -cart. После обновления всё становится нормально. В чём может быть проблема?

    • Кеш чистили? Если шаблон не стандартный файл cart.tpl может быть ещё или в модулях или в папке аккаунт или в папке чекаут — просто внести такие-же правки.

  8. Владислав, шаблон стандартный, кеш чистый. Пробовал через поиск по всем файлам, везде где только есть fa fa-shopping-cart пробовал менять, но к нужному результату не приводит.
    Вот на этом сайте: http://ovchinnik.esy.es/
    Отображается корзина правильно — зелёная иконка, но когда добавляешь товар из рекомендованных, или прямо из карточки товара, то она становится стандартной fa fa-shopping-cart. Отслеживал через firebag, ничего не удалось найти даже похожего.

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

      24.04.2016 at 19:24

      ocmod’ы не стоят? Если стоят то в папку ocmod и в папку system смотрим и ищем папки кеша

  9. Удалил вообще все папки кеша, которые смог найти. Не помогло. Всё ещё меняется иконка, а при обновлении страницы становится нормальной.

    • Тогда нужен доступ к фтп — сам гляну файлы, пишите или в ВК или на почту (на странице Контакты указано и то и то)

    • Александр

      23.05.2016 at 22:46

      А можно как то ответить развернуто? В какие именно строки смотреть и что имеено править?

  10. Александр

    18.05.2016 at 23:01

    Егор, и как справились с проблемой?

    • Если изменили иконку то нужно поправить ещё и файл common.js в нём в нескольких местах прописана стандартная иконка

    • Александр

      23.05.2016 at 22:47

      А можно как то ответить развернуто? В какие именно строки смотреть и что имеено править?

    • Открыть файл Notepad++ — поиск — искать: fa fa-shopping-cart менять на нужное.

  11. Амаль

    01.06.2016 at 22:06

    Добрый вечер!

    Подскажите, как скрыть корзину на странице основной корзины?

    • Не понял вопрос, если вы про маленькую корзинку, которую мы сделали — то никак, она встроена в шапку сайта, которая одинакова для всех страниц.

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

    • Амаль

      02.06.2016 at 12:17

      Вопрос заключается: Отключить плавающую корзину при нахождении пользователя на основной странице корзины. Зачем ему две?)

      Отключить ее можно однозначно. Надо только узнать как 😉

    • Ну вот когда узнаете каким образом, расскажите об этом и нам. 🙂

    • Александр

      02.06.2016 at 22:18

      Амаль скорее всего имеет ввиду, как отключить плавающую корзину справа, когда находишься на странице самой корзины, то есть при оформлении заказа при нажатии кнопки Корзина покупок из верхнего горизонтального меню. Но по моим соображениям, что это пока не реализуемо, так как за ту часть, которая отвечает за вывод корзины в плавающее состояние отвечают каскадные таблицы стилей. И программно это ни как не отключить.

    • Я так-же понял вопрос, просто смотрите переменная корзины (плавающей) прописана в файле header.tpl который один на весь сайт, любая страница сайта состоит из трёх частей — header.tpl — которая неизменна — центральная часть — которая изменяется и footer.tpl — которая так-же неизменна для всех страниц сайта, надеюсь понятно написал.

      Что прописано в шапке и подвале сайта — везде показывается как есть, меняется только содержимое центральной части сайта.

      Стили отвечают только за внешний вид элементов сайта, ну или за из скрытие с помощью display:none, но если корзине прописать этот стиль — она исчезнет со всего сайта.

    • Александр

      03.06.2016 at 23:24

      Интересно (для самого себя), а в каком из файлов находится центральная часть самого магазина? Или она зашита где то в ядре, так как изменяема самим движком?

    • Во всех остальных файлах шаблона — отдельно для каждого модуля, для результатов поиска, для списка товаров, категорий и т.д.

  13. андрей

    06.08.2016 at 14:37

    добрый день!
    подскажите пожалуйста, как убрать прокрутку страницы вверх после добавления их в корзину?

  14. Борис

    01.09.2016 at 22:35

    Здравствуйте!
    Спасибо за статью.
    Скажите как добавить вывод кол-ва в корзине на ocstore 21021 ?
    В самой теме нет вывода общей суммы заказа в корзине на главной

  15. Дмитрий

    31.10.2016 at 13:53

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

    • С помощью знакомых программистов можно сделать что угодно. Если нет знакомых нанимайте фрилансера — всё сделает.

  16. Виктор

    17.11.2016 at 21:03

    Классный урок. Но при добавлении в корзину товара у меня на шаблоне next-default меняется иконка на маленькую и пропадают отступы (все встает на свои места если обновить страницу).
    Нашел такое решение.

    Нужно изменить:

    #cart i {
    color: #f8f8f8;
    }

    на:

    #cart i {
    color: #f8f8f8;
    font-size: 25px;
    display: block;
    padding-bottom: 10px;
    }

    Может кому будет полезным.

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

Your email address will not be published.

*

CAPTCHA image
*

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

Вверх ↑



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