Сьогодні ми розглянемо дуже затребуваний урок про те як змінити кнопку «Купити» в CMS Opencart. Сама кнопка «Купити» в будь-якому інтернет-магазині - це дуже важливий елемент! Вона повинні виділятися і манить. Змінюючи розмір, форму, колір і розташування кнопки ми можемо значно поліпшити або звести нанівець конверсію свого магазину.
Способи відображення кнопки трохи відрізняється від версії OpenCart, тому ми розглянемо більш новий варіант виконання по версій 1.5.5.
Знаходимо де правиться кнопка
Відкриваємо файл управління стилями.
ваш_сайт / catalog / view / theme / ваша_тема / stylesheet / stylesheet.css
За відображення кнопки відповідає розділ button (десь п'ятсот семидесятих рядок).
Знаходимо рядок: background: url ( '../ image / button.png') repeat-x;
Виходить, що сама кнопка намальована в файлі button.png
Йдемо в каталозі image і копіюємо до себе на диск фото для редагування.
Виходить, що сама кнопка малюється з цього невеликого шматочка.
Довжина кнопки залежить від налаштувань стилю і розміру написи в самій кнопки, будь то «Купить» або «Замовити» або щось інше.
Як працює кнопка Купити
А висота кнопки стандартна 24 пікселя, чому не 48? Тому що, як ми бачимо по малюнку кнопка складається з двох кольорів. Верхній колір це той колір який відображається всюди за замовчуванням, а нижній - це той колір які з'являється при наведенні на кнопку мишкою. Тобто в програмному вигляді, при наведенні на кнопку фотографія просто піднімається в гору і ми бачимо більш темну кнопку «Купити».
Якщо ми хочемо зробити кнопку товщі або вище (кому як більше подобається) то ми нашу фотографію збільшуємо в подвійному розмірі від бажаного результату. Припустимо ... Зараз наша кнопка в висоту 24px, а ми хочемо зробити 36 (тобто +12), але фото ми збільшуємо на 24 (2 по 12). і виходить наша кнопка буде мати розмір в висоту 72px (48 + 24). Тобто, ми беремо в облік кожен колір окремо, але так як вони відображені на одній картинці, то ми додаємо кольору як вниз картинки так і вгору однаково! На ділі воно зрозуміліше ніж на словах. 🙂
За бажанням міняємо верхній - основний колір і нижній - колір при наведенні на кнопку. Зберігаємо фотографію в форматі .png бажано змінивши ім'я, припустимо button72.png. Завантажуємо нашу кнопку назад в папку image і повертаємося до редагування стилів stylesheet.css
Міняємо стару кнопку на нову
Беремо вже відому нам рядок: background: url ( '../ image / button.png') repeat-x; і міняємо ім'я файлу на наше button72.png
Тепер наші кнопки на сайті в висоту не змінилися, а при наведенні закрашивается тільки частина. Виправляємо.
Нижче, в класі input.button бачимо рядок height: 24px; - це висота наших кнопок, міняємо на ту що ми робили в фотографії, в нашому випадку 36px.
А ще нижче, в a.button: hover, input.button: hover в рядку background-position: 0px -24px; міняємо -24 на -36. Цей параметр відповідає за те на скільки підніметься картинка при наведенні на неї мишкою.
Ось у нас і вийшла, симпатична пухка кнопка 🙂
Тепер ми можемо зробити шрифт самої написи більше. За це відповідає рядок font-size: 12px; .
І додати справа і зліва трохи простору щоб кнопка була не така квадратна. У рядку padding: 0px 22px 0px 22px; атрибута input.button 22 міняємо на що хочемо, припустимо 36.
От і все! Тепер наша кнопка стала більше і більше помітне!
Якщо ви користуєтеся попередніми версіями OpenCart, то там кнопка реалізована за допомогою декількох зображень. Якщо не виходить розібратися, пишіть мені, допоможу.
А як же напис «Купити»?
P.S. До речі, для тих хто не знає, сам напис «Купити» на кнопці змінюється в файлі
www.ваш_сайт / catalog / language / russian / russian.php
десь 25 рядок: