Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

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

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

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

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

Опубликовано: 02.09.2018

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

Как устанавливать модули на Opencart 2 (OcStore 2.1.0.2.1) #13

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


Установка VQmod на Opencart.mp4

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

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


установка движка ocstore и vqmod

Что такое 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 ([email protected])</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> :
replace - заменит весь код указанный в <search> на код указанные в теге <add>. Используется по умолчанию. before - вставит данные из <add> перед данными из <search> after - вставит данные из <add> после данных из <search> top - вставит данные из <add> в самом начале файла. Данные из <search> будут проигнорированны. bottom - вставит данные из <add> в конце файла. Данные из <search> будут проигнорированны. all - заменит все данные в файле данными из <add>. Данные из <search> будут проигнорированны.

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

Если в "position" установлено "before" и "offset" установлено 3 , тогда данные из <add> будут вставлены на 3 строки до искомых данных Если в "position" установлено "after" и "offset" установлено 3 , тогда данные из <add> будут вставлены на 3 строки после искомых данных Если в "position" установлено "replace" и "offset" установлено 3 , тогда искомые данные будут заменены на данные из <add> Если в "position" установлено "top" и "offset" установлено 3 , тогда данные вставятся после 3 строк от начала файла Если в "position" установлено "bottom" и "offset" установлено 3 , тогда данные вставятся после 3 строк начиная с конца файла

Необязательный атрибут - " 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) - в зависимости от перевода оно может называться по-разному, но суть от этого не меняется.

Вот в это поле вставляем.

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

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

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

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

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

На этом всё.

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

rss