OpenCart изменяем картинку в зависимости от языка или расположить текст на кнопке

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

Итак, предыстория, изначально банер выглядел вот так:

но как я писал выше, при переключении языков менялся текст, заголовок, а вот эта кнопка «Подробнее» оставалась прежней. Чтобы понять почему происходит так нажимаем на кнопку правой кнопкой миши и выбираем «Проверить объект», чтобы браузер нам показал исходный код, по которому мы сможем понять почему так происходит. (в этой статье я буду скрывать URL адреса на которые ведут те или инные ссылки просто названием «URL_сайта»). Итак, смотрим:

Как видим вся кнопка состоит из двух элементов:

ссылка на товар на сайте
Пометку как нужно выводить эту ссылку, а именно что за внешний вид этой ссылки отвечает CSS клас «podrobnee»

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

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

Открываем файл в удобном нам редакторе и ищем клас «podrobnee». Буквальн за секунду находим участок который отвечает за вывод кнопки. А именно:

Как видим кнопка состоит их двух файлов, «podrobnee.png» и «podrobnee_hover.png». Первый отвечает за кнопку когда мышка не наведена, а второй когда мышка наведена на кнопку. Давайте найдем эти две картинки. Идем по маршруту:

Копируем ее на компьютер или смотрим прямо по FTP если это позволяет FTP программа.

Вот в чем дело! Ленивые разработчики шаблона вместо того чтобы сделать все правильно — вывести картинку, а на ней средствами PHP написать текст, просто взяли и написали поверх кнопки. Итого, у нас остается два варианта:

Сделать рабоу разработчиков, а именно вывод слова «Подробнее» средствами PHP
Сделать измеения картинки в зависимости от языка.

Поскольку первый способ правильнее чем второй, то мы будем исправлять ситуацию именно им. Для этого копируем на рабочий стол две картинки «podrobnee.png» и «podrobnee_hover.png» и замазываем в Photoshop надпись «Подробнее». Напомню, обязательно делайте резервную копию любых файлов которые изменяете!

У меня кнопка градиентная, поэтому надо чуть повозиться. Итого, у нас вышло как-то так.

Загружаем ее назад на сайт. И все что нам осталось это вывести надпись. Для этого, в системе OpenCart существует два варианта. Один правильный — сделать новый клас, и вывести надпись. Второй более длительный то не требующий определенных навыков работы с PHP и CSS — внести изменения с помощью обычных HTML тегов. Поскольку редактировать CSS читатели этого блога скорее всего не будут, иначе они бы это сделали давно и без помощи этой статьи, то в рамках этого блога рассмотрим только способ с HTML, поскольку он гораздно проще и понятнее. По крайней мере этот способ осилит 95% аудитории блога.

Итак, поскольку у меня модуль который надо исправить называется featblock то редактировать мы будем его. Естественно вы можете редактировать ваш модуль используя все теже самые шаги.

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

Отлично, открываем его и ищем место которое выводит картинку, у меня это

Как видим это просто ссылка. Пробуем написать тестовую надпись, к примеру 123. Итого вышло:

после загрузки на FTP вышло так:

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

Отлично, у меня вышло. Но это не означает что может выйти у вас. Это связанно с тем что в CSS файлах может быть прописано принудительно для тега <p> не выравнивать по левому краю. Что же деать? Все очень просто, играться с другими тегами. Вместо <p> вы можете попробовать:

заголовки <h1>, <h2>, <h3>, <h4> или <h5>
Тег <font> который существует как раз для описисывание вида текста
Ячейку таблицы <tr>
Тег <p>

Также вы можете использовать все эти теги вместе взятые. Потому что на одном теге работает одни изменения, а на втором другие. Именно так я буду поступать дальше.

Итак, мы остановились на том что сдвинули тестовую запись «123» на лево. Теперь попробуем увеличить шрифт с помощью тега «text size=»5″». Поскольку, как я писал выше, у меня для тега <p> прописаны строгие класы то строчка

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

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

Превосходно! То что и требовалось. Осталось только два шага до счастья, разместить надпись по вертикальному центру, и собственно вместо тестовой надписи сделать ту которая будет меняться в зависимости от языка.

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

Загрузили измененный файл на сайт, но результата нет. Текст по вертикали не выравнялся. Что же делать? Идея пришла после того как я поигрался с таблицей минут 10. Мы можем сместить текст с помощью ячеек. Дело в том что пустая ячейка это примерно 3 прозрачных пикселя. Значит нам надо перед нашим текстом сделать 4 пустых ячейки. Сказано- сделано.

Смотрим что вышло:

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

Нам надо придумать какую-то переменную. Главное условия в переменной не должно быть пробелов и она должна быть уникальна на весь сайт. Я придумал «text_podrobnee_1», приставку «_1» сделал специально, чтобы 100% переменная была уникальна.
Идем по пути

📎📎📎📎📎📎📎📎📎📎