By Building an Online Store using Python
With Anvil, e-commerce can be beautiful and Pythonic. This template app is an example of an online shop built from the Material Design theme. This fully functioning app uses Data Tables to store products and orders and integrates Stripe to charge customers.
Get started with the template by clicking the clone link below:
How it Works
The Main Form
The Main form contains the app bar at the top, an empty ColumnPanel in the middle and a Card at the bottom, which acts as a footer containing links and info about the company. The pages of the website are added as components to the empty ColumnPanel. This way, the app bar and footer will be on every page. In the __init__ of the form, items added to the cart are stored in self.cart_items which is initialized as an empty list.
The Landing Page
The landing page contains a ColumPanel with an image background, which is styled using a role defined in CSS. Within this ColumnPanel is another ColumnPanel with a transparent blue background containing the company logo and a button that opens the Shop page. This transparent box is also CSS role and is added as a custom component to the App Editor, so it can easily be used elsewhere.
The Shop Page
Just like the landing page, the Shop page also contains a ColumnPanel with an image background and a transparent blue ColumnPanel. Products for sale are stored in the products Data Table. For each product row in the Data Table, the row is passed as an item to the Product form which is then added to a FlowPanel in the Shop form. The Product form defines the layout for each product added to the Shop page.
Each instance of Product has an “Add to Cart” button, which when clicked, brings up an instance of the AddtoCart form as an alert. This form allows you to specify a quantity and add the product to your cart. When an item is successfully added to the cart, self.cart_items is updated on the Main form and a Timer briefly displayes the “Added” button.
View Cart
When there are items in self.cart_items, the View Cart page displays the names, quantities, prices, and images of the cart items in a RepeatingPanel. On the right side of the page is the order summary, which displays the subtotal of the order. Items can be removed from the cart if the trash can icon is clicked. This removes the item from self.cart_items and reloads the Cart form.
Purchases are made through Stripe. Clicking the “Checkout” button brings up a payment form. If the Stripe transaction is successful, the order is added to the orders Data Table and all other transaction information is stored by Stripe in your account.
Contact Page
The shop template also includes a Contact page, which includes a form for leaving a message with the company. The name, email and message are stored in the contact Data Table. A Google Maps component displays the location of the company and uses a custom designed marker.
Get Started
You can check out the online shop app and modify it yourself by clicking here:
Want to learn more about using Anvil? Check out one of our tutorials.
Data Dashboard
Build Database-Backed Apps
Build a Simple Feedback Form
Build a data-entry app, and learn the techniques fundamental to building any Anvil app. In this tutorial, you will:
- Write server-side Python
- Build your User Interface
- Write client-side Python
- Store data in a database
- Deploy your app