React.js E-Commerce Custom Integration

If you are looking for a React.js or Next.js based template for Headless commerce, this storefront is an excellent starting point for you.

Everything follows the Next.js structure

This project brings together React.js components to create a functional e-commerce theme that can be reused for building SSR e-commerce websites.

While building the template, we implemented patterns like transformers to facilitate connecting other APIs to the template.

This Next.js e-commerce template is useful even if you strip away other logic, as the main working pages can be copied and reused.

However, if you want to keep the project structure you can follow the next section to see how you can use it within your project.

A Quick Demo

If you want to see a quick local demo of the e-commerce react.js template, check this demo section.

React.js UI Components

This e-commerce template comes with more than 30+ React.js components that you can reuse and build your e-commerce website. React.js E-Commerce Components

API Transformers

Using the API transformer helped us make the application less dependent on components and data.

If you want to integrate this React.js template with your custom API, the transformer component of the project is a part that you need to make changes.

Product Transformer

For example, let's take a look at the product transformer. The ProductTransformer method reads the data fetched from the API and maps it to the structure that is used within the template components.

export const ProductTransformer = (data: ProductAPI): ProductType => {
  return {
    title: data.psdata.name,
    images: data.psdata.images ?? transformImages(data.psdata.default_image),
    price: data.psdata.price,
    options: transformOption({ groups: data.psdata.groups }).options,
    description: data.psdata.description,
    id: String(data.psdata.id_product),
    productAttributeId: data.psdata.id_product_attribute ?? null,
  };
};

Tips

We recommend using the storefront with the PrestaShop open-source platform, as it is fully compatible with its API and offers greater extensibility. For doing this, you can follow the getting started.