Wagtail CRX Snipcart Storefront

This project integrates Wagtail CRX and Snipcart. Allowing individuals to get a robust e-commerce store off the ground quickly. Navigate to the official Wagtail CRX Snipcart Template here to get started quickly.

Technology Stack

Wagtail CRX
Bootstrap 5
PostgreSQL
JavaScript
Wagtail
Python
Django
HTML
Ngrok
CSS

Integrated Version Status


Wagtail CRX	1.0
Snipcart	3.0

Why did I decide to integrate Wagtail CRX and Snipcart?

I decided to utilize the following three technologies because of the following reasons in no specific order:

Well maintained
Well documented
Expedites development time
Equips end users with advanced tools from inception

Main Tech Stack Summaries

Wagtail CMS

Wagtail is an open source content management system built on Django, with a strong community and commercial support. It's focused on user experience, and offers precise control for designers and developers.

Wagtail CRX

CRX, formerly known as CodeRed CMS, provides a large set of enhancements and pre-built components for Wagtail which are ready to use out-of-the box! This saves development time and avoids "re-inventing the wheel" by providing features commonly needed by websites.

Snipcart

It's simple, fully customizable, well documented, regularly maintained, updated, and includes a robust e-commerce dashboard.

Quick start

Create a Wagtail CRX Project

Run pip install coderedcms
Run coderedcms start mysite --sitename "My Company Inc." --domain www.example.com

Note: --sitename and --domain are optional to pre-populate settings of your website.
Enter the project cd mysite/

The Secret Spice

Copy and paste the models from this repository at wagtail_crx_snipcart_storefront/website/models.py into your projects models.py file.
Copy and paste the base.html file in wagtail_crx_snipcart_storefront/website/templates/coderedcms/pages of this repository into your projects base.py file.
Create a products_page.html file in project_name/website/templates/coderedcms/pages
Copy and paste products_page.html from this repository located at wagtail_crx_snipcart_storefront/website/templates/coderedcms/pages into your projects product_page.html file.
Create a products_index_page.html file in project_name/website/templates/coderedcms/pages
Copy and paste products_index_page.html from this repository located at wagtail_crx_snipcart_storefront/website/templates/coderedcms/pages into your projects product_index_page.html file.
Create a snippets folder in project_name/website/templates/coderedcms
Create a navbar.html file in project_name/website/templates/coderedcms/snippets
Copy and paste navbar.html from this repository located at wagtail_crx_snipcart_storefront/website/templates/coderedcms/snippets into your projects navbar.html file.

Implement Secret Spice

Run python manage.py migrate to create the core models.

Wagtail CRX, by default, utilizes SQLite. Set up your preferred database solution to save yourself the headache of a database migration.
- If you choose PostgreSQL, feel free to leverage my tutorial.

Run python manage.py createsuperuser to create the initial admin user.
Run python manage.py runserver to launch the development server, and go to http://localhost:8000 in your browser, or http://localhost:8000/admin/ to log in with your admin account.
Create a Snipcart account and get your Public Test API Key.
Navigate to http://localhost:8000/admin/settings/website/snipcartsettings and paste your Public Test API Key into the Snipcart API Key input field.

Once your e-commerce store is ready to go live and sell to customers, you will replace the Public API Test Key with the Public Live API Key provided by Snipcart.

The Miracle that is ngrok

Install ngrok, and add ngrok provided authtoken.

Official Snipcart ngrok Documentation
Snipcart cannot communicate with your local machine. Thus local development is impossible without making your local development server available to Snipcart. Ngrok solves this pain point.
If utilizing Mac OS, I suggest installing ngrok via the Homebrew option.

In a separate terminal run ngrok http <localhost number>.

Example: ngrok http 8080

If successful you will see a ngrok session status appear. Copy the forwarding url.

Example: https://<string-of-random-numbers-and-letters>.ngrok.io

Navigate to your Snipcart dashboard, open account options (click on the upper right-hand corner human icon), and click on Domains & URLS.
In the Domain field, paste the ngrok forwarding url.
In the protocol field, select https
Press the save button on the Domains & URLS page.
- IMPORTANT NOTE: Everytime you need to create a new ngrok tunnel you must update this. Otherwise, you will experience a checkout error.
Paste your ngrok forwarding url into your search bar and hit enter. It should take you to your project in a tab with a ngrok tunnel capable of making transactions with Snipcart.

If the url activates a Deceptive site ahead page from Google Chrome, click on details and press visit this unsafe site.

In a separate tab, paste your local host url that is running the project - Example: http://localhost:8000

IMPORTANT NOTE: You must have two separate tabs open and use them in unison.
- https://<string-of-random-numbers-and-letters>.ngrok.io --> Can make Snipcart transactions. Can't access the admin dashboard.
- http://localhost:8000 --> Can't make Snipcart transactions. Can access the admin dashboard.

The Final Stretch

In the admin capable tab, create a test product via signing into the admin and creating a Products Landing Page. After creation, navigate to your newly created Products Landing Page in the admin and click create child page. Fill out all required product information, and press publish when done.
In the transaction capable tab, add the product to your cart and attempt to check out.
- You should now be able to perform transactions (only test transactions are covered in this guide), which are required to populate your product data into your Snipcart accounts dashboard.
Congratulations, you have successfully made a test transaction! 🎉

You will be able to see your transaction in your Snipcart dashboard.

Quick Start Disclaimer

It is your responsibility to manage your Snipcart-provided APIs properly.
It is your responsibility to read all pertinent documentation not covered here.
Upon completing the quickstart you should have a fully functional non-live project capable of making test transactions.
It is your responsibility to ensure you have chosen and correctly configured a database that scales proportionally to your ambitions.
Before deploying your project to production, you are responsible for protecting sensitive data pertaining to your project, such as database environmental variables and other sensitive information.

Documentation links

To customize the content, design, and features of the site see Wagtail CRX.
For deeper customization of backend code see Wagtail and Django.
For Snipcart customizations and utilization, see Snipcart
For HTML template design see Bootstrap.

Project Screenshots

Disclaimer

Due to the passionately long nature of the example customer's email, the email text runs into the billing address text in screenshots seven and eight. Under normal email length circumstances provided by test users, not hellbent on pressuring Tacobell to bring back the XXL Grilled Stuft Burrito, this text conflict would not occur.

Note

I decided not to share screenshots of the admin as it should be straightforward with a combination of the official documentation and this README.

Bugs

None currently known.

Room for Improvement

Add tests for newly developed features.
- Goal: Implement TDD for future development.
Make feature that allows end user to elect to have the snipcart shopping cart panels reflect websites styling.

Future Plans

I plan to create a Python Package based on this project to give back to the community that got me into programming. The goal is to make creating a Wagtail-based e-commerce store as simple as spinning up a CRX project and pip-installing the package.

Giving Credit

Credit is given to the following:

CodeRed - for developing and maintaining Wagtail CRX
Paul Wababu - for creating a wonderful Wagtail and Snipcart integration lesson I leveraged massively
The Django and Wagtail communities - for providing such thorough documentation
Stack Overflow - for when I wasn't wise enough to read the documentation.

Contact

If you're interested in working with me to improve this project and turn it into a pip package, feel free to contact me on my website. Alternatively, I would love to hear any questions, comments, or feedback you may have.

Attribution

Files in wagtail_crx_snipcart_storefront/website/models.py , wagtail_crx_snipcart_storefront/website/templates/coderedcms, wagtail_crx_snipcart_storefront/mysite/settings/base.py:

Were sourced from the Wagtail CRX project at https://github.com/coderedcorp/coderedcms.
Are licensed under the Creative Commons Attribution 3.0 Unported license, a copy of which is available at https://creativecommons.org/licenses/by/3.0/
Have been modified from the original sources.

I created all examples images, such as home page cover photos and products, using Midjourney. The commercial terms that apply to me regarding Midjourney also apply to you if you utilize these images for any purpose other than viewing this README.

Made with ♥ using Wagtail CRX + Snipcart

justice-rage/wagtail_crx_snipcart_storefront