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!

 

102 válaszok
  1. cheapest web hosting in uk says:

    This is really interesting, You’re a very skilled blogger.
    I have joined your feed and look forward to seeking
    more of your wonderful post. Also, I’ve shared your web site
    in my social networks!

  2. https://royalcbd.com/blog/ says:

    Hi! This post couldn’t be written any better!
    Reading through this post reminds me of my previous room mate!
    He always kept talking about this. I will forward this article to him.
    Fairly certain he will have a good read. Many thanks for sharing!

  3. Alcohol Rehabilitation Treatment says:

    Alcohol Abuse Programs http://aaa-rehab.com Drug Rehab http://aaa-rehab.com Residential Rehab Near Me
    http://aaa-rehab.com

  4. carte prepagate says:

    My family always say that I am killing my time
    here at web, except I know I am getting know-how all the time by reading
    such fastidious articles.

  5. best cbd cream for pain says:

    Hey, I think your website might be having browser compatibility issues.
    When I look at your blog site in Opera, it looks fine but when opening in Internet Explorer,
    it has some overlapping. I just wanted to give you a quick heads
    up! Other then that, awesome blog!

  6. best cbd cream for pain says:

    I’m excited to discover this site. I want to to thank you for
    ones time just for this fantastic read!! I definitely liked every little bit of it and I
    have you book marked to look at new things in your website.

  7. CBD gummies says:

    You actually make it seem so easy together with your
    presentation however I to find this matter to be really something
    which I feel I would by no means understand. It seems too complex and very huge
    for me. I’m having a look ahead to your subsequent put up, I’ll attempt to get the cling of it!

  8. best CBD gummies says:

    Greate pieces. Keep posting such kind of information on your
    page. Im really impressed by it.
    Hello there, You have performed an incredible job. I’ll certainly digg it and individually recommend to my friends.
    I am confident they will be benefited from this web site.

  9. best CBD oil says:

    Hello There. I discovered your blog using msn. That is
    an extremely neatly written article. I will be sure to bookmark it and return to read
    more of your useful information. Thank you for the post.

    I will definitely comeback.

  10. best CBD oil says:

    Thank you for another informative site. Where else may I am getting that
    kind of info written in such a perfect manner?
    I’ve a undertaking that I’m just now running on, and I’ve been on the glance out for
    such info.

  11. best CBD oil for sleep says:

    When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get several e-mails with the same comment.

    Is there any way you can remove people from that
    service? Many thanks!

  12. best CBD oil for sleep says:

    Hi there this is kinda of off topic but I was wondering if blogs use WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding knowledge so I wanted to get guidance
    from someone with experience. Any help would be greatly
    appreciated!

  13. CBD oil says:

    whoah this blog is great i like studying your articles.
    Keep up the good work! You realize, many people are searching around for this
    info, you can help them greatly.

    Here is my web site … CBD oil

  14. best CBD oil UK says:

    Admiring the commitment you put into your blog and detailed information you offer.
    It’s awesome to come across a blog every once in a while that isn’t the same old rehashed material.
    Fantastic read! I’ve bookmarked your site and I’m including
    your RSS feeds to my Google account.

    Look into my site; best CBD oil UK

Trackbacks & Pingbacks

  1. generic ventolin szerint:

    generic ventolin

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

  2. natural viagra szerint:

    natural viagra

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

  3. viagra price szerint:

    viagra price

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

  4. doctor7online.com

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

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é.