{"id":216,"date":"2020-06-09T00:00:00","date_gmt":"2020-06-08T22:00:00","guid":{"rendered":"https:\/\/orienteed.com\/\/?p=216"},"modified":"2024-09-19T16:58:59","modified_gmt":"2024-09-19T14:58:59","slug":"como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby","status":"publish","type":"post","link":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/","title":{"rendered":"C\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>HCL Commerce.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">El objetivo principal es sustituir las funciones b\u00e1sicas de la tienda Aurora starter con la tienda de tecnolog\u00eda Gatsby. La tienda deber\u00eda tener una p\u00e1gina de inicio (HP), una p\u00e1gina de lista de productos (PLP), una p\u00e1gina de detalle del producto (PDP) y un checkout. La intenci\u00f3n de la publicaci\u00f3n es dar una idea general de c\u00f3mo se puede lograr este objetivo, junto con unos ejemplos de c\u00f3digo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Configuraci\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Para configurar el entorno de desarrollo, seguimos los siguientes pasos:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Instalar Node.js: Descarga e instala la \u00faltima versi\u00f3n de Node.js desde <a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener\" title=\"https:\/\/nodejs.org\/en\/\">el sitio web oficial de Node.js<\/a><\/li>\n\n\n\n<li>Instalar Git<\/li>\n\n\n\n<li>Instalar Gatsby CLI: La CLI de Gatsby est\u00e1 disponible a trav\u00e9s de npm y debe instalarse globalmente, ejecutando <code><span class=\"code\">npm install -g gatsby-cli<\/span><\/code><\/li>\n\n\n\n<li>Crear un sitio Gatsby: <code>gatsby new gatsby https:\/\/github.com\/gatsbyjs\/gatsby-starter-hello-world<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s, hacemos <code>cd gatsby<\/code> y&nbsp; <code>gatsby develop<\/code> para iniciar el servidor de desarrollo Gatsby. Podemos acceder al sitio starter de Gatsby en <code>http:\/\/localhost:8000\/<\/code>. Para obtener m\u00e1s informaci\u00f3n y tutoriales sobre Gatsby, consulta <a href=\"https:\/\/www.gatsbyjs.org\/tutorial\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Gatsby docs<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Extracci\u00f3n de datos y generaci\u00f3n de p\u00e1ginas<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Gatsby puede extraer datos de Headless CMS, bases de datos, API y m\u00e1s. Existen tres m\u00e9todos que podemos aplicar para obtener datos de nuestra API privada:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Si la API privada es API <strong>GraphQL<\/strong>, usamos <code><span class=\"code\">gatsby-source-graphql<\/span><\/code>.<\/li>\n\n\n\n<li>Si la API privada<strong> no es una API GraphQL<\/strong> y eres nuevo en GraphQL, trata los datos como datos no estructurados y rec\u00f3jelos durante el tiempo de compilaci\u00f3n, como se describe en la gu\u00eda \u201d<a class=\"sc-eHgmQL jxCPuk\" title=\"https:\/\/www.gatsbyjs.org\/docs\/using-gatsby-without-graphql\/\" href=\"https:\/\/www.gatsbyjs.org\/docs\/using-gatsby-without-graphql\/\">Using Gatsby without GraphQL<\/a>\u201d. Sin embargo, como se destaca en la gu\u00eda, este m\u00e9todo viene con algunos compromisos.<\/li>\n\n\n\n<li>Crear un source plugin, como se describe en el tutorial \u201d<a class=\"sc-eHgmQL jxCPuk\" title=\"https:\/\/www.gatsbyjs.org\/docs\/pixabay-source-plugin-tutorial\/\" href=\"https:\/\/www.gatsbyjs.org\/docs\/pixabay-source-plugin-tutorial\/\">Source plugin tutorial<\/a>\u201c<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Explicaremos c\u00f3mo podemos usar la opci\u00f3n dos para obtener los datos que necesitamos de las API de HCL Commerce y crear p\u00e1ginas de la tienda. El archivo <code>gatsby-node.js<\/code> se usa para obtener los datos y crear los PDP y PLP:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><div>\n<pre style=\"background-color: #f2f2f2;\">\/**\n * Implement Gatsby's Node APIs in this file.\n *\n * See: https:\/\/www.gatsbyjs.org\/docs\/node-apis\/\n *\/\n\n\/\/ You can delete this file if you're not using it\nconst axios = require('axios');\n\nconst get = endpoint =&gt; axios.get(`http:\/\/localhost:80\/wcs\/resources\/store\/1\/productview\/byCategory\/10001`);\n\nconst getProductData = categoryIds =&gt;\nPromise.all(\n    categoryIds.map(async id =&gt; {\n        const { data: CatalogEntryView } = await get(``);\n        return { ...CatalogEntryView };\n    })\n);\n\nexports.createPages = async ({ actions: { createPage } }) =&gt; {\n    \/\/ `getProductData` is a function that fetches our data\n    const allCategory = await getProductData(&#91;\"10001\"]);\n  \n    \/\/ Create a page that lists all Product.\n    allCategory.forEach(category =&gt; {\n        createPage({\n        path: `\/category\/10001`,\n        component: require.resolve(\".\/src\/templates\/category.js\"),\n        context: { category },\n        })\n    })\n  \n    \/\/ Create a page for each product.\n    allCategory.forEach(category =&gt; {\n        category.CatalogEntryView.forEach(product =&gt; {\n            createPage({\n                path: `\/category\/10001\/product\/${product.uniqueID}\/`,\n                component: require.resolve(\".\/src\/templates\/product.js\"),\n                context: { product },\n            })\n        })\n    })\n  }<\/pre>\n<\/div><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Las siguientes plantillas de PLP and PDP se encuentran en src\\templates\\<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><div>\n<pre style=\"background-color: #f2f2f2;\">import React from 'react';\nimport { Link } from 'gatsby';\n\nexport default ({ pageContext: { category } }) =&gt; (\n  &lt;div style={{ width: 960, margin: '4rem auto' }}&gt;\n    &lt;h1&gt;Product List Page - PLP&lt;\/h1&gt;\n    &lt;h1&gt;Total Products : {category.recordSetCount}&lt;\/h1&gt;\n    &lt;ul style={{ padding: 0 }}&gt;\n      {category.CatalogEntryView.map(product =&gt; (\n        &lt;li\n          key={product.uniqueID}\n          style={{\n            textAlign: 'center',\n            listStyle: 'none',\n            display: 'inline-block'\n          }}\n        &gt;\n          &lt;Link to={`\/category\/10001\/product\/${product.uniqueID}`}&gt;\n            &lt;img src={`https:\/\/localhost:8443${product.thumbnail}`} alt={product.partNumber} \/&gt;\n            &lt;p&gt;{product.partNumber}&lt;\/p&gt;\n          &lt;\/Link&gt;\n        &lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  &lt;\/div&gt;\n);\n<\/pre>\n<\/div><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code><div>\n<pre style=\"background-color: #f2f2f2;\">import React from 'react';\nimport { Link } from 'gatsby';\n\nexport default ({ pageContext: { product } }) =&gt; (\n    &lt;div style={{ width: 960, margin: \"4rem auto\" }}&gt;\n      &lt;h1&gt;{product.uniqueID}&lt;\/h1&gt;\n      &lt;h1&gt;{product.name}&lt;\/h1&gt;\n        &lt;h5&gt;{product.shortDescription}&lt;\/h5&gt;\n        &lt;h3&gt;${product.Price&#91;0].priceValue}&lt;\/h3&gt;\n      &lt;h1&gt;{product.partNumber}&lt;\/h1&gt;\n      &lt;img src={`https:\/\/localhost:8443${product.thumbnail}`} alt={product.name} \/&gt;\n    &lt;\/div&gt;\n  )\n<\/pre>\n<\/div><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Ahora, despu\u00e9s de compilar el c\u00f3digo, podemos ver todas las p\u00e1ginas que se crean en public\\page-data<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>public\\page-data\\category\\page-data.json<\/li>\n\n\n\n<li>public\\page-data\\category\\10001\\page-data.json<\/li>\n\n\n\n<li>public\\page-data\\category\\10001\\product\\10039\\page-data.json<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n ser\u00eda posible obtener los datos mediante la creaci\u00f3n de un source plug-in y luego utilizar GraphQL para hacer referencia a ello en&nbsp;<code>gatsby-node.js<\/code>.&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/creating-a-source-plugin\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Aqu\u00ed<\/a>&nbsp;hay m\u00e1s informaci\u00f3n sobre source plug-ins de Gatsby. En resumen, un plug-in hace lo siguiente:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Aceptar opciones de configuraci\u00f3n como una clave API y \/ o un search query<\/li>\n\n\n\n<li>Realizar una petici\u00f3n a la API REST de HCL Commerce, utilizando las opciones de configuraci\u00f3n proporcionadas<\/li>\n\n\n\n<li>Convierte los datos en la respuesta API al&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/node-apis\/\" target=\"_blank\" rel=\"noopener\" title=\"\">sistema de nodos de Gatsby<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">El carrito de compra<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Los PDP y PLP fueron p\u00e1ginas generadas que utilizaron fuentes de datos y archivos de plantilla para preparar el HTML final. Para el carrito de compra, preparamos una sola p\u00e1gina, y lo hacemos agregando un archivo src\/pages\/cart.js, as\u00ed 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&amp;pageNumber=1&amp;responseFormat=json&#8217;. Esto nos proporciona un JSON que contiene todo lo que est\u00e1 en el carrito. Recorremos la respuesta para crear el carrito de compras:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState, useEffect } from \"react\"\nimport { Link } from \"gatsby\"\n\nimport Layout from \"..\/components\/layout\"\nimport SEO from \"..\/components\/seo\"\n\nconst axios = require('axios');\nconst fetch = require(`node-fetch`);\n\nconst CartPage = () =&gt; {\n  const cartURL = 'http:\/\/localhost:80\/wcs\/resources\/store\/1\/cart\/@self?pageSize=50&amp;pageNumber=1&amp;responseFormat=json';\n\n  \/\/ Client-side Runtime Data Fetching\n  const &#91;cartData, setCartData] = useState(0)\n  useEffect(() =&gt; {\n    \/\/ get data from GitHub api\n    fetch(cartURL, {credentials: \"include\"})\n      .then(response =&gt; response.json()) \/\/ parse JSON from request\n      .then(resultData =&gt; {\n        setCartData(resultData)\n      })\n  }, &#91;])\n  return (\n    &lt;Layout&gt;\n      &lt;SEO title=\"Shoping Cart\" \/&gt;\n      &lt;h1&gt;Shopping cart&lt;\/h1&gt;\n      &lt;table&gt;\n        &lt;tr&gt;\n          &lt;th&gt;Product&lt;\/th&gt;\n          &lt;th&gt;QTY&lt;\/th&gt;\n          &lt;th&gt;Each&lt;\/th&gt;\n          &lt;th&gt;Total&lt;\/th&gt;\n        &lt;\/tr&gt;\n        {cartData.orderItem &amp;&amp; cartData.orderItem.map(item =&gt; (\n          &lt;tr&gt;\n            &lt;td&gt;&lt;Link to={`\/category\/10001\/product\/${item.productId}`}&gt;{item.partNumber}&lt;\/Link&gt;&lt;\/td&gt;\n            &lt;td&gt;{item.quantity}&lt;\/td&gt;\n            &lt;td&gt;{item.unitPrice}&lt;\/td&gt;\n            &lt;td&gt;{item.orderItemPrice}&lt;\/td&gt;\n          &lt;\/tr&gt;\n        ))}\n        &lt;tr&gt;\n          &lt;td&gt;&lt;\/td&gt;\n          &lt;td&gt;&lt;\/td&gt;\n          &lt;td&gt;Order Subtotal:&lt;\/td&gt;\n          &lt;td&gt;{cartData.totalProductPrice}&lt;\/td&gt;\n        &lt;\/tr&gt;\n        &lt;tr&gt;\n          &lt;td&gt;&lt;\/td&gt;\n          &lt;td&gt;&lt;\/td&gt;\n          &lt;td&gt;Discount:&lt;\/td&gt;\n          &lt;td&gt;({cartData.totalAdjustment})&lt;\/td&gt;\n        &lt;\/tr&gt;\n        &lt;tr&gt;\n          &lt;td&gt;&lt;\/td&gt;\n          &lt;td&gt;&lt;\/td&gt;\n          &lt;td&gt;Order Total:&lt;\/td&gt;\n          &lt;td&gt;{cartData.grandTotal}&lt;\/td&gt;\n        &lt;\/tr&gt;\n      &lt;\/table&gt;\n    &lt;\/Layout&gt;\n  )\n}\n\nexport default CartPage;<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"\/\/images.ctfassets.net\/x4we65bqi45q\/3rnMMLifrSBmS5NrItiGBi\/82ae14e04f35255cb5868ac41cc8e9f9\/gatsby_shoppingCart.png\" alt=\"gatsby_shoppingCart.png\" title=\"gatsby_shoppingCart.png\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Adem\u00e1s de tener un carrito de compras, necesitamos una forma de agregar art\u00edculos 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:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>POST \/wcs\/resources\/store\/10001\/cart?responseFormat=json\n\n{\n\"orderId\": \".\",\n\"orderItem\": &#91;\n{\n\"productId\": \"10706\",\n\"quantity\": \"1\"\n}\n],\n\"x_calculateOrder\": \"0\",\n\"x_inventoryValidation\": \"true\"\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Despu\u00e9s de agregar esta l\u00f3gica adicional al PDP, nos terminar\u00e1 con algo como lo siguiente:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/images.ctfassets.net\/x4we65bqi45q\/5fr6IB1qb6HQ1F9nxoMjzS\/92a0c65c50be07cb7d0ef04568a62b29\/image-20200308-041153.png\" alt=\"PDP\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Checkout<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tambi\u00e9n necesitamos crear un flujo de pago\/checkout para la tienda. Eso implica tres \u00e1reas: p\u00e1gina de env\u00edo \/ facturaci\u00f3n, p\u00e1gina de pago \/ revisi\u00f3n y p\u00e1gina de confirmaci\u00f3n. Hacemos eso de manera similar a la p\u00e1gina del carrito de compras; es decir, agregamos una nueva entrada a <code>src\/pages<\/code> para cada p\u00e1gina. Adem\u00e1s tendremos que llamar a los endpoints de <a href=\"https:\/\/orienteed.com\/\/que-es-hcl-commerce\/\" title=\"\u00bfQu\u00e9 es HCL Commerce? Todo lo que debes saber para potenciar la experiencia de tus clientes\">HCL Commerce<\/a> adecuados para enviar y recibir datos. Las p\u00e1ginas resultantes se ven as\u00ed:<\/p>\n\n\n<div class=\"wp-block-image size-full wp-image-55419\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"\/\/images.ctfassets.net\/x4we65bqi45q\/5kHhJcE7DBTumcbMIQUHQU\/5c522e358c488b4a22b2dc886cda26b7\/image-20200308-040617.png\" alt=\"image-20200308-040617.png\" class=\"wp-image-55419\"\/><figcaption class=\"wp-element-caption\">Env\u00edo y Facturaci\u00f3n<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image size-full wp-image-55420\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"\/\/images.ctfassets.net\/x4we65bqi45q\/27Z9ukKOwGg70AKX9kxFFV\/4e2a1395538548ebc4d1f4f464ba5a03\/image-20200308-035414.png\" alt=\"image-20200308-035414.png\" class=\"wp-image-55420\"\/><figcaption class=\"wp-element-caption\">Pago y Revisi\u00f3n<\/figcaption><\/figure>\n<\/div>\n\n<div class=\"wp-block-image size-full wp-image-55421\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"\/\/images.ctfassets.net\/x4we65bqi45q\/1YxZUKHNQI0JD8p5e1a2f2\/554980cce9a014c6b141f3cf176e0ff2\/image-20200308-040251.png\" alt=\"image-20200308-040251.png\" class=\"wp-image-55421\"\/><figcaption class=\"wp-element-caption\">Confirmaci\u00f3n<\/figcaption><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Spots y contenido de CMC<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si necesitamos mostrar Spots u otro contenido del CMC, se puede acceder f\u00e1cilmente a trav\u00e9s de la API REST de HCL Commerce. La siguiente tabla resume algunos de los endpoints disponibles:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><th>\n<p data-renderer-start-pos=\"137\">HTTP Method<\/p>\n<figure class=\"ak-renderer-tableHeader-sorting-icon ak-renderer-tableHeader-sorting-icon__no-order\">\n<div>&nbsp;<\/div>\n<\/figure>\n<\/th><th>\n<p data-renderer-start-pos=\"152\">Path<\/p>\n<figure class=\"ak-renderer-tableHeader-sorting-icon ak-renderer-tableHeader-sorting-icon__no-order\">\n<div>&nbsp;<\/div>\n<\/figure>\n<\/th><th>\n<p data-renderer-start-pos=\"160\">Descripci\u00f3n<\/p>\n<figure class=\"ak-renderer-tableHeader-sorting-icon ak-renderer-tableHeader-sorting-icon__no-order\">\n<div>&nbsp;<\/div>\n<\/figure>\n<\/th><\/tr><tr><td>\n<p data-renderer-start-pos=\"177\">GET<\/p>\n<\/td><td>\n<p data-renderer-start-pos=\"184\"><a class=\"sc-kkGfuU keHSaj\" title=\"https:\/\/www.ibm.com\/support\/knowledgecenter\/SSZLC2_7.0.0\/com.ibm.commerce.starterstores.doc\/code\/rsm_espot_fep8.htm?view=kc#findAllSearchTerms\" href=\"https:\/\/www.ibm.com\/support\/knowledgecenter\/SSZLC2_7.0.0\/com.ibm.commerce.starterstores.doc\/code\/rsm_espot_fep8.htm?view=kc#findAllSearchTerms\">\/store\/{storeId}\/espot?q={q}<\/a><\/p>\n<\/td><td>\n<p data-renderer-start-pos=\"216\">Recuperar una lista de todos los t\u00e9rminos de b\u00fasqueda que tienen reglas de b\u00fasqueda.<\/p>\n<\/td><\/tr><tr><td>\n<p data-renderer-start-pos=\"281\">GET<\/p>\n<\/td><td>\n<p data-renderer-start-pos=\"288\"><a class=\"sc-kkGfuU keHSaj\" title=\"https:\/\/www.ibm.com\/support\/knowledgecenter\/SSZLC2_7.0.0\/com.ibm.commerce.starterstores.doc\/code\/rsm_espot_fep8.htm?view=kc#findByName\" href=\"https:\/\/www.ibm.com\/support\/knowledgecenter\/SSZLC2_7.0.0\/com.ibm.commerce.starterstores.doc\/code\/rsm_espot_fep8.htm?view=kc#findByName\">\/store\/{storeId}\/espot\/{name}<\/a><\/p>\n<\/td><td>\n<p data-renderer-start-pos=\"321\">Recuperar un e-Marketing Spot por nombre.<\/p>\n<\/td><\/tr><tr><td>\n<p data-renderer-start-pos=\"360\">GET<\/p>\n<\/td><td>\n<p data-renderer-start-pos=\"367\"><a class=\"sc-kkGfuU keHSaj\" title=\"https:\/\/www.ibm.com\/support\/knowledgecenter\/SSZLC2_7.0.0\/com.ibm.commerce.starterstores.doc\/code\/rsm_espot_fep8.htm?view=kc#findByNameWithCategory\" href=\"https:\/\/www.ibm.com\/support\/knowledgecenter\/SSZLC2_7.0.0\/com.ibm.commerce.starterstores.doc\/code\/rsm_espot_fep8.htm?view=kc#findByNameWithCategory\">\/store\/{storeId}\/espot\/{name}\/category\/{categoryId}<\/a><\/p>\n<\/td><td>\n<p data-renderer-start-pos=\"422\">Deprecated: Recuperar un e-Marketing Spot en un nivel de categor\u00eda espec\u00edfico. Por ejemplo, muebles. Alternativamente, esto se puede implementar usando el m\u00e9todo de findByName, con el siguente URL: store\/{storeId}\/espot\/{name}?categoryId=&amp;DM_ReqCmd=CategoryDisplay.<\/p>\n<\/td><\/tr><tr><td>\n<p data-renderer-start-pos=\"677\">GET<\/p>\n<\/td><td>\n<p data-renderer-start-pos=\"684\"><a class=\"sc-kkGfuU keHSaj\" title=\"https:\/\/www.ibm.com\/support\/knowledgecenter\/SSZLC2_7.0.0\/com.ibm.commerce.starterstores.doc\/code\/rsm_espot_fep8.htm?view=kc#findByNameWithProduct\" href=\"https:\/\/www.ibm.com\/support\/knowledgecenter\/SSZLC2_7.0.0\/com.ibm.commerce.starterstores.doc\/code\/rsm_espot_fep8.htm?view=kc#findByNameWithProduct\">\/store\/{storeId}\/espot\/{name}\/product\/{productId}<\/a><\/p>\n<\/td><td>\n<p data-renderer-start-pos=\"737\">Deprecated: Recuperar un e-Marketing Spot para un producto especif\u00edco. Alternativamente, esto se puede implementar usando el m\u00e9todo de findByName, con el siguente URL: store\/{storeId}\/espot\/{name}?productId=&amp;DM_ReqCmd=ProductDisplay.<\/p>\n<\/td><\/tr><tr><td>\n<p data-renderer-start-pos=\"960\">GET<\/p>\n<\/td><td>\n<p data-renderer-start-pos=\"967\"><a class=\"sc-kkGfuU keHSaj\" title=\"https:\/\/www.ibm.com\/support\/knowledgecenter\/SSZLC2_7.0.0\/com.ibm.commerce.starterstores.doc\/code\/rsm_espot_fep8.htm?view=kc#findESpotData\" href=\"https:\/\/www.ibm.com\/support\/knowledgecenter\/SSZLC2_7.0.0\/com.ibm.commerce.starterstores.doc\/code\/rsm_espot_fep8.htm?view=kc#findESpotData\">\/store\/{storeId}\/espot\/{name}\/type\/{type}<\/a><\/p>\n<\/td><td>\n<p data-renderer-start-pos=\"1012\">Recuperar datos de e-Marketing Spot<\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hemos creado un front-end funcional para HCL Commerce, utilizando el marco Gatsby. La tienda tiene todas las funcionalidades b\u00e1sicas necesarias para realizar un pago, como agregar al carrito y un flujo de checkout. El usuario puede navegar por todo el cat\u00e1logo y seleccionar distintas versiones de los productos para agregar a su carrito.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HCL Commerce. El objetivo principal es sustituir las funciones b\u00e1sicas de la tienda Aurora starter con la tienda de tecnolog\u00eda Gatsby. La tienda deber\u00eda tener una p\u00e1gina de inicio (HP), una p\u00e1gina de lista de productos (PLP), una p\u00e1gina de detalle del producto (PDP) y un checkout. La intenci\u00f3n de la publicaci\u00f3n es dar una&hellip;&nbsp;<a href=\"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/\" rel=\"bookmark\">Leer m\u00e1s &raquo;<span class=\"screen-reader-text\">C\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby<\/span><\/a><\/p>\n","protected":false},"author":7,"featured_media":89,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[179],"tags":[31,30,17],"class_list":["post-216","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-transformacion-digital","tag-gatsby","tag-react","tag-transformacion-digital"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"En este art\u00edculo compartimos c\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby paso a paso con todo lo esencial para hacerlo con \u00e9xito.\" \/>\n\t<meta name=\"robots\" content=\"max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n\t<meta name=\"author\" content=\"R\u00fanar Sverrisson\"\/>\n\t<meta name=\"google-site-verification\" content=\"google-site-verification=OP49dSEB6tiqv44IxGOKRY9c8TyzfbjxeYPNhyxhcs8\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"es_ES\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Orienteed \u2022 We transform technology into exceptional experiences.\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"HCL Commerce: construyendo un front-end funcional con Gatsby\" \/>\n\t\t<meta property=\"og:description\" content=\"En este art\u00edculo compartimos c\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby paso a paso con todo lo esencial para hacerlo con \u00e9xito.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/orienteed.com\/wp-content\/uploads\/2019\/08\/neve-creative-portfolio-31.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/orienteed.com\/wp-content\/uploads\/2019\/08\/neve-creative-portfolio-31.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2020-06-08T22:00:00+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2024-09-19T14:58:59+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61555846676066\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@orienteed\" \/>\n\t\t<meta name=\"twitter:title\" content=\"HCL Commerce: construyendo un front-end funcional con Gatsby\" \/>\n\t\t<meta name=\"twitter:description\" content=\"En este art\u00edculo compartimos c\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby paso a paso con todo lo esencial para hacerlo con \u00e9xito.\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@orienteed\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/orienteed.com\/wp-content\/uploads\/2019\/08\/neve-creative-portfolio-31.jpg\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#blogposting\",\"name\":\"HCL Commerce: construyendo un front-end funcional con Gatsby\",\"headline\":\"C\\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby\",\"author\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/author\\\/runarsverrisson\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/orienteed.com\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/neve-creative-portfolio-31.jpg\",\"width\":1100,\"height\":360,\"caption\":\"Background Image\"},\"datePublished\":\"2020-06-09T00:00:00+02:00\",\"dateModified\":\"2024-09-19T16:58:59+02:00\",\"inLanguage\":\"es-ES\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#webpage\"},\"articleSection\":\"Transformaci\\u00f3n Digital, gatsby, react, transformacion digital\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/orienteed.com\\\/es\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/category\\\/transformacion-digital\\\/#listItem\",\"name\":\"Transformaci\\u00f3n Digital\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/category\\\/transformacion-digital\\\/#listItem\",\"position\":2,\"name\":\"Transformaci\\u00f3n Digital\",\"item\":\"https:\\\/\\\/orienteed.com\\\/es\\\/category\\\/transformacion-digital\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#listItem\",\"name\":\"C\\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#listItem\",\"position\":3,\"name\":\"C\\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/category\\\/transformacion-digital\\\/#listItem\",\"name\":\"Transformaci\\u00f3n Digital\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/#organization\",\"name\":\"Orienteed\",\"description\":\"Orienteed \\u2022 We specialize in the development and implementation of digital solutions for your business. Digital Commerce, AI, PLM, Cloud Computing, QA, Testing and more.\",\"url\":\"https:\\\/\\\/orienteed.com\\\/es\\\/\",\"telephone\":\"+34981914837\",\"foundingDate\":\"2016-03-04\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":10,\"maxValue\":50},\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/orienteed.com\\\/wp-content\\\/uploads\\\/2024\\\/12\\\/logo-orienteed-2024-destacado.png\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#organizationLogo\",\"width\":1920,\"height\":1080,\"caption\":\"logo orienteed 2025\"},\"image\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#organizationLogo\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=61555846676066\",\"https:\\\/\\\/twitter.com\\\/orienteed\",\"https:\\\/\\\/www.instagram.com\\\/orienteedsl\\\/\",\"https:\\\/\\\/www.youtube.com\\\/@orienteed\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/orienteed\\\/\",\"https:\\\/\\\/www.yelp.es\\\/biz\\\/orienteed-sl-a-corua\",\"https:\\\/\\\/www.threads.com\\\/@orienteedsl\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/author\\\/runarsverrisson\\\/#author\",\"url\":\"https:\\\/\\\/orienteed.com\\\/es\\\/author\\\/runarsverrisson\\\/\",\"name\":\"R\\u00fanar Sverrisson\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/a80f0c97812188b8dccb4f0b6ff02d4495cbca819dc85311be243b402b04a660?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"R\\u00fanar Sverrisson\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#webpage\",\"url\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/\",\"name\":\"HCL Commerce: construyendo un front-end funcional con Gatsby\",\"description\":\"En este art\\u00edculo compartimos c\\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby paso a paso con todo lo esencial para hacerlo con \\u00e9xito.\",\"inLanguage\":\"es-ES\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/author\\\/runarsverrisson\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/author\\\/runarsverrisson\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/orienteed.com\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/neve-creative-portfolio-31.jpg\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#mainImage\",\"width\":1100,\"height\":360,\"caption\":\"Background Image\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#mainImage\"},\"datePublished\":\"2020-06-09T00:00:00+02:00\",\"dateModified\":\"2024-09-19T16:58:59+02:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/#website\",\"url\":\"https:\\\/\\\/orienteed.com\\\/es\\\/\",\"name\":\"Orienteed \\u2022 leading digital solutions.\",\"alternateName\":\"Orienteed\",\"description\":\"We transform technology into exceptional experiences.\",\"inLanguage\":\"es-ES\",\"publisher\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/es\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"HCL Commerce: construyendo un front-end funcional con Gatsby","description":"En este art\u00edculo compartimos c\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby paso a paso con todo lo esencial para hacerlo con \u00e9xito.","canonical_url":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/","robots":"max-snippet:-1, max-image-preview:large, max-video-preview:-1","keywords":"","webmasterTools":{"google-site-verification":"google-site-verification=OP49dSEB6tiqv44IxGOKRY9c8TyzfbjxeYPNhyxhcs8","miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#blogposting","name":"HCL Commerce: construyendo un front-end funcional con Gatsby","headline":"C\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby","author":{"@id":"https:\/\/orienteed.com\/es\/author\/runarsverrisson\/#author"},"publisher":{"@id":"https:\/\/orienteed.com\/es\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/orienteed.com\/wp-content\/uploads\/2019\/08\/neve-creative-portfolio-31.jpg","width":1100,"height":360,"caption":"Background Image"},"datePublished":"2020-06-09T00:00:00+02:00","dateModified":"2024-09-19T16:58:59+02:00","inLanguage":"es-ES","mainEntityOfPage":{"@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#webpage"},"isPartOf":{"@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#webpage"},"articleSection":"Transformaci\u00f3n Digital, gatsby, react, transformacion digital"},{"@type":"BreadcrumbList","@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/orienteed.com\/es\/#listItem","position":1,"name":"Home","item":"https:\/\/orienteed.com\/es\/","nextItem":{"@type":"ListItem","@id":"https:\/\/orienteed.com\/es\/category\/transformacion-digital\/#listItem","name":"Transformaci\u00f3n Digital"}},{"@type":"ListItem","@id":"https:\/\/orienteed.com\/es\/category\/transformacion-digital\/#listItem","position":2,"name":"Transformaci\u00f3n Digital","item":"https:\/\/orienteed.com\/es\/category\/transformacion-digital\/","nextItem":{"@type":"ListItem","@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#listItem","name":"C\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby"},"previousItem":{"@type":"ListItem","@id":"https:\/\/orienteed.com\/es\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#listItem","position":3,"name":"C\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby","previousItem":{"@type":"ListItem","@id":"https:\/\/orienteed.com\/es\/category\/transformacion-digital\/#listItem","name":"Transformaci\u00f3n Digital"}}]},{"@type":"Organization","@id":"https:\/\/orienteed.com\/es\/#organization","name":"Orienteed","description":"Orienteed \u2022 We specialize in the development and implementation of digital solutions for your business. Digital Commerce, AI, PLM, Cloud Computing, QA, Testing and more.","url":"https:\/\/orienteed.com\/es\/","telephone":"+34981914837","foundingDate":"2016-03-04","numberOfEmployees":{"@type":"QuantitativeValue","minValue":10,"maxValue":50},"logo":{"@type":"ImageObject","url":"https:\/\/orienteed.com\/wp-content\/uploads\/2024\/12\/logo-orienteed-2024-destacado.png","@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#organizationLogo","width":1920,"height":1080,"caption":"logo orienteed 2025"},"image":{"@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#organizationLogo"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61555846676066","https:\/\/twitter.com\/orienteed","https:\/\/www.instagram.com\/orienteedsl\/","https:\/\/www.youtube.com\/@orienteed","https:\/\/www.linkedin.com\/company\/orienteed\/","https:\/\/www.yelp.es\/biz\/orienteed-sl-a-corua","https:\/\/www.threads.com\/@orienteedsl"]},{"@type":"Person","@id":"https:\/\/orienteed.com\/es\/author\/runarsverrisson\/#author","url":"https:\/\/orienteed.com\/es\/author\/runarsverrisson\/","name":"R\u00fanar Sverrisson","image":{"@type":"ImageObject","@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/a80f0c97812188b8dccb4f0b6ff02d4495cbca819dc85311be243b402b04a660?s=96&d=mm&r=g","width":96,"height":96,"caption":"R\u00fanar Sverrisson"}},{"@type":"WebPage","@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#webpage","url":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/","name":"HCL Commerce: construyendo un front-end funcional con Gatsby","description":"En este art\u00edculo compartimos c\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby paso a paso con todo lo esencial para hacerlo con \u00e9xito.","inLanguage":"es-ES","isPartOf":{"@id":"https:\/\/orienteed.com\/es\/#website"},"breadcrumb":{"@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#breadcrumblist"},"author":{"@id":"https:\/\/orienteed.com\/es\/author\/runarsverrisson\/#author"},"creator":{"@id":"https:\/\/orienteed.com\/es\/author\/runarsverrisson\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/orienteed.com\/wp-content\/uploads\/2019\/08\/neve-creative-portfolio-31.jpg","@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#mainImage","width":1100,"height":360,"caption":"Background Image"},"primaryImageOfPage":{"@id":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#mainImage"},"datePublished":"2020-06-09T00:00:00+02:00","dateModified":"2024-09-19T16:58:59+02:00"},{"@type":"WebSite","@id":"https:\/\/orienteed.com\/es\/#website","url":"https:\/\/orienteed.com\/es\/","name":"Orienteed \u2022 leading digital solutions.","alternateName":"Orienteed","description":"We transform technology into exceptional experiences.","inLanguage":"es-ES","publisher":{"@id":"https:\/\/orienteed.com\/es\/#organization"}}]},"og:locale":"es_ES","og:site_name":"Orienteed \u2022 We transform technology into exceptional experiences.","og:type":"article","og:title":"HCL Commerce: construyendo un front-end funcional con Gatsby","og:description":"En este art\u00edculo compartimos c\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby paso a paso con todo lo esencial para hacerlo con \u00e9xito.","og:url":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/","og:image":"https:\/\/orienteed.com\/wp-content\/uploads\/2019\/08\/neve-creative-portfolio-31.jpg","og:image:secure_url":"https:\/\/orienteed.com\/wp-content\/uploads\/2019\/08\/neve-creative-portfolio-31.jpg","og:image:width":1100,"og:image:height":360,"article:published_time":"2020-06-08T22:00:00+00:00","article:modified_time":"2024-09-19T14:58:59+00:00","article:publisher":"https:\/\/www.facebook.com\/profile.php?id=61555846676066","twitter:card":"summary_large_image","twitter:site":"@orienteed","twitter:title":"HCL Commerce: construyendo un front-end funcional con Gatsby","twitter:description":"En este art\u00edculo compartimos c\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby paso a paso con todo lo esencial para hacerlo con \u00e9xito.","twitter:creator":"@orienteed","twitter:image":"https:\/\/orienteed.com\/wp-content\/uploads\/2019\/08\/neve-creative-portfolio-31.jpg"},"aioseo_meta_data":{"post_id":"216","title":"HCL Commerce: construyendo un front-end funcional con Gatsby","description":"En este art\u00edculo compartimos c\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby paso a paso con todo lo esencial para hacerlo con \u00e9xito.","keywords":null,"keyphrases":{"focus":{"keyphrase":"HCL","score":82,"analysis":{"keyphraseInTitle":{"score":9,"maxScore":9,"error":0},"keyphraseInDescription":{"score":9,"maxScore":9,"error":0},"keyphraseLength":{"score":9,"maxScore":9,"error":0,"length":1},"keyphraseInURL":{"score":5,"maxScore":5,"error":0},"keyphraseInIntroduction":{"score":9,"maxScore":9,"error":0},"keyphraseInSubHeadings":{"score":3,"maxScore":9,"error":1},"keyphraseInImageAlt":{"score":3,"maxScore":9,"error":1},"keywordDensity":{"type":"best","score":9,"maxScore":9,"error":0}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[],"defaultGraph":"","defaultPostTypeGraph":""},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-10-05 14:30:21","updated":"2025-06-04 04:11:59","seo_analyzer_scan_date":null,"focus_keyword":"HCL","additional_keywords":null,"truseo_locale":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/orienteed.com\/es\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/orienteed.com\/es\/category\/transformacion-digital\/\" title=\"Transformaci\u00f3n Digital\">Transformaci\u00f3n Digital<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tC\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/orienteed.com\/es\/"},{"label":"Transformaci\u00f3n Digital","link":"https:\/\/orienteed.com\/es\/category\/transformacion-digital\/"},{"label":"C\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby","link":"https:\/\/orienteed.com\/es\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/"}],"_links":{"self":[{"href":"https:\/\/orienteed.com\/es\/wp-json\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orienteed.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orienteed.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orienteed.com\/es\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/orienteed.com\/es\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":0,"href":"https:\/\/orienteed.com\/es\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orienteed.com\/es\/wp-json\/wp\/v2\/media\/89"}],"wp:attachment":[{"href":"https:\/\/orienteed.com\/es\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orienteed.com\/es\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orienteed.com\/es\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}