FastStore SDK
The FastStore SDK is a toolkit that provides functions and interfaces for managing the state of key ecommerce features in the browser context. Providing a set of functions and interfaces simplifies tasks like tracking cart items and handling user sessions.
The SDK is organized into four modules with specific properties and behaviors. This track provides more details about each module.
Cart
The Cart module controls the state of the shopping cart data structure in the shopper's browser. You can use it to add items to the cart, remove items, and clear the cart, among other tasks.
Learn more about validating the cart in the shopper browser against the information in the platform with FastStore API mutations.
Session
The Session module manages the state of session information in the shopper browser. This includes currency, channel, localization, and shopper information.
Learn more about validating the cart in the shopper browser against the information in the platform with FastStore API mutations.
Search
The Search module offers functions for implementing a faceted search based on URL parameters. Whenever a shopper searches your store or changes the selected facets, the search module generates a unique and serialized URL and then directs the user to that URL.
Analytics
The Analytics module helps you create a simple, extensive event system to feed your data pool. It is geared towards Google Analytics 4 but supports other analytics providers. Learn more about how to use the Analytics module.
Getting started with the FastStore SDK
Install
@faststore/sdk as a dependency of your FastStore project via the command line:
_10yarn add @faststore/sdk
Usage
The FastStore SDK makes available different functions and hooks to manage essential ecommerce features. To use these functions and hooks, import them from the
@faststore/sdk package.The following example demonstrates how to manage a shopping cart using the
useCart hook. It focuses on adding an item to the cart and displaying the cart's contents.
_38import React from 'react'_38import { useCart } from '@faststore/sdk'_38_38const NewComponent = () => {_38 const { addItem, items } = useCart()_38_38 const product = {_38 id: '123',_38 itemOffered: { name: 'Wireless Headphones' },_38 price: 99.99,_38 quantity: 1,_38 }_38_38 const handleAddToCart = () => {_38 addItem(product)_38 }_38_38 return (_38 <div>_38 <h1>{product.itemOffered.name}</h1>_38 <p>${product.price}</p>_38 <button onClick={handleAddToCart}>Add to Cart</button>_38_38 <h2>Cart Summary</h2>_38 {items.length === 0 ? (_38 <p>Your cart is empty.</p>_38 ) : (_38 items.map((item) => (_38 <div key={item.id}>_38 <p>{item.itemOffered.name} - ${item.price} (Qty: {item.quantity})</p>_38 </div>_38 ))_38 )}_38 </div>_38 )_38}_38_38export default NewComponent
In the example, if the cart is empty, it shows a message indicating that the cart is empty. However, if the cart contains items, it lists each item's name, price, and quantity.
Getting started with the FastStore SDK
Install
@faststore/sdk as a dependency of your FastStore project via the command line:Usage
The FastStore SDK makes available different functions and hooks to manage essential ecommerce features. To use these functions and hooks, import them from the
@faststore/sdk package.The following example demonstrates how to manage a shopping cart using the
useCart hook. It focuses on adding an item to the cart and displaying the cart's contents.In the example, if the cart is empty, it shows a message indicating that the cart is empty. However, if the cart contains items, it lists each item's name, price, and quantity.
_10yarn add @faststore/sdk
Inspecting browser data
You can inspect browser data related to the session and shopping cart managed by the SDK when running your project locally. To do that, follow these steps:
-
Run the command
yarn devfrom the root of your FastStore project. -
Open your local project preview at
http://localhost:3000. -
Open the browser's developer console and run the following commands:
- To view session data:
faststore_sdk_stores.get("fs::session").read(). - To view shopping cart data:
faststore_sdk_stores.get("fs::cart").read().
- To view session data: