Back to articles

Building a Jamstack Food Ordering App with Strapi, Gridsome & Snipcart 5/6

Building a Jamstack Food Ordering App with Strapi, Gridsome & Snipcart
  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email
Ekene Eze

Ekene Eze

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!

  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email