Akhirnya, saya bisa melihat data dari Magento (kategori dan produk) di aplikasi Vue Storefront (VSF). Ini sudah artikel keempat ( 1 , 2 , 3 ), di mana saya menjelaskan proses mengeksplorasi kemungkinan mengintegrasikan VSF dengan toko elektronik berbasis pada Magento 2, dan yang pertama di mana data dari Magento menyelinap ke dalam browser pelanggan.

KDPV

Di bawah kucing adalah tautan ke skrip penempatan dan deskripsi singkat langkah-langkahnya.

Tujuan

Tampilkan dalam data bagian klien pada kategori / produk yang diperoleh dari Magento.

Skema

Sekarang dependensi antara komponen aplikasi disajikan kepada saya seperti ini:

shemka

Lingkungan kerja

Dalam iterasi saat ini, saya kembali menggunakan versi medium dari Linux Ubuntu 18.04 LTS 64-bit server (2x 2198 MHz CPU, 4 GB RAM, 10 GB disk) di cloud Exoscale .

Skrip penerapan

Saya menempatkan skrip untuk menggunakan komponen aplikasi ke dalam proyek terpisah: flancer64 / vsf_mage2_setup .

Langkah Penempatan:

Konfigurasi Penempatan

Pada saat penulisan ini, konfigurasi penyebaran terlihat seperti ini:

 #!/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="..."

Penerapan Aplikasi

Saya mengkloning skrip untuk menyebarkan komponen pada host bersih dan mengatur konfigurasi penempatan lokal:

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

Setelah itu saya menjalankan skrip penerapan, dari yang pertama ke yang keempat:

 $ 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

Isi skrip dapat dilihat di github'e. Akibatnya, komponen berikut ini akan diinstal dan dikonfigurasi pada host kosong:

Pencarian Elastics
Redis
vue-storefront
vue-storefront-api
mage2vuestorefront

Konfigurasi komponen dapat dilihat di skrip penerapan yang sesuai.

Script Replikasi Data Magento2 => VSF

Pada langkah keempat, skrip replikasi data ~/mage2vuestorefront/src/run.sh . Saya memberikannya secara keseluruhan (dengan pengecualian data sensitif):

 #!/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

Replikasi data

Script ./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}"

Skrip ~/mage2vuestorefront/src/run.sh mengambil data dari Magento 2 dengan mengakses API Web Magento, sehingga tidak bekerja dengan cukup cepat. Pengembang VSF punya alternatif ( magento2-vsbridge-indexer ), saya menggunakannya di artikel sebelumnya .

Setelah mentransfer data dari Magento 2 ke Elasticsearch, Anda perlu memperbarui konfigurasi API VSF.

Semua ini dilakukan seperti ini:

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

Kesimpulan

Nah, kategori dan produk dari Magento telah "menyusup" aplikasi VSF. Sekarang Anda perlu mengonfigurasi gerakan sebaliknya - sehingga data dari VSF (keranjang, pesanan) masuk ke Magento 2 dan memastikan bahwa pelanggan yang terdaftar di Magento 2 juga dapat masuk ke VSF.

Vue Storefront: Impor Direktori dari Magento 2