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 AcademyTutorialsVideosWebinars
      The Guide to Headless CMS Strapi Community Forum
  • Docs

      InstallationConfigurationsDeploymentUpdate versionContent API
      Getting StartedContent ManagerContent-Types BuilderUsers, Roles & PermissionsPluginsSettings
      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
    • 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

    • Installation
    • Configurations
    • Deployment
    • Update version
    • Content API

    User Guide

    • Getting Started
    • Content Manager
    • Content-Types Builder
    • Users, Roles & Permissions
    • Plugins
    • Settings
    • 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

Deliveroo clone with Next.js, GraphQL, Strapi and Stripe (5/7)

strapi-next-cart
  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email
Ryan Belke

Ryan Belke

November 12, 2018

Strapi Next.js tutorial

Disclaimer You can find the updated version of this tutorial here

This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.

Table of contents

  • 🏗️ Setup (part 1)
  • 🏠 Restaurants (part 2)
  • 🍔 Dishes (part 3)
  • 🔐 Authentication (part 4)
  • 🛒 Shopping Cart (part 5) - current
  • 💵 Order and Checkout (part 6)
  • 🚀 Bonus: Deploy (part 7)
  • 👏 Conclusion

Note: the source code is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial

🛒 Shopping Cart

All of these dishes look so tasty! What if we could add some of them in a shopping card?

Shopping card

Next, we create a new component named Cart.js:

cd ..
cd components
mkdir Cart
cd Cart
touch Cart.js

Path: /frontend/components/Cart/Cart.js

React Context

To keep track of our items added to our cart across pages we will use the React Context API. Context will allow us to manage the state of items in a provider component that will be re-used on the checkout page. The only thing React Context will not take care of for us is saving items on a page refresh, for that you would want to save the items to a cookie and restore the items from the cookie. I will work to implement this soon if requested.

The items are currently saved to a cookie called items, but the items are not restored on refresh.

Create a new directory inside our components folder:

Note: you can name your AppProvider anything related to the context you are storing (i.e. ItemsContextProvder). This would allow you to use and keep track of multiple providers/consumers throughout the app if your needs grow.

cd ..
mkdir Context
cd Context
touch AppProvider.js

Path: /frontend/components/Context/AppProvider.js

Now we will need to make some changes to use our Context throughout the application and on the dishes page.

Update the _app.js and /pages/restaurants.js files to use the AppProvider/Consumer components:

Path: /frontend/pages/_app.js

Path: /frontend/pages/restaurants.js

Now if you refresh the page you should see the Cart component to the right of the dishes.

Your Layout header should also update with the username of the logged in user and show a logout button if you are logged in.

To actually place an order the isAuthenticated prop must pass to true, in a real world app you would want to secure these routes on the server side rather than on the client side. Any props/state on the client can be altered and therefore should not expose real world data without server validation.

For the sake of the tutorial we are not currently implementing this.

Good job!

💵 In the next section, you will learn how to setup Stripe for checkout and create orders: https://blog.strapi.io/strapi-next-order-checkout.

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

Unleash content.

Starters
Get Started

Strapi is the leading 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
  • Try live demo
  • Changelog

Resources

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

Integrations

  • All integrations
  • React CMS
  • Next.js CMS
  • Gatsby CMS
  • Vue.js CMS
  • Nuxt.js CMS
  • Gridsome CMS
  • Flutter CMS
  • Hugo CMS
  • Typescript CMS

Company

  • About us
  • Blog
  • Careers
  • Contact
  • Newsroom
  • © 2021, Strapi
  • LicenseTermsPrivacy