Forem: Commerce.js

Build your next commerce store with SvelteKit

Jamie Barton — Tue, 13 Jul 2021 08:56:15 +0000

In this short article we'll explore building a storefront with SvelteKit.

If you're new to Svelte, or SvelteKit, you should take a look at this article by Rich Harris explaining what the deal with SvelteKit is.

SvelteKit boasts a simple setup, run the following to initialize a new project:

npm init svelte@next my-commercejs-storefront
cd my-commercejs-storefront
npm install
npm run dev -- --open

Once your project is up and running, you'll want to install the @chec/commerce.js dependency.

npm install @chec/commerce.js

Then inside of the directory src/lib (you'll need to create it) add the file commerce.js. Here you'll want to instantiate @chec/commerce.js and add your PUBLIC API KEY.

import CommerceSDK from '@chec/commerce.js';

export const client = new CommerceSDK('pk_184625ed86f36703d7d233bcf6d519a4f9398f20048ec');

Storefront Index Page

Then all that's left to do inside of your .svelte files (such as index.svelte) is import the client and call the usual Commerce.js methods to get your products, categories, etc.

If we wanted to get all of our categories and products, it would look something like:

<script context="module">
  import { client } from '$lib/commerce.js';

  export async function load() {
    const { data: categories } = await client.categories.list();
    const { data: products } = await client.products.list();

    return {
      props: {
        categories,
        products
      }
    };
  }
</script>

<script>
  export let categories;
  export let products;
</script>

If you've used Sapper with Svelte before the above will look somewhat familiar, and if you've used other frontend frameworks like Next.js then returning your props will look even more so.

Then using the variables categories and products we'll output the values to a list.

<ul>
  {#each categories as category}
    <li>
      <a rel="prefetch" href="/categories/{category.slug}">{category.name}</a>
    </li>
  {/each}
</ul>

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="/product/{product.permalink}">{category.name}</a>
    </li>
  {/each}
</ul>

Category Pages

Now we'll create the page for each of our categories.

Inside of a new file src/routes/categories/[slug].svelte we'll add the following script module:

<script context="module">
  import { client } from '$lib/commerce.js';

  export async function load({ page }) {
    const { slug } = page?.params;

    const category = await client.categories.retrieve(slug, {
      type: 'slug'
    });

    const { data: products } = await client.products.list({ category_slug: [slug] });

    return {
      props: {
        category,
        products
      }
    };
  }
</script>

<script>
  export let category;
  export let products;
</script>

You'll notice above we're fetching the slug from the page params.

We then use this slug to retrieve the category from Commerce.js:

const category = await client.categories.retrieve(slug, {
  type: 'slug'
});

The same slug is used when fetching products from Commerce.js, but it is used as a filter:

const { data: products } = await client.products.list({ category_slug: [slug] });

Then all that's left to do on this page is return our category.name and list out the products belonging to that category:

<h1>{category.name}</h1>

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="/products/{product.permalink}">{product.name}</a>
    </li>
  {/each}
</ul>

That's it! You'll notice here we're returning a list of links to our products, so we'll create those pages next!

Product Pages

Similar to how we created the individual category pages, we'll do the same for products. But this time we'll call the file [permalink].svelte since we're linking to the product permalink from the index and category pages.

Add the following code to src/routes/products/[permalink].svelte:

<script context="module">
  import { client } from '$lib/commerce.js';

  export async function load({ page }) {
    const { permalink } = page?.params;

    const product = await client.products.retrieve(permalink, {
      type: 'permalink'
    });

    return {
      props: {
        product
      }
    };
  }
</script>

<script>
  export let product;
</script>

<h1>{product.name}</h1>

<p>{product.price.formatted_with_symbol}</p>

That it for our product! You now can link users to your individual product pages 😅

7. Create individual product pages - Create a Commerce.js store with Svelte

Jamie Barton — Sat, 17 Oct 2020 14:27:52 +0000

Now we've individual pages for categories, it's now time to create the important pages for products.

We can do this by creating a new file with the name [permalink].svelte inside the src/routes/products directory.

The file is called [permalink] because we'll be fetching Commerce.js products by their permalink. You could alternatively use the product id, but the permalink when customized is a bit more friendly.

Inside this file we'll make a call to commerce.products.retrieve() and pass into the first argument the permalink (from params), and then in the 2nd argument, we'll tell it the type is permalink.

Once we've retrieved the product by permalink, we'll export the necessary variables, and return the product name, and formatted price to the page.

<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload({ params }) {
    const { permalink } = params;

    const product = await commerce.products.retrieve(permalink, {
      type: "permalink",
    });

    return {
      product,
    };
  }
</script>

<script>
  export let product;
</script>

<h1>{product.name}</h1>

<p>{product.price.formatted_with_symbol}</p>

🎉 Great!

You should see after running npm run dev all of what we've built so far at http://localhost:3000.

We'll next explore using Commerce.js to add products to cart, and checkout.

6. Create a individual category page - Create a Commerce.js store with Svelte

Jamie Barton — Sat, 17 Oct 2020 14:27:02 +0000

Now that we've pages for all products and categories, it's time to create the individual pages for categories.

Using Sappers dynamic routes, we can create a new file inside src/routes/categories called [slug].svelte that works just like Nuxt and Next.js by passing this down as page params.

Inside src/routes/categories/[slug].svelte, we can use Commerce.js to:

Fetch the individual category by slug
Fetch all products that belong to this category

We'll perform the requests inside the exported async function preload, and return those to the page.

const category = await commerce.categories.retrieve(slug, {
  type: "slug",
});

const { data: products } = await commerce.products.list({
  category_slug: slug,
});

It's important we export both of these inside the page <script /> tag so we can access it in the template.

Then on the page we will display the category name, followed by all products with links to the individual pages.

<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload({ params }) {
    const { slug } = params;

    const category = await commerce.categories.retrieve(slug, {
      type: "slug",
    });
    const { data: products } = await commerce.products.list({
      category_slug: slug,
    });

    return {
      category,
      products,
    };
  }
</script>

<script>
  export let category;
  export let products;
</script>

<h1>{category.name}</h1>

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="products/{product.permalink}">{product.name}</a>
    </li>
  {/each}
</ul>

5. Create a categories index page - Create a Commerce.js store with Svelte

Jamie Barton — Sat, 17 Oct 2020 14:26:07 +0000

Just like we did for categories, we'll do the same for listing all categories.

Inside src/routes, create the directory categories, and a new file index.svelte.

As you can probably guess, it's here we will fetch all categories using Commerce.js.

<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload() {
    const { data: categories } = await commerce.categories.list();

    return {
      categories,
    };
  }
</script>

<script>
  export let categories;
</script>

<h1>Categories</h1>

<ul>
  {#each categories as category}
    <li>
      <a rel="prefetch" href="categories/{category.slug}">{category.name}</a>
    </li>
  {/each}
</ul>

Before we continue, let's add a link to the /categories page on our root index page.

Above where we list categories, add the following:

<h3><a href="/categories">Categories</a></h3>

4. Create a products index page - Create a Commerce.js store with Svelte

Jamie Barton — Sat, 17 Oct 2020 14:25:36 +0000

Let's now create a dedicated page just for listing, and linking to product pages.

Inside the src/routes directory, create a the directory products, and file index.svelte.

This file will serve /products in the browser.

Just like we did before on the root index page, we can import the commerce.js instance, and fetch our products.

<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload() {
    const { data: products } = await commerce.products.list();

    return {
      products,
    };
  }
</script>

<script>
  export let products;
</script>

<h1>Products</h1>

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="products/{product.permalink}">{product.name}</a>
    </li>
  {/each}
</ul>

Since Sapper code splits your project per route, the special rel="prefetch" tells Sapper to start prefetching the data before navigating for the page.

Before we continue, let's add a link to the /products page on our root index page.

Above where we list products, add the following:

<h3><a href="/products">Products</a></h3>

3. Create homepage of categories and products - Create a Commerce.js store with Svelte

Jamie Barton — Sat, 17 Oct 2020 14:24:59 +0000

Let's first create an index page of all the data we need to build our store with Svelte.

Inside /src/routes/index.svelte we'll doing the following:

Fetch all merchant information using commerce.merchants.about()
Fetch all categories using commerce.categories.list()
Fetch all products using commerce.products.list()
List our merchant business name
List all categories, and products, with dynamic links to both

<script context="module">
import commerce from "../lib/commerce.js";

export async function preload() {
  const merchant = await commerce.merchants.about();
  const { data: categories } = await commerce.categories.list();
  const { data: products } = await commerce.products.list();

  return {
    merchant,
    categories,
    products,
  };
}
</script>

<script>
export let merchant;
export let categories;
export let products;
</script>

<h1>{merchant.business_name}</h1>

<ul>
  {#each categories as category}
    <li>
      <a rel="prefetch" href="categories/{category.slug}">{category.name}</a>
    </li>
  {/each}
</ul>

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="products/{product.permalink}">{product.name}</a>
    </li>
  {/each}
</ul>

2. Create a Commerce.js instance - Create a Commerce.js store with Svelte

Jamie Barton — Sat, 17 Oct 2020 14:24:20 +0000

Before we begin writing any code, let's first create an instance of Commerce.js we can share around our application to fetch products, categories, and merchant information.

Inside your terminal, install @chec/commerce.js:

npm install -E @chec/commerce.js

Now, inside src, create a new directory lib, and add the file commerce.js. We'll follow the Commerce.js docs on instantiating the SDK, and export it as client.

// src/lib/commerce.js
import CommerceSDK from "@chec/commerce.js";

const client = new CommerceSDK(
  "..." // Insert your Commerce.js Public API Key
);

export default client;

If you don't want to create an account with Commerce.js to follow along with this tutorial, you can use the demo store public key pk_184625ed86f36703d7d233bcf6d519a4f9398f20048ec.

1. Initial setup - Create a Commerce.js store with Svelte

Jamie Barton — Sat, 17 Oct 2020 14:23:50 +0000

Svelte describes itself as a radical new approach to building UIs. Svelte takes a unique approach of moving the heavy-lifting from the browser to the compiler at build time.

Svelte doesn't rely on a virtual DOM, but instead is intelligent at writing code to update the actual DOM when the state of your app changes.

Svelte is a great choice for commerce due to how small files are. Product pages that load quicker are great for conversions.

In this tutorial we will touch on some of the basic "before cart/checkout" APIs available from Commerce.js.

Let's start by creating a new Svelte Sapper project using the sapper-template repository.

Don't forget to give your project a name by replacing sapper-commercejs-example:

npx degit "sveltejs/sapper-template#rollup" sapper-commercejs-example

Once it's cloned, cd into the directory, and install the dependencies.

cd sapper-commercejs-example
npm install

Now you're ready to go!

If you make any changes to the .svelte route files you should see this reflected in the browser. Do npm run dev and head to localhost:3000 🚀

💡 Feel free to remove any unwanted files, styles, or folders from the boilerplate. I'll go ahead and remove all routes, and components.

In the next step we'll install the @chec/commerce.js dependency.

Create static commerce sites with Gatsby

Andrew Underwood — Fri, 09 Oct 2020 22:05:18 +0000

Today we are excited to introduce a new way you can query products with Commerce.js when building static sites with Gatsby.

Static Site Generators (SSGs) really took off in 2019. One of the most notable SSGs to dominate the space has been Gatsby. Gatsby is a React-based, open source framework for creating websites and apps.

However, don’t be fooled by Static Site Generators. While they offer huge benefits for decreasing the time it takes for your product pages to load, it doesn’t mean they’re static. Once loaded, your blazing-fast static eCommerce store transforms via React hydration, giving you a real app-like look and feel, with a sprinkle of Commerce.js for managing cart and checkout.

With Gatsby now being a staple for front-end developers, we’ve made a Gatsby source plugin and are excited to get this into the hands of as many developers as possible. We’ve even seen community contributions for other SSGs since we started working on this, so it’s clear that this area is moving fast.

The Gatsby ecosystem consists of plugins, source plugins, and themes. Plugins enable you to inject scripts like Commerce.js, and source plugins allow you query data from almost any data source using GraphQL, meanwhile themes allow you to embed full Gatsby sites inside your existing Gatsby site.

We built the @chec/gatsby-source plugin to remove the boilerplate we’ve seen Commerce.js users write over the last year when working with Gatsby. We invite you to give it a try, and submit any feedback you have.

If you’re running a Gatsby site already, it’s incredibly easy to enable commerce to your project. Simply install the source plugin and query for products, categories, and information about your merchant account.

Step 1 - Install

npm install @chec/gatsby-source-chec # yarn add @chec/gatsby-source

Step 2 - Configure

// In your gatsby-config.js
plugins: [
  {
    resolve: '@chec/gatsby-source-chec',
    options: {
      publicKey: '...'
    }
  }
]

Step 3 - Query

{
  checMerchant {
    id
    business_name
  }

  allChecCategory {
    nodes {
      name
      slug
      description
      created
      id
    }
  }

  allChecProduct {
    nodes {
        id
        name
        price {
            formatted_with_symbol
        }
      }
  }
}

The best place to get started exploring query types is GraphiQL. Explore the Chec query types, and start building your website or app.

We’ve also made it even easier to work with Gatsby Image by automatically downloading product image assets, and creating local nodes for each. This means you can take advantage of all the features Gatsby Image brings, and serve product images even quicker alongside your static site.

To opt-in to downloading image assets automatically, enable downloadImageAssets inside your plugin options.

// In your gatsby-config.js
plugins: [
  {
    resolve: '@chec/gatsby-source-chec',
    options: {
      publicKey: '...',
      downloadImageAssets: true
    }
  }
]

You can see an example in the source plugin repository here, and watch a short video series on building with this plugin.

If you’re new to Gatsby, they have a handful of useful recipes to get started - start building with Gatsby today.

Introducing: HeadlessCommerce.org

Andrew Underwood — Mon, 29 Jun 2020 18:30:15 +0000

We're excited to introduce the launch of HeadlessCommerce.org, a community-curated list of best-in-class headless tools, technologies, and resources for website builders and businesses owners.

If your business is fast-moving, complex, or just ambitious, a headless commerce strategy will help you serve your customers faster, approach businesses problems creatively, and stay resource lean.

Why we built HeadlessCommerce.org

As an industry, “eCommerce” has become highly stratified, not to mention the “e” is a bit irrelevant now, so we built HeadlessCommerce.org for businesses and developers who want to explore and discover modern commerce technologies, and their complementary services.

At Chec and Commerce.js, we’re helping businesses navigate this shift to a headless stack. We believe that businesses, big and small, built on top of monolithic platforms will be left behind by modular, decoupled, API-driven businesses who can be anywhere and move quickly. So to accelerate this shift, we’re set on helping others in the community to discover and asses suitable tools for projects.

We want HeadlessCommerce to be the hub people go to when looking to decouple their business or starting a new headless project.

How you can use it

We’ve made it easy to browse the list with Categories and Filters. You can also bookmark resources to save for later reference.

If you think there are resources that play nice in the headless ecosystem and that we have missed, please feel free to add a recommendation.

What’s next

We’ve got plenty of ideas of how we can make HeadlessCommerce.org more valuable for developers and decision-makers. If you’ve got an idea you’d like to share or just want to give feedback, email us at hello@headlesscommerce.org.

You can read more about Chec/Commerce.js over on our blog.

Add customers as people to Drip on checkout

Jamie Barton — Fri, 29 May 2020 05:34:10 +0000

Drip is great at email marketing automation. One of the quickest ways to start using Drip is to add your customers to a list for marketing purposes.

API platforms like Chec, and JS SDKs like Commerce.js give you all you need to get started implementing commerce in your frontend.

When it comes to email automation and marketing, there are dozens of tools to deal with our subscriber lists. Drip stands out for its ability to manage cart abandonment and orders, but we'll explore those later!

In this post, we'll add a new custom field to Chec, and we'll use the Chec Spaces to create a test order, and Chec webhooks to send our data to Drip.

1. Sign up to Drip

You'll need an account with Drip, and your Account ID and API Key.

2. Sign up to Vercel

Vercel, (previously known as Zeit) are a serverless hosting platform, and we'll be using it to run our webhook locally and deploy.

You'll also need to install the Vercel CLI to follow along.

3. Create a new project

Now we're ready to rock, let's start by creating a new directory for our project.

mkdir chec-add-customer-to-drip
cd chec-add-customer-to-drip

It's also worth at this point linking the directory to Vercel.

now

The Now CLI will ask you which folder you want to link, to what account and any build instructions. All we need is to accept the defaults when asked.

Next, we'll install our dependencies:

yarn init -y # npm init -y
yarn add drip-nodejs -E # npm install drip-nodejs

Then create the following file api/subscribe.js and save the following contents:

// api/subscribe.js
module.exports = async (req, res) => {
  res.send('Hello world')
}

Now run now dev and you should see that we're running on http://localhost:3000!

Ready! Available at http://localhost:3000

To see our response Hello world, we'll need to append /api/subscribe to http://localhost:3000.

Open http://localhost:3000/api/subscribe to see our response!

Before we continue writing any code, there's some configuration we need to do at Chec.

4. Setup Chec custom fields

Inside the Chec Dashboard, head to Setup > Data and click + Add Data Field.

Give the field a name of Accepts Marketing, make it optional and select Checkbox from the dropdown.

Click Save Collected Data Settings when done.

5. Setup Chec webhooks

When a new order is created with Chec/Commerce.js, it will trigger a webhook. It's important we configure a webhook to listen to the event orders.create and attach a URL to send the payload onto.

Since we don't have access to localhost from the outside world natively, we'll use a service called ngrok to do this for us.

Make sure to install ngrok, and run the now development server using now dev.

Once the Now CLI has started the server and it's confirmed that it's active on localhost:3000, run the following command to create a tunnel to PORT 3000 with ngrok.

ngrok http 3000

Note: You will need to specify another PORT if Now is running on anything else but 3000.

You should see a response that looks a little something like the following. Copy your Forwarding address.

Now let's configure Chec to listen to orders.create event and add the URL given to us by the ngrok CLI.

Inside the Chec Dashboard, head to Setup > Webhooks and + Add webhook.

Select orders.create from the Event(s) dropdown.
Paste your forwarding address into the URL input, and append /api/subscribe.
Click add webhook

6. Send to Drip

All that's left to do is write some code that gets the customer email from our orders payload (sent via Chec webhooks) and add this to Drip, ONLY when extrafields has a field for Accepts Marketing.

Let's see what the code looks like...

// api/subscribe.js
const client = require("drip-nodejs")({
  token: "YOUR_DRIP_API_TOKEN",
  accountId: "YOUR_DRIP_ACCOUNT_ID",
});

module.exports = async ({ body }, res) => {
  try {
    const {
      payload: {
        customer: { email },
        extrafields,
      },
    } = body;

    if (!extrafields.find((field) => field.name === "Accepts Marketing"))
      return res
        .status(200)
        .json({ statusCode: 200, message: "No action required" });

    await client.createUpdateSubscriber({ email });

    res.status(201).json({
      statusCode: 201,
      message: `Subscribed successfully`,
    });
  } catch (err) {
    res.status(400).json(err);
  }
};

In the above code we're checking the extrafields array for any object that contains the name Accepts Marketing. If it doesn't, we simply return, as there's nothing for us to do!

7. Start your engines!

Now it's time to take our serverless function for a ride!

Providing you have at least one product in your Chec inventory, head to your Chec Space (link in your Dashboard sidebar), and add a product to the cart and checkout.

The Chec Spaces product will automatically show the custom field we created earlier, but you can also pass the custom field along when capturing an order via Commerce.js or the API directly.

Let's use the Spaces product for the sake of testing our function.

Thankfully we can use a test card 4242 4242 4242 4242 to complete the checkout without paying any money 😅

Once you click Pay, and the order is confirmed, you should see the order inside the Chec Dashboard.

And finally, you should see the email inside the Drip "people" tab.

8. Deploying

Before deploying it to Vercel by typing now, you might want to consider the following before you do so;

Configure Git repo with Vercel for continuous deployment
Configure ENVs with Vercel instead of pushing your keys to source control
Change the webhook URL in Chec to your Vercel deployment URL
Check your Chec webhook signature and age to prevent unauthorized requests

That's it! 🤩

I hope to explore more of Drip in future guest posts.

PS. Thanks to the Commerce.js team for allowing me to post this content to their Dev.to org. I've been super impressed how responsive the team have been as I've been badgering them while exploring their product. ❤️

Part 1 - Algolia powered product search with Commerce.js

Jamie Barton — Mon, 27 Apr 2020 16:19:05 +0000

In this series we will create an Algolia powered faceted product search for Chec. Chec (or also known as Commerce.js) is a eCommerce API that gives you ultimate flexibility when building a frontend for your store.

Throughout this tutorial series we will be using:

Each time a product is created, updated or deleted, we will update Algolia to reflect those changes and searching products super easy for our users!

Because Chec has a hosted storefront (or "space"), we'll link all our products to the storefront page where users can proceed to pay for them!

1. Signup to Algolia

In this first step, create an account with Algolia, or login if you have an account already.

Next create a new application in Algolia. If you're signing up for the first time, this will be part of the onboarding process.

Once we've an application, Algolia will ask you to create an index. Make sure to call this products, as we'll need this later.

Finally, you'll need your Application ID, Search-Only API Key and Admin API Key

2. Setup Next.js

We'll store all our server side and client side code inside our Next.js application. If you're experienced with Next, and have a project already, you can probably skip to installing the algolia dependencies below.

To create a new Next.js project, you can quickly get started using the CLI:

npm init next-app
# or
yarn create next-app

Once your project folder has been created, change directory and open your code editor.

cd your-project-name

3. Configure our webhook endpoint

We'll be configuring Chec next to send our product payload to our Next.js application so we can send this onto Algolia.

Start by installing the algoliasearch NPM dependency:

npm install algoliasearch
# or
yarn add algoliasearch

Now let's create the file algolia.js inside a new folder called api inside the existing pages folder.

mkdir pages/api
touch pages/api/algolia.js

Inside pages/api/algolia.js let's first initialize the algoliasearch dependency and assign it to client.

You'll need your Application ID and Admin API Key to do this!

import algoliasearch from "algoliasearch"

const client = algoliasearch("APPLICATION_ID", "ADMIN_API_KEY")

To confirm this is configured and working, let's initialize the products index and add a new object to the index.

Below our client definition, add:

const algoliaHandler = async (req, res) => {
  const index = client.initIndex('products')

  const product = await index.saveObject({
    objectID: 'myId',
    name: 'Sneakers',
    price: 1000
  })

  res.send(product)
}

export default algoliaHandler

Now let's try it out! Now start Next.js...

npm run dev
# or
yarn dev

... and go to http://localhost:3000/api/algolia. You should see your objectID returned along with a taskID.

If you open the application on Algolia, and browse the products Indicies, you should see the record here also!

Great! 🎉 We now have a successful serverless function that is connecting to Algolia.

4. Configure Chec webhooks

In order to properly sync data to Algolia from Chec, we need to configure our webhook and listen for the following events:

products.create
products.update
products.delete

Now head to the Chec Merchant Dashboard and go to Setup > Webhooks, and click + Add Webhook.

First select the Events we need to watch for.

Since we can't forward requests from the outside world to localhost:3000, we'll use a CLI tool called ngrok to get a URL that will handle tunnelling requests for us.

Once you've installed ngrok, inside a new terminal run:

ngrok http 3000

Remember: We have Next.js running on port 3000, so that's why we're forwarding requests there.

When ngrok is running, you'll get a Forwarding address.

Let's use the http forwarding address and add append /api/algolia to the URL, and Add webhook!

Next we'll need to update our /api/algolia.js function to correctly handle the payload from Algolia and pass it on!

5. Inspecting the Chec payload

Once you create a new product via the Chec API, the URL we provided to ngrok (localhost:3000) will be invoked.

The payload will tell us if a product was created, updated or deleted, and we can use this perform the appropriate action with our Algolia client.

If a product is created or updated, we'll want to use index.saveObject() but if a product is deleted, we'll need to use index.deleteObject().

Example payload

{
  "id": "wbhk_QO3bR5XAlnzdjX",
  "created": 1587214321,
  "event": "products.create",
  "response_code": 201,
  "payload": {
    "id": "prod_4OANwRKEbovYL8",
    "created": 1587897613,
    "last_updated": 1587897613,
    "active": true,
    "permalink": "g9eASZ",
    "name": "My other test product",
    "description": null,
    "price": {
      "raw": 10,
      "formatted": "10.00",
      "formatted_with_symbol": "£10.00",
      "formatted_with_code": "10.00 GBP"
    },
    "quantity": 0,
    "media": [],
    "sku": null,
    "meta": [],
    "conditionals": {
      "is_active": true,
      "is_free": false,
      "is_tax_exempt": false,
      "is_pay_what_you_want": true,
      "is_quantity_limited": false,
      "is_sold_out": false,
      "has_digital_delivery": false,
      "has_physical_delivery": false,
      "has_images": false,
      "has_video": false,
      "has_rich_embed": false,
      "collects_fullname": false,
      "collects_shipping_address": false,
      "collects_billing_address": false,
      "collects_extrafields": false
    },
    "is": {
      "active": true,
      "free": false,
      "tax_exempt": false,
      "pay_what_you_want": true,
      "quantity_limited": false,
      "sold_out": false
    },
    "has": {
      "digital_delivery": false,
      "physical_delivery": false,
      "images": false,
      "video": false,
      "rich_embed": false
    },
    "collects": {
      "fullname": false,
      "shipping_address": false,
      "billing_address": false,
      "extrafields": false
    },
    "checkout_url": {
      "checkout": "https://checkout.chec.io/g99ASZ?checkout=true",
      "display": "https://checkout.chec.io/g99ASZ"
    },
    "categories": [],
    "urls": {
      "product": "/v1/products/prod_4OANwRKEbovYL8"
    }
  },
  "signature": "60eecbb88efa2c712204e3b0214dffb0317e297cbc01a6b592ca4287c4177cb9"
}

6. Syncing with Algolia

From the example payload above, we'll toggle our behaviour on the event value, and using JavaScript, we can split on . and get the action create, update or delete.

The product object is also inside the payload object which we can use to identify the correct record in our index.

Now, within the algoliaHandler function inside pages/api/algolia.js and after we initialize our Algolia client, replace the example code we wrote before with the following:

const { event, payload } = req.body
const [ _, eventType ] = event.split('.')
const { id: objectID, ...product } = payload

Here we're destructuring id from payload, and renaming it to objectID, then spreading the rest of the payload into product.

Algolia requires each record in the index to have a objectID value, so it makes sense to use our product ID for this.

Deleting products from Algolia

Let's first handle deleting our product from the index if the event type is product.deleted.

Let's add the following inside our function below the above code:

if (eventType === 'delete') {
  await index.deleteObject(objectID)
  return res.status(202).end()
}

Adding/Updating products to Algolia

If eventType is not delete, then we'll next have to handle calling the saveObject function.

We'll check if the eventType is next either create or update and call the saveObject method.

if (['create', 'update'].includes(eventType)) {
  await index.saveObject({ objectID, ...product })
  return res.status(200).send({ success: true })
}

Next, eventType is not create, update or delete, then let's return a message. You could do some special logging here to get notified when an index fails, but I'll leave that up to you!

res.send({
  message: `Event type ${eventType} is not a valid trigger`
})

Our pages/api/algolia.js function should look like...

import algoliasearch from "algoliasearch"

const client = algoliasearch("APPLICATION_ID", "ADMIN_API_KEY")

const algoliaHandler = async (req, res) => {
  const index = client.initIndex("products")

  const { event, payload } = req.body
  const [_, eventType] = event.split(".")
  const { id: objectID, ...product } = payload

  if (eventType === "delete") {
    await index.deleteObject(objectID)
    return res.status(202).end()
  }

  if (["create", "update"].includes(eventType)) {
    await index.saveObject({ objectID, ...product })
    return res.status(200).send({ success: true })
  }

  res.send({
    message: `Event type ${eventType} is not a valid trigger`,
  })
}

export default algoliaHandler

Let's test the above works!

7. Triggering our webhook!

Now let's use cURL to create, update and delete Chec products. You could also run the same command with Postman, Insomnia, etc.

Add a new product

🚨 Make sure to replace SECRET_KEY_HERE with your Chec Secret Key!

curl --location --request POST 'https://api.chec.io/v1/products' \
--header 'X-Authorization: SECRET_KEY_HERE' \
--header 'Content-Type: application/json' \
--data-raw '{
    "product": {
        "name": "My test product",
        "price": 1000
    }
}'

The response will look a little something like:

{"id":"prod_4WJvlK6Rx5bYV1","created":1587897846,"last_updated":1587897846,"active":true,"permalink":"b5BKLR","name":"My test product","description":null,"price":{"raw":1000,"formatted":"1,000.00","formatted_with_symbol":"\u00a31,000.00","formatted_with_code":"1,000.00 GBP"},"quantity":0,"media":[],"sku":null,"meta":[],"conditionals":{"is_active":true,"is_free":false,"is_tax_exempt":false,"is_pay_what_you_want":false,"is_quantity_limited":false,"is_sold_out":false,"has_digital_delivery":false,"has_physical_delivery":false,"has_images":false,"has_video":false,"has_rich_embed":false,"collects_fullname":false,"collects_shipping_address":false,"collects_billing_address":false,"collects_extrafields":false},"is":{"active":true,"free":false,"tax_exempt":false,"pay_what_you_want":false,"quantity_limited":false,"sold_out":false},"has":{"digital_delivery":false,"physical_delivery":false,"images":false,"video":false,"rich_embed":false},"collects":{"fullname":false,"shipping_address":false,"billing_address":false,"extrafields":false},"checkout_url":{"checkout":"https:\/\/checkout.chec.io\/b5BKLR?checkout=true","display":"https:\/\/checkout.chec.io\/b5BKLR"},"categories":[],"urls":{"product":"\/v1\/products\/prod_4WJvlK6Rx5bYV1"}}

If you open the Algolia Indices, you should see a new record for our new Chec product!

Update an existing product

🚨 Make sure to replace SECRET_KEY_HERE with your Chec Secret Key AND replace prod_4WJvlK6Rx5bYV1 with your product ID!

Using the id from the response above, let's now update the product price!

curl --location --request PUT 'https://api.chec.io/v1/products/prod_4WJvlK6Rx5bYV1' \
--header 'X-Authorization: SECRET_KEY_HERE' \
--header 'Content-Type: application/json' \
--data-raw '{
    "product": {
        "name": "My test product",
        "price": 2000
    }
}'

If you open the Algolia Indices, you should see the updated product record with our new price!

Delete an existing product

🚨 Make sure to replace SECRET_KEY_HERE with your Chec Secret Key AND replace prod_4WJvlK6Rx5bYV1 with your product ID!

curl --location --request DELETE 'https://api.chec.io/v1/products/prod_4WJvlK6Rx5bYV1' \
--header 'X-Authorization: SECRET_KEY_HERE'

The response will look like:

{
  "id": "prod_4WJvlK6Rx5bYV1",
  "deleted": true
}

If you open the Algolia Indices, you will now notice the record has been removed!

What's next?

Now we've a successful function that is triggered every time our Chec product catalog is modified, we can move onto creating a UI using Algolia InstantSearch to filter our products!