{"id":399533,"date":"2023-09-13T14:23:48","date_gmt":"2023-09-13T14:23:48","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=399533"},"modified":"2026-03-11T11:52:02","modified_gmt":"2026-03-11T11:52:02","slug":"how-to-create-a-product-page-using-cs-cart-api-in-nextjs","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/how-to-create-a-product-page-using-cs-cart-api-in-nextjs\/","title":{"rendered":"How to create a Product page using CS-Cart API in NextJs"},"content":{"rendered":"\n

Hello Guys,<\/em> Today in this blog we will see all about the API integration in the cs-cart product detail page with the next js so hope this blog will be interactive for you so let’s get started.<\/p>\n\n\n\n

CS-Cart Overview:<\/strong> CS-Cart<\/a> is a popular e-commerce platform that allows businesses to create and manage online stores.<\/p>\n\n\n\n

One of the key strengths of CS-Cart is its flexibility, which includes an API that enables developers to extend and customize the platform’s functionality.<\/p>\n\n\n\n

Creating a Product Page Using CS-Cart API in Next.js:<\/strong><\/h2>\n\n\n\n

In this comprehensive guide, we will explore how to create a product page using CS-Cart API<\/a> in a Next.js application. <\/p>\n\n\n\n

For CSS design if you want to make a good user interface you can choose your desired Dependencies for the design part.<\/p>\n\n\n\n

We will break down the process into several steps, providing code examples and explanations along the way.<\/p>\n\n\n\n

Step 1: Project Setup <\/strong>– <\/h2>\n\n\n\n

In the first step you have to set up this project You can follow this setup nextjs project<\/a> blog that covers all about the next js project setup.<\/p>\n\n\n\n

Step 2: Global Variable Setup –<\/strong><\/h2>\n\n\n\n

We\u2019re going to create a file named .env in the root directory and add the following code.<\/p>\n\n\n\n

\/\/------------.env--------------\/\/\napiUrl: 'YOUR_CS_CART_API_URL_HERE',\napiKey:'YOUR_API_KEY_HERE'\nanayze:true<\/pre>\n\n\n\n
Again we also need to define the environment variables in our next.config.js file otherwise we will not be able to use these variables at the front-end.

<\/p>\n\n\n\n
module.exports = withBundleAnalyzer(nextConfig);\n\/\/------------next.config.js-----------\/\/\n\/** @type {import('next').NextConfig} *\/\nconst path = require('path');\nconst withBundleAnalyzer = require('@next\/bundle-analyzer')({\n  enabled: process.env.anayze === 'true',\n});\nconst nextConfig = {\n env: {\n apiUrl: process.env.apiUrl, \n apiKey: process.env.apiKey }, \n reactStrictMode: true,\n  },\n  reactStrictMode: true,\n};\nmodule.exports = withBundleAnalyzer(nextConfig);<\/pre>\n\n\n\n

<\/p>\n\n\n\n
Step 3: Install Dependencies<\/strong> – <\/h2>\n\n\n\n
In this step, you can install all necessary species for your project In our case we just need tailwind-css<\/a> for basic design. <\/p>\n\n\n\n
Step 4. API Response  –<\/strong> <\/h2>\n\n\n\n
below mentioned image demonstrates the  product detail page’s API response <\/p>\n\n\n\n
\"postman__api_response-1-1\"<\/figure>\n\n\n\n
Step 5: Create a Component for the Product Page<\/strong> –<\/h2>\n\n\n\n
Inside the pages<\/code> directory of your Next.js project, create a new folder called product and under it [urlkey].js for the dynamic route, <\/p>\n\n\n\n
This file will contain the code for your product detail page & component.<\/p>\n\n\n\n
\/\/---------------pages\/product\/[urlkey].js-----------\/\/\nimport React, { useEffect, useState } from "react";\nimport {useRouter} from "next\/router"\nexport default function ProductPage() {\n  const router = useRouter\n  const [isLoading, setLoading] = useState(true);\n  const [data, setData] = useState(null);\n  const id = router.query.urlkey\n  useEffect(() => {\n    const apiUrl = process.env.apiUrl+`api\/productDetails\/${id};\n    const apiKey = process.env.apiKey;\n\n    fetch(apiUrl, {\n      headers: {\n        Authorization: `Bearer ${apiKey}`,\n      },\n    })\n      .then((response) => {\n        setLoading(false);\n        setData(json.response(response.data));\n      })\n      .catch((error) => {\n        console.error("Error fetching product data:", error);\n        setLoading(false);\n        setData(null);\n      });\n  }, []);\n\n  const ProdcutDetail = (props) => {\n    const data = props?.props || null;\n    return (\n      <React.Fragment>\n        <div className="mt-6">\n          <div classname="lg:px-24 md:px-12 px-3">\n            <div className="container mx-auto px-4">\n              <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">\n                <div className="lg:col-span-3 lg:row-end-1">\n                  <div className="lg:order-2 ">\n                    <div className="max-w-xl overflow-hidden rounded-lg">\n                      <Image\n                        className="h-[70vh]"\n                        src={data?.main_pair?.main}\n                        width={500}\n                        height={230}\n                        priority={true}\n                        alt="loading"\n                      \/>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <div className="lg:col-span-4 lg:row-span-2 lg:row-end-2">\n                  <h1 className="sm: text-2xl font-bold text-gray-900 sm:text-3xl">\n                    {data?.product}\n                  <\/h1>\n                  <div className=" mt-3">\n                    <p className=" text-sm font-medium text-gray-500">\n                      In Stock : {data?.max_qty}\n                    <\/p>\n                  <\/div>\n                  <h2 className="mt-3 text-base text-gray-900">Details <\/h2>\n                  <div className="mt-3  flex select-none flex-wrap items-center gap-1">\n                    <section>\n                      <p\n                        dangerouslySetInnerHTML={{\n                          __html: data?.full_description,\n                        }}\n                      ><\/p>\n                    <\/section>\n                  <\/div>\n\n                  <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">\n                    <div className="flex items-end">\n                      <h1 className="text-3xl font-bold">\n                        ${parseFloat(data.price)}\n                      <\/h1>\n                    <\/div>\n                    <button\n                      type="button"\n                      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"\n                    >\n                      <svg\n                        xmlns="http:\/\/www.w3.org\/2000\/svg"\n                        className="shrink-0 mr-3 h-5 w-5"\n                        fill="none"\n                        viewBox="0 0 24 24"\n                        stroke="currentColor"\n                        strokeWidth={2}\n                      >\n                        <path\n                          strokeLinecap="round"\n                          strokeLinejoin="round"\n                          d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"\n                        \/>\n                      <\/svg>\n                      Add to cart\n                    <\/button>\n                  <\/div>\n                  <ul className="mt-8 space-y-2">\n                    <li className="flex items-center text-left text-sm font-medium text-gray-600">\n                      <svg\n                        className="mr-2 block h-5 w-5 align-middle text-gray-500"\n                        xmlns="http:\/\/www.w3.org\/2000\/svg"\n                        fill="none"\n                        viewBox="0 0 24 24"\n                        stroke="currentColor"\n                      >\n                        <path\n                          strokeLinecap="round"\n                          strokeLinejoin="round"\n                          strokeWidth={2}\n                          d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"\n                          className\n                        \/>\n                      <\/svg>\n                      Free shipping worldwide\n                    <\/li>\n                    <li className="flex items-center text-left text-sm font-medium text-gray-600">\n                      <svg\n                        className="mr-2 block h-5 w-5 align-middle text-gray-500"\n                        xmlns="http:\/\/www.w3.org\/2000\/svg"\n                        fill="none"\n                        viewBox="0 0 24 24"\n                        stroke="currentColor"\n                      >\n                        <path\n                          strokeLinecap="round"\n                          strokeLinejoin="round"\n                          strokeWidth={2}\n                          d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"\n                          className\n                        \/>\n                      <\/svg>\n                      Cancel Anytime\n                    <\/li>\n                  <\/ul>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/React.Fragment>\n    );\n  };\n  \n  return (\n    <div>\n      {isLoading ? (\n        "Loading"\n      ) : data ? (\n        <React.Fragment>\n          <ProdcutDetail props={data} \/>\n        <\/React.Fragment>\n      ) : (\n        "No data available"\n      )}\n    <\/div>\n  );\n}<\/pre>\n\n\n\n
Output will look like the below image <\/p>\n\n\n\n
\"sc-cart-wenkul-output\"<\/figure>\n\n\n\n
In this code:<\/p>\n\n\n\n