Strapi blog logo
  • Product

      Why Strapi?Content ArchitectureRoadmapIntegrationsTry live demo
      OverviewContent Types BuilderCustomizable APIMedia LibraryRoles & Permissions
      Discover Strapi Enterprise EditionDiscover our partners
  • Pricing

  • Solutions

      Static WebsitesMobile ApplicationsCorporate websitesEditorial SitesEcommerce
      Delivery HeroL'EquipeSociete GeneralePixelDustBanco International
      Discover all our user stories
  • Community

      CommunityWrite for the communityWall of LoveStrapi Conf 2021
      SlackGitHubYoutubeCommunity Forum
      Meet the Strapi Community StarsDiscover the Strapi Showcase
  • Resources

      BlogStartersNewsroomSupport
      Strapi AcademyTutorialsVideos GuidesWebinars
      The Guide to Headless CMS Strapi Community Forum
  • Docs

      Getting StartedContent APIConfigurationInstallationDeploymentMigration
      Getting StartedContent ManagerContent-Types BuilderUsers, Roles & PermissionsPlugins
      Developer DocumentationStrapi User Guide

Looking for our logo ?

Logo Brand download
Download Logo Pack
See more Strapi assets
Strapi blog logo
  • Product

    Product

    • Why Strapi?
    • Content Architecture
    • Roadmap
    • Integrations
    • Try live demo

    Features

    • Overview
    • Content Types Builder
    • Customizable API
    • Media Library
    • Roles & Permissions
    • Discover Strapi Enterprise Edition
    • Discover our partners
    Features cover

    Unlock the full potential of content management

    See all features
    Strapi Enterprise Edition

    Discover the advanced features included in Strapi Enterprise Edition.

    Get Started
  • Pricing
  • Solutions

    Solutions

    • Static Websites
    • Mobile Applications
    • Corporate websites
    • Editorial Sites
    • Ecommerce

    Stories

    • Delivery Hero
    • L'Equipe
    • Societe Generale
    • PixelDust
    • Banco International
    • Discover all our user stories
    Delivery Hero team

    Delivery Hero manages their partner portal with Strapi.

    Read their story
    turn 10 studios website

    How 1minus1 delivered a creative website for Turn10 Studios 25% faster with Strapi

    Discover their story
  • Community

    Community

    • Community
    • Write for the community
    • Wall of Love
    • Strapi Conf 2021

    Resources

    • Slack
    • GitHub
    • Youtube
    • Community Forum
    • Meet the Strapi Community Stars
    • Discover the Strapi Showcase
    Strapi Conf

    The first Strapi Global User Conference.

    Register now
    Write for the community

    Contribute on educational content for the community

    Discover the program
  • Resources

    Resources

    • Blog
    • Starters
    • Newsroom
    • Support

    Learning

    • Strapi Academy
    • Tutorials
    • Videos Guides
    • Webinars
    • The Guide to Headless CMS
    • Strapi Community Forum
    Introducing Strapi Academy

    Everything you need to know to master Strapi.

    Go to the academy
    Strapi Repository on GitHub

    Get started with the Strapi repository

    Go to repository
  • Docs

    Developers

    • Getting Started
    • Content API
    • Configuration
    • Installation
    • Deployment
    • Migration

    User Guide

    • Getting Started
    • Content Manager
    • Content-Types Builder
    • Users, Roles & Permissions
    • Plugins
    • Developer Documentation
    • Strapi User Guide
    Install Strapi

    Install Strapi locally or wherever you need.

    Get Started
    Migration Guides Strapi

    Using a previous version of Strapi? Migrate to the latest.

    Read Guides
Get Started
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

You might also be interested in...

Deliveroo clone with Nuxt.js, GraphQL, Strapi and Stripe (4/7)

    Deliveroo clone with Nuxt.js, GraphQL, Strapi and Stripe (4/7)

    In this tutorial, you will learn how to create a Deliveroo clone using Nuxt.js, GraphQL Stripe and your favorite headless CMS: Strapi (4/7)

    Pierre Burgy

    Pierre Burgy

    July 3, 2018

     Strapi Online Meetup #6 Recap
    • Online Meetup
    • Community

    Strapi Online Meetup #6 Recap

    This is the recap of the online meetup hosted by Daniel and Alex showcasing Strapi v3.2 and getting into the new Draft and Publish feature.

    Daniel Madalitso Phiri

    Daniel Madalitso Phiri

    October 23, 2020

    Top React, Vue, and Angular packages in 2020
    • Guides & Tutorials

    Top React, Vue, and Angular packages in 2020

    In this article, we take a look at the top packages for some of the most popular web development framework so that you can learn about them and hopefully apply them to your next project.

    Krissnawat Kaewsanmuang

    Krissnawat Kaewsanmuang

    November 17, 2020

    Unleash content.

    Read the docs
    Get Started

    Strapi is the most popular open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content and distribute it anywhere.

    Product

    • Why Strapi?
    • Content Architecture
    • Features
    • Enterprise Edition
    • Partner Program
    • Roadmap
    • Support
    • Integrations
    • Try live demo

    Resources

    • How to get started
    • Meet the community
    • Tutorials
    • API documentation
    • GitHub repository
    • Starters
    • Strapi vs Wordpress
    • The Guide to headless CMS

    Integrations

    • Gatsby CMS
    • React CMS
    • Vue.js CMS
    • Nuxt.js CMS
    • Next.js CMS
    • Angular CMS
    • Gridsome CMS
    • Jekyll CMS
    • 11ty CMS
    • Svelte CMS
    • Sapper CMS
    • Ruby CMS
    • Python CMS

    Company

    • About us
    • Blog
    • Careers
    • Contact
    • Newsroom
    • ยฉ 2021, Strapi
    • LicenseTermsPrivacy