Schließlich konnte ich die Daten von Magento (Kategorien und Produkte) in der Anwendung Vue Storefront (VSF) anzeigen. Dies ist bereits der vierte Artikel ( 1 , 2 , 3 ), in dem ich die Möglichkeiten der Integration von VSF in ein auf Magento 2 basierendes elektronisches Geschäft beschreibe, und der erste, in dem die Daten von Magento in den Browser des Kunden übernommen wurden.

KDPV

Unter der Katze befindet sich ein Link zu Bereitstellungsskripten und eine kurze Beschreibung der Schritte.

Zweck

Zeigen Sie im Client Teiledaten zu Kategorien / Produkten an, die von Magento bezogen wurden.

Schema

Nun werden mir die Abhängigkeiten zwischen den Anwendungskomponenten wie folgt dargestellt:

shemka

Arbeitsumgebung

In der aktuellen Iteration habe ich wieder die mittlere Version des Linux Ubuntu 18.04 LTS 64-Bit-Servers (2x 2198 MHz CPU, 4 GB RAM, 10 GB Festplatte) in der Exoscale- Cloud verwendet.

Bereitstellungsskripte

Ich habe die Skripte für die Bereitstellung von Anwendungskomponenten in ein separates Projekt gestellt: flancer64 / vsf_mage2_setup .

Bereitstellungsschritte:

Bereitstellungskonfiguration

Zum Zeitpunkt des Schreibens sieht die Bereitstellungskonfiguration folgendermaßen aus:

 #!/usr/bin/env bash # ========================================================================= # Local configuration template. # Copy this file to `./cfg.local.sh`. # ========================================================================= export HOST_VSF="255.255.255.255" # ip address or domain name for VSF host (VSF Front/API, Elasticsearch & Redis) export HOST_MAGE="mage2.host.com" # ip address or domain name for Magento 2 host # address of REST API of source Magento instance export URL_MAGE_REST="http://${HOST_MAGE}/rest" export URL_MAGE_IMG="http://${HOST_MAGE}/media/catalog/product" export INDEX_NAME="vue_storefront_catalog" # Magento integration options # see: "How to integrate Magento2 with your local instance?" # at: https://medium.com/the-vue-storefront-journal/vue-storefront-how-to-install-and-integrate-with-magento2-227767dd65b2 export MAGE_CONSUMER_KEY="..." export MAGE_CONSUMER_SECRET="..." export MAGE_ACCESS_TOKEN="..." export MAGE_ACCESS_TOKEN_SECRET="..." export MAGE_CURRENCY_CODE="..."

Anwendungsbereitstellung

Ich klone die Skripte für die Bereitstellung der Komponenten auf einem sauberen Host und stelle die lokale Bereitstellungskonfiguration ein:

 $ cd ~ $ git clone https://github.com/flancer64/vsf_mage2_setup.git $ cd vsf_mage2_setup/ $ cp cfg.init.sh cfg.local.sh $ nano cfg.local.sh ...

Danach führe ich die Deployment-Skripte aus, vom ersten bis zum vierten:

 $ cd ~/vsf_mage2_setup/ $ bash ./bin/step01_env.sh $ bash ./bin/step02_vsf_front.sh $ bash ./bin/step03_vsf_api.sh $ bash ./bin/step04_mage2vsf.sh

Der Inhalt der Skripte kann auf github'e eingesehen werden. Infolgedessen werden die folgenden Komponenten auf einem leeren Host installiert und konfiguriert:

Elasticsearch
Redis
Vue-Storefront
vue-storefront-api
mage2vuestorefront

Komponentenkonfigurationen sind in den entsprechenden Bereitstellungsskripten zu sehen .

Magento2 Data Replication Script => VSF

Im vierten Schritt wird ein Datenreplikationsskript ~/mage2vuestorefront/src/run.sh . Ich gebe es in seiner Gesamtheit (mit Ausnahme sensibler Daten):

 #!/usr/bin/env/bash # Exit immediately if a command exits with a non-zero status. set -e ROOT=$(cd "$(dirname "$0")/" && pwd) export TIME_TO_EXIT="2000" # Setup connection to Magento export MAGENTO_CONSUMER_KEY="87...20l" export MAGENTO_CONSUMER_SECRET="7f...95x" export MAGENTO_ACCESS_TOKEN="ox...lq3" export MAGENTO_ACCESS_TOKEN_SECRET="5d...6o0" # Setup default store export MAGENTO_URL="http://mage2.host.com/rest" export INDEX_NAME="vue_storefront_catalog" # Perform data replications node --harmony ${ROOT}/cli.js taxrule --removeNonExistent=true node --harmony ${ROOT}/cli.js attributes --removeNonExistent=true node --harmony ${ROOT}/cli.js categories --removeNonExistent=true node --harmony ${ROOT}/cli.js productcategories node --harmony ${ROOT}/cli.js products --removeNonExistent=true

Datenreplikation

Skript ./bin/step05_sync_data.sh :

 #!/usr/bin/env/bash ## ************************************************************************ # Script to synchronize data between Magento2 and VSF. ## ************************************************************************ # shellcheck disable=SC1090 # root directory (set before or relative to the current shell script) DIR_ROOT=${DIR_ROOT:=$(cd "$(dirname "$0")/../" && pwd)} # Exit immediately if a command exits with a non-zero status. set -e echo "========================================================================" echo "Read local configuration." echo "========================================================================" . "${DIR_ROOT}/cfg.local.sh" echo "========================================================================" echo "Rebuild indexes and get data from Elasticsearch." echo "========================================================================" cd ~/mage2vuestorefront/src bash run.sh echo "========================================================================" echo "Reconfigure VSF API." echo "========================================================================" cd ~/vue-storefront-api rm -f ./var/catalog.json npm run dump npm run db rebuild -- --indexName="${INDEX_NAME}"

Das Skript ~/mage2vuestorefront/src/run.sh ruft Daten aus Magento 2 ab, indem es auf die Magento-Web-API zugreift. VSF-Entwickler haben eine Alternative ( magento2-vsbridge-indexer ), die ich in einem früheren Artikel verwendet habe.

Nach der Übertragung von Daten von Magento 2 zu Elasticsearch müssen Sie die VSF-API-Konfiguration aktualisieren.

All dies geschieht folgendermaßen:

 $ cd ~/vsf_mage2_setup/ $ bash ./bin/step05_sync_data.sh

Fazit

Nun, die Kategorien und Produkte von Magento haben die VSF-Anwendung „infiltriert“. Jetzt müssen Sie die Rückwärtsbewegung konfigurieren, damit die Daten aus dem VSF (Warenkorb, Bestellungen) in Magento 2 eingehen und sicherstellen, dass sich in Magento 2 registrierte Kunden auch bei VSF anmelden können.

Vue Storefront: Verzeichnis aus Magento 2 importieren