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

Итак, перейдем к практике. Из предыдущей статьи у нас уже остался наш репозиторий для обучения и в нем сейчас создана автоматически основная ветка «master«. Давайте добавим новую ветку, используя команду git branch и назовем ее «ver-1.0». Когда ветка создана, мы можем перейти к ней используя команду git checkout. Обратите внимание на то, что консоль всегда отображает текущую выбранную ветку.

Теперь мы можем добавить или удалить файлы из репозитория или внести в существующие изменения, после чего все эти изменения добавляем путем команды git add и сохраняем в репозиторий командой git commit.

Вернемся в нашу ветку master, при помощи команды git checkout master, и внесем в нее несколько изменений. Например добавим файл master.php чтобы явно различать ветки визуально. Для перехода к ветке master необходимо ввести команду git checkout master. Обратите внимание, что после смены ветки наш файл «test-file-for-ver-1.0.php» исчез, собственно как и все наши изменения в файлах.

Давайте посмотрим на историю нашего репозитория, используя команду git hist из предыдущей статьи. Мы должны увидеть все коммиты в данной ветке и не увидим коммитов нашей новой ветки ver-1.0. Для того чтобы увидеть и их необходимо добавить параметр —all к нашей команде чтобы она выглядела следующим образом:

git hist --all

Таким образом мы получили две версии (ветки) одного и того же проекта (репозитория), но каждая из которых имеет свои дополнения и теперь нам необходимо их слить в одну ветку. Для этого выберем ветку которая будет основной (т.е. в которую будут сливать изменения), обычно это master, и она у нас сейчас активна, используя команду git merge.

git merge ver-1.0

После ввода данной команды у вас появится окно с просьбой ввести описания для этого слияния если это необходимо (собственно тоже самое будет если при коммите не указать параметр -m «Ваше сообщение о коммите»). Для того чтобы написать сообщение достаточно нажать «i», ввести сообщение, нажать «esc», ввести «:wq», что обозначает «write, quit».

Обратите внимание, файлы и изменения из ветки ver-1.0 были перемещены в нашу текущую ветку, а сама ветка была завершена слиянием. Для того чтобы в этом убедиться, введите снова команду git hist —all и посмотрите что выдаст вам график.

На этом все, пробуйте, экспериментируйте, пишите комментарии. Сегодня мы научились работать с ветками в распределенной системе контроля версий. В следующих статьях мы поговорим про удаленные репозитории, хуки, а также немного про SSH.

Данная статья является первой частью серии записок WEB разработчика использующего GIT в своей практике. В данной серии мы постараемся разобраться с системой GIT с нуля.

Что такое GIT?

Для начала необходимо осознать и запомнить, что распределенная система контроля версий GIT — это система, которая помогает вам следить за изменениями в вашем проекте, а точнее в файлах вашего проекта. Файлы хранятся в репозитории (repository) — место, где хранятся и поддерживаются какие-либо данные, или вне репозитория, но об этом позже.

Сперва может показаться что данная система чем-то напоминает облачное хранилище (DropBox, Google Drive), но структура GIT немного сложнее и ключевой момент — GIT не хранит файлы — он хранит изменения, которые применяются/были применены к файлам. Если упростить понятие, то GIT — это всего лишь лог (журнал, log) изменений ваших файлов.

Преимущества GIT

Данная система удобна для разработчиков по следующим причинам:

1. откат к определенной точке в разработке;
2. логирование (ведение журнала) изменений в проекте;
3. быстрое и удобное обновление файлов на сервере (сравнивал на личном опыте, это удобней FTP загрузки);
4. возможность командной разработки.

Я уверен, что разработчики, использующие системами распределенных версий, могут назвать еще больше преимуществ в использовании системы GIT, но на личном опыте я почувствовал преимущества однозначно.

Как работает GIT?

Система контроля версий GIT, как я уже и описал выше, напоминает некий лог (журнал) изменений ваших файлов, и как и в любой журнал или базу необходимо вносить записи. Но давайте разберемся с самого начала.

Для начала работы с GIT необходимо создать репозиторий. Есть несколько типов репозиториев: стандартные и пустые (bare). Основное отличие заключается в том, что в пустом репозитории не расположены сами файлы, а в его настройках может быть указана папка для развертывания (деплой, deploy, применения изменений в существующие файлы), но об этом также расскажу дальше.

Итак, создайте папку где вы будете хранить файлы, работать — это и будет нашим первым тестовым репозиторием. После чего перейдите в данную папку или кликните по ней правой кнопкой мыши и запустите консоль GIT (Git Bush). Теперь создадим репозиторий внутри данного каталога, выполнив команду «git init«.

UPD: Поскольку это ваш первый GIT-репозиторий, вам также необходимо будет настроить («представиться» указав ваши имя и Email) GIT, т.к. иначе GIT не даст вам сделать commit. Сделать это очень просто — вам достаточно ввести две следующие команды:

git config --global user.name "Your Name"
git config --global user.email "your_email@domain.com"

А также внесем следующие параметры для Windows:

git config --global core.autocrlf true
git config --global core.safecrlf true

И для Linux:

git config --global core.autocrlf input
git config --global core.safecrlf true

Это глобальные настройки GIT, которые будут использоваться для всех репозиториев. Обратите внимание на приставку —global — она означает что данная настройка является глобальной и будет записана в файл конфигурации, расположенном в C:/Users/YOUR_USER/.gitconfig. В каждом отдельном репозитории вы можете также переназначить эти параметры просто введя команду: git config user.name «Your Name».

Для того чтобы посмотреть файлы конфигурации и другие настройки вашего репозитория — зайдите в папку в которой расположен ваш репозиторий, потом в папку .git и откройте файл config. Все файлы (config и .gitconfig) можно открывать обычным Notepad++ или любым другим текстовым редактором.

Если у вас нет папки .git (а точнее ее просто не видно) в папке с репозиторием и вы пользуетесь обычным проводником — перейдите во вкладку «Вид» — «Параметры» — вкладка «Вид» — и список «Дополнительные параметры» прокрутите до низа и установите значение «Показать скрытые файлы, папки и диски».

Теперь вернемся к командной строке GIT (GIT Bush) и запомним некоторые основные комманды GIT:

1. git add — добавляет файлы в репозиторий, таким образом мы указываем GITу, что ему необходимо отслеживать изменения в данных файлах или добавить текущие изменения в указанном файле в коммит;
2. git status — отображает статус вашего репозитория;
3. git commit — делает «запись» (с англ commit — фиксировать).

Теперь поместите файлы в ваш репозиторий и проверьте статус вышеупомянутой командой. Система должна вам сообщить что появились файлы, ожидающие к добавлению в GIT. Выполните команду «git add .» чтобы добавить все файлы в папке. Чтобы добавить каждый файл отдельно, необходимо прописывать путь к каждому файлу отдельно.

Теперь, когда файлы добавлены мы можем сделать первый коммит и зафиксировать состояние репозитория. Для этого можно воспользоваться командой «commit -m «Your tip here about what you have done» «. Если не указывать параметр m, то у вас откроется окно с текстом коммита (пометка, заметка) — вы можете набрать текст в нем и используя комбинацию :wq (w = write, q = quit) выйти из редактора.

Теперь можете попробовать изменить файл и добавить еще один и ввести статус, и вы увидите что система отобразит информацию что были добавлены новые файлы и был изменен ваш текущий файл. Теперь вы можете разными коммитами добавить файл и сохранить изменения в первом файле. Для этого выполните команду «git add index.php» для добавления изменений из первого файла и сделайте коммит, а потом добавьте второй файл «git add README.md» и сделайте еще один коммит.

UPD: для проверки истории вашего репозитория вы можете воспользоваться командой git log. Для навигации используйте клавиши стрелка влево/стрелка вправо. Однако она не очень удобна в использовании в таком формате.

Поэтому опытные разработчики используют данную команду с дополнительными параметрами, где определяют формат лога. Команда выглядит следующим образом: git log —pretty=format:»%h %ad | %s%d [%an]» —graph —date=short. Что позволяет увидеть историю всего репозитория, как показано на следующем скриншоте:

Однако использовать такую команду постоянно достаточно сложно ввиду ее длинны. Поэтому мы перейдем к следующей возможности системы GIT — Алиасы (сокращение команд). Они помогают вам задать, какие команды будут выполнены при введении определенных «ключевых слов», если сказать еще проще — автозамена. Теперь мы создадим алиас hist для команды вывода удобного лога путем выполнения команды: git config —global alias.hist «log —pretty=format:’%h %ad | %s%d [%an]’ —graph —date=short».

Теперь при вводе в любом репозитории команды git hist мы сможем увидеть подобного вида историю операций над нашим проектом. Также зайдите в папку .git после всех проделанных операций и посмотрите на файл config, в нем вы увидите что параметры конфигурации делятся на группы (alias, core).

Таки образом вы уже научились работать со стандартными репозиториями в GIT и можете начинать пользоваться системой контроля версий, но пока без функции распределения. В следующих статьях мы поговорим об удаленных репозиториях, ветках, и хуках (hook).

Для WordPress одним из решений для создания мультиязычного сайта является плагин PolyLang. Однако данный плагин не решает задачу локализации надписей/полей в шаблонах WordPress которые не являются полями страниц или записей, которые заполняются в административной части.

Знакомьтесь *.po и *.mo

Уверен что большинство разработчиков сталкивались с файлами с расширением *.po и *.mo — именно эти файлы и позволяют локализовать строки вашего сайта очень простым путем. Они содержат в себе инструкции в формате «ключ = значение», где ключ — идентификатор строки, а значение — ее перевод.

Если вы с ними не знакомы, то можете открыть папку wp-content/languages, или папку с языками вашей темы, которая может находится в папке с самой темой и познакомиться с ними поближе, открыв их, например, NotePad или любым другим текстовым редактором.

Обратите внимание: имя каждого файла состоит из названия плагина или темы (или любой другой идентификационной информации), а также кода языка, перевод которого содержит данный файл локализации. Таким образом для каждого языка создается по одному файлу *.po и *.mo.

Если вы откроете *.mo файл при помощи текстового редактора, то вы наверняка увидите абракадабру и ничего не поймете, ведь это и есть скомпилированный языковый файл для системы, который генерируется из файла *.po. Если проводить аналогию с редактированием изображений, то *.psd = *.po, а *.jpg = *.mo.

Файл *.po имеет уже более понятную структуру и можно разобраться в нем. Если разобрать данный файл, то вы увидите что строки идут парами «ключ-значение», о чем мы и говорили в начале статьи. Выглядит это примерно так:

#: views/start.php:59
msgid "Sign up with a different email address"
msgstr "Войти с другим адресом электронной почты"

Как видите символ «#«, как и в многих C-подобных языках программирования, обозначает комментарий, в котором в данном случае указан путь к файлу в котором была обнаружена строка с «msgid» (message ID — идентификатор сообщения). Далее следует значение для данного ключа с указанием «msgstr» (message string — строка сообщения), которую необходимо вывести в случае если в шаблоне встретится данный идентификатор.

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

Локализуем шаблон WordPress

Для того чтобы включить в шаблоне поддержку локализации, нам сперва необходимо добавить в файл functions.php нашей темы следующую строку:

load_theme_textdomain('your_translation_ID', 'path_to_mo_files');

где your_translation_ID — это идентификатор вашего перевода (можно занести название темы или плагина например), он будет использоваться далее при вызове строки перевода. А path_to_mo_files — естественно путь к вашим файлам локализации (*.mo и *.po).

По идее: в случае использования стандартной папки для переводов (т.к. параметр path_to_mo_files является необязательным) your_translation_ID используется как идентификатор файла, т.к. там расположены переводы разных плагинов и тем. То есть файл должен иметь имя your_translation_ID-en_GB.mo, например для стандартной темы файл называет так: twentysixteen-en_GB.mo.

Обратите внимание: по-умолчанию файлы хранятся в папке wp-content/languages и далее либо в папке themes или plugins. Также путь к файлам указывается БЕЗ слеша в конце. Для того чтобы указать путь к языкам, которые находятся в папке с темой можно использовать следующую конструкцию:

load_theme_textdomain('your_translation_ID', get_template_directory().'/languages');

Естественно, если файл локализации содержит пару ключ-значение, то в шаблоне WordPress или любом другом файле, который мы собираемся локализовать, должен быть вызов строки по соответствующему ключу. При работе с шаблонами WordPress, вы наверное уже сталкивались с конструкциями вида:

_e("404 error", "your_translation_ID");

или

__("404 error", "your_translation_ID");

Данные строки и являются местами вызова локализационных файлов. Эти функции отличаются лишь тем, что одна (_e()) выводит строку на экран (выполняется функция php «echo»), а другая (__()) просто возвращает локализованую строку. Данные функции принимают два параметра: идентификатор строки (по которому будет идти поиск соответствующего msgid) и идентификатор перевода, откуда будет браться данная строка.

Теперь нам необходимо «пройтись» по всем файлам нашей темы или плагина и заменить все строки на подобные конструкции. После этого мы будем их парсить (просматривать программным обеспечением) и переводить строки, создавая файлы *.po и *.mo.

Создаем файл локализации *.po и *.mo

Для работы с файлами локализации шаблона на WordPress *.po *.mo понадобится программа Poedit, которая позволит работать с файлами переводов (*.po) и генерировать непосредственно файл, который использует WordPress (*.mo). Для примера, я создам файл test.php, который будет содержать два примера строк: с переменными и обычную, а идентификатором выступит ключ «nikita-spivak».

<p>Тут может быть любой текст или верстка<p>
<?php _e("This text will be shown", "nikita-spivak"); ?>
<p>Также он может быть тут</p>
<p><?php printf(__('See full lesson %s here %s', 'nikita-spivak'), '<a href="http://nikita-sp.com.ua">', '</a>'); ?>
или тут. Где угодно!</p>;

Теперь откроем программу Poedit и создадим новый файл (Файл — создать). Указываем язык, на который мы будем переводить строки, в нашем случае русский, и приступаем к настройке парсера. Для этого переходим во вкладку Каталог — Свойства. Заполняем всю информацию (по желанию) на первой вкладке «Свойства перевода», переходим к последней вкладке «Ключевые слова исходных файлов» и добавляем ключевые слова для парсера (__ и _e). Сохраняем файл в нужной нам директории шаблона или плагина.

После того как файл был успешно сохранен, переходим к настройке путей к файлам, которые необходимо просканировать на наличие строк для перевода. Переходим во вкладку Каталог — Свойства и открываем вторую вкладку (посередине) «папки с исходными файлами».  На данной вкладке расположены два списка которые нам необходимо заполнить:

• папки которые включены в поиск;
• исключенные папки, например, папки с css, js или sass файлами.

Используя кнопки добавления, редактирования и удаления элементов в списке добавляем нужные папки, после чего нажимаем «ОК» и нажимаем на кнопку «Обновить». Когда редактор скажет что нужно сохранить файл — соглашаемся и сохраняем файл. После сканирования папок вы увидите найденные в ваших файлах строки для перевода. Теперь остается их только перевести и снова сохранить в файл.

После сохранения файлов вы увидите, что в папке куда вы сохранили *.po файл будет сгенерирован также и файл с расширением *.mo. В случае если файл находится в папке с темой или плагином, название файла должно содержать только код языка, перевод которого содержится в файле, если же файл расположен в общей папке wp-content/languages то нужно перед кодом файла указать идентификатор перевода.

Если вам необходимо добавить новую строку в вашу тему или плагин, достаточно просто добавить ее в исходные файлы, открыть файл локализации *.po при помощи Poedit и нажать на кнопку «Обновить». Обратите внимание что структура папок должна оставаться той же! Если вы переместили файл(ы) — укажите новый путь в свойствах перевода.

Итог

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

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

Данный модуль является обновленной версией модуля скидки для групп покупателей для Opencart 2 и обладает новым функционалом, а установка стала проще: просто загрузите архив через установщик расширений в административной части интернет магазина!

Напомню, что в данном обновлении, не только был изменен алгоритм вычисления скидки, который мог не корректно работать с ценами, указанными с налогом, но и добавлен новый функционал!

Поскольку данные модули также доступны и на сайте opencart.com, то часть из моих пользователей имеет иную систему налогооблажения или не использует ее вовсе! В связи с этим было решено добавить опцию, которая позволяет включать и отключать учет налога в скидке.

Например: есть товар за 100$, его цена с налогом составляет 120$. Скидка для пользователя составляет 10%, и изменяя значение данной опции вы можете установить размер скидки или 10$ (от цены БЕЗ налога) или 12$ (от цены С налогом).

Другим очень важным и популярным вопросом пользователей моего модуля стало исключение из скидки товаров, уже имеющих акционную цену, ввиду чего и была добавлена опция «Исключать акционные товары». Таким образом вы можете настроить еще более гибкую систему скидок на вашем сайте!

И последей в списке, но не последней по популярности была просьба добавить возможность скрывать скидку (непосредственно надпись в корзине) в случае если скидка составляет 0%, или вообще скрыть. Я решил добавить несколько вариантов для того чтобы каждый мог настроить модуль как ему удобно и теперь можно установить отображение скидки всегда, только если не 0, или скрыть вообще.

Собственно интерфейс модуля скидок для групп покупателей для Opencart 2.x был также обновлен — теперь он доведен до ума и выглядит очень стильно и вписывается в общий стиль. Собственно ознакомится с принципом работы модуля можно на скриншотах ниже.

В архиве стандартная комплектация моих модулей: скриншоты англ. версии, файлы README англ. и рус. версии, файлы для загрузки на сервер. При загрузке ни один файл не будет перезаписан.

Правила использования модуля стандартные, для моих бесплатных модулей: модуль абсолютно бесплатный, для использования, однако загружать на сторонние ресурсы запрещено – делитесь ссылкой на эту страницу, спасибо за понимание.

Спасибо за доверие, не забываем подписываться и ставить +1, ведь именно благодаря ВАШИМ “лайкам” я вижу что работа не напрасна, а комментарии дают вдохновение на сотворение новых модулей и модификацию имеющихся!

Также буду рад услышать ваши комментарии относительно данного и иных моих модулей, а также предложения по их улучшению, и идеи для написания новых модулей!

Скачать Total Customer Group Discount 2 для Opencart 2.x: nikita_spivak-total-customer-group-discount-v2-opencart-2.x

Зачастую иконка у любого сервиса или приложения генерируется из логотипа. Это может быть его упрощенная версия, или просто основной символ.

Создаются такие иконки с одной простой целью — повышение узнаваемости бренда. При наличии простых и ярких иконок, пользователю проще идентифицировать тот или иной продукт/личность/услугу. Поэтому очень рекомендую вам, при создании сайта, добавлять иконки.

Десять лет назад было достаточно лишь favicon.ico — файла в корне вашего сайта, который являлся его иконкой, которая отображалась в случае если добавлялась закладка в браузере. С выходом на рынок мобильных устройств изменился принцип разработки сайтов, и это затронуло также иконки сайта.

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

• для IOS (для закладки и для экрана «Домой»);
• для Windows;
• для Android;

Но для программистов генерировать на каждый сайт пакет иконок вручную было бы не рационально, поэтому лично я пользуюсь сервисом генератора иконок для сайтов, который и вам советую: он обновляется и более современный по сравнению с остальными, а также обладает очень удобными и полезными настройками. Интерфейс генератора представлен ниже.

Таким образом вы получаете полный пакет иконок для разных устройств, а также код для вставки на свой сайт. В интернете существует множество генераторов иконок для сайтов, и вы можете выбрать любой другой, который вас удовлетворит.

Огромное спасибо моим подписчикам, которые поддерживают меня и предлагают свои идеи по созданию модулей, а также их улучшению, сообщают об ошибках. И я, прислушавшись к вашим пожеланиям, выпускаю для вас обновление одного из самых популярных модулей: модуль скидки для групп покупателей для Opencart.

В данном обновлении я постарался учесть все ваши пожелания, а также установил обязательное заполнение поля «Порядок сортировки», которое все забывали заполнять и писали в комментариях что модуль не рабочий. Надеюсь теперь вопросов будет меньше

Собственно, давайте перейдем непосредственно к модулю и его новым функциям! Во-первых, алгоритм модуля был полностью переписан, т.к. старый алгоритм был не правильным при расчетах цен с налогом. Ввиду того что модуль используется по всему миру, было принято решение добавить опцию, которая позволяет выбрать: устанавливать скидку на цену продукта БЕЗ налога или С налогом.

Например: есть товар за 100$, его цена с налогом составляет 120$. Скидка для пользователя составляет 10%, и изменяя значение данной опции вы можете установить размер скидки или 10$ (от цены БЕЗ налога) или 12$ (от цены С налогом).

Во-вторых, теперь вы можете исключить товары, у которых УЖЕ установлена акционная цена! Таким образом вы можете настроить в своем интерне-магазине еще более гибкую систему скидок!

И напоследок, функция, о которой меня просили всего несколько раз — возможность скрывать из корзины уведомление о скидке! Данная опция позволяет скрыть надпись об акции совсем, выводить ее только в случае, если у клиента скидка больше 0%, или показывать всегда!

В архиве стандартная комплектация моих модулей: скриншоты англ. и рус. версии, файлы README англ. и рус. версии, файлы для загрузки на сервер. При загрузке ни один файл не будет перезаписан.

Правила использования модуля стандартные, для моих бесплатных модулей: модуль абсолютно бесплатный, для использования, однако загружать на сторонние ресурсы запрещено – делитесь ссылкой на эту страницу, спасибо за понимание.

Спасибо за доверие, не забываем подписываться и ставить +1, ведь именно благодаря ВАШИМ “лайкам” я вижу что работа не напрасна, а комментарии дают вдохновение на сотворение новых модулей и модификацию имеющихся!

Также буду рад услышать ваши комментарии относительно данного и иных моих модулей, а также предложения по их улучшению, и идеи для написания новых модулей!

Скачать Total Customer Group Discount 2 для Opencart 1.5.x: nikita_spivak-total-customer-group-discount-v2

Данный модуль позволяет установить скидку для разных групп покупателей для всех товаров сразу, при этом данная скидка будет отображаться на странице товара!

Модуль работает со стандартными группами покупателей, и все что вам необходимо — это создать группы, зайти на страницу настроек данного модуля в разделе «Модули» и установить определенные значения скидок для них.

Особенности модуля массового управления скидками товаров для Opencart:

• Скидка выводится на странице товара (в карточке товара);
• Скидка может быть изменена для конкретного товара вручную;

Для визуального ознакомления с административной и пользовательской частями модуля, предлагаю взглянуть на данные скриншоты:

В архиве стандартная комплектация моих модулей: скриншоты англ. версии, файлы README англ. и рус. версии, файлы для загрузки на сервер. При загрузке ни один файл не будет перезаписан.

Правила использования модуля стандартные, для моих бесплатных модулей: модуль абсолютно бесплатный, для использования, однако загружать на сторонние ресурсы запрещено – делитесь ссылкой на эту страницу, спасибо за понимание.

Спасибо за доверие, не забываем подписываться и ставить +1, ведь именно благодаря ВАШИМ “лайкам” я вижу что работа не напрасна, а комментарии дают вдохновение на сотворение новых модулей и модификацию имеющихся!

Также буду рад услышать ваши комментарии относительно данного и иных моих модулей, а также предложения по их улучшению, и идеи для написания новых модулей!

Скачать Batch Customer Group Specials for OpenCart 2.x: nikita_spivak-batch-customer-group-specials-opencart-2.x

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

Для начала приведем пример стандартной таблицы, которая выводит список характеристик товаров для сравнения:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Характеристка 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr>
      <td>Характеристка 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>

Теперь перейдем к сути проблемы. Таблица должна быть удобной для просмотра на мобильных экранах, и пользователь должен иметь возможность легко сравнивать продукты. Для достижения данной цели есть два метода.

Решение 1: Flexbox

Используя следующие CSS свойства, мы можем сделать нашу табличку адаптивной:

@media screen and (max-width: 768px) {
  tr {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
  }

  td, th {
    display: block;
    width: 33%;
  }

  th:first-child,
  td:first-child {
    text-align: center;
    background: #efefef;
    width: 100%;
  }

  th:first-child {
    display: none;
  }
}

Однако, данное решение не является универсальным, т.к. поддержка flexbox составляет около 80% для современных браузеров и более 93%, если учитывать версии браузеров, которые требуют префиксы. Поддержка IE начинается с IE10 (синтаксис 2012 года), в то время как IE11 имеет полную поддержку.

Так как мы заинтересованы в поддержке маленьких экранов, то мы можем игнорировать отсутствие поддержки предыдущих версий IE. На мобильных устройствах, поддержка начинается с Android 4.4 и iOS 7.1. Предыдущие версии требуют префиксы или не поддерживают данную функцию.

Решение 2: доп. разметка + ARIA

Если все-таки большая часть из браузеров, которые вы собираетесь охватить, не поддерживает flexbox, то есть альтернатива, однако необходимо будет добавить дополнительную разметку: мы должны добавить один дополнительный ряд, дублируя название характеристик. Вот модифицированный код для данного решения из нашего примера:

<table>
  <thead>
    <tr>
      <th>&nbsp;</th>
      <th>Продукт 1</th>
      <th>Продукт 2</th>
      <th>Продукт 3</th>
    </tr>
  </thead>
  <tbody>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 1</td>
    </tr>
    <tr>
      <td>Характеристика 1</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 2</td>
    </tr>
    <tr>
      <td>Характеристика 2</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 3</td>
    </tr>
    <tr>
      <td>Характеристика 3</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
    <tr class="visible-xs" aria-hidden="true">
      <td>&nbsp;</td>
      <td colspan="3">Характеристика 4</td>
    </tr>
    <tr>
      <td>Характеристика 4</td>
      <td>&mdash;</td>
      <td>&mdash;</td>
      <td>&#10004;</td>
    </tr>
  </tbody>
</table>

CSS в таком случае будет еще проще:

.visible-xs {
  display: none;
}

@media screen and (max-width: 768px) {
  .visible-xs {
    display: table-row;
  }

  td:first-child,
  th:first-child {
    display: none;
  }
}

Выводы

Итак, мы ознакомились с двумя вариантами адаптивной верстки таблиц для сравнения. Оба варианта имеют свои плюсы и минусы. В конце концов, выбранный вариант должен зависеть от специфики вашей аудитории. В большинстве случаев, первого варианта должно быть достаточно.

А если вам действительно нужна поддержка более старых версий Android и iOS, вы можете использовать второй вариант. В любом случае, теперь, ваши таблицы сравнений будут выглядеть намного лучше, независимо от размера экрана.

Данный плагин является частично бесплатным — вы можете приобрести Premium версию, которая даст вам больше возможностей, среди прочих будет возможность использования шаблонов. Однако, ваш покорный слуга, нашел способ изменять шаблон вывода отзывов плагина WP Customer Reviews без приобретения лицензии.

Начнем, пожалуй, с того, что я не являюсь сторонником пиратства и с уважением отношусь к чужому труду, однако, по моему скромному мнению, уж если ты решился распространять модуль бесплатно — то дай возможность настроить его вид! Обрежь функционал, запрети добавлять дополнительные поля к отзывам, да что угодно, но дай возможность настроить вывод соответственно дизайну сайта.

Данная статья является ознакомительной и я настоятельно рекомендую приобретать лицензии на Premium версии плагина WP Customer Reviews.

Итак, вышло обновление плагина WP Customer Reviews и в новой (3.x) версии почему-то внезапно настройка внешнего вида попала под Premium лицензию, хотя в предыдущих версиях 2.x настроить вывод отзывов данного плагина было можно, изменяя файлы в директории самого дополнения (wp-content/plugins/wp-customer-reviews).

Шаблон WP Customer Reviews 3.x

Чтобы изменить вид отзывов в плагине WP Cusomer Reviews 3.x, придется модифицировать и исполнимые файлы модуля, чтобы заставить его использовать шаблоны в соответствующей папке wp-content/plugins/wp-customer-reviews/include/templates. Сами шаблоны для бесплатной лицензии хранятся в базе данных в таблице wp_options с ключом option_name = wpcr3_options, и выглядят как показано на рис. 1. Но хранение и редактирование шаблона в БД, в моем понимании, крайняя степень мазохизма.

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

В связи с этим я решил разобраться, как же все-таки работает данный механизм, и оказалось все предельно просто: в плагине используется шаблонизатор именуемый Goatee, который и подставляет все переменные в HTML, который передается в виде аргумента функции.

wpcr_Goatee::fill($this->options['templates']['frontend_review_item'], $data)

Таким образом, в функцию передается HTML шаблон из базы данных, а также данные из массива $data. Наша же с вами задача просто заменить источник HTML кода с базы данных на файл шаблона.

Используем шаблон WP Customer Reviews

Для того чтобы использовать непосредственно файлы шаблонов, которые расположены в директории самого плагина в папке include/templates, нам необходимо установить источник HTML кода, передаваемого в функцию wpcr_Goatee::fill на эти файлы. Для этого ищем строчки, содержащие следующий код:

wpcr_Goatee::fill($this->options['templates']

Таких строчек мы должны найти 9 штук. И каждую из них необходимо модифицировать путем замены переменной $this->options[‘templates’][‘TEMPLATE_NAME’] на file_get_contents($this->getplugindir() . ‘include/templates/TEMPLATE_NAME.html’). Таким образом из строчки:

wpcr_Goatee::fill($this->options['templates']['frontend_review_pagination'], $pagination);

мы получаем:

wpcr_Goatee::fill(file_get_contents($this->getplugindir() . 'include/templates/frontend_review_pagination.html'), $pagination);

И так далее все девять строчек, где встречается wpcr_Goatee::fill($this->options[‘templates’]. Таким образом мы заменяем HTML из базы данных HTML-кодом из файлов. Также вы можете использовать любой другой файл, который вам удобно — вы можете вынести эти файлы в папку вашей темы WordPress и хранить их там, чтобы предотвратить из перезапись.

Итог

Теперь вы можете редактировать HTML-код в файлах, хранящихся в папке шаблонов include/templates и внешний вид ваших отзывов будет изменен согласно вашим правкам. Но не забудьте, что данная модификация будет работать до следующего обновления плагина WP Customer Reviews, когда файлы перезапишутся (а карета превратится обратно в тыкву )!

Вот таким простым способом вы можете настроить вид отзывов на WordPress сайте, использующем плагин WP Customer Reviews. Лично я считаю что такая возможность как изменение внешнего вида плагина не должна попадать под список «привилегированных функций» для Premium лицензии, поэтому собственно и решил поделиться этой маленькой инструкцией. А что думаете вы по этому поводу?

Но, читатель, как оказалось, просил модуль для задания разных валют административной и пользовательской частей для Opencart 2.x. И поскольку я обещал помочь — помогаю. Представляю вашему вниманию модуль выбора валюты интернет-магазина на Opencart 2.x.

Никаких изменений, кроме его адаптации под новую версию Opencart 2.x, внесено не было. Порядок установки:

1. распаковать скачанный архив;
2. зайти в административную часть вашего интернет магазина на Opencart 2;
3. перейти в раздел Установщик расширений;
4. выбрать файл из архива upload/nikita_sp-fronend-currency.ocmod.xml;
5. дождаться окончания установки.

После установки модуля не забудьте обновить кеш в разделе Модификации, после чего проследуйте в настройки магазина:

Внесите изменения в файле index.php в корне вашего сайта — найдите строку (~204 line):

$registry->set('currency', new Currency($registry));

И после нее вставьте следующий код:

// Nikita Spivak MOD FOR DEFAULT CURRENCY SET
$registry->get('currency')->set($config->get('config_frontend_currency'));

Теперь вы можете устанавливать отдельно валюту для административной части интернет магазина на Opencart, и отдельно настроить валюту для пользовательской части вашего интернет магазина.

Правила использования модуля стандартные, для моих бесплатных модулей: модуль абсолютно бесплатный, для использования, однако загружать на сторонние ресурсы запрещено – делитесь ссылкой на эту страницу, спасибо за понимание.

Спасибо за доверие, не забываем подписываться и ставить +1, ведь именно благодаря ВАШИМ “лайкам” я вижу что работа не напрасна, а комментарии дают вдохновение на сотворение новых модулей и модификацию имеющихся!

Также буду рад услышать ваши комментарии относительно данного и иных моих модулей, а также предложения по их улучшению, и идеи для написания новых модулей!

Скачать FrontEnd Currency by Nikita Spivak для Opencart 2.x: nikita_spivak-fronend-currency-oc2.x