Skip to content

ThermScissorpunch/vsf-external-checkout

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

48 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue Storefront External Checkout

With this extension you can use your CMS checkout (e.g. Magento) instead of default Vue Storefront checkout. This plugin requires cart and user sync on your backend (see integrations )

VueStorefront demo with external checkout

Current CMS integrations for this extension

How it works?

When user tries to enter your Vue Storefront checkout:

  1. The extension synchronizes cart and user data with your backend CMS
  2. User is redirected to your CMS checkout (extension overrides /checkout route).

Installation

Which version should I use ?

Magento Version External Checkout Latest Version
VueStorefront 1.8 vsf-external-checkout 1.x
VueStorefront 1.9 vsf-external-checkout 2.x
VueStorefront 1.11+ vsf-external-checkotu 3.x

Manual installation

  1. Download the latest release and extract it in src/modules/external-checkout

  2. Add CMS address to your config/local.json file.

"externalCheckout": {
  "cmsUrl" : "https://yourcmsaddress.com"
}
  1. Enable cart synchronization for your Vue Storefront instance in config/local.json
cart": {
  "synchronize": true,
  ...
}
  1. Register the extension in src/modules/client.ts file and disable the 'Instant checkout' module
import { ExternalCheckout } from './external-checkout'
// import { InstantCheckout } from './instant-checkout'

export const registerModules: VueStorefrontModule[] = [
   // other extensions
  ExternalCheckout,
  // InstantCheckout,
]
  1. Install the appropriate module for your CMS. Currently only Magento 2 is supported.

Installation with Yarn

This feature is not yet support

How to use for a specific stores in a multistore setup

You can specify which storeviews should use the external checkout by adding each store code to your config/local.json file.

"externalCheckout": {
  "cmsUrl" : "https://yourcmsaddress.com",
  "stores": {
    "se": {
      "cmsUrl": "https://yourcmsaddress.com"
    },
    "dk": {
      "cmsUrl": "https://yourcmsaddress.com"
    }
  }
}

How to integrate with other CMS

If you want to integrate this extension with your backend CMS make sure that entering {your_CMS_url}/vue/cart/sync/token/{user-token}/cart/{cart_token} will do the following:

  1. Synchronize cart and user data between Vue Storefront and your CMS
  2. Redirect user to external checkout

Suggestions

For integrations with Magento 2, also have a look at this module that allows you to run Magento 2 in checkout only mode

About Vendic

Vendic develops technically challenging e-commerce websites using Magento 2, as well as innovative headless PWA shops. Feel free to check out our projects on our website.

About

VueStorefront External Checkout module

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 73.2%
  • TypeScript 26.8%