General Frontend Integration Guide

General Frontend Integration Guide

Magento PWA Studio

Clone Tapita PWA Studio repo

Scenario 1: If you use @magento/create-pwa package
From the root directory of your PWA Studio project, clone the repository:
  1. git clone https://github.com/Simicart/pagebuilder-module-pwa-studio @simicart/pagebuilder-module-pwa-studio/
Modify these lines in package.json file at the root folder as below:
  1. "dependencies": {
  2.   ...
  3.   "@simicart/pagebuilder-module-pwa-studio": "link:./@simicart/pagebuilder-module-pwa-studio"
  4. },
  5. "devDependencies": {
  6.     "simi-pagebuilder-react": "^1.3.4",
  7.     ...
  8. },
Scenario 2: If you clone Magento PWA Studio from GitHub (https://github.com/magento/pwa-studio)
Go to packages/venia-concept, then clone the repository:
  1. git clone https://github.com/Simicart/pagebuilder-module-pwa-studio @simicart/pagebuilder-module-pwa-studio/
Modify these lines in packages/venia-concept/package.json file as below:
  1. "dependencies": {
  2.   ...
  3.   "@simicart/pagebuilder-module-pwa-studio": "link:./@simicart/pagebuilder-module-pwa-studio"
  4. },
  5. "devDependencies": {
  6.     "simi-pagebuilder-react": "^1.3.4",
  7.     ...
  8. },

Install and start project

  1. yarn install && yarn run watch
After you integrate PWA Studio frontend successfully, let's synchronize your Magento 2 backend.

ScandiPWA




Vue Storefront


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

  1. yarn add vuera

Install Tapita Page Builder module

  1. npm install --save simi-pagebuilder-react

Install React

  1. npm install --save react react-dom

Then run this command

  1. yarn install

Now we will override some files. From your project folder, run these commands
  1. git clone https://github.com/TapitaCommerce/spb_vue.git builder_pages
  2. 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

  1. yarn dev


Shopify Hydrogen

Requirements:
  1. Node v14+
  2. Yarn

Create Shopify private app to get Storefront access token

Step 1: Log in to your Shopify store and navigate to the Apps section.



Step 2: Take yourself to the bottom of the page and click on ‘Manage Private Apps’.



Step 3: Now click on ‘Create New Private App’



Step 4: Enter the App details by Filling up the ‘Private App Name’ and ‘Emergency Developer Email’ (this can be your email address).



Step 5: Now, click on "Allow to access storefront data using the StoreFront API" 



Step 6: Check all boxes to give all permissions:



Now, click on ‘Save’ at the bottom of the list to create the app. In the Popup, Click on ‘Create App’ to end the creation.



Done! Now copy the Storefront access token to use in the next steps.



Clone Tapita Hydrogen repo

Run these commands:
  1. yarn
  2. yarn dev
Open the file shopify.config.js and update these lines with your store's domain and storefront token acquired above.
  1. storeDomain: 'simicartdemo.myshopify.com',
  2. storefrontToken: 'e42b8ee293c1f005d15c8760ca014220',

Previewing a production build

To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run yarn preview:
  1. yarn build
  2. yarn preview

Building for production

  1. yarn build
Then, you can run a local server.js using the production build with:
  1. yarn serve

    • Related Articles

    • General Backend Synchronization Guide

      Magento 2 Make sure you integrate your frontend first. In your Magento backend, go to System > Extensions > Integrations. Click Add New Integration. Enter a unique name for the integration in the Name field. Then enter your admin password in the Your ...

    • Configuration guide for Magento 2

      In your Magento backend, go to Stores > Configuration > Tapita PageBuilder Frontend to enable the extension and configure the fields: Enable: Yes Override your URL: decides what will happen if there are pages on Magento backend and Tapita builder ...

    • Install Tapita for Magento PWA Studio

      Integrate PWA Studio frontend Clone Tapita PWA Studio repo Scenario 1: If you use @magento/create-pwa package From the root directory of your PWA Studio project, clone the repository: git clone ...

    • Install Tapita for Shopify Hydrogen

      Integrate Hydrogen frontend Requirements: Node v14+ Yarn Create Shopify private app to get Storefront access token Step 1: Log in to your Shopify store and navigate to the Apps section. Step 2: Take yourself to the bottom of the page and click on ...

    • How do I share my GTM/GA/Facebook Pixels account permission with SimiCart?

      In some cases, we'll need to access your GTM/GA/Facebook Pixels to implement and test our integration of those services with your mobile app and/or website. In such cases, please follow this guide to share your account permission with us. 1. Google ...