Vue Storefront 2 integration with woocommerce

Wordpress config

1. Install the following open source Wordpress Plugins into your WP store:
   • WPGraphQL CORS
   • WPGraphQL WooCommerce (WooGraphQL)
2. add this to wp-config.php: define( 'LOGGED_IN_COOKIE', 'wordpress_logged_in_vsf' );
3. If you want favourites function you must add a plugin for this. See example plugin here. You also need to enable favourites in middleware config:

module.exports = {
   integrations: {
      woocommerce: {
         location: '@vue-storefront/woocommerce-api/server',
         configuration: {
            api: process.env.WOOCOMMERCE_GRAPHQL,
            wishlist: true
         }
      }
   }
};

4. If you want to keep using the woocommerce checkout you need to change the woo cart session handling. See example plugin here.

How to start?

1. Prepare your wordpress installation as above.

2. Copy .env.example to .env inside packages/theme and enter your wordpress site URL with GraphQL endpoint.

3. Install all required dependencies:

yarn install

5. (optional) Then you can verify if everything works properly by building all three projects:

yarn build

6. If everything built properly, you can start developing with:

yarn dev

How to start if you want to contribute?

Want to contribute? Ping us on woocommerce channel on our Discord!

Requirements:

• NodeJS v14 or later

Steps

1. Fork the repo
2. Clone your fork of the repo

   example:
   git clone https://github.com/vuestorefront/woocommerce.git
   cd woocommerce
   

3. Run yarn to install dependencies
4. Build dependencies yarn build:api-client && yarn build:composables
5. Run yarn dev:theme to run theme. You can find other commands in package.json

• If you need HMR on Api Client/Composables run yarn dev:api-client or yarn dev:composables on a separate terminal window.

Resources

• Vue Storefront Documentation
• woocommerce integration Documentation
• Community Chat

Support

If you have any questions about this integration we will be happy to answer them on woocommerce channel on our Discord.

Contributors ✨

andreasradloff 💻

This project follows the all-contributors specification. Contributions of any kind welcome!