• 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

Strapi v4

In the fifth part of this series, learn how to set up the Snipcart of the eCommerce application.

Screen Shot 2022-02-01 at 10.25.28.png

Opuama Lucky

June 17, 2022

tweet selection
blog_5.jpg

    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.

    Snipcart Dashboard

    A left sidebar will appear. Scroll down and click API KEYS to get your API keys.

    A sample screenshot

    Add Snipcart to Jekyll Globally

    Navigate to your default.html file, and add update the content with this code sample.

    1        <html>
2         <head>
3           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
4           <meta charset="utf-8" />
5           <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css" />
6           <link
7             rel="stylesheet"
8             href="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.css"
9           />
10         </head>
11         <body>
12           <section>
13             <div class="flex flex-col h-screen">
14               {% include header.html %}
15               <div class="flex-grow mx-2 mt-5 lg:mx-20">{{ content }}</div>
16               {% include footer.html %}
17             </div>
18           </section>
19         </body>
20         <div hidden id="snipcart" data-api-key="<your_api_key>"></div>
21         <script
22           src="https://cdn.snipcart.com/themes/v3.0.0-beta.3/default/snipcart.js"
23           defer
24         ></script>
25        </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:

    1             <button
2               type="submit"
3               class="
4                 mt-10
5                 w-full
6                 bg-blue-900
7                 border border-transparent
8                 rounded-md
9                 py-3
10                 px-8
11                 flex
12                 items-center
13                 justify-center
14                 text-base
15                 font-medium
16                 text-white
17                 hover:bg-indigo-700
18                 focus:outline-none
19                 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
20                 buy-button snipcart-add-item
21               "
22               data-item-id="{{ page.document.id }}"
23               data-item-name="{{ page.document.name }}"
24               data-item-price="{{ page.document.price }}"
25               data-item-image="{{ page.document.Image.url }}"
26               data-item-url="http://localhost:1337/product/{{ page.document.slug }}"
27               data-item-description="{{ page.document.description | remove: '<p>' | remove: '</p>' }}"
28             >
29               Add to cart
30             </button>

    When you click the Add to cart button on every product page, a cart will be displayed.

    A sample screenshot

    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

    tweet selection
    Screen Shot 2022-02-01 at 10.25.28.png
    Opuama Lucky
    Software engineer @strapi