Shopping Cart Using NodeRed and Hugo

I started hating shopping carts. Endless updates which I have no control over breaking things. Back ends which scare clients and little children. Lack of control. Paid modules for anything other than minimal functionality. My experience has been mostly miserable. Yeah, canned carts work but I wanted more.

I stumbled across Hugo which is a static site generator. Seemed cool. Installed it, played around. But there was a problem. Static site generators still require content and I'm lazy. Then I stated thinking, what if I used a NodeRed to generate the content files for a static generator.

The project took longer than I thought. However early on it became apparent that it was pretty cool. I found adding features to be easy. It was actually fun to work with for a change and I wound up getting godlike powers of control over the cart.

Some features....
The site is generated from a CSV file. The whole site regenerates in about a minute.

It runs very fast.

Most of the site is straight HTML however the cart functions and back end are in node red.

The back end control panel consists of about a 10 buttons and is trivial to operate.

Discounts are made from simple javascript functions and allow for all sorts of different discounting methods. If you can think of a discount, you can probably make it happen.

It integrates with Stripe.

The whole thing fits in two flows, one for front end, one for back. It is pretty compact for what it does.

It includes the ability to purchase gift cards and print out bar codes for them.

No database is required.

Downside is setup is non-trivial at this point. There are some dependencies. My hope is eventually to have an install script which installs nodered then a node red flow which builds the entire system.

I could have done this in Node I suppose but doing it in NodeRed gives a graphical interface which makes things easy to find, understand and modify. My goal was something which perhaps required more skill than just installing an off the shelf shopping cart but not the skill required to write one from scratch. I wanted it to be something people with intermediate skills could customize.

As usual when I started I wasn't sure exactly where I was going with it and now that it's functional I have some ideas for a redesign to make parts easier to deal with.

I have been using NodeRed for about two years and my javascript skills are pretty rudimentary so this says more about the abilities of NodeRed than my skill.

I hope to open source this some day if I can figure out how to package it.

You can view it at https://shop.wattersgardencenter.com

1 Like

Pretty cool!
Two quick comments: would be good to pre-fill the qty next to the add-to-cart button with "1" so one doesn't have to type it, and the look of the shopping cart page is pretty jarring...
Congrats!

Putting a one in as default makes sense. Did that.

The template is a stock Hugo ecommerce template. None were exactly pretty.

1 Like

You might wasnt to add a text-align: center; on the qty so you can see it in the center instead of the number against the left side.
Screen Shot 2022-03-09 at 5.09.03 AM