I’ve been working on a better way to let customers find the correct products in my wife’s cabinet store. To get the layout and and functionality I wanted, I decided to use a React app inside a plugin and connect it with the WooCommerce Store API. The only trouble I ran into was I could not get products to actually add to the cart. Part of the problem was a cookie has to be set in order to add a product and that did not happen when I was testing the app locally.
One thing I noticed while working on this was I could “build” the app and then when I ran it inside my WordPress test site, it would set a cookie and access the cart. As a workaround, I set up a NPM command using the npm-watch package. Here’s what I did to get this working.
- In Terminal or the shell tool of your choice, install watch into your project with
npm install watch --save.
- Next edit your
package.jsonfile and in the “scripts” section, add this:
"watch": "watch 'npm run build' ./src"
src to match the folder where your React app is being developed. Then when you’re ready to work, in your terminal run
npm run watch. Now anytime you save a file in the
src folder, the command to make a build will run. With that, I was able to have a cookie set and add products to the cart.