Forem: Pierre-Guillaume Laurin

Next.js E-Commerce Tutorial: SPA Example

Pierre-Guillaume Laurin — Fri, 30 Jul 2021 00:32:07 +0000

In a rush? Skip to the tutorial or live example

Like many web developers, I have been doing quite a lot of React stuff recently. The last few years have seen its usage in the industry grow in a trajectory commensurate to its parent company.

These days, there isn’t much you can’t do with React, whether you’re a seasoned developer or a complete beginner.

This is mostly due to the creation of tools such as Next.js that have successfully simplified React frontend development.

So, today, we'll explore how to craft a Next.js e-commerce single-page application quickly.

In the technical tutorial below, I’ll show you how to:

Set up a Next.js development environment
Create new pages & components
Fetch data & import components
Create serverless API routes in Next
Add a shopping cart to a Next.js app
Style the app

But before we go through this, let’s make sure we understand what Next.js is and how it can improve your next e-commerce projects.

What's Next.js?

In a nutshell, Next.js is a lightweight framework for React applications that allows you to build server-side rendering and static applications in React easily.

It takes all the good parts of React and makes it even easier to get an app running with optimized rendering performance. Next.js does this thanks to multiple built-in configurations—automatic code-splitting, file-system routing, server-side rendering, static files exporting, and styling solutions.

Trust me when I say that you can build a LOT of different things with Next.js:

Static websites—we’ve listed it as one of the top static site generators for 2021.
Progressive Web Apps (PWAs)
Server-rendered applications
SEO-friendly websites—as we’ve demonstrated here.
Mobile apps

It was built by Zeit (now Vercel) back in 2016 and has quickly gained traction to the point of becoming one of the most popular tools of its kind. I mean, it’s used by Marvel, Netflix, Uber, Nike… and the list goes on.

Okay, this is all great, and I’m genuinely excited to play with Next.js here. But is it any good for e-commerce?

Next.js & e-commerce: a good fit?

Like any static site generator or JavaScript framework out there, one of its most significant advantages, vs. more traditional e-commerce platforms, is the options it gives to developers to create a kickass shopping UX while removing the burden of many implementation details required for building a web app.

Depending on your need, you can easily build a server-side or statically rendering app with Next, which implements those for you while also abstracting other details such as app-bundling and transcompilation.

The power of the Jamstack right here!

We’ve covered the general React e-commerce ecosystem and its benefits in an earlier post. I would strongly suggest reading it to understand further why it’s a great fit.

But on the probable chance that you're pressed for time, here’s a TL;DR:

→ The use of components for flexibility.

Component-based development enables easy code reuse through your app but also the writing of small features. Or, in our case, small e-commerce functionalities. This comes in handy once you start scaling and expanding your shopping cart integration.

→ Virtual DOM (document object model) for performance.

React’s virtual DOM provides a more efficient way of updating the view in a web application. Performance is Everything in e-commerce; all milli-seconds count.

→ Popularity & vast community.

Any issue has probably been documented already, so you're likely to find a solution to any potential pitfalls in your way.

Next.js features like server-side rendering and static exporting push these React benefits even further by guaranteeing that your website/app will be SEO-friendly. This is something vital to any e-commerce business.

Still need social proof? Here are some Next.js e-commerce site examples.

Technical tutorial: a Next.js e-commerce SPA

Okay, time to jump into code and create our own handcrafted Next.js e-commerce app with the help of Snipcart. For you fish aficionados — or really anyone waiting for the beta of any cool software library — rest assured because we will make a betta fish store today.

Pre-requisites

Basic understanding of single-page applications (SPAs)
A Snipcart account (forever free in test mode)
Npm and node.js installed

Basic knowledge of React & TypeScript will also help you here, but it is not mandatory to follow along.

1. Setting up the development environment

First, let set up our environment so that we can start building.

Open a terminal and type the following command:
npx create-next-app --typescript

A prompt will appear asking you for the project's name. It will then install all of the project dependencies for you and create files and folders. We'll look into these further in this tutorial.

Beginner note: The command's --typescript options will set up a Typescript project, which I often favor. The typing system helps prevent many runtime errors and perky bugs. It also allows for better refactoring in the long run!

Then, run npm run dev. Your app should now be served at localhost:3000.

2. Defining a layout

With our environment ready, let's create a layout for our store. It will include a Header and a Footer with links to our cart and contact information.

We will add this layout to the app's main entry point. In Next, this entry point is located at pages/_app.tsx. You can see that the MyApp function returns the pageProps. We will use this function to create our app's layout:

At the project's root, create a components directory in which — you guessed it — we will create our components.

1. Creating components

Now let's create the components we need.

In the components directory, create a Header.tsx file with the following content:

// components/Header.tsx
import Link from "next/link";

export default function Header() {
    return (
        <header >
            <Link href="/">
                <img src="/static/logo.svg" alt="" >
            </Link>
            <Link href="/">
                <h1 >FishCastle</h1>
            </Link>
            <a href="#" style={{textDecoration: "none"}}>
                <svg width="31" height="27" viewBox="0 0 31 27" fill="none" xmlns="<http://www.w3.org/2000/svg>">
                    <path d="" fill="#9094FF"/>
                </svg>
                <span></span>
            </a>
        </header>
    )
}

The Link component from Next.js allows us to convert most HTML elements into in-website links.

Still in the components directory, create a Footer.tsx file with the following content:

// components/Footer.tsx

export default function Footer(){
    return (
        <footer>
            <p>
                Next.js app with a&nbsp;<a href="<https://snipcart.com>">Snipcar        t</a>&nbsp;- powered store
                <div >
                    <a href="<https://github.com/snipcart/snipcart-nextjs-spa>">Github</a>
                </div>
            </p>
        </footer>
    )
}

2. Integrating components

Let's now integrate those components into our app. First, create a Layout component and put the Header and Footer in it:

import Header from "./Header";
import Footer from "./Footer";
import {PropsWithChildren} from "react";

export default function Layout({ children  }: PropsWithChildren<any>) {
  return (
      <>
          <Header />
          <main>{children}</main>
          <Footer />
      </>
  )
}

With your layout components created, all that's left to do is to add it to the _app.tsx file:

// _app.tsx
function MyApp({ Component, pageProps }: AppProps) {
  return <>
    <Layout>
      <Component {...pageProps} />
    </Layout>
    </>
}

If you run your app's dev mode and go to your localhost page, you should now see your app's layout created. Later in this tutorial, we will see how to add style to it and give it that drip.

But first things first, let's give our homepage the content it deserves.

3. Customizing your homepage

As we need to display both information about our store and the products we will sell, we will create a few different components to keep things modular and maintainable. Then, we will look at how to assemble them:

1. Creating required components

The product component

As this is a Next.js tutorial for an e-commerce app, you will need a Product component to show on your homepage.

The component will output whatever information you need to display about our particular product. You can create an IProduct interface that matches Snipcart's product definition and an IProductProps interface to define the types of our props, which will be pass as a parameter to the function.

// components/Product.tsx

export interface IProduct {
    id: string
    name: string
    price: number
    url: string
    description: string
    image: StaticImageData
}

Underneath the interface, add this component:

// components/Product.tsx

interface IProductProps {
    product: IProduct
}

const Product = (props: IProductProps) => {
    return (
        <div className={styles.product}>
            <h2 className={styles.product__title}>{props.product.name}</h2>
            <p className={styles.product__description}>{props.product.description}</p>
            <div className={styles.product__image}>
            <Image src={props.product.image} alt={props.product.image.src} />
            </div>
            <div className="product__price-button-container">
                <div className={styles.product__price}>${props.product.price.toFixed(2)}</div>
                <button
                    className={`snipcart-add-item ${styles.product__button}`}
                    data-item-id={props.product.id}
                    data-item-name={props.product.name}
                    data-item-price={props.product.price}
                    data-item-url={props.product.url}
                    data-item-image={props.product.image.src}>
                    Add to cart
                </button>
            </div>
        </div>
    )
}

A note on the Image component

Notice in the block below we are using Next.js's Image component instead of a good ol' img tag. The former is actually an extension of the latter. It allows automatic image optimization, lazy loading by default, and providing images in WebP when the browser allows it, which optimizes images to the client device. Moreover, the component optimizes image on requests, which saves you build time. This helps to reduce your website loading time and thus keep your users' interest!

2. The product list component

We will integrate this product component into a ProductList component, whose name is quite self-explanatory. The ProductList.tsx component will be used to display our list of products on the homepage. Therefore, you can create an IProductListProps interface that describes an array of IProduct, which is eventually going to be passed by our website:

import Product, {IProduct} from "./Product";

interface IProductListProps {
    products: IProduct[]
}

const ProductList = (props: IProductListProps) => {
    return (
        <div className="product-list">
            {props.products.map((product, index) => <Product product={product} key={index}/>)}
        </div>
    )
}

export default ProductList

4. Pre-rendering data and importing components

At this stage, you'll probably want to populate your products to the ProductList component. In pure React, you could use React's useEffect lifecycle inside the ProductList to fill the data. However, this method won't get called on the server during a static or server-side rendering.

Thankfully Next.js adds two ways to pre-render the data: getStaticProps, which fetches data at build time, and getServerSideProps, which fetches data on each request. The latter may be useful, for example, for an auction store where the price may be rapidly fluctuating. In our use case, since the product doesn't change often, we will use the former as the pre-rendering will decrease loading time by saving the user a request.

<main className="main">
    <Jumbotron />
    <ProductList products={products}/>
    <Contact/>
</main>

export const products: IProduct[] = [
    {
        id: "halfmoon",
        name: "Halfmoon Betta",
        price: 25.00,
        image: halfmoonBettaPicture,
        description: "The Halfmoon betta is arguably one of the prettiest betta species. It is recognized by its large tail that can flare up to 180 degrees.",
        url: '/api/products/halfmoon'
    },
    (...)
    {
        id: "veiltail",
        name: "Veiltail Betta",
        price: 5.00,
        image: veiltailBettaPicture,
        description: "By far the most common betta fish. You can recognize it by its long tail aiming downwards.",
        url: '/api/products/veiltail'
    }
]

export const getStaticProps: GetStaticProps = async (context) => {
    return {
        props: {
            products
        }
    }
}

5. Importing Snipcart

Now, let's install Snipcart into our website. First, you'll need to import the Head component from next/head inside your index.tsx page, which will allow you to add HTML inside the <Head> element.

You can do so by adding the following code inside the Index function return clause:

// pages/index.tsx
<Head>
    <title>My awesome store</title>
    <link rel="preconnect" href="<https://app.snipcart.com>"/>
    <link rel="preconnect" href="<https://cdn.snipcart.com>"/>
    <link rel="stylesheet" href="<https://cdn.snipcart.com/themes/v3.2.0/default/snipcart.css>"/>
    <link rel="shortcut icon" href="../public/favicon.ico" />
</Head>

For more information on how to use the Head component to optimize for SEO, have a look at our article regarding SEO using Next.js.

We now need to load Snipcart's script content. Next.js offers a Script component in the next/script, module to do so. It allows for performance optimization by offering different loading strategies.

// pages/index.tsx
<script src="https://cdn.snipcart.com/themes/v3.2.0/default/snipcart.js"></script>
<div hidden id="snipcart" data-api-key="YOUR_PUBLIC_API_KEY"></div>

Don't forget to swap the data-api-key attribute with your own API key ;)

6. Product validation

Now that Snipcart is installed, the last step before completing orders is to validate your products.

1. HTML validation

The first way to do that is by simply changing the URL in your product list to / for each product to the homepage for Snipcart's HTML validation. It will read the / on our homepage and crawl it in order to validate the products if you want. You can do just that and skip to the next section, and you will have a working e-commerce site!

If you are curious, let's take the opportunity to check out a neat Next.js feature:
serverless API routes combined with Snipcart's JSON validation.

2. JSON validation using Next.js serverless API

For more complex scenarios, it might be useful to have an API returning our products information in JSON format. To do so, we will need to have a unique URL for each product that will return its information in a JSON file.

Configuring static API routes

While technically we only need a dynamic API route returning each product, let's make this API RESTful and have a route returning the whole product list.

You may have noticed that an API folder was created with the project. In this folder, create another one called products and add an index.ts file to it with the following content:

// In pages/api/products/index.ts

import {NextApiRequest, NextApiResponse} from "next";
import {products} from "../../index";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  res.status(200).json(products);
}

If you now go to https://localhost:3000/${YOUR_PORT}, you will get a JSON file containing your product list.

Configuring dynamic API routes

In the products folder, add the following to the [productId].ts file. Notice the brackets. This special syntax tells Next.js that [productid] is a dynamic parameter. Hence if you go to /api/products/ONE_OF_YOUR_PRODUCTS_ID, you should get the JSON information of one of our products.

import {NextApiRequest, NextApiResponse} from "next";
import {products} from "../../index";
import {IProduct} from "../../../components/Product";

export interface ISnipcartProduct {
    id: string
    name: string
    price: number
    url: string
    description: string
    image: string // Hack to pass the image URL instead of the StaticImage object we required
}

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    const {productId} = req.query;
    const product: IProduct | undefined = products.find(p => p.id === productId);
    if (!product) {
        res.status(404).json({});
        return ;
    }
    const snipcartProduct: ISnipcartProduct = {...product, image: product?.image.src ?? ""}

    res.status(200).json(snipcartProduct);
}

You should now be able to complete a test order!

It's time to style our website, so it's more appealing to our future customers.

7. Styling your Next.js SPA

If you paid attention, you saw that most of the components in this tutorial already had classnames. We will now look at 2 different ways to apply them:

1. Setting up a global stylesheet

In the styles folder, create a global.scss style sheet. Afterwards, simply import it to pages/_app.tsx:

// in pages/_app.tsx

import "../styles/globals.scss";

Global stylesheets can only be imported in the _app.tsx file.
I used SCSS, which does not come built-in with Next.js, but can be easily integrated simply by running npm install sass.

2. Setting up CSS modules for our components

Next.js also supports CSS modules, which can become quite handy if your CSS file gets larger. To use it, simply create a file respecting the [name].module.css convention, for example, Product.module.css or Product.module.scss.

Afterward, you can import it as a styles object in the component's file and access the styles with it:

import styles from '../styles/Product.module.scss';
(...)

const Product = (props: IProductProps) => {
  return (
      <div className={styles.product}>
          <h2 className={styles.product__title}>{props.product.name}</h2>
          <p className={styles.product__description}>{props.product.description}</p>
      (...)
  )
}

For further examples of how these styles are applied, have a look at the project:

Allow me a shout-out to Michael from Snipcart, who came up with the neat UI design!

And voilà! You're server-side rendered Next.js e-commerce store should be ready to go.

Closing thoughts

I liked how easy it was to create a static website with great performance using Next.js. I did notice some parts of the Next.js documentation could be more up-to-date.

We could have explored Image optimization on mobile using the Image component or Next's dynamic imports to push this demo further.

Are you up to it? If so, let us know how it goes in the comments below!

Liked this article? Hit the share buttons below.

Angular E-Commerce Project: Build a Web App Easily

Pierre-Guillaume Laurin — Thu, 20 May 2021 20:30:25 +0000

In a rush? Skip to the tutorial.

Nowadays, you probably have as many options when building a web app as you have while ordering a drink at Starbucks. And the multitude of JavaScript frameworks is maybe to blame.

Why not build an Angular e-commerce project together?

So, this time let's shifted our focus to TypeScript.

We've first published this article in 2019, but a lot has changed since then. In our first version, Angular 8 was the latest release. We're now at version 12, so why not revisit this post and see what new it has to offer.

The shopping cart & back office will be offloaded to Snipcart, our dev-first e-commerce solution.

And because summer is coming in Canada and it has been quite a long year, I wanted to replenish my youth memories and make a REPLENISHING ICE CREAM STORE!

So let's get started!

Here's what I'll cover:

Angular overview
Build an Angular e-commerce app
Build a product API using Vercel's serverless function
BONUS: Customizing customer options with Snipcart's custom fields

What is Angular?

If you're reading this, you probably already have a working knowledge of Angular, but for the few of you who are not particular about it, here's a quick overview.

Angular is a web application framework based on TypeScript. It's open-source and developed by Google.

That said, there have been some new developments in the Angular world that are worth a quick mention. Angular's latest major release is 12, and it boasts loads of bug fixes making it smaller, faster & easier to use. Plus, it now supports TypeScript 4.2.3 and up. It's also starting to drop support for building libraries with View Engine in favor of Angular's compiler/runtime, Ivy. Currently, Ivy is the default compiler, and View Engine will be removed from version 13.

And since this tutorial used Angular 8 before, I was intrigued by its latest release.

Is Angular any good for e-commerce?

And here's a few reasons why:

→ Great Tooling: You'll find tons of awesome tools like Angular CLI, Angular Elements, and Ivy. The point is that when it comes to building your Angular e-commerce app, you'll never be at a lack of intuitive, time-saving tools to get your site up and running as quickly—and painlessly—as possible.

In the world of e-commerce, saving time = saving $.

→ Loads of Helpful Documentation/Articles: Angular is one of the top JavaScript frameworks. As such, it should be no surprise that you have loads of resources to pull from for any updated news, troubleshooting problems, or debugging issues you may encounter while building your e-commerce app.

Apart from Angular's excellent docs, you have countless other active writers in the Angular community. You'll have detailed resources quite literally...

→ SEO Opportunities: Look, if you're entering the world of e-commerce, you need to make sure your site is optimized for SEO. Using Angular (or any other framework) can be scary when considering SEO purposes, but it certainly doesn't need to be! In fact, using server-side rendering with Angular Universal, you can rest assured that your site will be 100% SEO-friendly. Oh, and did I say that Angular was developed by Google?

Angular setup for an e-commerce project

What you'll need:

Node and NPM installed on your computer
A Vercel account
A Snipcart account

Let's first install the Angular CLI. It's a neat tool that automates many development tasks. To install it, open a terminal and type the following command:

npm install -g @angular/cli

Once installed, create a new project with the following command: ng new snipcart-angular

A prompt will appear asking you if you want to enable strict mode. Select yes. This will enable a few other settings that will help to catch bugs ahead of time.

In your directory, you now see your project repo. Type the following commands to go in it:

cd snipcart-angular
ng serve --open

ng serve will build the app, while the --open option will open up a browser to http://localhost:4200/. You should now see Angular's generic template page.

Customizing the HTML template

Now that the general project setup is done. Let's start customizing it!

First of all, open the app.component.ts file and change the value of the title property for 'Ice Cream Store'.

Afterward, open the app.component.html file and remove all of the template sections, replacing it with <h1>{{title}}</h1>. The final result should look like this:

<h1>{{title}}</h1>
<router-outlet></router-outlet>

Afterward, the browser should reload instantly, displaying only the new title.

Customizing the stylesheet

To help with our styling, we will use Angular's Material Design components. These components, made by the Material team, are an implementation of Material Design. They will allow us to quickly create a fast, design-tested e-commerce website.

Let's use the following command to install Material UI: ng add @angular/material

You can then replace src/app.component.scss.

Creating mock products

Later in the tutorial, we will use a full InMemoryDbService. For now, let's do something simple and simply create a mock-products.ts file in our root component:

import { Product } from './core/product';
import { Size } from './core/size';

export const PRODUCTS: Product[] = [
  {
    id: 1,
    name: 'Ice Cream',
    imageUrls: ['../assets/ice-cream-prune.svg', '../assets/ice-cream-cherry.svg', '../assets/ice-cream-squash.svg'],
    price: 10,
    flavors: [
      { name: 'prune', color: '#5A188E' },
      { name: 'squash', color: '#F88532' },
      { name: 'cherry', color: '#E91E63' },
    ],
    sizes: [Size.SMALL, Size.MEDIUM, Size.LARGE],
  },
  {
    id: 2,
    name: 'Popsicle',
    imageUrls: ['../assets/popsicle-lime.svg', '../assets/popsicle-lettuce.svg', '../assets/popsicle-cherry.svg'],
    price: 8,
    flavors: [
      { name: 'lime', color: '#00CACA' },
      { name: 'lettuce', color: '#80DC0B' },
      { name: 'cherry', color: '#E91E63' },
    ],
    sizes: [Size.SMALL, Size.LARGE],
  },
];

You will also need to create a core folder that will contain our TypeScript product interface as well as a flavor and size interface we will use to fulfill our ice cream customer's wishes better!

// core/product.ts

import { Flavor } from "./flavor";
import { Size } from "./size";

export interface Product {
    id: number;
    name: string;
    imageUrls: string[];
    price: number;
    flavors: Flavor[];
    sizes: Size[];
}

// core/flavor.ts

export interface Flavor {
    name: string;
    color: string;
}

// core/size.ts

export enum Size {
  SMALL = "small",
  MEDIUM = "medium",
  LARGE = "large",
}

Creating a homepage component

Let's now create our website's homepage, where we will display our product header and options.

In your terminal, type the following command: ng generate component homepage.

Then, let's start by adding props to the homepage. It will be used to display our app title on our website. Now, create two properties for our app title and subtitle.

// homepage.component.ts

@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.scss']
})
export class HomepageComponent {
  title = 'Infinite summer ice cream store';
  subtitle = 'Which one do you want?';
}

Then let's add the HTML templating in the corresponding file:

<!-- homepage.component.html -->

<div class="header" fxLayout="column" fxLayoutAlign="center center">
  <h1 class="jumbo">{{ title }}</h1>
  <h2>{{ subtitle }}</h2>
</div>

In order to display the homepage view, add the following line to the component:

<!-- app.component.html -->

<app-homepage></app-homepage>

You should now see the title and subtitle! But what's an e-commerce homepage's header without some product to display?

Display products: introducing directives

Now that we have a cool header and some nice products let's display them on our website! We will do it in a separate component that will improve reusability.

In your terminal, create the product-display component by typing the following Angular CLI command: ng generate component products.

With our components created, we can now import the products that we need. Angular allows us to do so easily. Simply add the following lines in product-display-component.ts:

import { PRODUCTS } from '../mock-products';

And then define the attributes in the component class with the following lines:

export class ProductsComponent implements OnInit {
  products = PRODUCTS;
}

At this stage, we're ready to create a product component to give further information to our customers.

ng generate component product.

Open the newly created product.component.ts file and replace its content with the following:

import { Component, Input, OnInit } from '@angular/core';
import { Product } from '../core/product';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
  @Input() product: Product | undefined;
  imageUrl: string = "";

  ngOnInit() {
   this.imageUrl = this.product?.imageUrls[0] ?? '';
  }
}

The @Input decorator we added allows us to declare input properties. This means that the component can now receive its value directly from its parent component.

If we look at what we just created, we can see:

An input property product that binds to the Product object we created in core.
An imageUrl property which we'll use to display our product's images.

With the line this.imageUrl = this.product?.imageUrls[0] ?? ''; we then assign to imageUrl the value of the first image in the imageUrls array if it exists, and do so within the ngOnInit method.

ngOnInit is an Angular lifecycle method that gets called after component initialization. Since the component is initialized, the input props, in our case the product prop, are populated, and we can access it. This is what allows us to populate the property.

Now that our component properties are defined we can add them to our HTML (product.component.html):

<ul>
    <app-product *ngFor="let p of products" [product]="p"></app-product>
</ul>

Notice the *ngFor directive we are using. It allows us to modify the DOM structure by–you guessed it–looping over the elements of the products list and creating the specified HTML node for it (in our case, the app-products node).

Directives such as *ngFor are defined in Angular's official documentation as "classes that add additional behavior to elements". In that sense, components are also directives because they define additional behavior to a standard HTML template.

Create a product page: introducing angular routing

Open app-routing.module.ts and insert the following into routes:

const routes: Routes = [
  {path: "**", component: HomepageComponent},
];

We can now add a dynamic route.

const routes: Routes = [
  {path: "product/:id", component: ProductPageComponent},
  {path: "**", component: HomepageComponent},
];

The "**\" path is a wildcard route, generally used for 404 pages. It's important to add the wildcard route last; otherwise, it will override the other routes.

In app.component.html, <router-outlet></router-outlet> will display the component related to the route. So in your browser, you can now go to http://localhost:4200/ and it will point to our homepage!

Create product pages component: discovering services

Components are responsible for data presentation. To improve our application modularity, they shouldn't access the application data directly. Instead, they should interact with services that handle data access.

Let's refactor our products component so that it uses a service to handle data access. For now, this service will use mock data.

In the terminal, enter the following command: ng generate service product.

In the newly created product.service.ts file, add the following content:

import { Injectable } from '@angular/core';
import { PRODUCTS } from './mock-products';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor() {}

  getProducts(): Product[] {
    return PRODUCTS;
  }
}

The getProducts method simply returns our mock data. Later in the tutorial, we will modify it to make it even more modular. For now, in products.component.ts, replace the mock products assignation by a call from product service:

export class ProductsComponent implements OnInit {
  products: Product[] = [];

  constructor(private productService: ProductService) {}

  getProducts(): void {
    this.products = this.productService.getProducts();
  }

  ngOnInit() {
    this.getProducts();
  }
}

We have done four things here:

We've replaced the value of products with an empty array.
We've injected the productService in our constructor.
We've defined a getProducts method in our component that handles the products' logic.
We've called this method in the ngOnInit lifecycle method.

For our product page, we will need data about a single product. Let's add a getProduct method to our product service to fetch this data:

// product.service.ts

getProduct(id: number): Observable<Product | undefined> {
   const product = PRODUCTS.find(product => product.id === id);
   return of(product);
}

This method returns an observable. They are used in Angular for event handling and, as in our case, asynchronous programming. When designing our product page, we will see how to fetch observable values.

We'll use this method in our product component to display the product content: ng generate component product.

// product.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { Product } from '../core/product';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {
  @Input() product: Product | undefined;
  imageUrl :string = "";

  ngOnInit() {
   this.imageUrl = this.product?.imageUrls[0] ?? '';
  }
}

In the TypeScript file, we added a product input property for the inserted product, along with an imageUrl property, which we bind to the component's image src.

<!-- product.component.html -->

<div [routerLink]="'product/' + product?.id">
  <h2>{{ product?.name }}</h2>
  <img [src]="imageUrl" />
</div>

In the HTML, we also added a router link to a product page, which we have not yet defined. Let's do it now.

Add product pages

First, we need to allow our users to select the flavor and size variant they want for their products.

Along with an imageUrl property similar to the one we added to the product component, let's add a getProduct method that will get the dynamic parameter from our route and use it to call the corresponding method we defined in the product service:

// in product-page.component.ts
 imageUrl: string = '';
 product: Product | undefined;

 getProduct(): void {
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.productService
      .getProduct(id)
      .subscribe((product) => (this.product = product));
  }

We can see that the method calls our product service getProduct method and subscribes to the observable value. When the value from getProduct gets returned, it will be assigned to the product property.

Now that we have all of the required data, it's time to display our product name, image URL, and price:

<h1>{{ product?.name }}</h1>
<img [src]="imageUrl" />
<p>Price: {{ product?.price }}</p>)

<h1>{{ product?.name }}</h1>
<img [src]="imageUrl" />
<p>Price: {{ product?.price }}</p>
<button
  class="snipcart-add-item"
  [attr.data-item-id]="product?.id"
  [attr.data-item-price]="product?.price"
  [attr.data-item-url]="'product/' + product?.id"
  [attr.data-item-image]="imageUrl"
  [attr.data-item-name]="product?.name">
  Add to cart
  </button>

When you click on the buy button, Snipcart's checkout window should now open and you should see your product in it. But if you would deploy in production and try doing a test transaction, you will get a product validation error. Why is that?

Build a product API using Vercel's serverless function

You may have noticed that in our previous step, the attributes we added to a button with the snipcart-add-item class were determining the product attributes (e.g the price) in checkout. Because Angular components are rendered dynamically at runtime and Snipcart's HTML crawler gets the HHTML page before this rendering, the buy button doesn't get crawled. To solve this, we'll create a small API using Vercel serverless function. Snipcart's JSON crawler should then be able to crawl our endpoint.

Vercel makes serverless function implementation pretty trivial. In the project root (not the src folder), simply add an API folder. Inside add another folder called products, and in it, a file called [id].ts. The brackets around id indicate that it is a dynamic parameter. We'll use it to get the relevant product and return its attributes influencing pricing.

To do so, add the following content inside the file:

// <PROJECT'S ROOT>/api/products/[id].ts
import { VercelRequest, VercelResponse } from '@vercel/node';
import { Product } from '../../src/app/core/product';
import { PRODUCTS } from '../../src/app/mock-products';

const findProduct = (id: number): Product | undefined =>
  PRODUCTS.find((product) => product.id === id);

export default function fetchProductInfo(
  req: VercelRequest,
  res: VercelResponse
) {
  const id = Number(req.query.id);
  const product = findProduct(id);
  res.statusCode = 200;
  res.send({
    id: id,
    name: product?.name,
    price: product?.price,
    url: `/products/${id}`,
  });
}

Then install Vercel's node module for type definitions:

npm i -D @vercel/node

You can test that the serverless function is working locally by installing Vercel CLI. Then, type the vercel . command in your project root, follow the setup instructions, and then type vercel dev to start the local environment.

If you now go to [https://localhost:3000/products/1](https://localhost:3000/products/1) you should now get the following file:

{"id":1,"name":"Ice Cream","price":10,"url":"/products/1"}

This JSON contains the minimum attributes required for Snipcart's JSON crawler price validation (id, price, and URL).

Deploy it to production using either Vercel CLI or GitHub integration

And voilà! You should now be able to complete a test transaction!

BONUS: Customizing customer consumptions with Snipcart's custom field

If you look at the code repo, you will see I added some logic to create Snipcart's custom fields. These will allow our users to select their ice-cream/popsicle flavor and sizes.

First, I made two functions to give us the options separated by | character. We'll use them to populate the buy button's custom option fields.

  get flavorOptions(): string {
    return (
      this.product?.flavors?.map((flavor) => flavor.name).join('|') ?? ''
    );
  }

  get sizeOptions(): string {
    return this.product?.sizes?.join('|') ?? '';
  }

Then, I added a dropdown to select product size and chip components to select flavors...

<!-- product-page.component.html -->
<mat-form-field appearance="fill">
  <mat-label>Size</mat-label>
  <mat-select
    (selectionChange)="
      updateSelectedProductAttributes(
        this.selectedAttributes?.flavor,
        $event.value
      )
    "
    required
  >
    <mat-option *ngFor="let size of product?.sizes" [value]="size">
      {{ size }}
    </mat-option>
  </mat-select>
</mat-form-field>
<mat-chip-list aria-label="Flavors selection">
  <mat-chip
    *ngFor="let flavor of product?.flavors"
    [style.background-color]="flavor.color"
    (click)="
      updateSelectedProductAttributes(flavor, this.selectedAttributes?.size)
    "
  >
    {{ flavor.name }}
  </mat-chip>
</mat-chip-list>

..., along with some logic to keep track of the selected values:

// core/selectedProductAttributes.ts

import { Flavor } from "./flavor";
import { Size } from "./size";

export interface SelectedProductAttributes {
    flavor: Flavor | undefined;
    size: Size | undefined;
}

// product-page.component.ts

export class ProductPageComponent implements OnInit {
  imageUrl: string = '';
  selectedAttributes: SelectedProductAttributes = {
    flavor: undefined,
    size: undefined,
  };
  product: Product | undefined;

Now we simply have to add the custom field attributes to Snipcart's buy button:

<button
  class="snipcart-add-item"
  [attr.data-item-id]="product?.id"
  [attr.data-item-price]="product?.price"
  [attr.data-item-url]="'product/' + product?.id"
  [attr.data-item-image]="imageUrl"
  [attr.data-item-name]="product?.name"

  data-item-custom1-name="Flavor"
  [attr.data-item-custom1-options]="flavorOptions"
  [attr.data-item-custom1-value]="this.selectedAttributes?.flavor?.name"
  data-item-custom2-name="Size"
  [attr.data-item-custom2-options]="sizeOptions"
  [attr.data-item-custom2-value]="this.selectedAttributes?.size"
>Add to cart</button>

It's not more complicated than that!

It should look like this:

You can see the live demo here

You can see the GitHub repo here

Conclusion

I had a lot of fun writing and building this demo e-commerce store project. I've worked with Angular 8 a couple of years ago and was a bit scared to go back to it, afraid there would be a lot of boilerplate code. However, I became pleasantly surprised to use Angular opinionated architecture, as I found it helped me create a more modular app. Plus, its CLI does make life easier and the Ivy compiler added in version 9 makes for a faster flow.

Of course, we could push the application further, for instance, by making the API even more flexible using Angular's HTTP Client and In-Memory-Web-API service.

I recommend this video if you want a crash course on how Angular works.

A Guide to Node.js for E-Commerce [With Koa.js Tutorial]

Pierre-Guillaume Laurin — Mon, 12 Apr 2021 20:44:29 +0000

In a hurry? Skip directly to the tutorial or demo

I know, another post about a JavaScript framework. At this point, I'm pretty sure we have more client-side frameworks than use cases to apply them.

If we focused solely on Node.js, the list could be long.

We've already played with Express, and Strapi, but there's also Meteor, Sails.js, Nest, Hapi, & many others.

This time, let's focus on Koa.js & e-commerce.

It's described as the future of Node.js, so you might understand why we got curious!

Node.js for e-commerce uses can be a powerful tool; we've seen it. But what about Koa.js? We've tried it, loved it, and now we're going to show you how to use it yourself.

It was built by the same team behind Express in 2013, the difference being that it's a smaller, more expressive, and more robust foundation for web applications and APIs.

The least I can say about it is that it's minimalistic. I mean, for real.

To prove it, here's my use case for this demo:

Your friend Roe Jogan is launching his first podcast, and he needs external financing to get started. He wants a fundraiser website where people can donate by either buying products or giving the amount they want.

The specs for this project are:

It has to go live soon.
There is no need for a CMS to manage products.

Your goal is to put the basics online, so your friend can get going in record time.

Oh and, you'll be selling stuff, so Snipcart's zero friction setup will serve you well.

Now, if that isn't minimalist, I wonder what is.

Technical tutorial: Node.js e-commerce with Koa.js

Here are the steps we'll cover:

Initialize Koa.js app directory
Create the app's entry point
Add products data
Create our routes
Enable e-commerce on your Node.js app
Handle inventory

Pre-requisites:

A Snipcart account. (Forever free in test mode)
Basic knowledge of Node.js. (You can start here)

1. Initializing the Koa.js app directory

Let's get started by creating your project's directory:

mkdir snipcart-koajs
cd snipcart-koajs

Afterward, generate a package.json file with the following content:

{
  "name": "snipcart-koajs",
  "version": "2.0.0",
  "description": "Minimalistic/low-ceremony ecommerce store built on Koa.js using Snipcart",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "dependencies": {
    "config": "^3.3.3",
    "fs-extra": "^9.1.0",
    "koa": "^2.13.1",
    "koa-router": "^10.0.0",
    "koa-static": "^5.0.0",
    "koa-views": "^7.0.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.7"
  }
}

Then run npm install in your terminal to integrate the listed dependencies above. We'll go through what each of them does later in this tutorial.

Let's also create a config folder with a default.json file to isolate all of our app's configuration for easy modification afterward:

{
    "server": {
        "port": 3000
    },
    "views": {
        "path": "app/views",
        "options": {
            "map": {
                "pug": "pug"
            },
            "extension": "pug"
        }
    },
    "static":{
        "path":"app/static"
    },
    "data": {
        "path": "app/data"
    },
    "settings": {
        "siteName": "Roe Jogan's podcast fundraiser",
        "snipcartApiKey": "YOURSNIPCARTAPI_KEY",
        "defaultDonation" : 25
    }
}

We will see how each configuration parameter will be used in the demo's upcoming code snippets.

2. Creating the app's entry point

So we have our basic environment setup. Now, when clients make a request to our website URL, how can we use Koa.js to send them a fully functional e-commerce page?

To answer that, let's quickly look at how Koa works. It is a middleware pipeline.

This means that when a client requests an API route, Koa.js will make a context object comprised of the API request and its future response. It will then make it go through a chain of functions performing some manipulations on it, then wait for the result of the next function in the chain.

When the chain's last function is called, the stack will unwind, and the context object will be passed back to the top of the function chain.

Hence, to send a fully functional e-commerce page to our customers, we'll need to add relevant middleware for all of our needs.

Let's go through each of them - and its corresponding middleware, step by step.

2.1 Rendering html

First of all, we need to render HTML.

To do so, let's add a template rendering middleware called koa-views in index.js.

//in index.js
const Koa = require('koa')
const app = new Koa()
const views = require('koa-views')
const serve = require('koa-static')
const path = require('path')
const config = require('config') // file where we will add all of our app's configuration
// Views setup, adds render() function to ctx object
app.use(views(
  path.join(__dirname, config.get('views.path')),
  config.get('views.options')
))

We're now ready to render HTML!

2.2 Rendering CSS, scripts and images

While minimal website design can go a long way, it would be nice to add some logic to our e-commerce store.

In index.js Let's use the koa-static middleware to statically serve those assets:

//in index.js
app.use(serve(config.get('static.path')))

We are now almost ready to create our actual view templates.

2.3 Hydrate ctx with global settings

One last thing we need to do before being ready to make our actual view templates is to inject our configuration settings into Koa.js' context object.

As a reminder, this object is composed of the API request and API response.

Amongst other things, it will allow us to add our Snipcart public API key in our views from the configuration file.

And as a bonus, this will show you how to create your own custom middlewares!

// in index.js
app.use(async (ctx, next) => {
  ctx.state.settings = config.get('settings')
  ctx.state.urlWithoutQuery = ctx.origin + ctx.path
  await next() 
})

The above is a great example of Koa.js adding value to our app.

See that async keyword in the function signature? It's precisely where this framework shines.

Its support for promises allows you to write middlewares as async functions, thus getting rid of callback hell.

This makes for much cleaner and readable code.

2.4 Configuring app startup

We are now ready to start the app. Let's use the following code:

// in index.js
const port = process.env.PORT || config.get('server.port')
app.listen(port, () => { console.log(Application started - listening on port ${port}) })

Then, in your command line, type npm run dev.

In package.json, we configured that script to use nodemon, which will watch your files and restarts the app when changes are detected.

// First, we declare the middleware we will use
const config = require('config')
const path = require('path')
const Koa = require('koa')
const Router = require('koa-router')
const loadRoutes = require("./app/routes")
const DataLoader = require('./app/dataLoader')
const views = require('koa-views')
const serve = require('koa-static')
const app = new Koa()
const router = new Router()
// Views setup, adds render() function to ctx object
app.use(views(
  path.join(__dirname, config.get('views.path')),
  config.get('views.options')
))
// Serve static files (scripts, css, images)
app.use(serve(config.get('static.path')))
// Hydrate ctx.state with global settings, so they are available in views
app.use(async (ctx, next) => {
  ctx.state.settings = config.get('settings')
  ctx.state.urlWithoutQuery = ctx.origin + ctx.path
  await next() // Pass control to the next middleware
})
// Start the app
const port = process.env.PORT || config.get('server.port')
app.listen(port, () => { console.log(Application started - listening on port ${port}) })

If you go to port 3000 right now, you should get a "Not Found" blank page.

3. Adding products data

We now need to set up our product information.

We could have gone for a simpler route, but to demonstrate how Koa.js plays well with promises, let's build a simple DataLoader component that reads JSON files' content in a directory and parses them into an array of objects.

In the project's root directory, let's create an app subdirectory and then a dataLoader javascript file.

const path = require('path')
const fs = require('fs-extra')
function fileInfo(fileName, dir) {
    return {
        slug: fileName.substr(0, fileName.indexOf('.json')),
        name: fileName,
        path: path.join(dir, fileName)
    }
}
function readFile(fileInfo) {
    return fs
        .readJson(fileInfo.path)
        .then(content => Object.assign(content, { _slug: fileInfo.slug }))
}
class DataLoader {
    constructor(dir) {
        this.dir = dir;
    }
    async all() {
        const fileInfos = (await fs.readdir(this.dir)).map(fileName => fileInfo(fileName, this.dir))
        return Promise.all(fileInfos.map(readFile))
    }
    async single(slug) {
        const fileInfos = (await fs.readdir(this.dir)).map(fileName => fileInfo(fileName, this.dir))
        var found = fileInfos.find(file => file.slug === slug)
        return found ? readFile(found) : null
    }
}
module.exports = DataLoader

The code above makes use of fs-extra module, providing us with the function that will complete node's default file system module, fs with additional functions.

In index.js, let's add our product loader:

// index.js
// Then, we will add a custom script that will read our products JSON files
const productsLoader = new DataLoader(
  path.join(
    __dirname,
    config.get('data.path'),
    'products')
)

Now that our data loader is set, we are ready to add our product data.

Since we do not have many products to sell and do not need a CMS, we will use JSON objects stored in memory.

If we ever need a database in the future, some great middleware such as koa-mongoose can easily be added.

In our app folder, we can now create our home.pug template displaying our products.

Please refer to the repo at the end of the GitHub models to see an example of product models.

// app/views/home.pug
each product in model.products
  h3=product.name
  p=product.description
  p
    span $#{product.price}
  a(href=/buy/${product._slug}) More details

Notice how I'm accessing the products array via model.products?

That's because, by default, koa-views pass the entire ctx.state object to your views. Nifty!

4. Creating our routes

Our template is now created and populated with products. All we need to do now is to configure our routes.

Since Koa.js does not come with a router by default, we will use the middleware koa-router.

Let's first set it up in index.js.

// in index.js
const Router = require('koa-router')
const router = new Router()
loadRoutes(router, productsLoader)
app.use(router.routes())

Now that our router is ready, let's add our home route to our application by connecting it to the home template we just designed:

// app/routes/home.js
module.exports = (router, productsLoader) => {
  router.get('/', async ctx => {
    const products = await productsLoader.all()
    ctx.state.model = {
      title: 'Hey there,',
      products: products
    }
    await ctx.render('home');
  })
}

Simple, isn't it?

We're simply loading all of our products and passing them down to the view via Koa's context object.

5. Enabling e-commerce on your Node.js app

How about selling these products? Let's first add Snipcart to our layout:

// app/views/_layout.pug
head
  link(rel="preconnect", href="https://app.snipcart.com")
  link(rel="preconnect", href="https://cdn.snipcart.com")
  link(rel="stylesheet", href="https://cdn.snipcart.com/themes/v3.0.30/default/snipcart.css")
// (...)
script(id="snipcart",
      src='https://cdn.snipcart.com/themes/v3.0.30/default/snipcart.js',
      data-api-key=settings.snipcartApiKey,
      data-config-modal-style="side"
    )

Add a link with the .snipcart-checkout CSS class somewhere in your layout. By clicking on the link, you should see the cart opening!

5.1 Creating the "buy" route

We are now ready to add the buy route. The code looks pretty similar to the home route, except that we're loading a single product:

// app/routes/buy.js
module.exports = (router, productsLoader) => {
  router.get("/buy/:slug", async ctx => {
    const product = await productsLoader.single(ctx.params.slug)
    if (product) {
      ctx.state.model = {
        title: product.name,
        product: product
      }
      await ctx.render('product')
    }
  })
}

In product.pug, add this button to hook your product definition to Snipcart:

// app/views/product.pug
button.snipcart-add-item(
  data-item-id=model.product.id
  data-item-name=model.product.name
  data-item-url=urlWithoutQuery
  data-item-price=model.product.price
  data-item-description=model.product.description
  data-item-image=model.product.image
) Add to cart

Well done, you can now sell your products!

5.2 Creating the "donate" route

Let's now make a page where users, rather than buying anything, will be able to donate an amount of their choosing.

We will have to use a trick to make it work.

When confirming an order, Snipcart crawls all the product URLs and validates items price to make sure nothing fishy happened to your cart.

To do that, Snipcart looks at the data-item-price attribute of your buy buttons.

Since donation amounts are customer-driven, we will have to add the number as a query parameter in the data-item-url buy button's attribute. Then, we will need to make sure that the value is rendered in the data-item-price attribute.

// app/routes/donate.js
const config = require('config')
module.exports = router => {
  router.get("/donate", async ctx => {
    ctx.state.model = {
      title: "Donate",
      amount: ctx.query.amount || config.get("settings.defaultDonation")
    }
    await ctx.render('donate')
  })
}

We have added an amount property to the model object and assign the query parameter to it.

Notice how we also used the settings.defaultDonation config value as a fallback when no query parameter is set.

Now, what about donate.pug? Define your elements as follows:

// app/view/donate.pug
label(for="amount") Please enter your donation amount below
input#amount.(type="number", value=model.amount)
button#donate.snipcart-add-item(
data-item-id="donation"
data-item-url=${urlWithoutQuery}?amount=${model.amount}
data-item-name="Donation"
data-item-description="Can't thank you enough!"
data-item-price=model.amount
data-item-shippable="false"
data-item-categories="donations"
data-item-max-quantity="1"
data-item-taxable=false
) Add to cart

Two things to note here:

data-item-url is fully generated using urlWithoutQuery and model.amount
data-base-url will be used in the script below to recompute data-item-url dynamically at runtime.

Finally, write a script that will use a javscript anonymous function to hook up the donation amount input to your buy button:

// app/static/scripts/donate.js
// mention integrating mongoose
const getUrl = window.location;
const baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];
(function () {
  document
    .querySelector('#amount')
    .addEventListener('change', function (evt) {
      const amount = evt.target.value
      let buyButton = document.querySelector('#donate')
      buyButton.dataset.itemPrice = amount
      buyButton.dataset.itemId = donation
      buyButton.dataset.itemUrl = ${baseUrl}?amount=${amount}
    })
})();

With that in place, any change made to the #amount field value will update the product URL.

6. Handling inventory

Obviously, our store does not have an unlimited amount of cactuses and milk caps. Plus, we currently do not use a CMS, let alone a database. So how will we manage our product inventory?

Snipcart will do it for us.

To do so, go to the products section of your Snipcart account and enter your website URL. Then, on the products page, select your products in the inventory section and add the available number of items for the given product.

At every completed transaction, Snipcart will reduce the number of the given product.

And you're all set!

Live demo & GitHub repo

See the live demo here

See GitHub repo here

Closing thoughts

Koa.js is a great minimalist Node.js framework. I enjoyed working with it very much.

Its API and API system are elegant and easy to learn yet allows for so much control with middleware extension. I definitely recommend this approach for any Node.js developer dealing with e-commerce.

To push it further, I could've used some cool community middlewares to make it look like a real production app (i.e., request caching, logging, a database connector, a sass preprocessor).

But what I take away from my experience with Koa.js is that it's a killer tool to build lean, performant, and maintainable web APIs.

Let me know what your thoughts are about this framework in the comments below!

Using Laravel for E-Commerce: Tutorial & Live Demo

Pierre-Guillaume Laurin — Thu, 04 Feb 2021 18:37:13 +0000

PHP is, in some ways, the backbone of the Internet. I mean, it is at the core of WordPress, which powers 39.9% of all the websites today. It is also used by the biggest social media; Facebook.

But I have to admit, I’ve never had the chance to explore it fully.

Today is the day I jump into PHP. However, I’ll begin my journey with the darling framework that is Laravel (I’ve heard it makes it easy to build secure, scalable full-stack projects from the start!).

More especially, I’ll try to build a Laravel-powered e-commerce web app.

Hopefully, this will show you the benefits Laravel can bring to your next e-commerce venture.

Here’s what the tutorial will cover:

Project Setup with Sail
Basic product listing generation, migration, and seeding
Using advanced models for product options
Front-end wiring
Integrating Snipcart

Time to put my PHP skills to test!

Laravel & e-commerce: quick context

Laravel is an open-source PHP web framework used to build sites & web apps.

It has a smooth learning curve, removes some quirks of building with PHP, and has many modern built-in libraries. Some say it's the Ruby on Rails PHP equivalent.

With Laravel, you can leverage Composer to manage dependencies & packages. Many useful packages allow you to fast-track your Laravel development. Think stuff like debugging, authentication, API interactions, etc. Sites like Packagist & Packalyst are great resources to find helpful Laravel packages.

Since September 2020, Laravel 8 is publicly available. It introduces features such as Laravel Jetstream, model factory classes, migration squashing, job batching, improved rate-limiting, dynamic Blade components, Tailwind pagination views, time testing helpers, and more.

Tools for e-commerce on Laravel?

Of course, there are existing e-commerce packages for Laravel. They can help to set up e-commerce functionalities on your Laravel app quickly.

Here’s a curated list of the most popular ones:

Bagisto — Code-driven & multi-featured Laravel package for e-commerce. Free & open-source.
Aimeos — A Laravel e-commerce package and online shop solution. Free & open-source.
AvoRed — A modular and customizable PHP shopping cart. Free & open-source.
Vanilo — This one’s actually an e-commerce framework (like Magento or Prestashop) for Laravel.
GetCandy — An headless Laravel e-commerce API. Free & open-source.

So, where does that lead us?

The three e-commerce options with Laravel are pretty much:

Pick a Laravel-powered CMS and add custom e-commerce to it.
Use e-commerce packages built to extend your app.
Build your own e-commerce application from the ground up.

First one? Fast & easy. That’s what we did for the first version of this post, using PyroCMS and then integrating Snipcart as the custom shopping cart.

Second one? Interesting. We might do it in another post at some point!

Third one? Close to what we're doing here. But building the whole application from the ground up, including e-commerce capabilities, would be highly time-consuming.

Instead, I’ll show you how you can build a store from scratch using pure Laravel and then adding Snipcart to enable e-commerce and shopping cart customization.

All these options have in common the benefits you’ll win overusing a full-on e-commerce CMS—high scalability, easy customization, detached e-commerce functionalities, etc.

I'm thrilled to be operating inside a Laravel project for this demo. Unlike many of our Jamstack/static site tuts, it'll be super easy to handle any backend logic for our store.

Tutorial: building an e-commerce website with Laravel

Prerequisites

I assume you already have a working installation of PHP and Composer running. If not, you can install them here and here.

For this tutorial, we will use Sail.

Introduced with Laravel 8, it is a light-weight command-line interface for interacting with Laravel’s default Docker development environment that will streamline our development environment and database setup. Sail will allow us to quickly setup a development environment and database completely isolated from our local environment.

Since Sail interacts with a Docker environment, that means you will also need Docker Desktop (a great tool for app development these days). If you prefer, of course, you could plug in a local SQL database or use Homestead from Laravel. The latter is an all-in-one vagrant image that allows you to get started quickly.

→ Read the full post here