Разкрасяване на модула за доставки на Еконт за OpenCart 3.x

Почти съм уверен, че никой не тества поведението на официалните модули за интеграция между OpenCart и куриерските услуги. Типичен пример е последната версия на модула за Еконт за OpenCart 3.x

Най-напред се забелязва, че някой идиот е архивирал OC Mod файла в папка, която вече е съдържала предишен архив, и затова файла, който ще свалите, е именован econt_delivery.ocmod-2.zip (инсталаторът на OpenCart 3 няма да го приеме, понеже той очаква да получи архив с окончание ocmod.zip).

Проблемът не е само в името на файла, а и в неговото съдържание:

Инсталаторът на OpenCart не очаква да намери в архива някакви глупости като горепосочените, а две неща: папка Upload и файл install.xml:

Тоест, ако не знаете какво вършите, просто ще си изгубите времето, опитвайки се да инсталирате неработещото разширение и обвинявайки себе си за чужди грешки.

И докато грешки при опаковането на версии за дистрибуция е разбираемо, понеже обикновено се бърза и операцията не е с голяма сложност, че някой да следи и да я проверява, то самото поведение на модула е просто вбесяващо. Никой не може да ме убеди, че ето този изглед, който се получава „стандартно“ след инсталация на модула на Еконт за OpenCart 3+ е нормален и приемлив:

Как работи интеграцията на Еконт за OpenCart 3

Тук ще направя малко отклонение, за да посоча още едно доказателство, че на никой не му пука за нищо…

Вместо да се изпълнява локално, както е при версия 2.x, този нов модул си създава един <iframe> и се изпълнява през него. Тоест, това неугледно правогълниче, което виждате, е „прозорец“ от сайта на OpenCart към определена страница в сайта на Еконт, и когато попълвате неговото съдържание, написаното от вас пропътува през дупката във вашия сайт и се озовава в сайта на куриера за правене на товарителници.

На използването на iframe елементи се гледа много строго, защото един добре изработен iframe елемент може да наподоби на 100% останалата част на сайта и да подлъже посетителя да въведе в него поверителна информация (парола за достъп, номер на кредитна карта и т.н.). Затова браузерите налагат особено стриктни изисквания към вграждането на iframe и си имат цял един протокол за комуникация с web сървърите, който определя какво може и какво не може да пътува през интернет, в частност през iframe.

В частност, напълно недопустимо е във сайт с активно шифриране (HTTPS) да се вгражда iframe към друг сайт, който не се изпълнява върху HTTPS. Сайтът на Еконт за товарителници (https://delivery.econt.com) се зарежда върху HTTPS и няма да имате проблеми при веднъж сработила конфигурация, но ако превключим модула в тестов режим, той се опитва да се свърже с различен сървър на Еконт (http://delivery.demo.econt.com), който обаче подава грешен сертификат. И ако самият развоен сървър, на който тестваме нашата конфигурация, преди да започнем да работим на живо, по някаква причина има активиран HSTS с нормално дълъг живот (6 месеца или 1 година) и не може да се използва по некодиран HTTP, става абсолютно невъзможно този развоен сървър да се интегрира с тестовия сървър на Еконт и да пробваме да генерираме пробни товарителници на спокойствие.

Хайде обратно в нашата каша…

Както се оплаках по-горе, стандартната инсталация на плъгина на Еконт пльосва на екрана едно грозно маломерно правоъгълниче с рамка в стил Netscape Navigator 3 от 1994 г. и оставя клиента да се оправя. А между тази др%сня и нормалното зареждане на прегледната форма за попълване има точно половин ред код разлика.

Ето как може да изглежда чекаут страницата на OpenCart 3 за Еконт

Нали така е малко по-хубаво?

Как да оправим интеграцията на OpenCart 3 с Еконт

Ако сте съгласни с моите естетически разбирания, ето как можете сами да поправите оформлението на модула във вашия сайт.

  1. Ако модулът вече е инсталиран, премахнете го чрез Extension Installer-а на OpenCart и изчистете mod кеша.
  2. Разархивирайте грешно кръстения инсталационен файл от сайта на Еконт в някаква папка.
  3. Влезте в под-директорията, където се намира папката upload и файлът install.xml — после ще архивирате отново инсталатора и това ще бъде отправната ви точка.
  4. Влезте в upload/catalog/model/extension/shipping/ и отворете файла econt_delivery.php в текстов редактор.
  5. Потърсете фразата iframe id="econtDeliverFrame". Би трябвало да намерите два сходни фрагмента код, съответно на редове 201 и 219. Тъй като работим със стандартния постъпков чекаут на Еконт, ще редактираме само първия ред, който от:
$frame = $('<iframe id="econtDeliverFrame" src="' + url + '"></iframe>');

трябва да стане на

$frame = $('<iframe id="econtDeliverFrame" src="' + url + '" style="border: 0px; margin-top: 10px; width: 100%; height: 600px;"></iframe>');

Тоест, добавяме inline style, с който: (1) изключваме грозната рамка около iframe, (2) добавяме 10px въздух между радио бутона Econt Delivery и самата форма, (3) разпъваме формата за въвеждане на данни за доставка до 100% от възможната ширина на ограждащия елемент, като запазваме нейните responsive качества и (4) увеличаваме височината на формата на 600px, колкото е нужно за правилното й изобразяване върху екрана.

Записвате файла, затваряте редактора, връщате се обратно в директорията, която съдържа папката upload и файла install.xml, селектирате двата елемента и ги архивирате като econt_delivery.ocmod.zip

След това вече можете да качите модула чрез инсталатора на OpenCart и да имате нормално функционираща форма за въвеждане на адрес за доставка или избор на офис/АПС. Успех!

Подобни статии