Cómo construir un front-end funcional para HCL Commerce con Gatsby

El objetivo principal es sustituir las funciones básicas de la tienda Aurora starter con la tienda de tecnología Gatsby. La tienda debería tener una página de inicio (HP), una página de lista de productos (PLP), una página de detalle del producto (PDP) y un checkout. La intención de la publicación es dar una idea general de cómo se puede lograr este objectivo, junto con unos ejemplos de código.

 

Para configurar el entorno de desarrollo, seguimos los siguientes pasos:

Gatsby puede extraer datos de Headless CMS, bases de datos, API y más. Existen tres métodos que podemos aplicar para obtener datos de nuestra API privada:

Explicaremos cómo podemos usar la opción dos para obtener los datos que necesitamos de las API de HCL Commerce y crear páginas de la tienda. El archivo gatsby-node.js se usa para obtener los datos y crear los PDP y PLP:

/**
 * Implement Gatsby's Node APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/node-apis/
 */

// You can delete this file if you're not using it
const axios = require('axios');

const get = endpoint => axios.get(`http://localhost:80/wcs/resources/store/1/productview/byCategory/10001`);

const getProductData = categoryIds =>
Promise.all(
    categoryIds.map(async id => {
        const { data: CatalogEntryView } = await get(``);
        return { ...CatalogEntryView };
    })
);

exports.createPages = async ({ actions: { createPage } }) => {
    // `getProductData` is a function that fetches our data
    const allCategory = await getProductData(["10001"]);
  
    // Create a page that lists all Product.
    allCategory.forEach(category => {
        createPage({
        path: `/category/10001`,
        component: require.resolve("./src/templates/category.js"),
        context: { category },
        })
    })
  
    // Create a page for each product.
    allCategory.forEach(category => {
        category.CatalogEntryView.forEach(product => {
            createPage({
                path: `/category/10001/product/${product.uniqueID}/`,
                component: require.resolve("./src/templates/product.js"),
                context: { product },
            })
        })
    })
  }

Las siguientes plantillas de PLP and PDP se encuentran en src\templates\

import React from 'react';
import { Link } from 'gatsby';

export default ({ pageContext: { category } }) => (
  <div style={{ width: 960, margin: '4rem auto' }}>
    <h1>Product List Page - PLP</h1>
    <h1>Total Products : {category.recordSetCount}</h1>
    <ul style={{ padding: 0 }}>
      {category.CatalogEntryView.map(product => (
        <li
          key={product.uniqueID}
          style={{
            textAlign: 'center',
            listStyle: 'none',
            display: 'inline-block'
          }}
        >
          <Link to={`/category/10001/product/${product.uniqueID}`}>
            <img src={`https://localhost:8443${product.thumbnail}`} alt={product.partNumber} />
            <p>{product.partNumber}</p>
          </Link>
        </li>
      ))}
    </ul>
  </div>
);

import React from 'react';
import { Link } from 'gatsby';

export default ({ pageContext: { product } }) => (
    <div style={{ width: 960, margin: "4rem auto" }}>
      <h1>{product.uniqueID}</h1>
      <h1>{product.name}</h1>
        <h5>{product.shortDescription}</h5>
        <h3>${product.Price[0].priceValue}</h3>
      <h1>{product.partNumber}</h1>
      <img src={`https://localhost:8443${product.thumbnail}`} alt={product.name} />
    </div>
  )

Ahora, después de compilar el código, podemos ver todas las páginas que se crean en public\page-data

• public\page-data\category\page-data.json
• public\page-data\category\10001\page-data.json
• public\page-data\category\10001\product\10039\page-data.json

También sería posible obtener los datos mediante la creación de un source plug-in y luego utilizar GraphQL para hacer referencia a ello en gatsby-node.js. Aqui hay más información sobre source plug-ins de Gatsby. En resumen, un plug-in hace lo siguente:

• Aceptar opciones de configuración como una clave API y / o un search query
• Realizar una petición a la API REST de HCL Commerce, utilizando las opciones de configuración proporcionadas
• Convierte los datos en la respuesta API al sistema de nodos de Gatsby

 

El carrito de compra

Los PDP y PLP fueron páginas generadas que utilizaron fuentes de datos y archivos de plantilla para preparar el HTML final. Para el carrito de compra, preparamos una sola página, y lo hacemos agregando un archivo src/pages/cart.js, así que no se aplican plantillas esta vez. Llamaremos al endpoint de HCL Commerce que proporciona detalles sobre el carrito de compras: http://localhost:80/wcs/resources/store/1/cart/@self?pageSize=50&pageNumber=1&responseFormat=json'. Esto nos proporciona un JSON que contiene todo lo que está en el carrito. Recorremos la respuesta para crear el carrito de compras:

import React, { useState, useEffect } from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"

const axios = require('axios');
const fetch = require(`node-fetch`);

const CartPage = () => {
  const cartURL = 'http://localhost:80/wcs/resources/store/1/cart/@self?pageSize=50&pageNumber=1&responseFormat=json';

  // Client-side Runtime Data Fetching
  const [cartData, setCartData] = useState(0)
  useEffect(() => {
    // get data from GitHub api
    fetch(cartURL, {credentials: "include"})
      .then(response => response.json()) // parse JSON from request
      .then(resultData => {
        setCartData(resultData)
      })
  }, [])
  return (
    <Layout>
      <SEO title="Shoping Cart" />
      <h1>Shopping cart</h1>
      <table>
        <tr>
          <th>Product</th>
          <th>QTY</th>
          <th>Each</th>
          <th>Total</th>
        </tr>
        {cartData.orderItem && cartData.orderItem.map(item => (
          <tr>
            <td><Link to={`/category/10001/product/${item.productId}`}>{item.partNumber}</Link></td>
            <td>{item.quantity}</td>
            <td>{item.unitPrice}</td>
            <td>{item.orderItemPrice}</td>
          </tr>
        ))}
        <tr>
          <td></td>
          <td></td>
          <td>Order Subtotal:</td>
          <td>{cartData.totalProductPrice}</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>Discount:</td>
          <td>({cartData.totalAdjustment})</td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>Order Total:</td>
          <td>{cartData.grandTotal}</td>
        </tr>
      </table>
    </Layout>
  )
}

export default CartPage;

<br>Además de tener un carrito de compras, necesitamos una forma de agregar artículos al carrito. Para realizar este objetivo, necesitamos agregar algunas funcionalidades a los PDP. Usamos GET /wcs/resources/store/10001/productview/byId/13011 endpoint para obtener detalles del producto. Luego para agregar al carrito, usamos algo como:

POST /wcs/resources/store/10001/cart?responseFormat=json
{
	"orderId": ".",
	"orderItem": [
		{
			"productId": "10706",
			"quantity": "1"
		}
	],
	"x_calculateOrder": "0",
	"x_inventoryValidation": "true"
}

 

Después de agregar esta lógica adicional al PDP, nos terminará con algo como lo siguiente:

Gatsby PDP[/caption]