Shopping Cart like experience for Engaging Networks Donation pages

Introduction: (1min video https://share.cleanshot.com/8kl5AJ )

How to use it

The Shopping Cart page will try to use the currency code from the "transaction.pay" hidden field. You can set the currency code position to the right of the amount by adding the currency-right class to either the card's row (global) or the card's container (specific).

• Creating the Header: (6min video https://share.cleanshot.com/lMoSDZ )

• Different themes available: (3min video https://share.cleanshot.com/Lu7JH4 ) You can choose between the following themes:

  • bg-teal: #027f8c
  • bg-peach: #f26e50
  • bg-maroon: #6d0333
  • bg-lightblue: #e5ecef
  • bg-blue: #418fde
  • bg-white: #ffffff
  • bg-magenta: #f40655
  • bg-red: #c72b50
  • bg-green: #00a859
  • bg-fern: #597938
  • bg-yellow: #fff0ca
  • bg-orange: #db7d03
  • bg-purple: #8c2d8c
  • bg-pink: #f2cfdc
  • bg-lightgray: #f5f5f5
  • bg-gray: #dedede
  • bg-darkgray: #606062
  • bg-black: #000000
  • bg-transparent: transparent
  • bg-gradient: from blue to green

• Creating a Card (8min video https://share.cleanshot.com/jldkuI )

• Adding the Other Amount Block & Theming Cards (9min video https://share.cleanshot.com/ctQfVM )

• Creating the Information Row (9min video https://share.cleanshot.com/sQyP6s )

• Live Variables TOTAL & FREQUENCY (6min video https://share.cleanshot.com/MYiehY )

• Using the flip image (7min video https://cln.sh/OfG9on )

Development

• Clone the repository
• Run npm install
• Make changes to the src folder
• Run npm run build to compile the changes
• Deploy the content of the dist folder to Engaging Networks

NB: On windows you may also need to install the node_env npm package:

npm install -g win-node-env