Restaurant Site Project with GatsbyJS-15

Welcome to part-15 of the series. You can find part-14 here.

In this part, i will start to make the static restaurant site an ecommerce site where any user can order the food from our menu. We will be using the awesome an easy to integrate service of Snipcart for this ecommerce feature.

But before adding snipcart, we need to add a Cart in the Navbar and also buttons beside each menu item.

First, open the NavbarLinks.js file inside the navbar folder. We are first adding an react-icons for Cart and we are also removing the link for Menu, because we are showing all Menu items in Home page only.

Image for post
Image for post
NavbarLinks.js

Rest of the chapter is exclusive content and will be in my upcoming book Gatsby Cookbook. You can find more details about it here.

Image for post
Image for post
Gatsby Cookbook

And it will show like below in Mobile screens.

Image for post
Image for post
Mobile Screens

Now, we have all the setup done for snipcart and will add it in the next part.

This completes part-15 of the series. You can find part-16 here.

You can find the code for the project in this github repo.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store