Vue Storefront

Integrate Vue frontend

From your Vue project folder, install vuera to use ReactJS in Vue

yarn add vuera

Install Tapita Page Builder module

npm install --save simi-pagebuilder-react

Install React

npm install --save react react-dom

Then run this command

yarn install

Now we will override some files. From your project folder, run these commands

git clone https://github.com/TapitaCommerce/spb_vue.git builder_pages
cp -Rf ./builder_pages/pages/ ./pages

Go to your Tapita Dashboard > Integration and copy the Integration Token. Then, replace the Integration Token value at these files: ./pages/PageBuilderWrapper.js and ./pages/RegularPage.js

Then, run this command

yarn dev

Synchronize Magento 2 backend

In your Magento backend, go to System > Extensions > Integrations.
Click Add New Integration.

magento integrations

Enter a unique name for the integration in the Name field. Then enter your admin password in the Your Password field. Leave all other fields blank.

Click the API tab. Select the Magento resources the integration can access. You can select all resources, or select a custom list with at least those items (and children) selected: Catalog, Marketing, Stores

available apis

Click Save to save your changes and return to the Integrations page.
Click the Activate link in the grid that corresponds to the newly-created integration.
Click Allow. A dialog similar to the following displays:

integration details

Copy the Access Token. Go to your Tapita Dashboard > Synchronization.

tapita synchronization
  • URL: the base URL of your Magento website
  • Token: the Access Token that you can get in the previous step

Go to Integration tab and click Generate Token. Then, copy the generated Integration Token to use in the next steps.

tapita integration token

Replace the Integration Token value at these files: ./pages/PageBuilderWrapper.js and ./pages/RegularPage.js

Then, run this command

yarn dev
Was this page helpful?