De laatste tijd wordt er steeds meer gesproken over headless PWA-technologie, die een ware sensatie heeft veroorzaakt in de e-commerce. Het spreekt voor zich dat je op de hoogte moet blijven van nieuwe trends. Dus, hier is het dan: de opkomst van de headless PWA en hoe deze relevant is voor Magento 2 in een Vue-webshop.
Uitleg van de termen
De termen die we gaan gebruiken zijn misschien niet alledaags. Je zou ze allemaal afzonderlijk kunnen opzoeken via Google, maar het is veel handiger om alles op één plek te hebben. Daarom bespreken we hier een aantal technische termen en afkortingen.PWA
PWAʼs zijn apps die zijn ontwikkeld in talen zoals JavaScript, CSS en/of HTML. Tot de komst van PWAʼs was het niet mogelijk om met traditionele methoden een app te maken die er native uitzag.Hoewel een PWA geen echte native app is, is het doel ervan om de functionaliteit van een native app te bereiken. Met een paar slimme extensies en toevoegingen kun je tegenwoordig vrijwel elke website omzetten in een PWA.
API
Een API is niet per se een essentieel onderdeel van PWAʼs. Sommige ontwikkelaars denken er misschien anders over, maar je kunt PWA-technologie begrijpen zonder te weten wat een API is.Bij headless PWAʼs ontkom je echter niet aan de API, oftewel Application Programming Interface. Een API definieert in feite de interacties tussen twee of meer softwarecomponenten.
In dit geval helpt de API de app om met de server te communiceren. De app stuurt gegevens naar een server, die de gegevens ophaalt en interpreteert, de benodigde acties uitvoert en deze terugstuurt naar de app of het apparaat.
Het punt is dat PWAʼs geen APIʼs nodig hebben. API-technologie is pas recent geïntroduceerd in de ontwikkeling van PWAʼs. Het resultaat is wat bekend staat als headless PWAʼs.
Magento 2
Je weet waarschijnlijk wel wat Magento 2 is. Maar lees verder.Magento 2 is een e-commerceplatform. Het helpt webwinkeliers door hen geautomatiseerde, universele tools te bieden. Bijvoorbeeld een flexibel winkelwagensysteem en controle over de esthetiek, functionaliteit, content, enzovoort.
Met Magento 2 is het veel gemakkelijker om een gepersonaliseerde e-commercewebsite te bouwen. In plaats van veel unieke content helemaal vanaf nul te moeten bouwen, kunnen jij en je ontwikkelaar(s) Magento 2 gebruiken om snel en gemakkelijk aan de slag te gaan.
Moderne Magento 2-ontwikkeling maakt gebruik van headless PWAʼs. Net zoals Magento 2 het gemakkelijk maakt om de essentiële onderdelen van een webwinkel te creëren, helpt een headless PWA om Magento 2 beter en sneller te integreren.
Vue Storefront
Vue Storefront is een headless, backend-agnostische PWA waarmee jij, de gebruiker, snel en gemakkelijk een webwinkel kunt opzetten.Backend-agnostisch
Deze term verwijst naar een app die geen frontend-projectintegratie vereist via Node.js, Rails, Python of een andere app. Hoewel backend-agnostische apps in Node.js zijn geschreven, blijven ze backend-agnostisch.Vue Storefront integreren met Magento 2
Laten we nu wat technischer worden. Zo integreer je Vue Storefront met Magento 2.De Magento 2-module
Allereerst heb je een tool nodig die de datastore van Vue Storefront synchroniseert met de brondata van Magento 2. Gelukkig wordt Magento 2 geleverd met een native module die dit doet, genaamd Magento 2 VSBridge Indexer. Deze is snel, betrouwbaar en volledig geïntegreerd met Magento 2.Magento 2 API en OAuth-autorisatie
Magento 2 VSBridge Indexer gebruikt de Magento 2 API via OAuth-autorisatie. Dit betekent dat je toegang tot de Magento-integratie moet voorbereiden. Ga hiervoor naar het Magento 2-beheerpaneel. Klik vervolgens op Systeem, gevolgd door Integraties.Selecteer nu Nieuwe integratie toevoegen. Voer alle vereiste gegevens in, zoals de naam en uw wachtwoord, om alles te bevestigen. Ga nu naar het tabblad API-machtigingen. Vink Catalogus, Verkoop, Mijn account en Winkelwagens aan. Ga vervolgens naar Winkels, gevolgd door Instellingen, Configuratie en vink Voorraadsectie aan. Vink nu in de sectie Winkels Belastingen aan. Ga ten slotte naar Attributen en vink Product aan.
Bevestig de wijzigingen door op Opslaan te klikken.
Magento 2 synchroniseren met de lokale instantie
Er zijn twee integratiemogelijkheden. De oude handmatige methode en een snelle integratiemethode.De tools voor het importeren van Magento 2-gegevens zijn geïntegreerd in de API van Vue Storefront. Hoewel er nog steeds gebruik wordt gemaakt van mage2vuestorefront, is het grotendeels geautomatiseerd.
Snelle integratie
Om Magento 2 met uw lokale instantie te synchroniseren, stelt u config.magento2.api in. Gebruik de Magento 2 OAuth-gegevens wanneer daarom wordt gevraagd. Om alle producten, categorieën en andere gegevens te importeren, gebruikt u de opdracht yarn mage2vs import. Als alternatief kunt u hetzelfde commando gebruiken, maar met een specifieke parameter, door –store-code=de aan het commando toe te voegen.Handmatige integratie
Zoals vermeld, is de oude manier van integreren nog steeds beschikbaar. Begin met het installeren van de tool mage2vuestorefront en bewerk het bestand src/config.js daarin als volgt:magento: {
url: process.env.MAGENTO_URL || "http://your-magento-url.com/rest/", <- wijzig dit naar uw Magento 2-URL,
consumerKey: process.env.MAGENTO_CONSUMER_KEY || "alva6h6hku9qxrpfe02c2jalopx7od1q",
consumerSecret: process.env.MAGENTO_CONSUMER_SECRET || "9tgfpgoojlx9tfy21b8kw7ssfu2aynpm",
accessToken: process.env.MAGENTO_ACCESS_TOKEN || "rw5w0si9imbu45h3m9hkyrfr4gjina8q",
accessTokenSecret: process.env.MAGENTO_ACCESS_TOKEN_SECRET || "00y9dl4vpxgcef3gn5mntbxtylowjcc9",
},
Om de volledige import te starten, voert u de volgende opdrachten in deze volgorde uit:
node cli.js taxrule
node cli.js attributes
node cli.js categories
node cli.js productcategories
node cli.js products
U kunt deze opdrachten zo vaak uitvoeren als u wilt, aangezien ze elke keer dat er een wijziging is, updates in de bestaande records invoegen.
Bestellingen en afbeeldingen synchroniseren
U wilt waarschijnlijk nu de winkelwagens en afbeeldingen in realtime synchroniseren. Hiervoor ga je de tool vue-storefront-api gebruiken. Bewerk het bestand conf/local.json in de map vue-storefront-api. Hiermee wordt de OAuth Magento API-toegang ingesteld:"magento2": {
"url": "http://your-magento-url.com",
"imgUrl": "http://your-magento-url.com/media/catalog/product",
"assetPath": "/../var/magento2-sample-data/pub/media",
"api": {
"url": "http://your-magento-url.com/rest/",
"consumerKey": "alva6h6hku9qxrpfe02c2jalopx7od1q",
"consumerSecret": "9tgfpgoojlx9tfy21b8kw7ssfu2aynpm",
"accessToken": "rw5w0si9imbu45h3m9hkyrfr4gjina8q",
"accessTokenSecret": "00y9dl4vpxgcef3gn5mntbxtylowjcc9"
}
},
Nu wilt u waarschijnlijk de vue-storefront-api tool toestaan om de grootte aan te passen Magento-afbeeldingen. Voeg het Magento-domein toe aan de whitelist met behulp van deze opdracht:
"imageable": {
"namespace": "",
"maxListeners": 512,
"imageSizeLimit": 1024,
"timeouts": {
"convert": 15000,
"identify": 300,
"download": 5000
},
"whitelist": {
"allowedHosts": [
".*your-magento-url.com",
".*divante.pl",
".*vuestorefront.io",
"localhost"
],
"trustedHosts": [
".*your-magento-url.com",
".*divante.pl",
".*vuestorefront.io",
"localhost"
]
},
Voer nu de Order2Magento worker uit – deze tool verwerkt alle door gebruikers geplaatste bestellingen. Voer dit commando in:
Yarn o2m
Winkelwagens synchroniseren
In Magento 2 worden winkelwagens standaard niet in realtime gesynchroniseerd. Het winkelmandje wordt pas aangemaakt wanneer er een bestelling wordt geplaatst.Je wilt het winkelmandje altijd actueel houden.
Ga hiervoor naar vue-storefront/conf/local.json en voeg de volgende opdracht toe aan het gedeelte voor het winkelmandje:
synchronize: true;
Wat is headless e-commerce?
Simpel gezegd, bij headless e-commerce worden de backend en de content- of datamanagementsystemen gescheiden van de interface opgeslagen.Wat is het grote idee hierachter? Taakverdeling tussen backend- en frontend-ontwikkelaars. Frontend-ontwikkelaars hebben de vrijheid om elk framework naar keuze te gebruiken (in dit geval Vue), terwijl de backend-ontwikkelaars hun deel van het werk op hun eigen manier uitvoeren.
Er zijn geen echte nadelen aan headless e-commerce, hoewel het niet nodig is als je een full-stack ontwikkelaar bent of hebt ingehuurd. Toch is de mogelijkheid om de frontend en de backend te scheiden een groot voordeel. Vraag het maar aan een willekeurige ontwikkelaar.
Headless PWAʼs, Magento 2 en Vue Storefront
Zoals je ziet, zijn de drie met elkaar verweven en van elkaar afhankelijk. Hoewel ze gescheiden zijn, is de gebruikte technologie onderling verbonden en verenigd onder de grote noemer van headless e-commerce.Als je Magento 2 wilt gebruiken op een Vue Storefront, maak je dan vertrouwd met headless PWAʼs. Het is hoog tijd.
