На одному з магазинів якими я займаюся виникла проблема, в модулі на лавной сторінці, який прокручує товар кнопка «Детальніше» була дивно реалізована. А саме написи на кнопці були намальованим, а не виводилися PHP . В принципі це нормально, але до тих пір поки, ви не захочете додати мову. Наприклад у мене магазин на трьох мовах, тому кнопка «Детальніше» або «читати далі» кому як зручніше повинна змінюватися в залежності від мови. Точніше не сама кнопка, а напис на ній. У цій статті я розповім серію експериментів які я провів з цією кнопкою, розповім як втілити в життя зміни картинки в OpenCart в залежності від мови.

Отже, передісторія, спочатку банер виглядав ось так:

але як я писав вище, при перемиканні мов змінювався текст, заголовок, а ось ця кнопка «Детальніше» залишалася незмінною. Щоб зрозуміти чому відбувається так натискаємо на кнопку правою кнопкою мишки і вибираємо «Перевірити об'єкт», щоб браузер нам показав вихідний код, за яким ми зможемо зрозуміти чому так відбувається. (В цій статті я буду приховувати URL адреси на які ведуть ті чи Зовсім інші посилання просто назвою «URL_сайта»). Отже, дивимося:

<a href=»URL_сайта» class=»podrobnee»>

Як бачимо вся кнопка складається з двох елементів:

1. посилання на товар на сайті
2. Позначку як потрібно виводити цю посилання, а саме що за зовнішній вигляд цієї посилання відповідає CSS клас «podrobnee»

Швидше за все розгадка якраз в класі «podrobnee», тому давайте знайдемо його, і подивимося в чому там справа.

Заходимо по FTP на сайт і йдемо по маршруту:

/ Catalog / view / theme / Ваша тема / stylesheet / stylesheet.css

Відкриваємо файл у зручному нам редакторі і шукаємо клас «podrobnee». Буквально за секунду знаходимо ділянку який відповідає за виведення кнопки. А саме:

#content .jcarousel-skin-carousel a.podrobnee {cursor: pointer; line-height: 50px; font-family: Arial, Helvetica, sans-serif; position: fixed; font-size: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -khtml-border-radius: 4px; border-radius: 4px; background: url ( "../ image / podrobnee_1.png") no-repeat scroll 0 0 transparent; top: 242px; height: 47px; padding: 6px 7px 4px; position: absolute; width: 199px; } #Content .jcarousel-skin-carousel a.podrobnee: hover {background: url ( "../ image / podrobnee_hover.png") no-repeat scroll 0 0 transparent; }

Як бачимо кнопка складається з двох файлів, «podrobnee.png» і «podrobnee_hover.png». Перший відповідає за кнопку коли мишка не наведена, а другий коли мишка наведена на кнопку. Давайте знайдемо ці дві картинки. Йдемо по маршруту:

/ Catalog / view / theme / Ваша тема / image / podrobnee.png

Копіюємо її на комп'ютер або дивимося прямо по FTP якщо це дозволяє FTP програма.

Ось у чому справа! Ледачі розробники шаблону замість того щоб зробити все правильно - вивести картинку, а на ній засобами PHP написати текст, просто взяли і написали поверх кнопки. Разом, у нас залишається два варіанти:

1. Зробити робо розробників, а саме висновок слова «Детальніше» засобами PHP
2. Зробити ізмеенія картинки в залежності від мови.

Оскільки перший спосіб правильніше ніж другий, то ми будемо виправляти ситуацію саме їм. Для цього копіюємо на робочий стіл дві картинки «podrobnee.png» і «podrobnee_hover.png» і замазуємо в Photoshop напис «Детальніше». Нагадаю, обов'язково робіть резервну копію будь-яких файлів які змінюєте!

У мене кнопка градиентная, тому треба трохи повозитися. Разом, у нас вийшло якось так.

Завантажуємо її назад на сайт. І все що нам залишилося це вивести напис. Для цього, в системі OpenCart існує два варіанти. Один правильний - зробити новий клас, і вивести напис. Другий більш тривалий то не вимагає певних навичок роботи з PHP і CSS - внести зміни за допомогою звичайних HTML тегів. Оскільки редагувати CSS читачі цього блогу швидше за все не будуть, інакше вони б це зробили давно і без допомоги цієї статті, то в рамках цього блога розглянемо тільки спосіб з HTML, оскільки він гораздно простіше і зрозуміліше. Принаймні цей спосіб подужає 95% аудиторії блогу.

Отже, оскільки у мене модуль який треба виправити називається featblock то редагувати ми будемо його. Природно ви можете редагувати ваш модуль використовуючи всі теже самі кроки.

Створюємо резервну копію і копіюємо сам файл до себе на комп'ютер

/ Catalog / view / theme / Ваша тема / template / module / featblock.tpl

Відмінно, відкриваємо його і шукаємо місце яке виводить картинку, у мене це

<a href="<?php echo $product['href']; ?> "class =" podrobnee "> </a>

Як бачимо це просто посилання. Пробуємо написати тестову напис, наприклад 123. Разом вийшло:

<a href="<?php echo $product['href']; ?> "class =" podrobnee "> 123 </a>

після завантаження на FTP вийшло так:

Тепер пробуємо цього напису надати нормальний вигляд. Для початку пробуємо її розмістити зліва, а не по центру. Розміщуємо нашу тестову запис «123» в тег <p> з Позначення вирівнюючи по лівому краю:

<a href="<?php echo $product['href']; ?> "class =" podrobnee "> <p align =" left "> 123 </ p> </a>

Відмінно, у мене вийшло. Але це не означає що може вийти у вас. Це пов'язано з тим що в CSS файлах може бути прописано примусово для тега <p »не вирівнювати по лівому краю. Що ж деать? Все дуже просто, гратися з іншими тегами. Замість <p> ви можете спробувати:

1. заголовки <h1>, <h2>, <h3>, <h4> або <h5>
2. Тег <font> який існує як раз для опісісиваніе виду тексту
3. Елемент таблиці <tr>
4. Тег <p>

Також ви можете використовувати всі ці теги разом узяті. Тому що на одному тезі працює одні зміни, а на другому інші. Саме так я буду поступати далі.

Отже, ми зупинилися на тому що зрушили тестову запис «123» на ліво. Тепер спробуємо збільшити шрифт за допомогою тега «text size =" 5 "». Оскільки, як я писав вище, у мене для тега <p> прописані суворі класи то рядок

<a href="<?php echo $product['href']; ?> "class =" podrobnee "> <p align =" left "text size =" 5 "> 123 </ p> </a>

Текст не збільшила. Значить пробуємо інший тег, наприклад <font>

<a href="<?php echo $product['href']; ?> "class =" podrobnee "> <font text size =" 5 "> <p align =" left "> 123 </ p> </ font> </a>

Вийшло!

Тепер пробуємо призначити цій кнопці білий колір за допомогою параметра «color =" white »». Спочатку пропишемо його в тег <p>, якщо це не принесе змін, то в тег <font>. У мене вийшло саме з допомогою другого варіанта.

<a href="<?php echo $product['href']; ?> "class =" podrobnee "> <font text size =" 5 "color =" white "> <p align =" left "> 123 < / p> </ font> </a>

Чудово! Те що і було потрібно. Залишилося тільки два кроки до щастя, розмістити напис по вертикальному центру, і власне замість тестової написи зробити ту яка буде змінюватися в залежності від мови.

Проблема в першому варіанті полягає в тому що вирівнювання можна зробити тегом valign = middle, але цей тег працює тільки для елементу таблиці. Тому давайте створимо таблицю з одним осередком в яку і пропишемо цей вирівнюючий тег.

<a href="<?php echo $product['href']; ?> "class =" podrobnee "> <table width =" 100% "cellpadding =" 0 "> <tr> <td valign =" middle " > <font text size = "5" color = "white"> <p align = "left"> 123 </ p> </ font> </ td> </ tr> </ table> </a>

Завантажили змінений файл на сайт, але результату немає. Текст по вертикалі не вирівнявся. Що ж робити? Ідея прийшла після того як я погрався з таблицею хвилин 10. Ми можемо змістити текст за допомогою осередків. Справа в тому що порожня клітинка це приблизно 3 прозорих пікселів. Значить нам треба перед нашим текстом зробити 4 порожніх осередку. Сказано зроблено.

<Table width = "100%" cellpadding = "0"> <tr> <td> </ TD> </ tr> <tr> <td> </ TD> </ tr> <tr> <td> </ TD> </ tr> <tr> <td> </ TD> </ tr> <tr> <td> <font text size = "5" color = "white"> <p align = "left"> 123 < / p> </ font> </ td> </ tr> </ table> </a>

Дивимося що вийшло:

Взагалі торт! Все що нам залишилося це замість тестової записи зробити нормальний текст який буде змінюватися в залежності від мови. Колись ми вже таке робили, а саме коли виводили посилання в шапку сайту з дотриманням мультимовності Для цього:

1. Нам треба придумати якусь змінну. Головне умови в змінної не повинно бути пробілів і вона повинна бути унікальна на весь сайт. Я придумав «text_podrobnee_1», приставку «_1» зробив спеціально, щоб 100% змінна була унікальна.
2. Йдемо по дорозі 1 / catalog / language / мову / Назва мови

   / Catalog / language / мову / Назва мови

3. Для початку візьмемо російську. тобто маршрут буде 1 / catalog / language / russian / russian .php

   /catalog/language/russian/russian.php

4. Відкриваємо файл і після рядки

   пишемо

   1 $ _ [ 'text_podrobnee_1'] = 'Детальніше';

   $ _ [ 'Text_podrobnee_1'] = 'Детальніше';

   Змінну і переклад замініть на необхідний вам

5. Повторіть ту ж процедуру для всіх мов які у вас є на сайті. Природно переводячи на потрібну мову.
6. Все, з переклад впоралися, тепер потрібно зробити так щоб контролер модуля звертався до файлу перекладу. Йдемо по дорозі 1 / catalog / controller / module / featblock .php

   /catalog/controller/module/featblock.php

7. І практично на самому початку вставляємо рядок 1 $ this -> data [ 'text_podrobnee_1'] = $ this -> language -> get ( 'text_podrobnee_1');

   $ This-> data [ 'text_podrobnee_1'] = $ this-> language-> get ( 'text_podrobnee_1');

   Цю рядок потрібно втсавіть між походами іншими рядками, помилитися там важко. Як завжди змінну ви замінюєте на свою.

Все що нам залишилося це останній ривок, поміняти в таблиці тестову змінну, на потрібну. Йдемо до нашого файлу по маршруту

/ Catalog / view / theme / Ваша тема / template / module / featblock.tpl

І міняємо 123 на такий код

<? Php echo $ text_podrobnee_1; ?>

Разом, у нас вийшло:

<a href="<?php echo $product['href']; ?> "class =" podrobnee "> <table width =" 100% "cellpadding =" 0 "> <tr> <td> </ TD> </ tr> <tr> <td> </ TD> </ tr> <tr> <td> </ TD> </ tr> <tr> <td> </ TD> </ tr> <tr> < td valign = "middle"> <font text size = "5" color = "white"> <p align = "left"> <? php echo $ text_podrobnee_1; ?> </ P> </ font> </ td> </ tr> </ table> </a>

Завантажуємо файл на сайт і дивимося що вийшло:

Відмінно! Те що потрібно. Проклацайте інші мови і переконайтеся що все адекватно виводитися. На цьому можна завершити роботу, над картинкою яка змінюється в залежності від мови, але я рекомендую трохи доробити код, зробити його трохи красивішим.

Замість <p align = "left"> - тег який вирівнює по лівому краю нашу напис пропишемо align = "left" в тег <td>

вийшло:

<a href="<?php echo $product['href']; ?> "class =" podrobnee "> <table width =" 100% "cellpadding =" 0 "> <tr> <td> </ TD> </ tr> <tr> <td> </ TD> </ tr> <tr> <td> </ TD> </ tr> <tr> <td> </ TD> </ tr> <tr> < td align = "left"> <font text size = "5" color = "white"> <? php echo $ text_podrobnee_1; ?> </ Font> </ td> </ tr> </ table> </a>

Завантажуємо змінений файл на сайт і ще раз все проклациваем і перевіряємо. На цьому все. Якщо у вас залишилися якісь питання напишіть в коментарях або на пошту .