Пишем свой vQmod для OpenCart 2.0.2.0

В этой статье мы напишем простенький vQmod для OpenCart 2.0.2.0, который на странице контактов заменит карту от Google на карту 2ГИС.

Для начала немного теории.

С понятием vQmod я столкнулся только при работе с OpenCart - на этом движке я делаю интернет-магазины. Система мне настолько понравилась, что я даже был удивлён, почему она не используется в других сайтовых движках, по крайней мере известных мне.

Что такое vQmod

"vQmod™" (Virtual Quick Mod) — это система, которая вносит виртуальные изменения в исходный код OpenCart. Принцип vQmod довольно прост: файл считывается в память, здесь vQmod вносит свои изменения, а затем уже файл отдаётся браузеру (пользователю).

Таким образом, исходные файлы OpenCart не затрагиваются — в этом и есть основная идея vQmod.

Изменения вносятся путем инструкций, заданных в специальном XML-файле, где описывается, что и где найти, заменить, добавить и т.д. Эти файлы обрабатываются во время загрузки страницы. Затем файлы с уже внесенными изменениями сохраняются как временные, после чего эти файлы будут использоваться в дальнейшем при загрузке страниц.

Здорово, правда?

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

Берёшь xml-файлик, кидаешь его в специальную папку (/vqmod/xml/) и все дела - он начинает работать. Удалишь этот файлик и система в исходном состоянии.

Есть и минусы - несколько теряется скорость работы, но не настолько, чтобы это было вообще заметно. Нет, конечно, если у Вас установлено несколько десятков xml-файлов, то тут да - падение производительности может быть уже довольно ощутимым. Это как с плагинамиWordPress. И опять-же, не следует забывать про кеш! Ведь в большинстве случаев файл уже просто берётся из кеша и скорость загрузки тут уже никак не страдает. Кстати, vQmod использует свой кеш. 

А если таких xml-модов у Вас три-пять, то можно вообще не переживать.  

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

Вот, например, скрин с xml-модами, установленными у меня на реально работающем магазине OpenCart.

Сколько их там я даже не считал, но никаких тормозов не наблюдается. 

Почему не устраивает карта Google

По умолчанию OpenCart адаптирован к работе именно с картами Google.

Я не знаю как где, но Казахстан картографы Google скорее всего видели только на очень некачественных фотографиях со спутника...

Вот, например, как нужное мне место города Алматы выглядит на картах Google:

По такой карте что-либо найти очень сложно...

А что говорить о клиентах интернет-магазина, которые захотят приехать в наш реальный магазин...

Таких клиентов, на самом деле, много.

А вот как выглядит тот-же район на карте 2 ГИС

Это уже совсем другое дело!

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

Это и явилось причиной, по которой я взялся за написание данного мода.

vQmod практика

Сначала покажу этот небольшой xml-мод, а затем дам пояснения...

XML-мод

<modification>
	<id></id>
	<name>2 GIS to Contact</name>
	<code>2gis_to_contact</code>
	<version>1.0.0</version>
	<vqmver>2.5.1</vqmver>
	<author>AlexKar (a_r_karataev@mail.ru)</author>
	<link>http://ok.ddw.kz</link>
	<file path="catalog/view/theme/default/template/information/contact.tpl">
		<operation>
			<search position="replace"><![CDATA[<a href="https://maps.google.com/maps?q=<?php echo urlencode($geocode); ?>&hl=en&t=m&z=15"]]></search>
			<add><![CDATA[
				<a href="http://go.2gis.com/<?php echo urlencode($geocode); ?>"]]></add>
		</operation>
		<operation>
			<search position="replace"><![CDATA[<a href="https://maps.google.com/maps?q=<?php echo urlencode($location['geocode']); ?>&hl=en&t=m&z=15"]]></search>
			<add><![CDATA[
				<a href="http://go.2gis.com/<?php echo urlencode($location['geocode']); ?>"]]></add>
		</operation>		
	</file>
</modification>

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

«catalog/view/theme/default/template/information/contact.tpl»

Здесь «default» меняем на название своего шаблона и всё.

Теги файла xml, что означают:

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

<modification> - это основа, самый главный родитель, он должен быть только один во всем файле

<id> - это название и идентификатор модуля. Это любой текст. В приведённом примере я его оставил пустым.

<version> - версия модификации в формате "1.0.0"

<vqmver> - это минимальная версия vQmod в формате "1.0.0"

<author> - имя автора

<file> - имя изменяемого файла. Задается от корня сайта, где лежит index.php (например catalog/controller/product/product.php). Этот тег можо несколько раз использовать во всем .xml файле

<operation> - это обертка над конкретной операцией с файлом, определенном в теге file. Может содержать необязательный атрибут "errors" с одним из двух значений - "skip" (пропустить ошибку и продолжить работу модуля) и "abort"(откатить все изменения)

<search> - первый шаг выполнения модификации. Найти можно только одну строку. Это важно! Я сначала голову сломал, почему мой мод не работает, когда я задал для поиска блок из нескольких строк. Автоматически обрезаются пробелы и разрывы строк. Этот тег может быть только один по отношению к тегу <operation>. Рекомендуется использовать CDATA для оборачивания кода. Обязательный атрибут - "position", может принимать значения before, after, replace, top, bottom и all.

Особенности тега <search>:

Необязательный атрибут - "offset", используется для работы с позицией вставки кода.

Необязательный атрибут - "index", для указания, какие найденные экземпляры кода из тегов <search> должны быть учтены. Если мы ищем "echo" и найдено 5 "echo", но нам нужны только первое и третье, тогда мы можем использовать index="1,3". Запятая для определения нескольких элементов. Для работы со всеми найденными элементами нужно использовать index="false".

Необязательный атрибут - "regex". Устанавливается в true, если поиск выполняется с помощью регулярного выражения. Чтобы выполнять обычный поиск установите параметр в false(стоит по умолчанию)

Необязательный атрибут - "trim". Если нужно искать без обрезания пробелов - устанавливаем в false. По умолчанию пробелы обрезаются и параметр установлен в true.

<add> - Это вторая часть работы с файлом. Может состоять из нескольких строк. Обязательно только один на одну операцию с файлом. Нужно оборачивать код в CDATA.

Необязательный атрибут - "trim". Используется также, как и при поиске, но по умолчанию установлен false (пробелы не обрезаются)

<![CDATA[ ]]> - это CDATA xml тег. Означает, что данные в них не нужно обрабатывать как xml

Как вставить карту

Открываем онлайн карту 2ГИС, находим нужный нам объект, подстраиваем масштаб, центрируем и затем...

	...в правом нижнем углу кликаем по кнопке «Поделиться».
	Нам важны только буковки, которые завершают строку http://go2gis.com/ А именно, в данном случае - xjts

Затем идём в настройки магазина и вставляем эти буковки в поле Геокод (Geocode) -  в зависимости от перевода оно может называться по-разному, но суть от этого не меняется.

Вот в это поле вставляем. На этом и вся премудрость.

Вот, что получилось:

После вставки геокода, на странице контактов (обратной связи) магазина автоматически отобразится кнопка «Показать на карте».

При клике по этой кнопке в новой вкладке откроется наша карта.

По аналогии можно прикрутить и любую другую актуальную для вас карту.

На этом всё.

Удачи Вам и до встречи на моём блоге.

Материалы по теме:

Перенос данных OpenCart с версии 1.5.5.1 на 2.0.2.0

OpenCart 2.0.2.0 SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data OK