/jamstack-web-starter-c

Primary LanguageHTMLMIT LicenseMIT

A JAM Stack e-Commerce with 11ty.js, tailwindcss and Foxy.io

Kickstart your e-commerce with a few clicks.

Are you in a rush? Go for it!

Click the deploy button bellow and you'll have in a few minutes:

  1. your site up and running on the web;
  2. a new repository ready to receive pushes;
  3. continuous deployment ready to go ― each new commit to master will result in a new version published onlyne;
  4. your store ready to accept orders;

Deploy to Netlify

Overview

This project offers you a ready made JAM Stack website with a hosted e-commerce solution. You'll see it in action right away and will be able to customize everything to fit your needs.

  • JAM Stack? a serverless architecture providing pre-rendered websites.
  • Hosted e-commerce solution? an e-commerce solution professionally managed. All security and compliance concearns are taken care of. You can focus on building your content.
  • Continuous deployment? your code will be easily and continuously delivered to production.

Convinced yet? Let's do it! Not quite? Go on.

Why?

In short: because you'll have a lightning fast, safe and unexpensive e-commerce website!

Here's a longer version:

  • performance: a JAM Stack makes your website very fast. It's no miracle. Every page is pre-built during compilation, therefore not only there is no processing to be done when your client visit your store, but also the website can be distributed among may different servers across the globle with a service called Content Delivery Network (CDN). This means that your client will access the fastest possible server anywhere it is.
  • security: the JAM Stack architecture means the server does not run anything. Therefore, it won't run anything provided by a malicious user. It is also not connected to any database, so you'll have no issues there either. The shopping cart and payment processing are done by a PCI Compliant Level 1 Service Provider.
  • infraestructure costs: the serverless architecture of JAM Stack requires only the CDN servers, which would probably be necessary anyway.
  • ease of development there are few requirements for the development environment. Testing can be done without much effort, including manual and acceptance tests.

Who?

This is an Open Source project (as you can see), built on top of awesome projects and sponsored by Foxy.io.

The project was conceived after the guys at Foxy realized it could help many small businesses and non-profit organizations quickly go online after being severely hit by the COVID-19 pandemic.

How to use this project?

That's easy!

  1. Fork it or Deploy it on Netlify
  2. Customize it by adding your brand and products

Upon clicking the deploy to Netlify button you'll have a website up and running, a forked repository to work with and you'll be able to start customizing right away.

We're adding relevant comments to the code so that you understand clearly where and how you can change it to achieve what you need. We're commenting each file and adding a README to each folder. We surely cannot include everything there is to know, but you'll find some helpful references.

How?

Let's do it

There are two ways for you to start your own JAM Stack e-commerce using this repository. You may fork it and customize it, or you may start your own from scratch following the tutorial bellow.

Let's fork it!

If you want to fork it, go ahead! Every file is documented so that you will know what to tweak and how.

Simply click the fork me button and you will have your own version of the repository.

Let's deploy it!!

What? That's it! You can now deploy your own version of the site so that you can already see it in production.

Deploy to Netlify

Is that it? Pretty much. You do need to configure your own Foxy.io account and set the name, logo and products of your store, but it is basically done. But what's the fun on that? I'm sure you need to create your own features and make your store unique.

Let's hack it!!!

It's time to get our hands dirty to have our e-Commerce ready to sell!

In short:

  1. Set your own products: there's a _products folder. Replace the products with your own. If you need to fetch your products from an API or from a file, check the data section.
  2. Set your own logo: replace the src/static/img/mylogo.png file with your own. Also, replace the favicon files in src/static/img/.
  3. Set your own theme: if your are comfortable with CSS and TailWindCSS, go for it. If you aren't, check out the tailwind.config.js file in the root directory of the project. By setting these variables you can start making the website look your own.
  4. Set your own videos: there's a src/_highlights folder. In this Each file contains something you want to highlight. Add or remove de .md files do add or remove highlights. The first one will be the first video available. They are also used to build the Highlight section of the website.
  5. Set your own texts: there's a src/_data/site.yaml file. You'll find you can customize most of the site's texts there. You can set the navigation links, the highlight texts and display messages to your users.
  6. Fetch your data on compile time: there's a src/_data/lorem.js file. It demonstrates how to fetch data from your own API during compile time. This way you can have your content updated on each new deploy.

** Remember to remove src/_data/lorem.js file.

It maker real requests during build time. If you are not going to use the data fetched it is simply making unnecessary requests to the server and making your build time slower.

Want to dive deeper?

Here are some concepts that will help you go further

  • 11ty's data: your data can be stored however you want. It may be computed data, that is, data you fetch from a database or API from a server you already have or, if you're starting from scratch, let me suggest you to create simple text files in YAML format in the _data directory. You'll be amazed of the simplicity of this approach. For complex needs you can use Javascript files and use the default export to provide the data. With this approach you can preprocess the data anyway you want. The src/_data/lorem.js file demonstrate quite simply how to fetch data from an API.
  • 11ty's templates: your template files can most probably be written in the a templating language you are already familiar with. If you don't know any of these, don't worry, you can customize the templates provided in this project and you'll learn the templating language we're using as you go. We're using mostly Nunjucks templating language and Markdown in this project. Nunjucks is a powerfull language and will most probably meet your needs, while Markdown is as simple as it can get and you feel quite comfortable with it in minutes.
  • TailwindCSS: creating a responsive and visually attractive website can be quite a hard task. There are plenty of tools out there. For this project we chose Tailwind. It focuses on allowing custom designs. Of course there are a lot of ready made designs out there you can simply use, but the fact is that sooner or later you'll want to tweek it and build your own custom design. Tailwind is highly customizable and avoids imposing anything on you. Simply go to tailwindcss.com and use their search bar to find a class that meets your needs. You'll also be interested in configuring TailwindCSS using the tailwind.config.js file.
  • e-commerce: Foxy.io's hosted cart solution fits perfectly with the serverless architecture. It does not require you to use any particular CMS or CRM and does not require you to provide your products and prices in advance. It provides the payment and shopping cart solution and allows you to customize it's look and feel,

Example

Here's a plan: let's first add our own products. In doing so we will be able to understand how we'll the store will fit our needs. Next we'll tweek it's look and feel. Finally, we'll add some extra niceties for our store.

Where do my products go?

You can do this in several ways. We'll explore two of them: creating your products as Markdown files and consuming your products from an external API.

Customizing collections

You can learn a great deal about Eleventy's collections https://www.11ty.dev/docs/collections/.

Here's what you need to get started:

  1. Create a "products" collection by creating a _products folder in the src folder. If you wish to create new collections, simply create folders with different names, starting with _ as in _name.
  2. Customize your collection using the _products.json file in the _products folder.
    1. Set a "category" for all products in this folder. This well allow you to create pages that list all products in a category.
    2. Set the permalink for the items in the category. This will allow you to have a different page for each product.
Example: Allow the user to filter by category

Here are the changes we need to make to allow the user to filter our products by category with a simple select button.

We will filter only the products available on the page and learn how to use data from our collection items in the process.

Add an attribute to the data

Let's go to the src/_products folder and edit some of these products.

Let's add a new attribute called 'productType' and set it to 'cool':

productType: cool

Select some other products and add a different productType, perhaps the tag 'hot':

productType: hot
Use the data in the HTML

Now lets create the select element. Navigate to the src/index.js file and look for a line where it reads:

{% for product in collections.product | sortByPriceHighToLow %}

Before the section tag above that line we'll add a simple select element:

<select data-action="hideProductType">
  <option value="all">All</option>
  <option value="hot">Hot</option>
  <option value="cool">Cool</option>
</select>

We will use this select to choose between cool and hot products.

Next, let's add a class to our products so that we can distinguish the cool ones from the hot ones. Let's add a 'product' class to the beginning of our product class list and we will access the productType data to add the productType to the end of the classList.

<section class="container p-2 pb-4 m-auto flex w-full flex-wrap items-stretch justify-start relative">
  {% for product in collections.product | sortByPriceHighToLow %}
  <div class="product flex flex-col items-center w-full
  lg:w-1/2 p-2 {{ product.data.productType}}">
    {# TIP: Use includes to avoid repetition
Add the behaviour in the js file

Finally, let's go to the src/_assets/scripts/app.js file and add some behaviour to our select button.

First, let's add a function that will filter the results. This is certainly not the most performant function, but you can easily get what it does:

// Filter selection button
function hideProductType(e) {
  var toShow = e.target.value;
  if (toShow == 'all') {
    document.querySelectorAll('div.product')
      .forEach(product => product.classList.remove('hidden'));
  } else {
    document.querySelectorAll('div.product')
      .forEach(product => product.classList.add('hidden'));
    document.querySelectorAll('div.product.'+toShow)
      .forEach(product => product.classList.remove('hidden'));
  }
}

It simply adds a 'hidden' class to all products and then removes from those we want to display.

Now let's add this behaviour to the select button:

document.querySelector('select[data-action="hideProductType"]')
  .addEventListener("change", hideProductType);

This code should go the other addEventListener in this file.

There you go! Our select filter is ready. Not nice, but ready.

Customize the look and feel

Let's make it nice, shall we?

This won't be difficult. First, let's replace the content of the default selection to "Filter the results"

  <option value="all">Filter the results</option>

Now it's easier to understand. Next, thanks to Tailwind we'll simply add some classes to our select element.

<select class="m-4 p-1 text-darker border-2 border-light rounded" data-action="hideProductType">

That's it!

We made our select have rounded borders with a configurable colors from our tailwind.config.js file. Did you notice that we set border color to 'light'? There is no such color by default, but it is configured in our tailwind.config.js file.

Now, if someone wishes to change the theme, a quick tweak to the config file will do.

Where to go from here?

Go ahead and click the deploy button. It will fork this repository for you and deploy a version to production. Go ahead and customize the files at will. You'll find some handy tips along the way.

You'll probably find out that these guys are loyal friends:

Acknowledgements