Build Front-End with AI
This section provides suggestions for using AI tools (such as Claude Code) to help build an eCommerce front-end using Cortex APIs on the back end.
Getting Started
To get started building your front-end, create a folder and add the following instructions in a CLAUDE.md file, or whatever filename your AI tool uses for reading project-specific instructions. Download the file below and rename it to the correct filename for automatic detection by your AI tooling:
Once that file is in place, start your AI tool and start with a prompt like the one below, adding additional details as needed:
Help me to create an HTML/Javascript front-end for an eCommerce site. The front-end should read and store commerce data using the Elastic Path Self-Managed Commerce REST APIs through Javascript calls. Verify Cortex responses using http://localhost:9080/cortex with the mobee scope.
Building Iteratively
It's best to ask AI to build small pieces iteratively, and test the result of each step. Also make sure to monitor the code being generated to ensure that code reuse and best practices are being followed.
Examples of prompts you might use to iteratively build your front-end:
Authentication & Setup
Set up authentication with Cortex. Store the token in local storage and retrieve a public token if none exists.Add a sign-in modal that authenticates users and upgrades their token from PUBLIC to REGISTERED.Add user registration functionality using the Cortex registrations API.
Product Discovery & Search
Create a product search page that uses Cortex offer search with facets and sorting.Add filter controls that use Cortex facet selectors to filter search results.Implement a sort dropdown that uses Cortex sort attributes.Look up a product by code and display its name, description, and price.
Cart Management
Create a cart summary component that shows line items with prices and totals.Add an 'Add to Cart' button that adds items to a specific named cart, not the default cart.Show a delete button to remove line items from the cart.When adding to cart, refresh the cart summary dynamically without reloading the page.Add a delete button to delete a custom cart entirely.
Line Items & Dependencies
Display selected option values beside each line item in the cart summary.If a line item has dependent line items, display those nested under the parent.Parse dependent line items up to 3 levels deep and show the deepest level.
Wish Lists
Add a wish list card that shows items from the user's default wish list.Add an 'Add to Wish List' button on product cards.Add a 'Move to Cart' button that moves wish list items to a specific cart (not the default cart).
Checkout & Payment
Create a payment form with credit card fields and connect it to Cortex payment instruments.Check if checkout can proceed by looking for the submitorderaction link. If missing, show error messages from the messages array.Submit the order using the purchaseform and handle success/failure responses.
Order History
Show the user's purchase history on their profile page.
Recommendations
Show personalized recommendations for the offer on the product display page.Show personalized recommendations based on items in the cart using crosssell and upsell.
Performance & API Optimization
The zoom query is too long - split the request into two separate API calls.