- Last updated: December 8, 2022 (Strapi v4 era)
- 3 min read
Building an Ecommerce Website with Jekyll, Strapi, Snipcart and Tailwind CSS - 5 of 5
In the fifth part of this series, learn how to set up the Snipcart of the eCommerce application.
June 17, 2022
Welcome to the fifth and the last part of creating an Ecommerce website with Strapi, Jekyll, Tailwind CSS, and Snipcart series. Before reading this article, you should catch up on the previous parts in the series:
In the first part of the series, we completed our backend setup and our frontend installation. In the second part, we created the default layout of our eCommerce website. We added the homepage in the third part of the series, and we implemented the product catalog and single product views in the fourth part.
In this part of the series, we will add a cart functionality to our website with Snipcart. Snipcart is an easy-to-implement shopping cart platform.
Setting up Snipcart
Getting Snipcart API Key
The first step will be to register a Snipcart account to retrieve their API key. After login, click the profile icon on the top left part of the dashboard.
A left sidebar will appear. Scroll down and click API KEYS to get your API keys.
Add Snipcart to Jekyll Globally
Navigate to your default.html file, and add update the content with this code sample.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css" />
<link
rel="stylesheet"
href="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.css"
/>
</head>
<body>
<section>
<div class="flex flex-col h-screen">
{% include header.html %}
<div class="flex-grow mx-2 mt-5 lg:mx-20">{{ content }}</div>
{% include footer.html %}
</div>
</section>
</body>
<div hidden id="snipcart" data-api-key="<your_api_key>"></div>
<script
src="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.js"
defer
></script>
</html>We updated the default.html file with code snippets that will install Snipcart globally. Make sure to update data-API-key with your Snipcart API key. We added the API keys to our default.html file since it is accessible to all the pages on our website, allowing the script to work in them.
Implementing the Cart Functionality
To implement the cart functionality, navigate to _layouts/product.html and update the Add to cart button code sample with this:
<button
type="submit"
class="
mt-10
w-full
bg-blue-900
border border-transparent
rounded-md
py-3
px-8
flex
items-center
justify-center
text-base
font-medium
text-white
hover:bg-indigo-700
focus:outline-none
focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
buy-button snipcart-add-item
"
data-item-id="{{ page.document.id }}"
data-item-name="{{ page.document.name }}"
data-item-price="{{ page.document.price }}"
data-item-image="{{ page.document.Image.url }}"
data-item-url="http://localhost:1337/product/{{ page.document.slug }}"
data-item-description="{{ page.document.description | remove: '<p>' | remove: '</p>' }}"
>
Add to cart
</button>When you click the Add to cart button on every product page, a cart will be displayed.
You can add different products to the cart, and the cart will be updated automatically.
Conclusion
In this final part of the series, we implemented the cart functionality with Snipcart. You can now add different products to your cart, and the cart will be updated automatically.
Here are the links to the final source code: Frontend Repository & Backend Repository