OcStore 2

Всім привіт, у цій статті ми переробимо кошик нашого інтернет-магазину.

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 ):

після цього рядка (49 ):

4. Відкриємо файл ../catalog/view/theme/default/stylesheet/stylesheet.css і після цього рядка (144 ):

#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; >

якщо фіксовані розміри вам не потрібні, стилі можна обрізати:

#cart > .btn font-size: 12px; color: #FFF; background-color: #229ac8; background-image: linear-gradient(to bottom, #23a1d1,#1f90bb); колір межі: #1f90bb #1f90bb #145e7a; > #cart > .btn > .fa розмір шрифту: 30 пікселів; дисплей: блок; padding-bottom: 10px; >

Пограв стилями можна зробити і так:

#кошик > .btn розмір шрифту: 12 пікселів; колір: #000; тло: #fff; border-left: 2px суцільний #F44336; верхня межа: 2 пікселя суцільні #F44336; border-bottom: 2px суцільний #F44336; border-right: 2px пунктир #F44336; border-radius: 10px 0 0 10px; box-shadow: немає; text-shadow: немає; > #cart > .btn:hover border-left: 2px суцільний #B71C1C; верхня межа: 2 пікселя суцільні #B71C1C; border-bottom: 2px суцільний #B71C1C; border-right: 2px пунктирний #B71C1C; > #cart > .btn > колір .fa: #F44336; font-size: 30px; дисплей: блок; padding-bottom: 10px; > #cart > .btn:навести > колір .fa: #B71C1C; >

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

Можна зробити навіть круглу кнопку, але це вже самостійно

---