Праблемы, звязаныя з Magento RWD тэмы і як мы іх выправіць

1. ўвядзенне Тыя, хто ўжо меў справу з развіццём Magento ў вонкавым інтэрфейсе, напэўна, ведаеце Magento...
2. менш файлаў
3. Javascript
4. Далей мабільная аптымізацыя
5. падтрымка Safari / IOS

ўвядзенне

Тыя, хто ўжо меў справу з развіццём Magento ў вонкавым інтэрфейсе, напэўна, ведаеце Magento RWD тэма (Адаптыўны вэб-дызайн). Гэты спагадным шаблон пастаўляецца з базавым пакетам Magento, які можа быць выкарыстаны для стварэння мабільных гатовых інтэрнэт-крам.

Mobile-гатова не варта блытаць з мабільным першым у мабільных першым з'яўляецца падыход, які працуе нашмат лепш з мабільнымі прыладамі, так як ён ставіць беспамылковае мабільнае выкарыстанне ў якасці асноўнага патрабаванні. З з'яўленнем і распаўсюджваннем смартфонаў, наша выкарыстанне інтэрнэту драматычна змянілася. У сучасным свеце ўсё больш і больш людзей выкарыстоўваюць свае смартфоны або планшэты для збору інфармацыі па сетцы, а таксама рабіць пакупкі. Таму вельмі важна, каб рабіць пакупкі онлайн з мабільнымі прыладамі, простымі, зразумелымі і хутка.

Так што большую частку часу, нашы кліенты прыпісваць нам аптымізаваць інтэрнэт-крама знешні выгляд, у дадатак да працоўнага стала, для мабільных прылад, якія працуюць на 100% для дасягнення бездакорнага UI / UX.

Тэма RWD, давайце будзем сумленнымі, можа выканаць гэтыя крытэрыі толькі да пэўнай ступені. Я буду пісаць пра гэта падрабязна ніжэй. Пасля некалькіх праектаў у галіне развіцця, мы вырашылі стварыць асобную тэму з дапамогай рамак Bootstrap, на аснове рашэння RWD.

рэалізацыя

Якія прычыны, я лічу, RWD не з'яўляецца лепшым рашэннем для стварэння 21 - га стагоддзя мабільнага першага крамы электроннай гандлю?

• Гэта мабільнае гатова, ня рухомае першы (па-ранейшаму падтрымлівае настольны дысплей у першую чаргу)
• Састарэў падвесная сістэма (RWD выкарыстоўвае некалькі падгадаванай, выраблены на замову, распрацаванай падвеснай сістэмы з якой цяжка стварыць унікальныя мабільныя дружалюбныя праекты, у той час як NILA выкарыстоўвае адзін з самых сучаснага які выходзіў рамка, пачатковая загрузка , З сістэмай сеткі 12-калонкі, гнуткія апорна-ідэальным рашэннем для хуткіх падзей)
• Гэта не модульныя (гэта немагчыма змяніць асобна падстаронак і макеты, усё кіруецца з дапамогай CSS-файлаў)
• Там няма OOP CSS (З RWD ўтрымлівае толькі адзін скампіляваны файл CSS, так што цяжка змяніць асноўныя параметры, такія як колер, тып шрыфта і г.д.)
• Дрэнная падтрымка браўзэра (без відавочнай падтрымкі OSX / IOS)
• дызайн

Нашы дызайнеры распрацавалі знешні выгляд Nila, заснаваны на RWD. Мы пастараліся зрабіць яго больш ясным пры ўжыванні мабільных прылад першага аспекту. Гэта азначае, што мы выкарыстоўваем базу для верхняга пабудаваць працэс як з пункту гледжання распрацоўкі і рэалізацыі. Для каляровых адценняў мы абралі блакітна-шэры, што прывяло да вельмі выразнай «мінімалістычны» падыход.

Стварэнне новай скуры

Па-першае, мы стварылі новую скуру пад пакет RWD. Мы не выкарыстоўвалі новы пакет, так як структура шаблону NILA заснавана на АВД, і з-за гэтага мы маглі б ісці з падзеямі хутчэй.

На практыцы мы перагрузілі шаблоны і макеты неабходныя нам са скуры Nila, у той час як, у бягучай версіі, мы кіруем астатнюю частку канструкцыі ад АВД.

Мы выкарыстоўвалі апошнюю версію Bootstrap (3.3.6), CSS быў рэалізаваны з Less (мова табліц стыляў) з пункту гледжання арыентацыі аб'екта. Версія пакета NILA будзе ўтрымліваць толькі скампіляваныя файлы CSS.

Кожная старонка і суб-старонкі атрымалі новы дызайн, мы распрацавалі адзіны знешні выгляд і прынялі спецыяльны догляд шаблонаў электронных лістоў і моўныя версіі (hu_HU).

NILA код нараст

Зараз давайце паглядзім на код структуры NILA.

структура каталогаў

NILA тэма: дадатак / дызайн / інтэрфейс / RWD / Ніл

NILA скура :: скура / інтэрфейс / RWD / Ніл

Наш каталог скуры складаецца з некалькіх ўкладзеных каталогаў.

• Айона: NILA скуры ўласныя CSS / JS файлы, якія ўплываюць на знешні выгляд старонкі
• CSS: emailinline.less, вонкавы інтэрфейс знешні выгляд шаблонаў электроннай пошты
• Малюнка: выявы шаблону па змаўчанні RWD
• IMG: выявы, якія адносяцца да тэмы NILA
• Пастаўшчык: каталог бібліятэк іншых і модуляў (Bootstrap, Fontawesome, Owl.Carousel)

сістэма сеткі

Гэта шаблон сістэма АВД, заснаваная на сістэме сеткі спецыяльна распрацаваны, якія могуць быць выкарыстаны толькі часткова для распрацоўкі мабільных першага шаблону старонкі.

прыклад:

@media

толькі экран і (мін-шырыня: 480px) {.customer-рахунак-Увайсці .col2-набор .col-1, .customer-рахунак-Увайсці .col2-мноства .col2 {абіўка-топ: 0; Запас-топ: 20px; } .Customer-рахунак-Увайсці .col2-набор .col-1 {абіўка-направа: 20px; } .Customer-рахунак-Увайсці .col2-набор .col2 {абіўка налева: 20px; мяжы злева: 1px цвёрды #ededed; }} @Media толькі экран і (мін-шырыня: 770px) {.customer-рахункі-лагін .col2-мноства .col-1 {абіўка-направа: 0; } .Customer-рахунак-Увайсці .col2-набор .col2 {абіўка налева: 60px; мяжы злева: 1px цвёрды #ededed; }} @Media толькі экран і (макс-шырыня: 479px) {.customer-рахункі-Увайсці .col2-мноства .col-1 {абіўка-дно: 30px; } .Customer-рахунак-Увайсці .col2-набор .col2 {абіўка-топ: 30px; мяжы зверху: 1px цвёрды #ededed; }}

Як мы можам бачыць, дэкларацыя мабільных кантрольных кропак сеткавай сістэмы ў не падладжвацца стандартнымі кантрольнымі кропкі, але і стварае унікальныя кропкі: 479, 770, а таксама вывучаючы код далей, мы можам знайсці больш «чужародныя» / незвычайныя / нестандартныя кропкі супыну:

толькі экран і (макс-шырыня: 535px) {...} @media толькі экран і (макс-шырыня: 525px) {...}

Мы выбралі структуру Bootstrap для сістэмы сеткі Nila, якая была распрацавана з рухомым першым падыходам і супадзе са стандартнымі кантрольнымі кропкамі і, такім чынам, падтрымліваюць параметры стандартнага дазволу:

няма / * Дадатковыя невялікія прылады (тэлефоны, менш 768px) * / / * Няма медыя-запыт, так як гэта па змаўчанні ў Bootstrap * / / * Маленькія прылады (таблеткі, 768px і вышэй) * / @media (мін-шырыня: @ экран -sm-мін) {...} / * Сярэднія прылады (настольныя кампутары, 992px і вышэй) * / @media (мін-шырыня: @ трафарэтных мкр-мін) {...} / * вялікія прылады (вялікія настольныя кампутары, 1200px і вышэй) * / @media (мін-шырыня: @ экрана-LG-мін) {...}

менш файлаў

Мы стварылі наш шаблон быць модульным, як гэта магчыма, і быць лёгка змененыя. Кожная старонка, CMS старонка была прадастаўлена асобная Less файл, таму мы можам змяніць шаблон на модульным узроўні. У выпадку новых праектаў, няма неабходнасці выкарыстоўваць увесь шаблон, гэта дастаткова, каб выкарыстоўваць некаторыя з макетаў.

Уніфікаваныя элементы адлюстравання функцый шаблону, напрыклад, верхні і ніжні калантытула, кнопкі і г.д., таксама ўключаны ў асобны файл Less. Мы таксама стварылі файл BASE.less для захоўвання зменных, функцый і Прымешкі.

Толькі nila.css файл прысутнічае на інтэрфейсе, і гэта будуецца з модульных менш файлаў наступным чынам да кампіляцыі:

• Base.less
• Default.less
• Module.less

У выпадку новай старонкі, нам трэба толькі прызначыць module_name.less файл module_neve.less ў nila.less і пасля реверсирования, nila.css будзе ўтрымліваць новы або зменены знешні выгляд.

Javascript

З пункту гледжання JS гледжання, тэма NILA не ўтрымлівае якіх-небудзь сур'ёзных змен у параўнанні з RWD. Мы выкарысталі толькі OwlCarousel.jst акрамя убудоў Bootstrap для слайдера на галоўнай старонцы новых прапаноў прадукту.

JQuery ( "# дом прадукты-сеткі") .owlCarousel ({AutoPlay: ілжывыя, прадметы: 5, itemsDesktop: [1199, 3], itemsDesktopSmall: [979, 3], рух: праўдзівы});

Як мы можам бачыць, 5 прадуктаў адлюстроўваецца па змаўчанні ў слайдэр, дадатковыя прадукты могуць быць прагледжаныя шляхам слізгацення. Калі мы хочам, каб паказаць рознае колькасць прадуктаў, мы можам усталяваць яго ў панэлі адміністратара, змяніўшы радок ніжэй, а таксама змяненне значэнняў JavaScript «элементаў»:

$ Ўтрыманне = '{{віджэт тыпу = "Каталог / product_widget_new" display_type = "new_products" products_count = "5" шаблон = "Каталог / прадукту / віджэт / новы / ўтрыманне / new_grid.phtml"}}';

Шаблон Апісанне пераазначэння

Паколькі сапраўдны варыянт NILA грунтуецца на пакеце RWD, мы толькі змененыя тыя файлы шаблонаў / макета, неабходныя нам для унікальнага вонкавага выгляду. На пазнейшых этапах развіцця NILA будзе аддзяліцца ад пакета RWD і будзе функцыянаваць як асобны пакет.

• CMS
• дома
• катэгорыя
• прадукт
• калёсы
• кантроль
• дадаць у кошык
• прыборная панэль
• рахункі

Адным з найбольш важных пераваг тэмы NILA з'яўляецца яго модульная нараст. У той час як змены «старой школы» RWD тэма з'яўляецца досыць працаёмкім (толькі скампіляваны CSS даступны ў пакеце), тэма NILA можа быць зменены на працягу некалькіх хвілін шляхам змены base.less і default.less файлаў.

Далей мабільная аптымізацыя

Як я ўжо казаў, наш шаблон быў пабудаваны з дапамогай мабільнага першага падыходу, наша мэта складалася ў тым, каб зрабіць яго як мабільны карыстальнік дружалюбны, наколькі гэта магчыма. Так як лік элементаў цяжка ці немагчыма выкарыстоўваць на мабільных прыладах (напрыклад, табліцах, кошык для пакупак, каса, ды вобласць), мы распрацавалі карыстацкі модуль, які распазнае тып прылады карыстальніка і, такім чынам, загружаць мабільныя і настольныя блокі адпаведна.

Мы заснавалі наш модуль на добра вядомым вырашэнні каталогаў, MobileDetect PHP ,

<? XML версія = "1.0"?>

<Конфіг> <модулі> <Aion_MobileDetect> <версія> 0.1.0 </ версія> </ Aion_MobileDetect> </ модулі> <глабальны> <хелперы> <aion_mobiledetect> <клас> Aion_MobileDetect_Helper </ клас> </ aion_mobiledetect> </ хелперы> </ глабальны> </ Config>

Вызначэнне тыпу мабільнага тэлефона:

грамадскаяфункцыяisMobile

($ UserAgent = NULL, $ httpHeaders = NULL) {калі ($ httpHeaders) {$ гэта -> setHttpHeaders ($ httpHeaders); } Калі ($ UserAgent) {$ гэта -> setUserAgent ($ UserAgent); } // Праверка спецыяльна для CloudFront загалоўкаў , калі UserAgent === 'Amazon CloudFront' калі ($ гэта -> getUserAgent () === 'Amazon CloudFront') {$ cfHeaders = $ гэта -> getCfHeaders (); калі (array_key_exists ( 'HTTP_CLOUDFRONT_IS_MOBILE_VIEWER', $ cfHeaders) && $ cfHeaders [ 'HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] === 'праўда') {вяртае ісціну; }} $ Гэта -> setDetectionType (само :: DETECTION_TYPE_MOBILE); калі ($ гэта -> checkHttpHeadersForMobile ()) {вяртае ісціну; } Яшчэ {вярнуць $ гэта -> matchDetectionRulesAgainstUA (); }}

Наша функцыя можа быць выклікана наступным чынам ў любым з нашага шаблону:

$ Хелперы = Mage :: памочнік ( 'aion_mobiledetect / дадзеныя'); калі ($ helper-> isMobile ()) {рэха «мабільная»; } Яшчэ {рэха "не з'яўляецца мабільным»; }

Гэта рашэнне дае нам магчымасць загрузіць унікальныя блокі, у дадатку да Адаптыўная дызайне, для мабільных прылад, структура якіх цалкам адрозніваецца ад настольных дысплеяў структур. Гэты блок будзе загружаны толькі нашым браўзэрам, калі мы выкарыстоўваем вэб-сайт на дадзеным прыладзе. Такім чынам, мы можам пазбегнуць загрузкі непатрэбных элементаў.

падтрымка Safari / IOS

Іншым вялікім недахопам асноўнай тэмы RWD з'яўляецца тое, што ён падтрымлівае пэўныя тыпы браўзэраў дрэнна. Нашы кліенты, як правіла, патрабуюць, каб іх інтэрнэт-крамы павінны працаваць нармальна з OSX і IOS браўзэры акрамя браўзэраў, заснаваных на Windows, як IE10 +, Chrome, Firefox, Opera.

Так як Safari апрацоўвае пэўныя значэння інакш па змаўчанні, чым Chrome, простыя змены ў агульных Less файлаў не вырашае праблемы.

Паказаўшы просты прыклад, Safari апрацоўвае « Дысплей: згінаць »Значэнне па-іншаму з Chrome або Firefox, так што нам трэба зрабіць наступнае змяненне:

.aion-панэль-whislist {.cart-элемент {дысплей: -webkit-флекс; -webkit-флекс: 1; -webkit-бокс-флекс: 1; }}

Калі ласка , звярніце ўвагу: у выпадку Safari, іншая праблема фарматавання формы , паколькі OSX і IOS і адлюстроўваць ўласныя элементы формы. Пасля абмеркавання з нашымі дызайнерамі, мы, нарэшце, вырашылі, каб дасягнуць лепшага карыстацкага досведу, каб захаваць родную знешні выгляд элементаў формы пад сістэмамі OSX / IOS замест выкарыстання унікальных / Bootstrap элементаў формы.]

Згадвалася раней MobileDetect быў выкарыстаны ў якасці раствора, дапоўнены з функцыяй выяўлення Safari:

/ ** * Гэты метад правярае , калі браўзэр Safari / Desktop * @return BOOL * / грамадская функцыя isBrowserSafari () {$ Агент = Исеть ($ _SERVER [ 'HTTP_USER_AGENT'])? $ _SERVER [ 'HTTP_USER_AGENT']: ""; калі ілжывыя && stripos (stripos ($ агент, 'Сафары') && ($ stripos агентах 'iPhone') === ($ агента 'IPOD') === ілжывыя && stripos ($ агент, 'Chrome') = == ілжывы) {$ гэта -> setBrowser (само :: BROWSER_SAFARI); вяртае ісціну; } Вярнуцца ілжывым; }

Каб выкарыстоўваць наступным чынам:

$ Хелперы = Mage :: памочнік ( 'aion_mobiledetect / дадзеныя'); калі ($ helper-> isBrowserSafari ()) {$ body_class = "__browser_safari"; } Яшчэ {$ body_class = "__browser_other"; }

Выкарыстоўваючы гэта, мы маглі б зрабіць змены толькі для Safari браўзэра канкрэтных CSS файлаў, якія не ўплываюць на знешні выгляд ў браўзэрах на базе Windows.

/ ** Гэта менш файл падтрымкі сумяшчальнасці браўзэра OSX / Safari * / @import "база" !; .__ browser_safari {...} прыстасаваныя рашэнні

Рэзюмэ NILA тэма будзе ўключаць у сябе мноства выпраўленняў і унікальных рашэнняў у параўнанні з Magento АВД, які можа зрабіць ваш магазін электроннай камерцыі яшчэ больш паспяховым. Мы распрацавалі шаблон такім чынам, што любы інтэрнэт-крама можа быць наладжаны хутка і проста з ім.

Шаблон NILA яшчэ знаходзіцца ў стадыі распрацоўкі, і мы ў цяперашні час тэставання яго ў доме з невялікімі праектамі, але ў той дзень хутка прыйдзе час, калі ён публічна даступны ў выглядзе пакетнага рашэння.

Вядома, калі гэты дзень прыйдзе, мы дамо вам ведаць пра гэта тут на нашым блогу.