- Вступ Ті, хто вже займався розробкою інтерфейсу Magento, напевно знають Magento Тема RWD (Адаптивний...
- Менше файлів
- Javascript
- Подальша мобільна оптимізація
- Підтримка Safari / iOS
Вступ
Ті, хто вже займався розробкою інтерфейсу Magento, напевно знають Magento Тема RWD (Адаптивний веб-дизайн). Цей чудовий шаблон поставляється з базовим пакетом Magento, який можна використовувати для створення інтернет-магазинів, готових до мобільних пристроїв.
Mobile-ready не слід плутати з мобільним першим, оскільки мобільний-перший - це підхід, який працює краще з мобільними пристроями, оскільки бездоганний мобільний пристрій ставиться як головне вимога. З появою та розповсюдженням смартфонів, наше використання Інтернету різко змінилося. У сучасному світі все більше людей використовують свої смартфони або планшети, щоб збирати інформацію в мережі, а також робити покупки. Тому дуже важливо зробити онлайн покупки з мобільними пристроями простими, зрозумілими і швидкими.
Тому більшу частину часу наші клієнти призначають нам для оптимізації свого інтернет-магазину, крім настільних, для мобільних пристроїв, які працюють на 100% для досягнення бездоганного UI / UX.
Тема RWD, чесно кажучи, може виконати ці критерії лише до певної міри. Я детально напишу про це нижче. Після декількох проектів розробки, ми вирішили створити окрему тему за допомогою рамки Bootstrap на основі рішення RWD.
Реалізація
Які причини, чому, на мою думку, RWD не є найкращим рішенням для створення магазину електронної комерції для мобільних телефонів 21-го століття?
- Він готовий до мобільних пристроїв, а не мобільний (спочатку підтримує відображення на робочому столі)
- Застаріла мережева система (RWD використовує кількарічну, спеціально розроблену систему електромережі, з якою важко створювати унікальні зручні для мобільних пристроїв конструкції, а NILA використовує одну з найсучасніших фронтальних рамок, Bootstrap , з системою з 12-колоночною решіткою, підтримка з гнучким - ідеальне рішення для швидких розробок)
- Це не модульна (не можна змінювати окремі підсторінки та макети, все керується файлами CSS)
- Немає OOP CSS (Оскільки RWD містить тільки один скомпільований файл CSS, тому важко змінювати основні параметри, такі як колір, тип шрифту тощо).
- Низька підтримка браузера (без явної підтримки OSX / iOS)
- Дизайн
Наші графічні дизайнери розробили вигляд NILA на основі RWD. Ми намагалися зробити це більш чітким, застосовуючи мобільні аспекти. Це означає, що ми використовуємо процес створення баз до верху як з точки зору розробки, так і впровадження. Для кольорових відтінків ми вибрали блакитно-сіре, що призвело до дуже чіткого «мінімалістичного» підходу.
Створення нової шкіри
По-перше, ми створили нову шкіру під пакет RWD. Ми не використовували новий пакет, тому що структура шаблону NILA базується на RWD, і через це ми могли б продовжувати розвиток швидше.
На практиці ми перекриваємо шаблони та макети, які ми потребували від шкіри NILA, в той час як у поточній версії ми керуємо рештою структурою від RWD.
Ми використовували останню версію Bootstrap (3.3.6), CSS була реалізована з Less (мовою стилів) з точки зору орієнтації об'єкта. Пакетна версія NILA буде містити тільки скомпільовані файли CSS.
Кожна сторінка та під-сторінка отримала новий дизайн, ми розробили єдиний вигляд і особливо подбали про шаблони електронної пошти та мовні версії (hu_HU).
Налаштування коду NILA
Тепер давайте розглянемо структуру коду NILA.
Структура каталогу
Тема NILA: app / design / frontend / rwd / nila
NILA skin :: skin / frontend / rwd / nila
Наш каталог шкіри складається з декількох підкаталогів.
- aion: NILA має власні файли CSS / JS, які впливають на зовнішній вигляд сторінки
- css: emailinline.less, зовнішній вигляд шаблонів електронної пошти
- образи: типовий RWD шаблон зображення
- img: зображення, що належать темі NILA
- постачальник: каталог бібліотек і модулів третьої сторони (Bootstrap, Fontawesome, Owl.Carousel)
Грид-система
Це шаблонна система RWD, заснована на спеціально розробленій системі сітки, яка може використовуватися лише частково для розробки шаблону мобільних перших сторінок.
Приклад:
@media
only screen та (min-width: 480px) { .customer-account-login .col2-set .col-1 , .customer-account-login .col2-set .col-2 {padding-top: 0; margin-top: 20px; } .customer-account-login .col2-set .col-1 { правка- заповнення: 20px; } .customer-account-login .col2-set .col-2 {padding-left: 20px; border-left: 1px твердий #ededed; }} @media тільки екран і (min-width: 770px) { .customer-account-login .col2-set .col-1 {padding-right: 0; } .customer-account-login .col2-set .col-2 {padding-left: 60px; border-left: 1px твердий #ededed; }} @media тільки екран і (max-width: 479px) { .customer-account-login .col2-set .col-1 {padding-bottom: 30px; } .customer-account-login .col2-set .col-2 {верхня: 30px; border-top: 1px твердий #ededed; }}
Як ми бачимо, декларування мобільних точок розриву системи сітки не пристосовується до стандартних точок зупинки, але створює унікальні точки: 479, 770, і далі вивчаючи код, ми можемо знайти більш «чужі» / незвичайні / нестандартні точки зупину:
Екран @media only та (max-width: 535px) {...} @media only та (max-width: 525px) {...}
Ми вибрали основу Bootstrap для системи NILA grid, яка була розроблена з підходом для мобільних пристроїв і вирівнюється зі стандартними точками переривання і таким чином підтримує стандартні параметри дозволу:
/ * Додаткові пристрої (телефони, менше 768px) * / / * Немає медіазапитів, оскільки це за замовчуванням в Bootstrap * / / * Малі пристрої (планшети, 768px і вище) * / @media (min-width: @ screen -sm-min) {...} / * Середні пристрої (стільниці, 992px і вище) * / @media (min-width: @ screen-md-min) {...} / * Великі пристрої (великі настільні комп'ютери, 1200px і вище) * / @media (min-width: @ screen-lg-min) {...}
Менше файлів
Ми створили наш шаблон настільки ж модульно, наскільки це можливо і легко змінюється. Кожній сторінці CMS було надано окремий файл Less, тому ми можемо модифікувати шаблон на модульному рівні. У випадку нових проектів немає необхідності використовувати весь шаблон, достатньо використовувати деякі макети.
Єдині елементи відображення елементів шаблону, наприклад, заголовка, нижнього колонтитула, кнопок і т.д., також включені в окремий файл Less. Ми також створили файл BASE.less для зберігання змінних, функцій і міксинів.
Лише файл nila.css присутній на передній панелі, і перед збиранням він створюється з модульних файлів менше:
- Base.less
- Default.less
- Module.less
У випадку нової сторінки, нам потрібно лише призначити файл module_name.less файл_модуля_неве.nila на nila.less і після скасування, nila.css буде містити новий або змінений вигляд.
Javascript
З точки зору JS, тема NILA не містить жодної великої модифікації порівняно з RWD. Ми використовували тільки OwlCarousel.jst крім плагінів Bootstrap для повзунка основних пропозицій нових продуктів.
jQuery ("# home-products-grid") .owlCarousel ({autoPlay: false , елементи: 5 , itemsDesktop: [1199, 3], елементиDesktopSmall: [979, 3], навігація: істина });
Як ми бачимо, за замовчуванням у слайдері відображаються 5 продуктів, інші продукти можна переглядати за допомогою ковзання. Якщо ми хочемо показати іншу кількість продуктів, ми можемо встановити її в адміністративній панелі, змінюючи рядок нижче, а також змінюючи значення елементів "javascript":
$ content = '{{widget type = "catalog / product_widget_new" display_type = "new_products" products_count = " 5 " template = "catalog / product / widget / new / content / new_grid.phtml"}}';
Опис заміщення шаблону
Оскільки нинішня версія NILA базується на пакунку RWD, ми модифікували тільки ті шаблони / макети, які нам потрібні для унікального вигляду. У пізніших фазах розвитку NILA буде відокремлена від пакета RWD і буде функціонувати як окремий пакет.
- CMS
- Головна
- Категорія
- Продукт
- Кошик
- Перевіряти
- Список побажань
- Панель приладів
- Рахунок
Одним з найважливіших переваг теми NILA є її модульна розбудова. У той час як зміна тематики RWD "старої школи" є досить трудомісткою (в пакеті доступна лише компільована CSS), тему NILA можна налаштувати за лічені хвилини шляхом зміни файлів base.less і default.less.
Подальша мобільна оптимізація
Як я вже згадував, наш шаблон був створений за допомогою мобільного підходу, метою якого було зробити його максимально зручним для користувачів мобільного зв'язку. Оскільки певну кількість елементів важко або неможливо використовувати на мобільних пристроях (наприклад, у таблицях, кошику для покупок, перевірці, зонах з кранами), ми розробили спеціальний модуль, який розпізнає тип пристрою користувача і відповідно завантажує мобільні та настільні блоки.
Наш модуль базувався на відомому каталозі, MobileDetect PHP .
<? xml version = "1.0"?>
<config> <modules> <Aion_MobileDetect> <версія> 0.1.0 </version> </Aion_MobileDetect> </modules> <global> <helpers> <aion_mobiledetect> <клас> Aion_MobileDetect_Helper </class> </aion_mobiledetect> </helpers> </global> </config>
Визначення типу мобільного:
publicfunctionisMobile
($ userAgent = null , $ httpHeaders = null ) { if ($ httpHeaders) {$ this -> setHttpHeaders ($ httpHeaders); } if ($ userAgent) {$ this -> setUserAgent ($ userAgent); } // Перевірте спеціально для заголовків cloudfront, якщо useragent === 'Amazon CloudFront' if ($ this -> getUserAgent () === 'Amazon CloudFront') {$ cfHeaders = $ this -> getCfHeaders (); if (array_key_exists ('HTTP_CLOUDFRONT_IS_MOBILE_VIEWER', $ cfHeaders) && $ cfHeaders ['HTTP_CLOUDFRONT_IS_MOBILE_VIEWER'] === 'true') { return true ; }} $ this -> setDetectionType (self :: DETECTION_TYPE_MOBILE); if ($ this -> checkHttpHeadersForMobile ()) { return true ; } else { return $ this -> matchDetectionRulesAgainstUA (); }}
Наша функція може бути викликана таким чином у будь-якому з наших шаблонів:
$ helper = Mage :: helper ('aion_mobiledetect / data'); if ($ helper-> isMobile ()) {echo "мобільний"; } else {echo "не є мобільним"; }
Це рішення дає нам можливість завантажувати унікальні блоки, на додаток до реагуючих макетів, на мобільні пристрої, структура яких повністю відрізняється від стільникових дисплейних структур. Ці блоки будуть завантажені лише нашим веб-переглядачем, якщо ми використовуємо веб-сайт на даному пристрої. Таким чином можна уникнути завантаження непотрібних елементів.
Підтримка Safari / iOS
Іншим великим недоліком основної теми RWD є те, що він підтримує деякі типи браузерів погано. Наші клієнти зазвичай вимагають, щоб їхні інтернет-магазини працювали добре з браузерами OSX та iOS, крім браузерів на основі Windows, таких як IE10 +, Chrome, Firefox, Opera.
Оскільки Safari обробляє певні значення по-різному за замовчуванням, ніж Chrome, прості модифікації загальномасштабних файлів не вирішують проблеми.
Показуючи простий приклад, Safari обробляє “ дисплей: flex "Значення іншим чином від Chrome або Firefox, тому нам потрібно було внести такі зміни:
.aion-dashboard-whislist {.cart-item {відображення: -webkit-flex; -webkit-flex: 1; -webkit-box-flex: 1; }}
Зверніть увагу: у разі використання Safari, іншою проблемою є форматування форм, оскільки OSX і iOS відображають власні елементи форми. Після обговорення з нашими дизайнерами ми, нарешті, вирішили, з метою досягнення кращого досвіду користувача, зберегти зовнішній вигляд елементів форми в системах OSX / iOS замість використання унікальних елементів / форм Bootstrap.]
Раніше згаданий MobileDetect був використаний як рішення, доповнено функцією виявлення Safari:
/ ** * Цей метод перевіряє, чи є браузер Safari / Desktop * @return bool * / public функція isBrowserSafari () {$ agent = isset ($ _SERVER ['HTTP_USER_AGENT']) ? $ _SERVER ['HTTP_USER_AGENT'] : ""; if (stripos ($ agent, 'Safari') && stripos ($ agent, 'iPhone') === помилка && stripos ($ agent, 'iPod') === false && stripos ($ agent, 'Chrome') = == false ) {$ this -> setBrowser (self :: BROWSER_SAFARI); return true ; } повернути помилково ; }
Використовувати наступним чином:
$ helper = Mage :: helper ('aion_mobiledetect / data'); if ($ helper-> isBrowserSafari ()) {$ body_class = "__browser_safari"; } else {$ body_class = "__browser_other"; }
Використовуючи це, ми могли б внести зміни тільки для файлів CSS для браузерів Safari, які не впливають на вигляд у браузерах Windows.
/ ** Цей файл підтримує сумісність браузера OSX / Safari! * / @Import "base"; .__ browser_safari {... спеціальні рішення}
Резюме Тема NILA включає багато виправлень та унікальних рішень у порівнянні з RWD Magento, що може зробити ваш магазин електронної комерції ще більш успішним. Ми розробили наш шаблон таким чином, що будь-який інтернет-магазин може бути налаштований швидко та просто з ним.
Шаблон NILA все ще перебуває в стадії розробки, і ми тепер перевіряємо його вдома з невеликими проектами, але незабаром настане день, коли він публічно доступний як пакетне рішення.
Звичайно, коли настане цей день, ми повідомимо вас про це на нашому блозі.
Lt;?
