Jamstack Ecommerce Example

Overview:

The JAMStack E-Commerce Example is a showcase of an e-commerce website built using the JAMStack architecture. It utilizes Nuxt.js as the web application framework and Salesforce as the data storage for products, orders, and user authentication. This example demonstrates key features such as pre-generated static HTML files, pre-fetched product content, authentication via Salesforce, individual user content, client-side shopping cart, order transmission to Salesforce, and delegated logout via Salesforce. The JAMStack architecture allows for easier development and deployment of new features and content.

Features:

• Pre-Generated Static HTML Files: All pages of the website, including product detail pages, are pre-generated at build time and can be served by any web server or CDN.
• Pre-Fetched Product Content: Product content is pre-fetched from Salesforce using a Node.js script and stored locally as JSON files, improving performance and reducing reliance on the Salesforce REST API.
• Authentication via Salesforce: Visitors can authenticate with their Salesforce customer community user using the OpenID Connect protocol.
• Individual User Content: Authenticated visitors can view their own user profile, displaying their Account data from Salesforce. The content is fetched via a dedicated API server.
• Client-Side Shopping Cart: Items added to the shopping cart are stored client-side in the browser’s local storage, allowing visitors to close the browser and restore their cart content upon returning.
• Order Transmission to Salesforce: Authenticated visitors can place orders by sending their shopping cart to the API server, which converts the cart data into a proper Salesforce order and transmits the records via the Salesforce REST API.
• Delegated Logout via Salesforce: The website offers a delegated logout option, redirecting visitors to a special logout page in the Lightning Community for seamless logout from Salesforce.

Installation:

To install and set up the JAMStack E-Commerce Example, follow these steps:

Prerequisites:

1. Ensure you have Nuxt.js and Salesforce accounts set up.

Setting Up Salesforce:

1. Set up the required Salesforce metadata.
2. Configure the test user and profile in Salesforce.
3. Install the Salesforce metadata by running the provided script.

Setting Up the Integration User:

1. Set up the integration user in Salesforce.
2. Grant necessary permissions to the integration user.

Setting Up the Lightning Community:

1. Set up the Lightning Community in Salesforce.
2. Configure the Connected App in Salesforce.

Running the Content Update Script:

1. Execute the Node.js script to pre-fetch product content from Salesforce and store it locally as JSON files.

Running the API Server:

1. Run the API server to handle requests and transmit orders to Salesforce.

Running the Web Application:

1. Run the web application to showcase the JAMStack E-Commerce Example.

Summary:

The JAMStack E-Commerce Example demonstrates the power and benefits of building an e-commerce website using the JAMStack architecture, Nuxt.js, and Salesforce. It showcases key features such as pre-generated static HTML files, pre-fetched product content, authentication, individual user content, client-side shopping cart, order transmission to Salesforce, and delegated logout. By following the installation guide, developers can set up and explore this example to understand how to leverage the JAMStack architecture for their own e-commerce projects.