Problémák a Magento RWD sablonnal és hogyan sikerül ezeket megoldanunk

Bevezetés

Aki már foglalkozott Magento frontend fejlesztéssel, annak nyilván nem kell bemutatnunk az RWD (Responsive Web Design) theme-et. Ez a Magento alapcsomaggal utazó reszponzív template, amellyel már mobile-ready webshopokat építhetünk fel.

Azért írom, hogy mobile-ready, mert nem mobile-first. A mobile-first ugyanis elsődlegesen a mobileszközökön való kifogástalan működést célozza meg, míg a mobile-ready alapvetően desktop funkciójú mobilos „áthallással”.

Projektjeink kapcsán megrendelőik (jogosan) egyre többször azzal a kéréssel fordulnak hozzánk, hogy webshopjukat a desktop nézet mellett a mobilra is 100%-ig optimalizáljuk UI/UX szempontból is.

A 21. század egyik nagy vívmánya az okostelefon, és ezzel együtt az internetezési szokások gyökeres átalakulása. A rohanó világban egyre többen okostelefonjukat, tabletjüket használjak a gyors információszerzés mellett a webes vásárlásokhoz is. Emiatt kiemelten fontos, hogy a mobilon vásárlást gyorsan elvégezhessük, a dizájn pedig letisztult, egyszerűen áttekinthető legyen.

Erre pedig mondjuk ki őszintén, csak bizonyos mértékig használható az RWD theme. Hogy miért is, arra a cikkben részletesebben ki fogok térni. Több projektünk után végül úgy döntöttünk, hogy bár az RWD alapjain, de egy saját template-et építünk fel a Bootstrap framework segítségével.

 

Megvalósítás

Melyek tehát azok a pontok, amelyek alapján az RWD nem megfelelő választás egy 21. századi, mobile-first webshop kialakításához?

 

  • Mobile-ready, nem mobile-first (elsődlegesen a desktop nézetet támogatja)
  • Elavult grid rendszer (az RWD egy jó pár éves, saját fejlesztésű grid rendszert használ, amivel nehézkesen valósíthatók meg egyedi mobil felületek – a NILA ezzel szemben az egyik legkorszerűbb frontend framework-ot, a Bootstrap-et használja – 12 oszlopos grid rendszere, a flex támogatással a legjobb választás gyors fejlesztéshez)
  • Nem moduláris (Nincs lehetőség az aloldalak, layoutok külön módosítására, minden egy CSS fájlból van kezelve)
  • Nincs OOP CSS (Mivel csak egy fordított CSS fájlt tartalmaz az RWD sablon, ezért nehézkesen módosíthatók akár csak az alapbeállítások is – szín, betűtípus stb.)
  • Gyenge böngésző támogatottság (nincs kifejezetten OSX/iOS támogatás)

 

A NILA sablon dizájnja

Grafikusunk az RWD demo alapján alakította ki az Aion NILA sablon megjelenését. Próbáltuk még letisztultabbá és áttekinthetőbbé tenni, valamint, ahogy már említettem, a szemlélet mobile-first alapú. Ez azt jelenti, hogy mind dizájnban, mind megvalósításban lentről építkezünk felfelé. Színvilágban a kékes-szürke irányt választottuk, ettől lett a végeredmény igazán minimalista.

 

Új skin létrehozása

Az első lépésben létrehoztunk egy új skint az RWD csomag alatt. Azért nem egy új csomagot használtunk, mert a NILA template struktúrája az RWD-re támaszkodik, így gyorsabban és egyszerűbben tudtunk haladni a fejlesztéssel.

 

rwd vs nila sablon struktúra

 

 

A gyakorlatban ez úgy nézett ki, hogy a számunkra szükséges template-eket, layoutokat override-oltuk a NILA skin alól, a struktúra többi részét pedig az RWD alól kezeljük a template jelenlegi verziójában.

Ahogy említettem, a megvalósításhoz frontend oldalról a Bootstrap framework legfrissebb verzióját használtuk (3.3.6), a CSS-t pedig LESS-szel valósítottuk meg az objektum orientáltság függvényében. A NILA csomagolt verziója csak a fordított CSS fájlokat fogja tartalmazni.

Frontend oldalról mindegyik oldal és aloldal új csínt kapott, egységes CMS megjelenítést hoztunk létre, valamint kiemelt figyelmet fektettünk az e-mail template-ek, valamint a nyelvesítés megvalósítására is (hu_HU)

 

Mélyvíz – lássuk a kódszintű felépítést!

 

Ugorjunk fejest a mélyvízbe. A teljesség igénye nélkül most bemutatom a NILA felépítését kód szempontból is.

 

Könyvtárszerkezet

 

NILA theme: app/design/frontend/rwd/nila

 

NILA skin:: skin/frontend/rwd/nila

 

A skin mappánk több almappából épül fel.

 

  • aion: a NILA skin saját CSS / JS fájlok, amelyek az oldal megjelenését befolyásolják
  • css: email-inline.less az email template-ekhez használt megjelenés
  • images: alapértelmezett RWD template képek
  • img: a NILA témához tartozó képek
  • vendor: third-party könyvtárak és modulok mappája (Bootstrap, Fontawesome, Owl.Carousel)

 

 

Grid rendszer

Az RWD sablon rendszere egy saját fejlesztésű grid rendszeren alapul, amely csak korlátozottan használható mobile-first oldalak fejlesztéséhez.

 

Példa:

 


@media only screen and (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 {
    padding-right: 20px;
  }
  .customer-account-login .col2-set .col-2 {
    padding-left: 20px;
    border-left: 1px solid #ededed;
  }
}
@media only screen and (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 only screen and (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;
  }
}

Ahogy láthatjuk, a grid rendszer mobil töréspontok deklarálása nem az elfogadott töréspontokhoz igazodik, hanem egyedi pontokat hoz létre: 479, 770, de a kódot átnézve további idegen töréspontokra is találhatunk:


@media only screen and (max-width: 535px) {...}
@media only screen and (max-width: 525px) {...}
 

 

A NILA grid rendszeréhez a Bootstrap framework-öt választottuk, amely mobile-first szemlélettel készült, és igazodik a szabványos töréspontokhoz, és ezzel az elterjedt felbontások támogatásához:

(http://getbootstrap.com/css/#grid)

 

 


/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

 

 

rwd vs nila grid

 

 

Less fájlok

Template-ünket úgy építettük fel, hogy az minél modulárisabb és könnyen módosítható legyen. Minden oldal, CMS oldal saját LESS fájlt kapott, így a template-et moduláris szinten tudjuk módosítani, valamint új projektek eseten nem szükséges az egész template-et felhasználni, csak a módosítandó layoutokat.

A template egységes elemei, így például a fejléc, láblééc, és a gombok megjelenése szintén egy különálló LESS fájlba kerültek, valamint létrehoztunk egy BASE.less fájlt a változók, funkciók, mixinek tárolására.

 

rwd vs nila less fájl

 

A frontendre csak a nila.css fájl kerül ki, ez pedig a fordítás előtt így épül fel a moduláris less fájlokból:

  • Base.less
  • Deafult.less
  • Module.less

 

 

rwd vs nila könyvtár

 

Új oldal esetén csak hozzá kell fűznünk a module_neve.less fájlt a nila.less-hez, és fordítás után már a nila.css tartalmazni fogja az új vagy módosított megjelenést.

 

Javascript

A NILA sablon JS oldalról nem tartalmaz különösebb módosítást az RWD-hez képest, a Bootstrap javascript plugin-jai mellett csupán az OwlCarousel.js-t használtuk fel a főoldali újdonságok slider-hez.

 


   jQuery("#home-products-grid").owlCarousel({
        autoPlay: false,
        items : 5,
        itemsDesktop : [1199,3],
        itemsDesktopSmall : [979,3],
        navigation: true
    });

 

Ahogy láthatjuk, a slider-ben alapesetben 5 terméket jelenítünk meg, ezután pedig a további termékek slide-olással tekinthetők meg. Ha más számú terméket szeretnénk megjeleníteni, azt megtehetjük admin felületről, az alábbi sor módosításával, valamint a javasript „items” értékének módosításával:

 


   $content = '{{widget type="catalog/product_widget_new" display_type="new_products" products_count="5" template="catalog/product/widget/new/content/new_grid.phtml"}}';

 

Template override

 

Mivel a NILA jelenlegi verziója az RWD csomagon alapszik, ezért csak azokat a template-eket / layout fájlokat módosítottuk, amelyekre az egyedi megjelenéshez szükségünk volt. A fejlesztések későbbi szakaszaiban a NILA ki fog válni az RWD csomag alól, és különálló csomagként fog funkcionálni.

 

  • CMS
  • Home
  • Category
  • Product
  • Cart
  • Checkout
  • Wishlist
  • Dashboard
  • Account

 

A NILA sablon egyik legnagyobb előnye tehát a moduláris felépítés. Míg az RWD téma módosítása nehézkes, a NILA template-et percek alatt testre tudjuk szabni a base.less es default.less fájlok módosításával.

 

 

További mobil optimalizációk

Mint említettem, template-ünket mobile-first szemléletben építettük fel, a cél a minél egyszerűbb használhatóság megvalósítása volt mobil eszközökön is. Mivel több elem nem, vagy csak nehézkesen használható mobil nézetben (pl. táblázatok, kosár, checkout, érintési felületek), ezért egy egyedi modul segítségével azonosítani tudjuk a felhasználó eszközét, és ennek megfelelően mobil és desktop blokkokat betölteni.

 

Modulunk alapját a széles körben ismert MobileDetect PHP könyvtár adta.

 


<?xml version="1.0"?>
<config>
    <modules>
        <Aion_MobileDetect>
            <version>0.1.0</version>
        </Aion_MobileDetect>
    </modules>
    <global>
        <helpers>
            <aion_mobiledetect>
                <class>Aion_MobileDetect_Helper</class>
            </aion_mobiledetect>
        </helpers>
    </global>
</config>

 

Mobil detektálása:

 


public function isMobile($userAgent = null, $httpHeaders = null)
{
        if ($httpHeaders) {
            $this->setHttpHeaders($httpHeaders);
        }
        if ($userAgent) {
            $this->setUserAgent($userAgent);
        }
        // Check specifically for cloudfront headers if the 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();
        }
}

 

Függvényünket bármelyik templateünkben a következő módon hívhatjuk meg:

 


$helper = Mage::helper('aion_mobiledetect/data');
if($helper->isMobile())
{
  echo “is mobile”;
} 

else 
{
  echo “is not mobile”;
}

 

Ez a megvalósítás lehetőséget ad számunkra, hogy a reszponzív nézetek mellett mobilra egyedi blokkokat is betölthessünk, amelynek teljesen eltérő a szerkezete a desktop felépítéstől. Ezeket a blokkokat a böngészőnk csak akkor fogja letölteni, ha az adott eszközről használjuk az oldalt. Ezzel a módszerrel elkerülhetjük az elemek felesleges betöltését.

 

Safari / iOS támogatás

Az alap RWD téma egy másik nagy hibája, hogy gyenge a böngésző támogatottsága. Megrendelőink egyik igénye, a Windows-os böngészők támogatása mellett (IE10+, Chrome, Firefox, Opera) az OSX-en és iOS-en való Safari böngészőket is támogassuk.

Mivel sajnos a Safari alapértelmezetten több érteket másképp kezel, mint a Chrome, így az általános less fájlok egyszerű módosítása nem oldotta volna meg a problémát.

Egy egyszerű példánál maradva, a Safari a “display: flex” értéket is másképpen kezeli, mint a Chrome vagy Firefox böngészők, ezért a következő módosítást kellett eszközölnünk:

 


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

 

[ Megjegyzés: Safari böngésző esetén további problémát jelent a form-ok formázása, mivel mind az OSX mind az iOS a native form elemeket jelenít meg. Designereinkkel egyeztetve végül úgy döntöttünk, hogy az egyedi / Bootsrap form elemek helyett OSX/iOS renszerek alatt meghagyjuk a form elemek native megjelenését a jobb UX élmény érdekébben. ]

 

A megoldás a fentebb már említett MobileDetect modul volt, melyet kiegészítettünk egy Safari detektálással is:

 


/**
* This method checks if browser is 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);
            return true;
        }

     return false;
}

 

Ezt az alábbi módon használhatjuk fel:

 


$helper = Mage::helper('aion_mobiledetect/data');

if($helper->isBrowserSafari()) 
{
    $body_class = "__browser_safari";
} 

else
{
    $body_class = "__browser_other";
}

 

Ennek a segítségével lehetőségünk nyílt kifejezetten csak OSX/Safari böngészőkre optimalizált CSS módosításokat végezni, amely módosítások nem befolyásolják a Windows-os böngészők megjelenítését sem.

 


/** This less file support OSX/Safari browser compatibility!*/
@import "base";
.__browser_safari {
 … egyedi customizaciok
}

 

Összegzés

 

A NILA sablon az RWD-hez képest nagyon sok javítást és egyedi megoldást hoz, amivel a Magento webáruházunk igazán sikeres lehet. A template-ünket úgy alakítottuk ki, hogy bármilyen webáruhazat gyorsan és könnyen egyedire szabhassunk használatával.

A NILA sablont jelenleg még fejlesztjük és házon belüli kisebb projektekben teszteljük, de hamarosan dobozos formában is elérhető lesz a nagyközönség számára is. Erről pedig természetesen majd itt a blogon értesülhetsz először!

 

2 válaszok

Trackbacks & Pingbacks

  1. […] persze kellett az is, hogy a technológia felzárkózzon. Egyre több webshop használ reszponzív dizájnmegoldásokat, olyan felhasználói felületet, amely a már jól ismert gesztusokkal is könnyen kezelhető és […]

  2. […] lényeg azonban nem is ez, hanem a reszponzivitás. Sok olyan rendszer található a piacon, amely „elfelejtett” alkalmazkodni a piac legújabb […]

Hagyjon egy választ

Want to join the discussion?
Feel free to contribute!

Vélemény, hozzászólás?

Az email címet nem tesszük közzé.