How you can use Subsequent.JS with Shopware API Hiya Guys, At the moment on this weblog we’ll see all concerning the API integration of the Shopware product element web page with the Subsequent JS.
Shopware 6 is an open-source, content material administration system (CMS) that helps on-line retailers handle their stock and orders. It’s primarily based on Symfony Framework and Vue and is supported by a worldwide group.
First, we’ll have some dialogue about NextJS and start by introducing the idea of Shopware and its API.
What’s NextJS?
Subsequent Js is a full-stack net growth react framework. Which is a free and open-source front-end react library framework for constructing person interfaces primarily based on UI elements.
All of the options wanted to create a wide range of web sites and apps are offered by NextJs, together with routing, static and server rendering, static-side regeneration, and assist for Typescript.
For CSS design if you wish to make an excellent person interface you may select your required Dependencies for the design half.
About Shopware API
The Shopware API permits builders to work together with and combine Shopware with different programs and functions. It gives a set of companies that allow builders to carry out varied operations, comparable to managing merchandise, prospects, orders, and procuring carts.
Beginning Out
Setting up the challenge – The first step is to arrange this challenge. Try this Setup NextJS Undertaking weblog that explains every little thing about setting up a NextJS challenge. Additionally, we’re utilizing Tailwind CSS inside the Undertaking.
International Variable Setup – We’re going to create a file named .env within the root listing and add the next code.
//------------.env--------------// SHOPWARE_ENDPOINT=<SHOPWARE_ENDPOINT> APP_URL=https://myshopware.com/ SW_ACCESS_KEY=<SW_ACCESS_KEY> IMAGE_DOMAIN=<myshopware.com>
You additionally must outline setting variables in your subsequent.config.js file. If you don’t outline them, you received’t be capable to use these variables within the entrance finish.
/** @sort {import('subsequent').NextConfig} */
const nextConfig = {
env: {
SW_ACCESS_KEY: course of.env.SW_ACCESS_KEY,
SHOPWARE_ENDPOINT: course of.env.SHOPWARE_ENDPOINT,
IMAGE_DOMAIN: course of.env.IMAGE_DOMAIN,
},
photos: {
domains: [process.env.IMAGE_DOMAIN],
},
reactStrictMode: true,
}
module.exports = nextConfig
Be certain that you have the required API endpoint URLs (product, authenticate, and different parameters). To fetch information from the Shopware API, you want to make use of the Fetch operate or a library such as Axios.
API Response (The talked about picture demonstrates Shopware’s product element web page’s API response):
Create a Route file to Show the Product Element Web page:
The next code can be added to a file referred to as [urlKey].js that can be created in pages/product/[urlKey].js.
//---------------pages/product/[urlkey].js-----------//
import Picture from "subsequent/picture";
import React from "react";
const Product = ({ product }) => {
const { cowl, calculatedPrice, translated, availableStock } = product;
return (
<React.Fragment>
<div className="mt-6">
<div className="lg:px-24 md:px-12 px-3">
<div className="container mx-auto px-4">
<div className="lg:col-gap-12 xl:col-gap-16 mt-3 grid grid-cols-1 gap-12 lg:mt-12 lg:grid-cols-5 lg:gap-16">
<div className="lg:col-span-3 lg:row-end-1">
<div className="lg:order-2 ">
<div className="max-w-xl overflow-hidden rounded-lg">
<Picture
className="h-[70vh] mix-blend-darken"
src={cowl?.media?.url}
width={500}
top={230}
precedence={true}
alt="loading"
/>
</div>
</div>
</div>
<div className="lg:col-span-4 lg:row-span-2 lg:row-end-2">
<h1 className="sm: text-2xl font-bold text-gray-900 sm:text-3xl">
{translated.title}
</h1>
<div className=" mt-3">
<p className=" text-sm font-medium text-gray-500">
In Inventory : {availableStock}
</p>
</div>
<h2 className="mt-3 text-base text-gray-900">Description: </h2>
<div className="mt-3 flex select-none flex-wrap items-center gap-1">
<part>
<div
dangerouslySetInnerHTML={{
__html: translated.description.toString(),
}}
></div>
</part>
</div>
<div className="mt-10 flex flex-col items-center justify-between space-y-4 border-t border-b py-4 sm:flex-row sm:space-y-0">
<div className="flex items-end">
<h1 className="text-3xl font-bold">
${calculatedPrice.totalPrice}
</h1>
</div>
<button
sort="button"
className="inline-flex items-center justify-center rounded-md border-2 border-transparent bg-gray-900 bg-none px-12 py-3 text-center text-base font-bold text-white transition-all duration-200 ease-in-out focus:shadow hover:bg-gray-800"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="shrink-0 mr-3 h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="spherical"
strokeLinejoin="spherical"
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
/>
</svg>
Add to cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</React.Fragment>
);
};
export default Product;
export async operate getStaticPaths() {
let paths = [];
attempt {
const information = await fetchProduct();
const merchandise = information?.merchandise?.objects || [];
paths = merchandise.map((product) => ({
params: ,
}));
} catch (error) {
console.error("Error fetching information from API:", error);
}
return { paths, fallback: "blocking" };
}
export async operate getStaticProps({ params }) {
const productInfo = await fetchProduct(params?.urlKey);
if (productInfo.size > 0) {
return {
notFound: true,
};
}
return {
props: {
product: productInfo?.product,
},
revalidate: 100,
};
}
const fetchProduct = async (urlKey = null) => {
if (urlKey) {
const URL = `${course of.env.SHOPWARE_ENDPOINT}/product/${urlKey}`;
const response = await fetch(URL, {
technique: "POST",
headers: {
"Content material-Kind": "software/json",
Settle for: "software/json",
"sw-access-key": course of.env.SW_ACCESS_KEY,
},
physique: undefined,
});
if (response.standing !== 200) {
throw new Error(`API request failed with standing ${response.standing}`);
}
return response.json();
}
};
You may see the outcome on http://localhost:3000
Begin Shopware Headless Improvement with Webkul.
Completely happy Coding 🙂
