search

Slik lager du PWA storefront i Magento 2

Finn ut hvordan du kan bruke PWA storefront i Magento.

Hvordan lage en PWA-storefront med PWA Studio i Magento 2?

Dersom du driver innen eCommerce, har du kanskje hørt om en av de siste teknologitrendene – nemlig PWA. Dette har nærmest blitt en ny måte å lage nettbutikker på, og har blitt svært populært på kort tid. PWA storefront blir du i denne artikkelen kjent med.

En PWA, eller Progressive Web App, er en form for web-applikasjon som lar deg benytte smart web-teknologi. Dette resulterer kort fortalt i at du kan tilby en mer engasjerende, pålitelig og effektiv kundeopplevelse.

PWA-nettsider kjennetegnes ved at de er responsive og tilpasser seg ulike enheter, og de kan besøkes fra alle nettlesere. Siden vil dessuten bli raskere og sikrere, og kan fungere selv uten nett. De fungerer rett og slett som en app!

I denne guiden skal vi se nærmere på hvordan du lykkes med å lage en PWA-storefront i Magento 2 ved hjelp av verktøyet PWA Studio.

PWA storefront

PWA forklart

En PWA kan betraktes som en nettside som både oppfører seg som og ser ut som en app på mobilen. Systemet leveres imidlertid gjennom nett, og ikke gjennom de ulike app-butikkene. Konseptet ble først lansert av Google i 2015.

Så hva slags egenskaper har egentlig PWA til felles med apper? Jo, de kan blant annet benyttes offline, noe som er fordelaktig for brukere som ikke har nett tilgjengelig. I tillegg kan PWA-sider sende ut varsler.

Istedenfor å lage apper og nettsider separat, kan du med andre ord bruke PWA til å lage et app-ikon som fungerer som en snarvei til nettsiden fra forbrukerens enhet. Det er med andre ord en nettside, men med fordelene som følger med en app.

Magento så raskt potensialet i denne teknologien, og lanserte derfor PWA Studio i 2018. Dette er altså et verktøysett som lar deg lage nettbutikker i Magento som fungerer på tilsvarende måte som apper.

Kom i gang nå!

Vi hjelper deg med å lage storefront i Magento!

Hva er PWA Studio for Magento?

PWA storefront i magento

PWA Studio for Magento består av en rekke verktøy som lar brukeren utvikle, vedlikeholde og distribuere en PWA-storefront. PWA Studio er tilgjengelig for alle Magento-versjoner fra Magento 2.3 og utover.

Verktøyene lar deg benytte smarte biblioteker og redskap for å kunne bygge en framework og et system som baseres på Magentos muligheter for utvidelser.

PWA Studio hjelper enkelt forklart utviklere med å lære seg ulike PWA-metoder, slik at de kan utvikle flotte produkter front-end, samt smarte PWA-utvidelser. I tillegg kan det lages komponenter som kan legges ut for salg på markedsplassen til Magento.

Først og fremst benyttes PWA Studio til å lage PWA-storefronts, og vedlikeholde disse. Her er noen av modulene du kan se frem til å bruke i PWA Studio:

Peregrine

I PWA Studio finner du blant annet Peregrine. Dette kan best beskrives som en rekke UI-komponenter som kan benyttes til å lage en PWA Magento-side.

Du som bruker kan blant annet utvide, bruke og blande de forskjellige komponentene i Peregrine, slik at det kan lages en helt unik og skreddersydd PWA-storefront for Magento.

PWA Buildpack

I PWA Buildpack finner du alle de viktigste bibliotekene og verktøyene for å kunne utvikle og bygge en PWA. 

Du kan blant annet bruke PWA Buildpack til å konfigurere og opprette et lokalt utviklermiljø for PWA.

Venia Storefront

I Magentos Venia Storefront får du både Peregrine og PWA Buildpack. Så hva kan du se frem til med denne pakken?

Venia Storefront gir deg blant annet mulighet for å lage nettsider med storefront bestående av kategorisider og en rekke produktdetaljer.

Fordeler ved å velge PWA Studio

Det finnes mange gode grunner til å benytte seg av PWA Studio dersom du har en nettbutikk i Magento, eller planlegger å lage en.

Vi kan blant annet trekke frem at PWA Studio gir deg mulighet for å lage en sikker, mobilvennlig, hurtig og flott PWA-nettside. Siden vil i tillegg kunne besøkes gjennom alle de ulike nettleserne, og kan brukes til og med uten internett.

Foreløpig er det ikke mulig å bruke Magento PWA-nettsider uten nett på enheter som benytter iOS, som iPhone. Sidene kan dessuten bare sende varsler til Android, noe som trekker litt ned.

Det er også mulig installere nettsiden på mobilen – på lik linje med en app. Ellers kan du se fram til fordeler som at nettsiden enkelt lar brukerne dele innhold, da den inneholder egne URL-er for enkel deling.

Slik lager du en PWA-storefront med PWA Studio

Det finnes to ulike måter å lage et skreddersydd tema i PWA Studio på. Den ene er ved å bruke Fallback Studio, som har blitt utviklet av Jordan Eisenburger. Den andre metoden går ut på å bruke Magento-teamets Scaffolding Project.

Vi skal nå se nærmere på de to ulike metodene. Finn ut hva som passer best for deg og dine forutsetninger.

Fallback Studio

Med Fallback Studio kan du gjennom PWA Studio kopiere alle filstrukturer i kildeprosjektet, og deretter endre dem helt uten risiko. Dette gjør det mulig å lage et skreddersydd og unikt PWA-tema ved hjelp av Venia Storefront.

Du kan med andre ord utvide og endre ulike komponenter etter behov. Dette baseres på den samme idéen som benyttes av Magento ellers. Fallback Studio er imidlertid noe utdatert, da det er utviklet av bare én enkelt person – og ikke har blitt oppdatert på en stund.

I denne guiden vil vi derfor fokusere på hvordan du kan lage en unik PWA storefront ved hjelp av Scaffolding Project. Sistnevnte er dessuten mer brukervennlig og enkelt å sette i gang med, enn Fallback Studio.

PWA storefront

Scaffolding Project

Det er Magento Core Team som står bak Scaffolding Project. Dette systemet oppdateres hyppig av Magento, og er kompatibelt med PWA Studio. Med Scaffolding Project får du tilgang på automatisk filproduksjon.

Scaffolding Project gjør det enkelt å lage PWA storefront, og lar deg til og med designe et eget tema for nettbutikker i Magento 2. Det enkle systemet består av en rekke automatiserte verktøy, og er som nevnt enklere enn Fallback Studio.

Vi skal nå se nærmere på hvordan du lager en PWA storefront med Scaffolding Project, steg for steg:

Forberedelser

Før du kan lage en PWA-storefront i Magento, er det viktig at du har erfaring med bpde CSS, HTML, React og Webpack. Dersom du ikke har kunnskap om programmering, anbefaler vi å få hjelp av noen som kan dette.

Du må også laste ned og installere en rekke verktøy før du setter i gang. Dette omfatter følgende:

Python 2.7

NodeJS

Yarn

Magento 2.3.1 eller nyere

Oppdatering av hovedkomponentene

PWA storefront i Magento

Du skal nå lage prosjektet ditt. Dette gjør du ved hjelp av kommandoen «yarn create @magento/pwa. Når selve installasjonen starter, må du legge inn navnet på mappen der prosjektet skal lagres og installeres. 

Her må du blant annet legge inn navn på utvikler, prosjektnavn og backend-URL for Magento. Deretter lager du en «override Webpack plugin». Dette gjør det mulig å erstatte de grunnleggende komponentene med mer avanserte versjoner.

Du skal nå utvide eller omskrive de opprinnelige komponentene som finnes i PWA Studio. Dette gjør du ved å legge til en «div block» og «Static Block for TopBar». Du lager en lib-mappe. Deretter kopierer du Main-komponentene.

Du kan nå lage filen componentOverrideMapping.js. Denne lar deg lagre en override-mappe bestående av grunnleggende komponenter. Du kan deretter registrere webpack.config.js som er en plugin. Importer nødvendige filer. Deretter kjører du Watch-kommandoen.

Slik lager du TopBar-komponenter

Etter å ha utført overnevnte tiltak, vil du ha et Main-komponent som er overstyrt. Nå kan du lage et skreddersydd komponent som kan fungere som en erstatning for Static Block i TopBar.

Du angir stil ved å lage filen src/lib/components/TopBar/topbar.css. Her lager du komponentene, før du eksporterer dine skreddersydde komponenter. Du kan deretter oppdatere Main-komponentene.

Trenger du hjelp med PWA?

Med en PWA storefront for Magento-nettbutikken din kan du potensielt nå ut til flere kunder. Nettsiden vil fungere nærmest som en app, og kan brukes både med og uten nett. Det finnes også praktiske muligheter som å sende ut varslinger.

Dersom du ønsker en mer brukervennlig, mobilvennlig og moderne nettbutikk, kan vi i Moo Gruppen hjelpe deg. Vi kan utvikle nettbutikken for deg, mens du fokuserer på andre viktige ting. Kontakt oss i dag om du ønsker hjelp fra et kompetent team!

 Kontakt oss her→

Med en prosjektleder som følger deg som kunde gjennom leveransen og gjennomføringen av prosjektet, oppnår vi god innsikt, forståelse og kontroll.