• 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

    • Get Started

      Simply copy and paste the following command line in your terminal to create your first Strapi project.

      npx create-strapi-app
my-project

      • Strapi Cloud

      Deploy your Strapi project in few minutes.

    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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
        <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:

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
             <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.

    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

      • Strapi Cloud

      Deploy your Strapi project in few minutes.

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