Fast Simon SDK

https://docs.fastsimon.com/sdk/docs/
Admin
The Fast Simon JavaScript SDK simplifies the integration of advanced e-commerce features like...
Tokens:44,729
Snippets:169
Trust Score:10
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Fast Simon SDK via NPM

Source: https://docs.fastsimon.com/sdk/docs/getting-started

This command installs the Fast Simon SDK package using npm. It is the recommended method for integrating the SDK into your project. Ensure you have Node.js and npm installed.

```bash
npm install fast-simon-sdk
```

--------------------------------

### Initialize Fast Simon SDK with NPM Package

Source: https://docs.fastsimon.com/sdk/docs/getting-started

Initialize the Fast Simon SDK after installing it via npm. This JavaScript code imports the SDK and calls its initialization method with required and optional parameters. The `onReady` callback can be used to execute code once the SDK is ready.

```javascript
import {FastSimonSDK} from "fast-simon-sdk"

// using a cdn script will bind FastSimonSDK to window
FastSimonSDK.initialization({
    storeID: 123, // store-id,
    uuid: "this-is-my-uuid", // uuid
    type: "SPA", // multi page application ("MPA") or single page application("SPA") (for reporting)
    withAttributes: true, //if you need the products with full attributes
    onReady: () => {
        // do stuff
    }
});
```

--------------------------------

### Initialize Fast Simon SDK with CDN

Source: https://docs.fastsimon.com/sdk/docs/getting-started

Include these scripts in the head of your HTML to initialize the Fast Simon SDK using a CDN. The first script configures SDK settings like store UUID and ID, while the second loads the SDK. This method binds the SDK to the window object.

```html
<script>
   window.__fast_simon_sdk_config = {
       store_uuid: "this-is-my-uuid",// uuid
       store_id: 123,// store-id,
       type: "MPA",// multi page application ("MPA") or single page application("SPA") (for reporting)
       withAttributes: true, //if you need the products with full attributes
       onReady: () => {// do stuff
}}
</script>
<script src="https://assets.fastsimon.com/sdk/latest/fast_simon_sdk.js" async></script>
```

--------------------------------

### NPM Installation and Initialization for Fast Simon SDK

Source: https://context7.com/context7/fastsimon_sdk/llms.txt

Installs the Fast Simon JavaScript SDK via NPM and initializes it for use in Single Page Applications (SPA). This involves importing the SDK and calling the `initialization` method with configuration options. It supports features like product attributes, variants, and custom cart tokens, and includes an `onReady` callback.

```bash
npm install fast-simon-sdk
```

```javascript
import { FastSimonSDK } from "fast-simon-sdk"

FastSimonSDK.initialization({
    storeID: 123456,
    uuid: "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
    type: "SPA",
    withAttributes: true,
    withProductVariants: false,
    cartToken: "custom-cart-token-123",
    onReady: () => {
        console.log("Fast Simon SDK ready for SPA");
        // Initialize your search UI components here
    }
});
```

--------------------------------

### CDN Installation for Fast Simon SDK

Source: https://context7.com/context7/fastsimon_sdk/llms.txt

Installs the Fast Simon JavaScript SDK using a Content Delivery Network (CDN). This method involves including a script tag in the HTML, which loads the SDK and allows for SDK configuration via a global `__fast_simon_sdk_config` object. The SDK is loaded asynchronously.

```html
<script>
   window.__fast_simon_sdk_config = {
       store_uuid: "a1b2c3d4-e5f6-7890-abcd-ef1234567890",
       store_id: 123456,
       type: "MPA",
       withAttributes: true,
       onReady: () => {
           console.log("Fast Simon SDK initialized successfully");
           // SDK is ready to use
       }
   }
</script>
<script src="https://assets.fastsimon.com/sdk/latest/fast_simon_sdk.js" async></script>
```

--------------------------------

### Get All Categories with Callback and Promise

Source: https://context7.com/context7/fastsimon_sdk/llms.txt

Shows how to fetch all available categories from the platform using both callback and promise patterns. It logs category names, IDs, URLs, and product counts. The promise example includes a placeholder for building a category tree and rendering a menu.

```javascript
window.FastSimonSDK.getAllCategories({
    callback: (categories) => {
        console.log(`Total categories: ${categories.length}`)
        categories.forEach(category => {
            console.log(`  ${category.name} (ID: ${category.id})`)
            console.log(`    URL: ${category.url}`)
            console.log(`    Products: ${category.product_count}`)
        })
    }
})

window.FastSimonSDK.getAllCategories()
    .then(categories => {
        console.log("All site categories:", categories)

        
        const tree = buildCategoryTree(categories)
        renderCategoryMenu(tree)
    })
    .catch(error => {
        console.error("Failed to load categories:", error)
    })
```

--------------------------------

### Range Facets Example with JavaScript

Source: https://docs.fastsimon.com/sdk/docs/getting-started/collection-page

Demonstrates how to handle and use range facets in the Fast Simon SDK. It shows an example of facet data structure with '_min' and '_max' suffixes and provides a JavaScript usage example for making a 'smartCollections' request with a range filter applied using the '_from_to' format.

```javascript
// Example facets response with _min and _max pairs  
[  
    [  
        "Diamond details.size_min",  
        [  
            [0.3]  
        ],  
        "Diamond details.size_min",  
        true,  
        0  
    ],  
    [  
        "Diamond details.size_max",   
        [  
            [11.01]  
        ],  
        "Diamond details.size_max",  
        true,  
        0  
    ]  
]  

// Usage example with range facet  
window.FastSimonSDK.smartCollections({  
    categoryID: "diamonds",  
    narrowBy: [["Diamond details.size_from_to", "0.3-10"]], // min-max format  
    onFacetsLoaded: (response) => {  
        handleFacetsLoaded(response);  
    },  
    onProductsLoaded: (response) => {  
        // Handle products  
    }  
});  

```

--------------------------------

### Get Visual Look-Alike Product Recommendations (JavaScript)

Source: https://docs.fastsimon.com/sdk/docs/usages/look-a-like

This JavaScript snippet demonstrates how to call the FastSimonSDK to get visual look-alike product recommendations. It requires a `viewedProductId` and a callback function to process the response.

```javascript
window.FastSimonSDK.lookAlikeProductRecommendation({
    viewedProductId: "123123",
    callback: (response) => {
        // do stuff
    }
});
```

--------------------------------

### Product Variants Data Example (Fast Simon SDK)

Source: https://docs.fastsimon.com/sdk/docs/getting-started/collection-page

Illustrates the structure of the 'vra' (product variants) property within a product object. This example shows how variant-specific data, such as barcode, price, sellable status, and size, is organized. This format is used to manage and display different options for a product.

```json
{
    "vra": [
        [39746014183484, [["Barcode", ["WFTOP391-1-XS"]], ["Price", ["USD:44.99"]], ["Product-sku", ["WFTOP391-1-XS"]], ["Sellable", [true]], ["Size", ["XS"]], ["Weight", ["130"]]]],
        [39746014216252, [["Barcode", ["WFTOP391-1-S"]], ["Price", ["USD:44.99"]], ["Product-sku", ["WFTOP391-1-S"]], ["Sellable", [true]], ["Size", ["S"]], ["Weight", ["130"]]]],
        [39746014249020, [["Barcode", ["WFTOP391-1-M"]], ["Price", ["USD:44.99"]], ["Product-sku", ["WFTOP391-1-M"]], ["Sellable", [true]], ["Size", ["M"]], ["Weight", ["130"]]]],
        [39746014281788, [["Barcode", ["WFTOP391-1-L"]], ["Price", ["USD:44.99"]], ["Product-sku", ["WFTOP391-1-L"]], ["Sellable", [true]], ["Size", ["L"]], ["Weight", ["130"]]]],
        [39746014314556, [["Barcode", ["WFTOP391-1-XL"]], ["Price", ["USD:44.99"]], ["Product-sku", ["WFTOP391-1-XL"]], ["Sellable", [false]], ["Size", ["XL"]], ["Weight", ["130"]]]]]
}
```

--------------------------------

### Get Search Results and Report Shopper Activity with Fast Simon SDK

Source: https://docs.fastsimon.com/sdk/docs/getting-started/search-result-page

This snippet illustrates how to perform a full-text search using the Fast Simon SDK. It includes callbacks for loading facets and products, extracting promotional tiles, and reporting search events with detailed data such as query terms, product IDs, and result counts. The callbacks can fire once or twice depending on server response.

```javascript
window.FastSimonSDK.fullTextSearch({
    term: term,
    page: this.page,
    productsPerPage: 48,
    narrowBy: this.narrowBy,
    sortBy: this.sortBy,
   onFacetsLoaded: (response) => {
       this.renderFacets(response.payload.facets);
    },
   onProductsLoaded: (response) => {
       this.renderProducts(response.payload.products);
       // Extract promo tiles from response products
       const promoTiles = response.payload.products
           .filter(product => product.promotile)
           .map(promo => ({
               id: promo.id,
               name: promo.title,
               link: promo.link,
               thumbnail: promo.image
           }));

       // Filter out promo tiles from products list
       const products = response.payload.products
               .filter(product => !product.promotile)
               .map(({ id }) => id)
               .toString();
       window.FastSimonSDK.event({
           eventName: window.FastSimonEventName.SearchPerformed,//Please refer to the full documentation at: https://docs.fastsimon.com/sdk/docs/events/search
           data: {
             query: term,
             categoryID: category_id,
             narrowBy: this.narrowBy,
             sortBy: this.sortBy,
             products: products.length ? products : undefined,
             rescount: response.payload.totalResults,
             pagenum: Math.ceil(response.payload.totalResults / 48),
             promoTiles: promoTiles.length ? promoTiles : undefined
           }
     });
 }
});
```

--------------------------------

### Get Collection Results, Render Products/Filters, Report Shopper Activity (JavaScript)

Source: https://docs.fastsimon.com/sdk/docs/getting-started/collection-page

This JavaScript snippet demonstrates how to fetch collection results using the FastSimon SDK, render products and facets, and report shopper activity. It includes logic for extracting and filtering promo tiles and sending event data. The `onFacetsLoaded` and `onProductsLoaded` callbacks handle rendering and event reporting.

```javascript
window.FastSimonSDK.smartCollections({
    categoryID: category_id,
    page: this.page,
    productsPerPage: 48,
    narrowBy: this.narrowBy,
    sortBy: this.sortBy,
    onFacetsLoaded: (response) => {
       this.renderFacets(response.payload.facets);
    },
   onProductsLoaded: (response) => {
     this.renderProducts(response.payload.products);
     if(response.payload.bannerHTML) {
       this.renderBanner(response.payload.bannerHTML)
     }

     // Extract promo tiles from response products
     const promoTiles = response.payload.products
           .filter(product => product.promotile)
           .map(promo => ({
               id: promo.id,
               name: promo.title,
               link: promo.link,
               thumbnail: promo.image
           }));

     // Filter out promo tiles from products list
     const products = response.payload.products
           .filter(product => !product.promotile)
           .map(({ id }) => id)
           .toString();

     windows.FastSimonSDK.event({
       eventName: windows.FastSimonEventName.SmartCollectionPreformed, //Please refer to the full documentation at: https://docs.fastsimon.com/sdk/docs/events/collection-view
       data: {
         categoryID: category_id,
         narrowBy: this.narrowBy,
         sortBy: this.sortBy,
         products: products.length ? products : undefined,
         rescount: response.payload.totalResults,
         pagenum: Math.ceil(response.payload.totalResults / 48),
         promoTiles: promoTiles.length ? promoTiles : undefined
       }
     });
 }
});
```

--------------------------------

### Product Variant Data Example (JSON)

Source: https://docs.fastsimon.com/sdk/docs/getting-started/search-result-page

Illustrates the structure of the 'vra' property, which contains a list of product variants. Each variant is represented as an array, where the first element is a variant ID and the second is an array of key-value pairs detailing variant options like Barcode, Price, and Size.

```json
{
    "vra": [
        [39746014183484, [["Barcode", ["WFTOP391-1-XS"]], ["Price", ["USD:44.99"]], ["Product-sku", ["WFTOP391-1-XS"]], ["Sellable", [true]], ["Size", ["XS"]], ["Weight", ["130"]]]],
        [39746014216252, [["Barcode", ["WFTOP391-1-S"]], ["Price", ["USD:44.99"]], ["Product-sku", ["WFTOP391-1-S"]], ["Sellable", [true]], ["Size", ["S"]], ["Weight", ["130"]]]],
        [39746014249020, [["Barcode", ["WFTOP391-1-M"]], ["Price", ["USD:44.99"]], ["Product-sku", ["WFTOP391-1-M"]], ["Sellable", [true]], ["Size", ["M"]], ["Weight", ["130"]]]],
        [39746014281788, [["Barcode", ["WFTOP391-1-L"]], ["Price", ["USD:44.99"]], ["Product-sku", ["WFTOP391-1-L"]], ["Sellable", [true]], ["Size", ["L"]], ["Weight", ["130"]]]],
        [39746014314556, [["Barcode", ["WFTOP391-1-XL"]], ["Price", ["USD:44.99"]], ["Product-sku", ["WFTOP391-1-XL"]], ["Sellable", [false]], ["Size", ["XL"]], ["Weight", ["130"]]]]]
}

```

--------------------------------

### Get Products by IDs with Callback and Promise

Source: https://context7.com/context7/fastsimon_sdk/llms.txt

Demonstrates how to retrieve product details using their IDs via both callback and promise-based methods. It logs product information such as name, price, stock availability, and variant count. Handles potential errors during the fetch operation.

```javascript
window.FastSimonSDK.getProducts({
    productIds: ["12345", "67890", "11223"],
    callback: (products) => {
        console.log(`Retrieved ${products.length} products:`)
        products.forEach(product => {
            console.log(`  ${product.l}: $${product.p}`)
            console.log(`    Stock: ${product.iso ? 'Out of Stock' : 'In Stock'}`)
            console.log(`    Variants: ${product.v_c}`)
        })
    }
})

window.FastSimonSDK.getProducts({
    productIds: ["12345", "67890", "11223"]
})
.then(products => {
    console.log(`Fetched ${products.length} products via promise`)
    products.forEach(p => console.log(`  ${p.id}: ${p.l}`))
})
.catch(error => {
    console.error("Failed to fetch products:", error)
})
```

--------------------------------

### Get Look-A-Like Product Recommendations

Source: https://context7.com/context7/fastsimon_sdk/llms.txt

Retrieves visually similar products (look-alikes) for a given product using the 'lookAlikeProductRecommendation' SDK method. It takes the 'viewedProductId' and a callback. The callback handles the 'look a like' action, logs the found products, renders a popup with these products, and reports the 'LookALikeUsed' event. It also includes functionality to track clicks on the recommended products.

```javascript
const currentProductId = "55443322";

window.FastSimonSDK.lookAlikeProductRecommendation({
    viewedProductId: currentProductId,
    callback: (response) => {
        if (response.action === "look a like") {
            console.log(`\nVisually Similar Products to ${currentProductId}:`);
            console.log(`Found ${response.payload.length} look-alike products`);

            response.payload.forEach((product, idx) => {
                console.log(`  ${idx + 1}. ${product.l}`);
                console.log(`     Price: ${product.p} ${product.c}`);
                console.log(`     Image: ${product.t}`);
                console.log(`     URL: ${product.u}`);
            });

            // Render look-alike popup
            renderLookAlikePopup(response.payload);

            // Report look-a-like shown
            window.FastSimonSDK.event({
                eventName: window.FastSimonEventName.LookALikeUsed,
                data: {
                    productID: currentProductId
                }
            });
        }
    }
});

function renderLookAlikePopup(products) {
    const modal = document.createElement('div');
    modal.id = 'lookalike-modal';
    modal.innerHTML = `
        <div class="modal-content">
            <h2>Similar Styles</h2>
            <div class="product-grid">
                ${products.map((p, idx) => `
                    <div class="product-card" data-product-id="${p.id}" data-position="${idx + 1}">
                        <img src="${p.t}" alt="${p.l}">
                        <h3>${p.l}</h3>
                        <p>${p.p} ${p.c}</p>
                    </div>
                `).join('')}
            </div>
        </div>
    `;

    // Track clicks on look-alike products
    modal.querySelectorAll('.product-card').forEach(card => {
        card.addEventListener('click', () => {
            window.FastSimonSDK.event({
                eventName: window.FastSimonEventName.LookALikeProductClicked,
                data: {
                    productID: card.dataset.productId,
                    originalProduct: currentProductId,
                    position: parseInt(card.dataset.position)
                }
            });
        });
    });

    document.body.appendChild(modal);
}
```

--------------------------------

### Landing Page API

Source: https://docs.fastsimon.com/sdk/docs/usages/landing-page

Use this method to get product and filter information for a given landing page slug. The callback function will receive the relevant products and filters.

```APIDOC
## Landing Page API

### Description
Retrieves product and filter information for a specific landing page slug. The callback function will contain the relevant products and filters matching the landing page.

### Method
JavaScript (Client-side)

### Endpoint
Not applicable (client-side SDK method)

### Parameters
#### Options
- **slug** (string) - Required - The landing page slug identifier.
- **callback** ((Response) => void) - Required - The callback function to handle the results. It may be called twice for optimization.
- **page** (number) - Optional (default=1) - The page number for pagination.
- **productsPerPage** (number) - Optional - Use for custom product count. Should be consistent across all pages.
- **sortBy** (sortBy) - Optional (default=relevancy) - The sorting criteria.
- **narrowBy** (Narrow[]) - Optional - Used for filtering products.
- **facets** (boolean) - Optional (default=true) - Set to `false` if filters are not needed.
- **withAttributes** (boolean) - Optional (default=true) - Set to `true` to include attributes in the product response. May slow down serving.

### Request Example
```javascript
window.FastSimonSDK.landingPage({
    term: "pages/yes-please",
    callback: (response) => {
        // do stuff
        // do more stuff
    }
})
```

### Response
#### Callback Response
The callback function receives a `Response` object. The callback may run twice to optimize speed.

Scenario 1: Products and facets fetched together - callback runs once with `action: "products and facets"`.

Scenario 2: Products fetched, facets still fetching - callback runs twice:
  - First call: `action: "products"`
  - Second call: `action: "products and facets"` once facet fetch is completed.

**TypeScript Typing for Response:**
```typescript
interface Response {
    action: "products" | "facets and products"
    payload: {
        ancestors: CategoryAncestor[]
        categoryID: string
        products: Product[]
        facets?: Facet[]
        totalResults: number
        sortBy?: SortBy,
        narrow?: Narrow[],
        isNoResults?: boolean
        page?: number
        pageCount?: number
        bannerHTML?: string
    }
}
```

#### Success Response Example (within callback)
```json
{
    "action": "products and facets",
    "payload": {
        "ancestors": [],
        "categoryID": "12345",
        "products": [
            {
                "id": "prod_1",
                "name": "Sample Product 1",
                "price": {
                    "currency": "USD",
                    "value": 19.99
                }
            }
        ],
        "facets": [
            {
                "key": "color",
                "label": "Color",
                "options": [
                    {
                        "value": "red",
                        "label": "Red",
                        "count": 10
                    }
                ]
            }
        ],
        "totalResults": 100,
        "sortBy": "relevancy",
        "narrow": [],
        "isNoResults": false,
        "page": 1,
        "pageCount": 10,
        "bannerHTML": "<div>Limited Time Offer!</div>"
    }
}
```
```

--------------------------------

### Get Upsell & Cross-Sell Recommendations (JavaScript)

Source: https://docs.fastsimon.com/sdk/docs/getting-started/upsell-and-cross-sell-recommendations

This snippet demonstrates how to retrieve Upsell & Cross-Sell product recommendations using the `productRecommendationByWidget` method from the Fast Simon JavaScript SDK. It takes a product ID and widget IDs as input and processes the response to render recommendation items. The callback function handles the data, mapping it to a structured format for display.

```javascript
window.FastSimonSDK.productRecommendationByWidget({
    productID: "1233231",
    withAttributes: false,
    widgetsIDS: ["123457878"],
    callback: (response) => {
        const payload = response.payload;

        if (payload.length > 0) {
            for (let i = 0; i < payload.length; i++) {
                const widgetPayload = payload[0].payload;
                if (widgetPayload) {
                    const recommendationItems = widgetPayload.map(item => {
                        const productDetail = item;
                        return {
                            id: +productDetail.id,
                            variantId: productDetail.vra[0][0],
                            title: productDetail.l,
                            price: "$" + productDetail.p,
                            regularPrice: "$" + productDetail.p_c,
                            imageUrl: productDetail.t,
                            imageUrl2: productDetail.t2,
                            href: productDetail.u
                        };
                    });

                    renderRecommendationWidget(recommendationItems);
                }
            }
        }
    }
});
```

--------------------------------

### Get Collection Results with Fast Simon SDK

Source: https://docs.fastsimon.com/sdk/docs/getting-started/collection-page

Retrieves collection results using the `smartCollections` method. This method fetches products, facets, and handles pagination based on shopper input like categoryID. It also includes optional callbacks for loading facets, products, and inventory, and sends events for shopper activity.

```javascript
window.FastSimonSDK.smartCollections({
    categoryID: category_id,
    page: this.page,
    productsPerPage: 48,
    narrowBy: this.narrowBy,
    sortBy: this.sortBy,
    onFacetsLoaded: (response) => {
        this.renderFacets(response.payload.facets);
    },
    onProductsLoaded: (response) => {
      this.renderProducts(response.payload.products);

      // Extract promo tiles from response products
      const promoTiles = response.payload.products
            .filter(product => product.promotile)
            .map(promo => ({
                id: promo.id,
                name: promo.title,
                link: promo.link,
                thumbnail: promo.image
            }));

      // Filter out promo tiles from products list
      const products = response.payload.products
            .filter(product => !product.promotile)
            .map(({ id }) => id)
            .toString();

      windows.FastSimonSDK.event({
        eventName: windows.FastSimonEventName.SmartCollectionPreformed, //Please refer to the full documentation at: https://docs.fastsimon.com/sdk/docs/events/collection-view
        data: {
          categoryID: category_id,
          narrowBy: this.narrowBy,
          sortBy: this.sortBy,
          products: products.length ? products : undefined,
          rescount: response.payload.totalResults,
          pagenum: Math.ceil(response.payload.totalResults / 48),
          promoTiles: promoTiles.length ? promoTiles : undefined
        }
      });
    },
    inventoryCallback: (response) => {
            if (response.payload.productsInventory.length > 0) {
                this.renderInventorySection(response.payload.productsInventory);
            }
        }
});
```

--------------------------------

### Direct Search: Handle Turbolinks in fullTextSearch with Fast Simon SDK

Source: https://docs.fastsimon.com/sdk/docs/getting-started/turbolinks

This JavaScript snippet shows how to use the `fullTextSearch` method of the Fast Simon SDK to handle direct navigation to search results. It includes callbacks for loading facets and products. Crucially, within `onProductsLoaded`, it checks if the response `action` is 'turbolink' and if a turbolink URL exists. If so, it redirects the user to that URL. It also includes an example of logging a search event.

```javascript
window.FastSimonSDK.fullTextSearch({
  term: term,
  page: this.page,
  productsPerPage: 48,
  narrowBy: this.narrowBy,
  sortBy: this.sortBy,
  onFacetsLoaded: (response) => {
    this.renderFacets(response.payload.facets);
  },
  onProductsLoaded: (response) => {
    if (response.action === 'turbolink' && response.payload.turbolink?.u) {
      // Redirect to the turbolink URL
      window.location.href = response.payload.turbolink.u;
      return;
    }

    this.renderProducts(response.payload.products);

    // Log the search event
    window.FastSimonSDK.event({
      eventName: window.FastSimonEventName.SearchPerformed,
      data: {
        query: term,
        categoryID: category_id,
        narrowBy: this.narrowBy,
        sortBy: this.sortBy,
        products: response.payload.products.map(({ id }) => id).toString(),
        rescount: response.payload.totalResults,
        pagenum: Math.ceil(response.payload.totalResults / 48)
      }
    });
  }
});
```

--------------------------------

### Get Instant Search Results with Fast Simon SDK

Source: https://docs.fastsimon.com/sdk/docs/getting-started/instantsearch-final

Retrieves instant search results for a given shopper query using the Fast Simon JavaScript SDK. It can return products, popular searches, collections, and content. The `query` parameter specifies the search term, and the `callback` function handles the response. An optional `articlesCallback` can be used for content results when `is_content` is true.

```javascript
window.FastSimonSDK.instantSearch({
        query: searchTerm,
        is_content:true, //optional
        callback: (response) => {
            console.log(response);
            displayAutocomplete(response.payload, searchTerm);
        },
        articlesCallback: (response) => {
            // handle article results
        }
});
```

--------------------------------

### Fetch Popular Discovery Images and Products

Source: https://context7.com/context7/fastsimon_sdk/llms.txt

Retrieves popular discovery images using the FastSimon SDK and allows users to click on images to fetch associated products. This function takes a 'mode' and a 'callback' function as arguments. The callback processes the 'DiscoveryImages' action, logs image details, and dynamically renders gallery images. Clicking an image triggers a call to 'productsByDiscovery' to get related products.

```javascript
window.FastSimonSDK.discoveryImages({
    mode: "popular",
    callback: ({ action, payload }) => {
        if (action === "DiscoveryImages") {
            console.log(`\nPopular Discovery Images (${payload.length}):`);

            payload.forEach((image, idx) => {
                console.log(`  ${idx + 1}. ${image.t}`);
                console.log(`     Description: ${image.d}`);
                console.log(`     Likes: ${image.likes}`);
                console.log(`     Image ID: ${image.image_id}`);

                // Render gallery image
                const imgElement = document.createElement('img');
                imgElement.src = image.t;
                imgElement.alt = image.d;
                imgElement.onclick = () => {
                    // Get products from this discovery image
                    window.FastSimonSDK.productsByDiscovery({
                        mode: "custom",
                        imageID: image.image_id,
                        callback: ({ action, payload }) => {
                            if (action === "ProductsDiscovery" && payload.items) {
                                console.log(`\nProducts from image "${image.t}":`);
                                payload.items.forEach(product => {
                                    console.log(`  ${product.l} - ${product.p} ${product.c}`);
                                });
                            }
                        }
                    });
                };

                document.querySelector('#gallery-container').appendChild(imgElement);
            });
        }
    }
});
```

--------------------------------

### Initialize Fast Simon SDK

Source: https://docs.fastsimon.com/sdk/docs/getting-started/visual-discovery-sample

Initializes the Fast Simon SDK by configuring essential parameters like store UUID, store ID, and application type. The `onReady` callback is invoked once the SDK is prepared.

```javascript
window.__fast_simon_sdk_config = {
    store_uuid: "YOUR_STORE_UUID", // Unique identifier for your store
    store_id: YOUR_STORE_ID,      // Store ID as provided by Fast Simon
    type: "SPA",                  // Specify Single-Page App (SPA) or Multi-Page App (MPA)
    onReady: () => {
        console.log("Fast Simon SDK is ready!");
    }
};
```

--------------------------------

### Response Type for Get All Categories (TypeScript)

Source: https://docs.fastsimon.com/sdk/docs/usages/get-all-categories

Defines the TypeScript type for the response when retrieving categories using the Fast Simon SDK. The response is an array of Category objects.

```typescript
type Response = Category[]
```

--------------------------------

### Initialize Landing Page with Fast Simon SDK

Source: https://docs.fastsimon.com/sdk/docs/usages/landing-page

This snippet demonstrates how to initialize a landing page using the Fast Simon SDK. It requires a landing page slug and a callback function to handle the response, which includes relevant products and filters. The callback might execute once or twice depending on whether products and facets are fetched together or separately for optimization.

```javascript
window.FastSimonSDK.landingPage({
    term: "pages/yes-please",
    callback: (response) => {
        // do stuff
        // do more stuff
    }
})
```

--------------------------------

### Get Products by IDs using Promises

Source: https://docs.fastsimon.com/sdk/docs/usages/get-products

Retrieves product data by product IDs using Promises. This approach allows for more modern asynchronous code handling, chaining operations with .then().

```javascript
window.FastSimonSDK.getAllCategories({productIds: ["123","456","234235"]}).then(r => {
    // handle here
});
```

--------------------------------

### Get Products by IDs using Callback

Source: https://docs.fastsimon.com/sdk/docs/usages/get-products

Retrieves product data by product IDs using a callback function. This method is suitable when asynchronous operations need to be handled directly within a callback.

```javascript
window.FastSimonSDK.getProducts({
    productIds: ["123","456","234235"],
    callback: (result) => {
        // handle here
    }
});
```

--------------------------------

### Display Product Recommendations with Fast Simon SDK (JavaScript)

Source: https://context7.com/context7/fastsimon_sdk/llms.txt

This snippet demonstrates how to use the FastSimonSDK.productRecommendationByWidget function to fetch product recommendations based on the current product and recently viewed items. It handles the callback to process and display recommendations, including product details and attributes, and sends an event for recommendations shown for analytics. Dependencies include the Fast Simon SDK initialized in the window.

```javascript
const currentProductId = "12345678";
const recentlyViewedIds = ["87654321", "11223344", "99887766"];

window.FastSimonSDK.productRecommendationByWidget({
    productID: currentProductId,
    widgetsIDS: ["related-products-widget", "frequently-bought-together"],
    recent: recentlyViewedIds,
    withAttributes: true,
    callback: (response) => {
        if (response.action === "recommendations") {
            response.payload.forEach(widget => {
                console.log(`\nWidget: ${widget.title || widget.widgetID}`);
                console.log(`Source: ${widget.sources}`);
                console.log(`Based on product: ${widget.productID}`);
                console.log(`Categories: ${widget.categoriesIDs.join(", ")}`);
                console.log(`Recommendations (${widget.payload.length}):`);

                widget.payload.forEach((product, idx) => {
                    console.log(`  ${idx + 1}. ${product.l}`);
                    console.log(`     Price: ${product.p} ${product.c}`);
                    console.log(`     Image: ${product.t}`);
                    console.log(`     URL: ${product.u}`);

                    if (product.att) {
                        console.log(`     Attributes:`);
                        product.att.forEach(([attrName, attrValues]) => {
                            console.log(`       ${attrName}: ${attrValues.join(", ")}`);
                        });
                    }
                });

                // Report recommendations shown for analytics
                window.FastSimonSDK.event({
                    eventName: window.FastSimonEventName.RecommendationsProductsShown,
                    data: {
                        products: widget.payload,
                        widget_id: widget.widgetID,
                        sourceProductID: currentProductId
                    }
                });
            });
        }
    }
});
```

--------------------------------

### Report Quick View Product Click Event with Fast Simon SDK

Source: https://docs.fastsimon.com/sdk/docs/getting-started/search-result-page

Creates a 'QuickViewProductClicked' event when a shopper clicks on a product in the quick view and is redirected to the product page. This event requires `productID`, `originalProduct`, and `position`.

```javascript
window.FastSimonSDK.event({
    eventName: window.FastSimonEventName.QuickViewProductClicked,
    data: {
        productID: "11223344",
        originalProduct: "2342432",
        position: 7
    }
});
```

--------------------------------

### Get All Popular Products (JavaScript)

Source: https://docs.fastsimon.com/sdk/docs/usages/get-all-popular-products

Retrieves all popular products from the site. This function can be used with Promises or a callback function. The `withAttributes` option can be used to include product attributes in the response. The `callback` option is required when not using Promises.

```javascript
window.FastSimonSDK.getAllPopularProducts().then(r => {
    // handle here
});
```

```javascript
window.FastSimonSDK.getAllPopularProducts({
    callback: (result) => {
        // handle here
    }
});
```

--------------------------------

### Find Visually Similar Products using FastSimon SDK

Source: https://docs.fastsimon.com/sdk/docs/usages/visual-discovery

This snippet shows how to use the `similarStyles` method to retrieve products that are visually similar to a given product. It requires a `productId`, an `imageUrl`, and a `callback` function. The callback handles the 'SimilarStyles' action to display recommendations or logs an 'Error' if one occurs.

```javascript
window.FastSimonSDK.similarStyles({
    productId: "product id",
    imageUrl: "product image url",
    callback: ({ action, payload }) => {
        if (action === "SimilarStyles" && payload.similar) {
            openSimilarStyles();
        } else if (action === "Error") {
            console.error("An error occurred:", payload);
        }
    }
});
```

--------------------------------

### Get All Categories using Fast Simon SDK (JavaScript)

Source: https://docs.fastsimon.com/sdk/docs/usages/get-all-categories

Retrieves all enabled site categories from the Fast Simon App. This function can be used with either a callback for handling the response or with promises for asynchronous operations. Ensure the Fast Simon SDK is loaded before calling this function.

```javascript
window.FastSimonSDK.getAllCategories({
    callback: (result) => {
        // handle here
    }
});
```

```javascript
window.FastSimonSDK.getAllCategories().then(r => {
    // handle here
});
```

--------------------------------

### Example JSON Payload for Image Search Callback

Source: https://docs.fastsimon.com/sdk/docs/extra/types

An example JSON payload illustrating the structure of the image search callback data. This payload contains an array of `bbox` (bounding box) objects, each detailing detected items with their bounding box coordinates, normalized positions, and associated dot information.

```json
{
    "bbox": [
        {
            "name": "top",
            "bb": [0.25585938, 0.2890625, 0.7734375, 0.734375],
            "position": {
                "left": 25.58,
                "top": 28.90,
                "width": 51.75,
                "height": 44.53
            },
            "dot": {
                "x": 51.46,
                "y": 51.17,
                "name": "top"
            }
        },
        {
            "name": "skirt",
            "bb": [0.28710938, 0.703125, 0.69140625, 0.99609375],
            "position": {
                "left": 28.71,
                "top": 70.31,
                "width": 40.42,
                "height": 29.29
            },
            "dot": {
                "x": 48.92,
                "y": 84.96,
                "name": "skirt"
            }
        }
    ]
}
```

--------------------------------

### JavaScript: Implement Instant Search with Callbacks

Source: https://docs.fastsimon.com/sdk/docs/usages/instant-search

This snippet demonstrates how to initiate an instant search using the Fast Simon SDK. It takes a query string and provides callback functions to handle the search results (products, categories) and article results separately. The 'query' parameter is required, and several optional parameters can be used to refine the search.

```javascript
window.FastSimonSDK.instantSearch({
    query: "shirt",
    callback: (response) => {
        // handle search results
    },
    articlesCallback: (response) => {
        // handle article results
    }
});
```

--------------------------------

### Handle Search Requests and Render Product Grid with FastSimon SDK (JavaScript)

Source: https://docs.fastsimon.com/sdk/docs/getting-started/search-result-page

This function handles full-text search requests using the FastSimon SDK, renders facets and products, and dispatches search-related events. It supports 'Search Within Results' functionality and extracts promo tiles from the product list. The function takes optional parameters for search scope and dependencies on global `term`, `this.page`, `this.narrowBy`, `this.sortBy`, and `this.renderFacets`, `this.renderProducts` methods. Outputs include rendered facets, products, and search events.

```javascript
function loadSearchResults({ searchWithinSearch = "" } = {}) {
  window.FastSimonSDK.fullTextSearch({
    term: term,
    page: this.page,
    productsPerPage: 48,
    narrowBy: this.narrowBy,
    sortBy: this.sortBy,
    searchWithinSearch, // Pass the search query if available
    onFacetsLoaded: (response) => {
      this.renderFacets(response.payload.facets);
    },
    onProductsLoaded: (response) => {
      this.renderProducts(response.payload.products);
      // Extract promo tiles from response products
      const promoTiles = response.payload.products
            .filter(product => product.promotile)
            .map(promo => ({
                id: promo.id,
                name: promo.title,
                link: promo.link,
                thumbnail: promo.image
            }));

        // Filter out promo tiles from products list
      const products = response.payload.products
            .filter(product => !product.promotile)
            .map(({ id }) => id)
            .toString();
      window.FastSimonSDK.event({
        eventName: searchWithinSearch
          ? window.FastSimonEventName.SearchWithinPerformed
          : window.FastSimonEventName.SearchPerformed,//Please refer to the full documentation at: https://docs.fastsimon.com/sdk/docs/events/search
        data: {
          term: term,
          narrowBy: this.narrowBy,
          sortBy: this.sortBy,
          searchWithinSearch,
          products: products.length ? products : undefined, // Include only if there are non-promo products
          rescount: response.payload.totalResults,
          pagenum: Math.ceil(response.payload.totalResults / 48),
          promoTiles: promoTiles.length ? promoTiles : undefined // Include only if there are promo tiles

        },
      });
    },
  });
}

// Initial search load
loadSearchResults();

// Search Within Results
const searchBar = document.getElementById("search-within-results-bar");
searchBar.addEventListener("input", (event) => {
  const searchQuery = event.target.value;
  loadSearchResults({ searchWithinSearch: searchQuery });
});

```

--------------------------------

### Render Smart Collections with FastSimon SDK

Source: https://docs.fastsimon.com/sdk/docs/getting-started/collection-page

This JavaScript code demonstrates how to use the FastSimon SDK to load and render smart collections. It includes callbacks for loading facets and products, rendering related categories, filtering promo tiles, and sending event data. It assumes the existence of category_id and helper methods like renderFacets and renderProducts.

```javascript
window.FastSimonSDK.smartCollections({
    categoryID: category_id,
    page: this.page,
    productsPerPage: 48,
    narrowBy: this.narrowBy,
    sortBy: this.sortBy,
    onFacetsLoaded: (response) => {
        this.renderFacets(response.payload.facets);
    },
    onProductsLoaded: (response) => {
      this.renderProducts(response.payload.products);
      if(response.payload.relatedCategories?.length) {
            // Render product grid
            const container = document.getElementById('relatedCategoriesContainer');

            relatedCategories.forEach(category => {
                const categoryItem = document.createElement('div');
                categoryItem.className = 'category-item';
                categoryItem.innerHTML = `
                    <a href="${category.url}">
                        <img src="${category.image}" alt="${category.title}">
                        <div class="category-item-title">${category.title}</div>
                    </a>
                `;
                container.appendChild(categoryItem);
            });
      }

      // Extract promo tiles from response products
      const promoTiles = response.payload.products
            .filter(product => product.promotile)
            .map(promo => ({
                id: promo.id,
                name: promo.title,
                link: promo.link,
                thumbnail: promo.image
            }));

      // Filter out promo tiles from products list
      const products = response.payload.products
            .filter(product => !product.promotile)
            .map(({ id }) => id)
            .toString();

      windows.FastSimonSDK.event({
        eventName: windows.FastSimonEventName.SmartCollectionPreformed,//Please refer to the full documentation at: https://docs.fastsimon.com/sdk/docs/events/collection-view
        data: {
          categoryID: category_id,
          narrowBy: this.narrowBy,
          sortBy: this.sortBy,
          products: products.length ? products : undefined, // Include only if there are non-promo products
          rescount: response.payload.totalResults,
          pagenum: Math.ceil(response.payload.totalResults / 48),
          promoTiles: promoTiles.length ? promoTiles : undefined // Include only if there are promo tiles
        }
      });
    },
    inventoryCallback: (response) => {
            if (response.payload.productsInventory.length > 0) {
                this.renderInventorySection(response.payload.productsInventory);
            }
        }
});

```

--------------------------------

### Render Product Grid using JavaScript

Source: https://docs.fastsimon.com/sdk/docs/getting-started/search-result-page

Renders a product grid by iterating through a list of products. It creates DOM elements for each product, including image, title, and price, and appends them to a product grid container. Handles potential 'promotile' elements.

```html
<div id="productGrid"></div>
```

```javascript
// Render product grid  
renderProductGrid(response.payload.products);  

function renderProductGrid(products) {  
productGrid.innerHTML = ''; //remove previous results  
products.forEach((product) => {  
  if(product.promotile)  
  {  
      // Render promotile  
  }  
  // Render product card  
  const productCard= document.createElement('div');  
  productCard.setAttribute('id', product.id);*// product id*  
  const title = document.createElement('div');  
  title.innerText = product.l; *// product title*  
  const image= document.createElement('img');  
  image.src = product.l; *// main image*  
  const price = document.createElement('span');  
  title.innerText = product.p; *// price*  
  productCard.appendChild(image);  
  productCard.appendChild(title);  
  productCard.appendChild(price);  
  productGrid.appendChild(productCard);  
 });  
}  

```

--------------------------------

### Product Response Type Definition

Source: https://docs.fastsimon.com/sdk/docs/usages/get-products

Defines the TypeScript type for the product data response. This helps in understanding the structure of the data returned by the SDK methods.

```typescript
type Response = Product[]
```

--------------------------------

### Popular Products Response Type (TypeScript)

Source: https://docs.fastsimon.com/sdk/docs/usages/get-all-popular-products

Defines the TypeScript type for the response when retrieving popular products. The response is an array of `Product` objects.

```typescript
type Response = Product[]

```

--------------------------------

### Autocomplete: Initialize Instant Search with Fast Simon SDK

Source: https://docs.fastsimon.com/sdk/docs/getting-started/turbolinks

This snippet demonstrates how to initialize the Instant Search functionality of the Fast Simon SDK. It takes a search term and a callback function that processes the response, including displaying autocomplete suggestions. The primary dependency is the `FastSimonSDK` object.

```javascript
window.FastSimonSDK.instantSearch({
  query: searchTerm,
  callback: (response) => {
    console.log(response);
    displayAutocomplete(response.payload, searchTerm);
  }
});
```
Tokens:
Raw