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

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

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

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

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

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

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

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

1	/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». Первый отвечает за кнопку когда мышка не наведена, а второй когда мышка наведена на кнопку. Давайте найдем эти две картинки. Идем по маршруту:

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, но этот тег работает только для ячейки таблицы. Поэтому давайте создадим таблицу с одной ячейкой в которую и пропишем этот выравнивающий тег.

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

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

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

Нам надо придумать какую-то переменную. Главное условия в переменной не должно быть пробелов и она должна быть уникальна на весь сайт. Я придумал «text_podrobnee_1», приставку «_1» сделал специально, чтобы 100% переменная была уникальна.
Идем по пути
1
/catalog/language/Ваш язык/Название языка
/catalog/language/Ваш язык/Название языка
Для начала возьмем русский. т.е. маршрут будет
1
/catalog/language/russian/russian.php
/catalog/language/russian/russian.php
Открываем файл и после строчки
1
// Buttons
// Buttons
пишем
1
$_['text_podrobnee_1'] = 'Подробнее';
$_['text_podrobnee_1'] = 'Подробнее';
Переменную и перевод замените на необходимый вам
Повторите ту же процедуру для всех языков которые у вас есть на сайте. Естественно переводя на нужный язык.
Все, с перевод справились, теперь нужно сделать так чтобы контроллер модуля обращался к файлу перевода. Идем по пути
1
/catalog/controller/module/featblock.php
/catalog/controller/module/featblock.php
И практически в самом начале вставляем строчку
1
$this->data['text_podrobnee_1'] = $this->language->get('text_podrobnee_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; ?>

Итого, у нас вышло:

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

Загружаем измененный файл на сайт и еще раз все проклацываем и проверяем. На этом все. Если у вас остались какие-то вопросы напишите в комментариях или на почту.

Об авторе

Andrey

Администратор блога. Специалист по маркетингу, развитию бизнеса, здоровому образу жизни. Владелец и директор двух компаний в Украине. Сертифицированный специалист Apple. Увлечения: бизнес, спорт, дайвинг.

Один комментарий

Владимир 15.09.2015 Ответить

Хорошая статья. Столкнулся с подобным. Кнопку также переделал из картинки в блок с фоном и текстом. Но на сайте еще один косяк. Логотип оказался тоже картинкой и текст на нем по дуге. Вариант с выводом текста по дуге в php не знаю. Думаю надо все же менять картинку в зависимости от языка.

Похожие записи

Об авторе

Andrey

Добавить комментарий