Looking for our logo ?
- Tutorials
- Last updated: July 9, 2021
- 5 minutes read
Building a Jamstack Food Ordering App with Strapi, Gridsome & Snipcart 5/6
Learn how to create a food ordering app with Gridsome, Snipcart and your favorite headless CMS: Strapi. In this episode: Implementing cart and checkout with Snipcart.
Ekene Eze
December 7, 2020
This article is a guest series by the great Ekene Eze. He’s leading the Developer Experience team at Flutterwave and wrote this blog post through the Write for the Community program.
This series will walk you through the processes of setting up your own food ordering application and by extension any e-commerce app using modern development tools like Strapi, Gridsome and Snipcart.
Table of Contents: 1. Part 1 - Generating a Strapi app and creating products 2. Part 2 - Setting up a Gridsome project 3. Part 3 - Consuming products with Gridsome and GraphQL 4. Part 4 - Creating single product views with Gridsome templates 5. Part 5 - Implementing cart and checkout with Snipcart 6. Part 6 - Deploying the apps
In the last part, we were able to create single product view pages where customers can get more information about each product. We also set up navigation for shop and support pages respectively. In this part, we will hook up our food ordering application with Snipcart to ensure that customers can place orders for our meals.
Implementing cart and checkout with Snipcart
Like I mentioned at the beginning of this series, Snipcart is a simple e-commerce solution that makes it possible for developers to add fully customizable checkout experiences to any website.
In this part of the series, we'll use Snipcart to add checkout functionalities to our existing Gridsome application. To do that, first, you need to create a free Snipcart account.
Install Snipcart
Next, let's install Snipcart. Create an index.html file in the src folder and update it with the code snippet below:
<!-- src/index.html -->
<!DOCTYPE html>
<html ${htmlAttrs}>
<head>
${head}
<link rel="preconnect" href="https://app.snipcart.com" />
<link rel="preconnect" href="https://cdn.snipcart.com" />
<link
rel="stylesheet"
href="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.css"
/>
</head>
<body ${bodyAttrs}>
${app} ${scripts}
<div
id="snipcart"
data-api-key="MDg5MmMwOWQtOTIxZi00ZTE4LWE3MmUtNDlkZjcyZmQ2OThjNjM3Mzg2NDU1MDUyODI0NjM2"
hidden
></div>
<script
async
src="https://cdn.snipcart.com/themes/v3.0.23/default/snipcart.js"
></script>
</body>
</html>What we've done here is add the required Snipcart JavaScript and CSS assets to our Gridsome application. Adding them will automatically install and make Snipcart available in the project.
- Note, however, that you will need to restart the Gridsome application to get the Snipcart functionalities.
Add Snipcart globally
Next, we need to make Snipcart available globally in our application. To do this, the Snipcart team recommends using a hidden element in a central location such that when we define Snipcart there, it will be globally available across all our website pages. That location in this project, is the Default.vue file. Since this layout covers every part of our application, simply open up the file and add this div element to it:
<!-- src/layouts/Defualt.vue -->
<div
hidden
id="snipcart"
data-api-key="YOUR_SNIPCART_API_KEY_HERE"
></div>You can get your Snipcart API key from your dashboard. Now that we have Snipcart installed, let's go ahead and modify our application to introduce the behavioural changes we want on the app.
Implement add to cart
First, when the Add to cart button is clicked, we want to immediately add that particular product to cart and equally display the cart so the user can checkout if they want to. To do that, we need to update the button within our src/components/Products.vue file:
<!-- src/components/products.vue -->
<v-card-actions>
<v-btn
rounded
outlined
color="orange"
text
class="snipcart-add-item"
:data-item-id="edge.node.id"
:data-item-description="edge.node.description"
:data-item-image="`http://localhost:1337${edge.node.image}`"
:data-item-price="edge.node.price"
:data-item-name="edge.node.title"
>
Add to cart
</v-btn>
</v-card-actions>All we did here is add the snipcart-add-item class to the button and pass in the data- attributes to it as well. Adding the snipcart-add-item class to any HTML element tells Snipcart to react a certain way when that element is clicked. In this case, add the data contents of this element to the cart. We supply the values for the data attributes directly from our data layer.
Because we have this button available within the single product pages, we'll need to make the same updates in the Product template:
<!-- src/templates/product.vue -->
<v-card-actions>
<v-btn
rounded
outlined
color="orange"
text
class="snipcart-add-item"
:data-item-id="this.$page.product.id"
:data-item-description="this.$page.product.description"
:data-item-image="
`http://localhost:1337${this.$page.product.image}`
"
:data-item-price="this.$page.product.price"
:data-item-name="this.$page.product.title"
>
Add to cart
</v-btn>
<v-spacer></v-spacer>
<v-rating
:value="this.$page.product.rating"
color="amber"
dense
half-increments
readonly
size="14"
></v-rating>
<span>
<v-card-title>${{ this.$page.product.price }}</v-card-title>
</span>
</v-card-actions>When this button is clicked, from the product listing page or from the single product detail page, the product will be added to the cart by Snipcart and the shopping cart will be displayed for review.
Display cart and prices
You might ask, how do we show the cart logo or display prices of items that are added to cart so that customers can shop on a budget. Let's see how to do that.
Within the Default.vue file, update the snippet to account for a cart logo and a price field. Hence, add this snippet immediately after the search field:
<!-- src/layout/Default.vue -->
<v-btn class=" snipcart-checkout" icon>
<v-icon>mdi-cart</v-icon>
<span class="snipcart-total-items"></span>
<span class="snipcart-total-price"></span>
</v-btn>Here, we wrapped the cart icon in a button element with a snipcart-checkout class. This is just a personal preference to ensure that users can click on the cart icon to bring up the cart. After the cart icon, we provisioned two more fields to display the number of items in cart, and the total price of the items in cart respectively. These are all just template classes, let's move down to the script section of the file and add some logic to it:
<!-- src/layout/Default.vue -->
<script>
export default {
data() {
return {
totalPrice: 0,
};
},
methods: {
getTotalPrice() {
return Snipcart.store.getState().cart.total;
},
},
mounted() {
this.totalPrice = this.getTotalPrice();
},
};
</script>The code snippet above simply calculates the total price of all the items in the cart and renders it in the field with the class of snipcart-total-price. You can repeat the same process to calculate the total number of items in cart, but we'll go ahead and save these changes. If you check back on the browser for the recent changes, you will notice that both the cart icon and the price is showing up just as expected:
Conclusion
In this section, we have successfully integrated Snipcart into our Gridsome project and made it possible for customers to place orders for our meals. We started by adding Snipcart's required JavaScript and CSS files to our project. We made it available globally in the project's layout and finally implemented the add to cart functionality. In the next part, we'll look at how to deploy these applications and have users use them from anywhere. See you there!
Ekene is a Developer Experience Engineer and Technical Writer. He is currently working with the Developer Experience team at Netlify where they build tools, create content, open-source repos, and demos to teach and also help developers build a better web with Netlify's products and services.