OpenCart изменяем картинку в зависимости от языка или расположить текст на кнопке
|На одном из магазинов которыми я занимаюсь возникла проблема, в модуле на лавной странице, который прокручивает товар кнопка «Подробнее» была странно реализована. А именно надписи на кнопке были нарисованны, а не выводились PHP. В принципе это нормально, но до тех пор пока, вы не захотите добавить язык. К примеру у меня магазин на трех языках, поэтому кнопка «Подробнее» или «читать далее» кому как удобнее должна меняться в зависимости от языка. Точнее не сама кнопка, а надпись на ней. В этой статье я расскажу серию экспериментов которые я провел с этой кнопкой, расскажу как воплотить в жизнь изменения картинки в OpenCart в зависимости от языка.
Итак, предыстория, изначально банер выглядел вот так:
но как я писал выше, при переключении языков менялся текст, заголовок, а вот эта кнопка «Подробнее» оставалась прежней. Чтобы понять почему происходит так нажимаем на кнопку правой кнопкой миши и выбираем «Проверить объект», чтобы браузер нам показал исходный код, по которому мы сможем понять почему так происходит. (в этой статье я буду скрывать URL адреса на которые ведут те или инные ссылки просто названием «URL_сайта»). Итак, смотрим:
<a href=»URL_сайта» class=»podrobnee»>
Как видим вся кнопка состоит из двух элементов:
- ссылка на товар на сайте
- Пометку как нужно выводить эту ссылку, а именно что за внешний вид этой ссылки отвечает CSS клас «podrobnee»
Скорее всего разгадка как раз в класе «podrobnee», поэтому давайте найдем его, и посмотрим в чем там дело.
Заходим по FTP на сайт и идем по маршруту:
1 | /catalog/view/theme/Ваша тема/stylesheet/stylesheet.css |
Открываем файл в удобном нам редакторе и ищем клас «podrobnee». Буквальн за секунду находим участок который отвечает за вывод кнопки. А именно:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #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». Первый отвечает за кнопку когда мышка не наведена, а второй когда мышка наведена на кнопку. Давайте найдем эти две картинки. Идем по маршруту:
1 | /catalog/view/theme/Ваша тема/image/podrobnee.png |
Копируем ее на компьютер или смотрим прямо по FTP если это позволяет FTP программа.
Вот в чем дело! Ленивые разработчики шаблона вместо того чтобы сделать все правильно — вывести картинку, а на ней средствами PHP написать текст, просто взяли и написали поверх кнопки. Итого, у нас остается два варианта:
- Сделать рабоу разработчиков, а именно вывод слова «Подробнее» средствами PHP
- Сделать измеения картинки в зависимости от языка.
Поскольку первый способ правильнее чем второй, то мы будем исправлять ситуацию именно им. Для этого копируем на рабочий стол две картинки «podrobnee.png» и «podrobnee_hover.png» и замазываем в Photoshop надпись «Подробнее». Напомню, обязательно делайте резервную копию любых файлов которые изменяете!
У меня кнопка градиентная, поэтому надо чуть повозиться. Итого, у нас вышло как-то так.
Загружаем ее назад на сайт. И все что нам осталось это вывести надпись. Для этого, в системе OpenCart существует два варианта. Один правильный — сделать новый клас, и вывести надпись. Второй более длительный то не требующий определенных навыков работы с PHP и CSS — внести изменения с помощью обычных HTML тегов. Поскольку редактировать CSS читатели этого блога скорее всего не будут, иначе они бы это сделали давно и без помощи этой статьи, то в рамках этого блога рассмотрим только способ с HTML, поскольку он гораздно проще и понятнее. По крайней мере этот способ осилит 95% аудитории блога.
Итак, поскольку у меня модуль который надо исправить называется featblock то редактировать мы будем его. Естественно вы можете редактировать ваш модуль используя все теже самые шаги.
Создаем резервную копию и копируем сам файл к себе на компьютер
1 | /catalog/view/theme/Ваша тема/template/module/featblock.tpl |
Отлично, открываем его и ищем место которое выводит картинку, у меня это
1 | <a href="<?php echo $product['href']; ?>" class="podrobnee"></a> |
Как видим это просто ссылка. Пробуем написать тестовую надпись, к примеру 123. Итого вышло:
1 | <a href="<?php echo $product['href']; ?>" class="podrobnee">123</a> |
после загрузки на FTP вышло так:
Теперь пробуем этой надписи придать нормальный вид. Для начала пробуем ее разместить с лева, а не по центру. Помещаем нашу тестовую запись «123» в тег <p> с позначением выравнивая по левому краю:
1 | <a href="<?php echo $product['href']; ?>" class="podrobnee"><p align="left" >123</p></a> |
Отлично, у меня вышло. Но это не означает что может выйти у вас. Это связанно с тем что в CSS файлах может быть прописано принудительно для тега <p> не выравнивать по левому краю. Что же деать? Все очень просто, играться с другими тегами. Вместо <p> вы можете попробовать:
- заголовки <h1>, <h2>, <h3>, <h4> или <h5>
- Тег <font> который существует как раз для описисывание вида текста
- Ячейку таблицы <tr>
- Тег <p>
Также вы можете использовать все эти теги вместе взятые. Потому что на одном теге работает одни изменения, а на втором другие. Именно так я буду поступать дальше.
Итак, мы остановились на том что сдвинули тестовую запись «123» на лево. Теперь попробуем увеличить шрифт с помощью тега «text size=»5″». Поскольку, как я писал выше, у меня для тега <p> прописаны строгие класы то строчка
1 | <a href="<?php echo $product['href']; ?>" class="podrobnee"><p align="left" text size="5">123</p></a> |
Текст не увеличила. Значит пробуем другой тег, к примеру <font>
1 | <a href="<?php echo $product['href']; ?>" class="podrobnee"><font text size="5"><p align="left" >123</p></font></a> |
Получилось!
Теперь пробуем назначить этой кнопке белый цвет с помощью параметра «color=»white»» . Сначала пропишем его в тег <p>, если это не принесет изменений, то в тег <font>. У меня получилось именно с помощью второго варианта.
1 | <a href="<?php echo $product['href']; ?>" class="podrobnee"><font text size="5" color="white"><p align="left" >123</p></font></a> |
Превосходно! То что и требовалось. Осталось только два шага до счастья, разместить надпись по вертикальному центру, и собственно вместо тестовой надписи сделать ту которая будет меняться в зависимости от языка.
Проблема в первом варианте заключается в том что выравнивание можно сделать тегом valign=middle, но этот тег работает только для ячейки таблицы. Поэтому давайте создадим таблицу с одной ячейкой в которую и пропишем этот выравнивающий тег.
1 2 3 4 5 6 7 | <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 пустых ячейки. Сказано- сделано.
1 2 3 4 5 6 7 8 9 10 | <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> |
Смотрим что вышло:
Вообще торт! Все что нам осталось это вместо тестовой записи сделать нормальный текст который будет меняться в зависимости от языка. Когда-то мы уже такое делали, а именно когда выводили ссылку в шапку сайта с соблюдением мультиязычности Для этого:
- Нам надо придумать какую-то переменную. Главное условия в переменной не должно быть пробелов и она должна быть уникальна на весь сайт. Я придумал «text_podrobnee_1», приставку «_1» сделал специально, чтобы 100% переменная была уникальна.
- Идем по пути
1
/catalog/language/Ваш язык/Название языка
- Для начала возьмем русский. т.е. маршрут будет
1
/catalog/language/russian/russian.php
- Открываем файл и после строчки
1
// Buttons
пишем
1
$_['text_podrobnee_1'] = 'Подробнее';
Переменную и перевод замените на необходимый вам
- Повторите ту же процедуру для всех языков которые у вас есть на сайте. Естественно переводя на нужный язык.
- Все, с перевод справились, теперь нужно сделать так чтобы контроллер модуля обращался к файлу перевода. Идем по пути
1
/catalog/controller/module/featblock.php
- И практически в самом начале вставляем строчку
1
$this->data['text_podrobnee_1'] = $this->language->get('text_podrobnee_1');
Эту строчку нужно втсавить между походими другими строчками, ошибиться там тяжело. Как всегда переменную вы заменяете на свою.
Все что нам осталось это последний рывок, поменять в таблице тестовую переменную, на нужную. Идем к нашему файлу по маршруту
1 | /catalog/view/theme/Ваша тема/template/module/featblock.tpl |
И меняем 123 на такой код
1 | <?php echo $text_podrobnee_1; ?> |
Итого, у нас вышло:
1 2 3 4 5 6 7 8 9 10 11 12 | <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>
Вышло:
1 2 3 4 5 6 7 8 9 10 11 | <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> |
Загружаем измененный файл на сайт и еще раз все проклацываем и проверяем. На этом все. Если у вас остались какие-то вопросы напишите в комментариях или на почту.
Хорошая статья. Столкнулся с подобным. Кнопку также переделал из картинки в блок с фоном и текстом. Но на сайте еще один косяк. Логотип оказался тоже картинкой и текст на нем по дуге. Вариант с выводом текста по дуге в php не знаю. Думаю надо все же менять картинку в зависимости от языка.