Проблемы с темой Magento RWD и как их исправить

1. Вступление Те, кто уже имел дело с развитием внешнего интерфейса Magento, вероятно, знают Magento...
2. Меньше файлов
3. Javascript
4. Дальнейшая мобильная оптимизация
5. Поддержка Safari / iOS

Вступление

Те, кто уже имел дело с развитием внешнего интерфейса Magento, вероятно, знают Magento Тема RWD (Отзывчивый веб-дизайн). Этот адаптивный шаблон поставляется с базовым пакетом Magento, который можно использовать для создания мобильных интернет-магазинов.

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

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

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

Реализация

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

• Оно готово для мобильных устройств, а не для мобильных устройств (в первую очередь поддерживает отображение на рабочем столе)
• Устаревшая сеточная система (RWD использует специально разработанную сеточную систему, созданную на протяжении нескольких лет, с помощью которой сложно создавать уникальные мобильные решения, в то время как NILA использует одну из самых современных интегрированных сред, начальная загрузка с сеткой из 12 колонок, гибкая поддержка - идеальное решение для быстрой разработки)
• Он не модульный (невозможно изменить отдельные подстраницы и макеты, все управляется с помощью файлов CSS)
• ООП 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: приложение / дизайн / внешний интерфейс / RWD / Nila

NILA skin :: скин / внешний интерфейс / RWD / Nila

Наш каталог скинов состоит из нескольких подкаталогов.

• aion: NILA создает собственные файлы CSS / JS, которые влияют на внешний вид страницы
• css: emailinline.less, внешний вид для шаблонов электронной почты
• изображения: шаблоны изображений RWD по умолчанию
• img: изображения, относящиеся к теме NILA
• vendor: каталог сторонних библиотек и модулей (Bootstrap, Fontawesome, Owl.Carousel)

Грид система

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

Пример:

экран @media only и (min-width: 480px) { .customer-account-login .col2-set .col-1 , .customer-account-login .col2-set .col-2 {padding-top: 0; маржинальная вершина: 20 пикселей; } .customer-account-login .col2-set .col-1 {padding-right: 20px; } .customer-account-login .col2-set .col-2 {padding-left: 20px; border-left: 1px solid #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 solid #ededed; }} @media только экран и (max-width: 479px) { .customer-account-login .col2-set .col-1 {padding-bottom: 30px; } .customer-account-login .col2-set .col-2 {padding-top: 30px; border-top: 1px solid #ededed; }}

Как мы видим, объявление мобильных точек останова системы сетки не адаптируется к стандартным точкам останова, но создает уникальные точки: 479, 770, и, изучая код далее, мы можем найти больше «чужих» / необычных / нестандартных точек останова:

@

Только экран и (максимальная ширина: 535 пикселей) {...} @ Только экран и (максимальная ширина: 525 пикселей) {...}

Мы выбрали платформу Bootstrap для грид-системы NILA, которая была разработана с мобильным подходом и согласуется со стандартными контрольными точками и, таким образом, поддерживает стандартные параметры разрешения:

/ * Очень маленькие устройства (телефоны, менее 768 пикселей) * / / * Нет медиазапроса, так как это по умолчанию в Bootstrap * / / * Небольшие устройства (планшеты, 768 пикселей и выше) * / @media (min-width: @ screen -sm-min) {...} / * Средние устройства (рабочие столы, 992px и выше) * / @media (min-width: @ screen-md-min) {...} / * Большие устройства (большие рабочие столы, 1200px и выше) * / @media (минимальная ширина: @ screen-lg-min) {...}

Меньше файлов

Мы создали наш шаблон, чтобы он был как можно более модульным и легко изменяемым. Каждой странице 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 ("# ​​home-products-grid") .owlCarousel ({autoPlay: false , items: 5 , itemsDesktop: [1199, 3], itemsDesktopSmall: [979, 3], navigation: true });

Как мы видим, по умолчанию в слайдере отображаются 5 товаров, другие товары можно просмотреть, сдвинув их. Если мы хотим показать другое количество продуктов, мы можем установить его в панели администратора, изменив строку ниже, а также изменив значения «элементов» javascript:

$ content = '{{widget type = "catalog / product_widget_new" display_type = "new_products" products_count = " 5 " template = "каталог / 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>

Определение типа мобильного телефона:

публичнаяфункцияisMobile

($ userAgent = null , $ httpHeaders = null ) { if ($ httpHeaders) {$ this -> setHttpHeaders ($ httpHeaders); } if ($ userAgent) {$ this -> setUserAgent ($ userAgent); } // специально проверяем заголовки облачного фронта, если 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 «is mobile»; } else {echo «не мобильно»; }

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

Поддержка Safari / iOS

Еще один большой недостаток основной темы RWD заключается в том, что она плохо поддерживает определенные типы браузеров. Наши клиенты обычно требуют, чтобы их интернет-магазины нормально работали с браузерами OSX и iOS, кроме браузеров на базе Windows, таких как IE10 +, Chrome, Firefox, Opera.

Поскольку Safari по умолчанию обрабатывает определенные значения иначе, чем Chrome, простые изменения общих файлов Less не решат проблемы.

Показывая простой пример, Safari обрабатывает дисплей: гибкий ”Значение отличается от Chrome или Firefox, поэтому нам нужно было сделать следующую модификацию:

.aion-dashboard-whislist {.cart-item {display: -webkit-flex; -webkit-flex: 1; -webkit-box-flex: 1; }}

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

Ранее упомянутое MobileDetect использовалось в качестве решения, дополненного функцией обнаружения Safari:

/ ** * Этот метод проверяет, является ли браузер Safari / Desktop * @return bool * / public function isBrowserSafari () {$ agent = isset ($ _SERVER ['HTTP_USER_AGENT']) ? $ _SERVER ['HTTP_USER_AGENT'] : ""; if (stripos ($ agent, 'Safari') && stripos ($ agent, 'iPhone') === false && stripos ($ agent, 'iPod') === false && stripos ($ agent, 'Chrome') = == false ) {$ this -> setBrowser (self :: BROWSER_SAFARI); вернуть истину ; } вернуть ложь ; }

Для использования следующим образом:

$ 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 будет включать множество исправлений и уникальных решений по сравнению с Magento RWD, которые могут сделать ваш магазин электронной коммерции еще более успешным. Мы разработали наш шаблон таким образом, что любой интернет-магазин можно настроить быстро и просто с ним.

Шаблон NILA все еще находится в стадии разработки, и в настоящее время мы проводим его собственное тестирование на небольших проектах, но скоро настанет день, когда он станет общедоступным в виде пакетного решения.

Конечно, когда наступит этот день, мы сообщим вам об этом здесь, в нашем блоге.

Похожие

Комментарии