{"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":"gatsby-hcl-aurora","status":"publish","type":"post","link":"https:\/\/orienteed.com\/en\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/","title":{"rendered":"How to build a functional front-end for HCL commerce with Gatsby"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><em>HCL Commerce.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The main goal is to replace the Aurora starter store basic functions with a Gatsby powered store. The store should have a home page (HP), product list page (PLP), product details page (PDP) and checkout. The intention of the post is to give the general idea of how this can be accomplished along with a few code examples.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Setting up<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To set up your development environment we need to take the following steps<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install Node.js: Download and install the latest Node.js version from <a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"noopener\" title=\"https:\/\/nodejs.org\/en\/\">the official Node.js website<\/a><\/li>\n\n\n\n<li>Install Git<\/li>\n\n\n\n<li>Install Gatsby CLI: The Gatsby CLI is available via npm and should be installed globally by running <code><span class=\"code\">npm install -g gatsby-cli<\/span><\/code><\/li>\n\n\n\n<li>Create a Gatsby site: <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\">Now we can do <code>cd gatsby<\/code> and&nbsp; <code>gatsby develop<\/code> to start the Gatsby development server. We can access the Gatsby starter site at <code>http:\/\/localhost:8000\/<\/code>. For more info and tutorials on Gatsby, see the excellent <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\">Sourcing data and generating pages<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Gatsby can pull data from headless CMSs, databases, APIs and among others. There are three approaches that you can use to source data from your private API:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>If your private API is a <strong>GraphQL<\/strong>, you can use <code><span class=\"code\">gatsby-source-graphql<\/span><\/code>.<\/li>\n\n\n\n<li>If your private API is<strong> not a GraphQL API<\/strong> and you are new to GraphQL, treat the data as unstructured data and fetch it during build time, as described by the guide \"<a class=\"sc-eHgmQL jxCPuk\" title=\"Using Gatsby without GraphQL\" href=\"\/en\/Using Gatsby without GraphQL\/\">Using Gatsby without GraphQL<\/a>\". However, as highlighted in the guide, this approach comes with some tradeoffs.<\/li>\n\n\n\n<li>Create a source plugin, as described in the tutorial \"<a class=\"sc-eHgmQL jxCPuk\" title=\"Source plugin tutorial\" href=\"\/en\/Source plugin tutorial\/\">Source plugin tutorial<\/a>\"<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">We will describe how we can use option two to source the data we need from the HCL Commerce APIs and create pages for the store. The file <code>gatsby-node.js<\/code> is used to source the data and create the PDPs and PLPs:<\/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\">The following PLP and PDP templates are found at<\/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\">Now, after we build the code we can see all pages the are created under 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\">We could also have sourced the data by creating a source plug-in and then used graphQL to reference it in&nbsp;<code>gatsby-node.js<\/code>.&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/creating-a-source-plugin\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Here<\/a>&nbsp;More info on source plug-ins in Gatsby, but at a high-level a plug-in would do the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Accept config options like an API key and\/or a search query<\/li>\n\n\n\n<li>Make an API request (to the HCL Commerce REST API) using the provided config options<\/li>\n\n\n\n<li>Convert the data in the API response to Gatsby's&nbsp;<a href=\"https:\/\/www.gatsbyjs.org\/docs\/node-apis\/\" target=\"_blank\" rel=\"noopener\" title=\"\">node system<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Shopping cart<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The PDPs and PLPs were generated pages that used data sources and template files to prepare the final HTML. For the shopping cart we will just prepare a single page, and we do that by adding a file  src\/pages\/cart.js, so no templates are used this time around. We will call the HCL Commerce endpoint that provides details on the shopping cart: http:\/\/localhost:80\/wcs\/resources\/store\/1\/cart\/@self?pageSize=50&amp;pageNumber=1&amp;responseFormat=json'. This will provide us with a JSON that contains everything that is in the cart. We loop through the response to create the shopping cart:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState, useEffect } from &quot;react&quot;\nimport { Link } from &quot;gatsby&quot;\n\nimport Layout from &quot;..\/components\/layout&quot;\nimport SEO from &quot;..\/components\/seo&quot;\n\nconst axios = require(&#039;axios&#039;);\nconst fetch = require(`node-fetch`);\n\nconst CartPage = () =&gt; {\n  const cartURL = &#039;http:\/\/localhost:80\/wcs\/resources\/store\/1\/cart\/@self?pageSize=50&amp;pageNumber=1&amp;responseFormat=json&#039;;\n\n  \/\/ Client-side Runtime Data Fetching\n  const [cartData, setCartData] = useState(0)\n  useEffect(() =&gt; {\n    \/\/ get data from GitHub api\n    fetch(cartURL, {credentials: &quot;include&quot;})\n      .then(response =&gt; response.json()) \/\/ parse JSON from request\n      .then(resultData =&gt; {\n        setCartData(resultData)\n      })\n  }, [])\n  return (\n    &lt;layout&gt;\n      &lt;seo title=&quot;Shoping Cart&quot; \/&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=&quot;{`\/category\/10001\/product\/${item.productId}`}&quot;&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\">It is not enough to have a shopping cart, we need a way to add items to the shopping cart. In order to do that we need add some functionality to the PDPs. To get product details we can use GET \/wcs\/resources\/store\/10001\/productview\/byId\/13011 endpoint. Then to add to the cart we use something like<\/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\">After adding this additional logic to the PDP, we will end up with something like the following:<\/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\">We will need to build a checkout flow for the store as well. That will involve three views: Shipping\/Billing page, Payment\/Review page and a Confirmation page. We will do that similar to the Shopping Cart page; that is, we will add a new entry to <code>src\/pages<\/code> for each page. For each page we will also have to call to proper <a href=\"https:\/\/orienteed.com\/en\/what-is-hcl-commerce\/\" title=\"What is HCL Commerce? Everything you need to know to boost your online customer experience\">HCL Commerce<\/a> endpoints to send and receive data. The resulting pages look like this:<\/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 and CMC content<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If we need to display Spots or other content from the CMC, it is easily accessible via the HCL Commerce REST API. The following table summarizes some of the available endpoints<\/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\">Description<\/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\">Retrieve a list of all search terms that have search rules.<\/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\">Gets an e-Marketing Spot by name.<\/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: Gets an e-Marketing Spot at a specific category level. For example, Furniture. Alternatively, this can be implemented using the findByName method with the following 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: Gets an e-Marketing Spot for a specific product. Alternatively, this can be implemented using the findByName method with the following 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\">Gets e-Marketing Spot data.<\/p>\n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We have built a functional front-end for HCL commerce using the Gatsby framework. The store has all the basic functionalities needed to perform a checkout, such as add-to-cart and a checkout flow. The user will be able to browser the entire catalog and select different versions of the products to add to their cart.<\/p>","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\/en\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/\" rel=\"bookmark\">Read More &raquo;<span class=\"screen-reader-text\">How to build a functional front-end for HCL commerce with Gatsby<\/span><\/a><\/p>","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\/en\/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=\"en_US\" \/>\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\/en\/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\\\/en\\\/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\\\/en\\\/author\\\/runarsverrisson\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/#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\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/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\\\/en\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/orienteed.com\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/category\\\/transformacion-digital\\\/#listItem\",\"name\":\"Transformaci\\u00f3n Digital\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/category\\\/transformacion-digital\\\/#listItem\",\"position\":2,\"name\":\"Transformaci\\u00f3n Digital\",\"item\":\"https:\\\/\\\/orienteed.com\\\/en\\\/category\\\/transformacion-digital\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/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\\\/en\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/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\\\/en\\\/category\\\/transformacion-digital\\\/#listItem\",\"name\":\"Transformaci\\u00f3n Digital\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/#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\\\/en\\\/\",\"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\\\/en\\\/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\\\/en\\\/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\\\/en\\\/author\\\/runarsverrisson\\\/#author\",\"url\":\"https:\\\/\\\/orienteed.com\\\/en\\\/author\\\/runarsverrisson\\\/\",\"name\":\"R\\u00fanar Sverrisson\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/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\\\/en\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#webpage\",\"url\":\"https:\\\/\\\/orienteed.com\\\/en\\\/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\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/author\\\/runarsverrisson\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/author\\\/runarsverrisson\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/orienteed.com\\\/wp-content\\\/uploads\\\/2019\\\/08\\\/neve-creative-portfolio-31.jpg\",\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\\\/#mainImage\",\"width\":1100,\"height\":360,\"caption\":\"Background Image\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/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\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/orienteed.com\\\/en\\\/\",\"name\":\"Orienteed \\u2022 leading digital solutions.\",\"alternateName\":\"Orienteed\",\"description\":\"We transform technology into exceptional experiences.\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/orienteed.com\\\/en\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"HCL Commerce: Building a Functional Front-End with 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\/en\/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\/en\/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\/en\/author\/runarsverrisson\/#author"},"publisher":{"@id":"https:\/\/orienteed.com\/en\/#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":"en-US","mainEntityOfPage":{"@id":"https:\/\/orienteed.com\/en\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#webpage"},"isPartOf":{"@id":"https:\/\/orienteed.com\/en\/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\/en\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/orienteed.com\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/orienteed.com\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/orienteed.com\/en\/category\/transformacion-digital\/#listItem","name":"Transformaci\u00f3n Digital"}},{"@type":"ListItem","@id":"https:\/\/orienteed.com\/en\/category\/transformacion-digital\/#listItem","position":2,"name":"Transformaci\u00f3n Digital","item":"https:\/\/orienteed.com\/en\/category\/transformacion-digital\/","nextItem":{"@type":"ListItem","@id":"https:\/\/orienteed.com\/en\/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\/en\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/orienteed.com\/en\/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\/en\/category\/transformacion-digital\/#listItem","name":"Transformaci\u00f3n Digital"}}]},{"@type":"Organization","@id":"https:\/\/orienteed.com\/en\/#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\/en\/","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\/en\/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\/en\/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\/en\/author\/runarsverrisson\/#author","url":"https:\/\/orienteed.com\/en\/author\/runarsverrisson\/","name":"R\u00fanar Sverrisson","image":{"@type":"ImageObject","@id":"https:\/\/orienteed.com\/en\/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\/en\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#webpage","url":"https:\/\/orienteed.com\/en\/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":"en-US","isPartOf":{"@id":"https:\/\/orienteed.com\/en\/#website"},"breadcrumb":{"@id":"https:\/\/orienteed.com\/en\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#breadcrumblist"},"author":{"@id":"https:\/\/orienteed.com\/en\/author\/runarsverrisson\/#author"},"creator":{"@id":"https:\/\/orienteed.com\/en\/author\/runarsverrisson\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/orienteed.com\/wp-content\/uploads\/2019\/08\/neve-creative-portfolio-31.jpg","@id":"https:\/\/orienteed.com\/en\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/#mainImage","width":1100,"height":360,"caption":"Background Image"},"primaryImageOfPage":{"@id":"https:\/\/orienteed.com\/en\/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\/en\/#website","url":"https:\/\/orienteed.com\/en\/","name":"Orienteed \u2022 leading digital solutions.","alternateName":"Orienteed","description":"We transform technology into exceptional experiences.","inLanguage":"en-US","publisher":{"@id":"https:\/\/orienteed.com\/en\/#organization"}}]},"og:locale":"en_US","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\/en\/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: Building a Functional Front-End with 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\/en\/\" 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\/en\/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\/en\/"},{"label":"Transformaci\u00f3n Digital","link":"https:\/\/orienteed.com\/en\/category\/transformacion-digital\/"},{"label":"C\u00f3mo construir un front-end funcional para HCL Commerce con Gatsby","link":"https:\/\/orienteed.com\/en\/como-construir-un-front-end-funcional-para-hcl-commerce-con-gatsby\/"}],"_links":{"self":[{"href":"https:\/\/orienteed.com\/en\/wp-json\/wp\/v2\/posts\/216","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orienteed.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orienteed.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orienteed.com\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/orienteed.com\/en\/wp-json\/wp\/v2\/comments?post=216"}],"version-history":[{"count":0,"href":"https:\/\/orienteed.com\/en\/wp-json\/wp\/v2\/posts\/216\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orienteed.com\/en\/wp-json\/wp\/v2\/media\/89"}],"wp:attachment":[{"href":"https:\/\/orienteed.com\/en\/wp-json\/wp\/v2\/media?parent=216"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orienteed.com\/en\/wp-json\/wp\/v2\/categories?post=216"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orienteed.com\/en\/wp-json\/wp\/v2\/tags?post=216"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}