### Mintlify CLI Setup and Preview

Source: https://docs.glood.ai/guides/introduction

Instructions for installing the Mintlify CLI and running the development server to preview documentation changes locally. This requires Node.js and npm to be installed on your system.

```javascript
npm i -g mintlify
```

```javascript
mintlify dev
```

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

### How to Create Bestsellers Section Guide

Source: https://context7_llms

Instructions on creating a 'Bestsellers' recommendation section within your store using Glood.AI. This guide covers the setup and configuration for displaying top-performing products.

```APIDOC
How to: Create Bestsellers Section

Description: Learn how to create a Bestsellers section to showcase your most popular products.

Steps:
1. Access your Glood.AI dashboard or theme editor.
2. Select or create a new recommendation section.
3. Configure the section type to 'Bestsellers'.
4. Set parameters such as the number of products to display and the time period for 'bestselling' status (e.g., last 30 days).
5. Integrate the section into your theme using the provided Liquid code snippet.

Dependencies: Glood.AI account, theme access.
Considerations: Ensure product data is up-to-date for accurate bestseller ranking.
```

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

### How to Create Bundles Guide

Source: https://context7_llms

A guide on creating 'Bundles' recommendation sections using Glood.AI. This feature helps boost sales by suggesting complementary products that can be purchased together.

```APIDOC
How to: Create Bundles

Description: Learn how to create Bundles sections to suggest product combinations that increase average order value.

Steps:
1. In Glood.AI, navigate to the recommendation section creation.
2. Choose the 'Bundles' or 'Frequently Bought Together' type.
3. Configure the logic for bundle creation (e.g., based on purchase history, product similarity, or manual rules).
4. Define how bundles are displayed (e.g., single bundle per product, multiple options).
5. Add the bundle section to your theme using Liquid.

Dependencies: Glood.AI integration, product catalog.
Considerations: Bundle profitability and customer perception.
```

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

### How to Create Similar Products Section Guide

Source: https://context7_llms

Instructions for creating a 'Similar Products' recommendation section using Glood.AI. This helps customers discover products that are alike to those they are currently viewing or interested in.

```APIDOC
How to: Create Similar Products Section

Description: Learn how to create a Similar Products section to help customers discover items related to their current interest.

Steps:
1. In Glood.AI, set up a new recommendation section.
2. Select the 'Similar Products' recommendation type.
3. Configure the similarity logic (e.g., based on product attributes, purchase history, AI analysis of product descriptions).
4. Define the number of similar products to display and their presentation.
5. Integrate the section into your theme using Liquid.

Dependencies: Glood.AI integration, comprehensive product data.
Considerations: Accuracy of similarity matching.
```

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

### Enable Swatch in V3 Template Guide

Source: https://context7_llms

This guide explains how to enable and configure swatch functionality within your V3 template using Glood.AI. Swatches allow customers to select product variants like color or size visually.

```javascript
// Guide: Enable Swatch in V3 Template
// Learn how to enable and configure swatch functionality in your v3 template

function updateProductVariantFromSwatch(swatchElement) {
  const variantId = swatchElement.dataset.variantId;
  const productId = swatchElement.dataset.productId;
  console.log(`Selected variant ${variantId} for product ${productId}`);

  // Logic to update the main product display (image, price, add-to-cart button)
  // This typically involves fetching variant data and updating the DOM.
  // Example: Update product image
  const productImage = document.querySelector('.glood-product-image img');
  if (productImage && swatchElement.dataset.imageUrl) {
    productImage.src = swatchElement.dataset.imageUrl;
  }

  // Example: Update product price
  const productPrice = document.querySelector('.glood-product-price');
  if (productPrice && swatchElement.dataset.variantPrice) {
    productPrice.textContent = `$${swatchElement.dataset.variantPrice}`;
  }
}

// Add event listeners to swatch elements
document.querySelectorAll('.glood-swatch-option').forEach(swatch => {
  swatch.addEventListener('click', () => {
    updateProductVariantFromSwatch(swatch);
  });
});

```

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

### Glood Data Access and Liquid Examples

Source: https://docs.glood.ai/for-developers/section-template/schemas

Illustrates how to access Glood data within Liquid templates and provides examples for retrieving shop and localization information.

```liquid
// Accessing shop money format
{{ glood.shop.moneyFormat }}

// Accessing language root URL
{{ glood.localization.language.rootUrl }}
```

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

### How to Create Cross Sell Section Guide

Source: https://context7_llms

A guide on implementing 'Cross Sell' recommendation sections with Glood.AI. Cross-selling suggests related or complementary products to customers, enhancing discovery and sales.

```APIDOC
How to: Create Cross Sell Section

Description: Learn how to create Cross Sell sections to suggest related products that complement a customer's current interest.

Steps:
1. In Glood.AI, create a new recommendation section.
2. Choose the 'Cross Sell' recommendation type.
3. Configure the logic for cross-selling (e.g., based on product attributes, purchase patterns, or AI analysis).
4. Define the placement and appearance of the cross-sell recommendations.
5. Add the section to your theme using the provided Liquid code.

Dependencies: Glood.AI integration, product data.
Considerations: Relevance of cross-sell suggestions.
```

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

### Example IntlOptions Configuration

Source: https://docs.glood.ai/for-developers/section-template/schemas

Demonstrates the structure and usage of intlOptions for customizing locale-based currency formatting, including currency display, decimal handling, and symbol presentation.

```json
{
  "en": {
    "style": "currency",
    "currency": "USD",
    "minimumFractionDigits": 2,
    "maximumFractionDigits": 2,
    "currencyDisplay": "symbol"
  }
}
```

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

### Add Sections to Mini Cart Guide

Source: https://context7_llms

A guide detailing how to integrate Glood.AI product recommendations into a store's mini cart (AJAX cart). This involves modifying theme files to display recommendations alongside cart items.

```APIDOC
How to: Add Sections to Mini Cart

Description: This guide walks you through the process of adding Glood.AI product recommendations to your store's mini cart (also known as AJAX cart).

Steps:
1. Locate your theme's mini cart JavaScript file (often in `assets/` or `snippets/`).
2. Identify the event or function that triggers the mini cart display.
3. Inject the Glood.AI recommendation widget code or call the Glood.AI API to fetch and render recommendations within the mini cart's HTML structure.
4. Ensure proper styling is applied using CSS.

Dependencies: Access to theme files, understanding of JavaScript and Liquid.
Considerations: Performance impact on mini cart loading time.
```

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

### How to Create Slot Based Recommendation Section Guide

Source: https://context7_llms

A guide on implementing 'Slot Based Recommendation' sections with Glood.AI. This allows for precise placement and control over where specific types of recommendations appear on a page.

```APIDOC
How to: Create Slot Based Recommendation Section

Description: Learn how to create Slot Based Recommendation sections for precise control over recommendation placement.

Steps:
1. In Glood.AI, configure recommendation 'slots' or placeholders within your theme.
2. Assign specific recommendation types (e.g., 'Bestsellers', 'Related Products', 'Upsells') to these slots.
3. Use the Glood.AI dashboard or API to manage which recommendations populate each slot.
4. Integrate the slot system into your theme's Liquid files.

Dependencies: Glood.AI setup, theme structure.
Considerations: Managing multiple recommendation types and slots effectively.
```

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

### JavaScript Hook for Initialization

Source: https://docs.glood.ai/for-developers/section-template/introduction

Provides an example of a JavaScript hook for initializing section components within Glood.AI templates, allowing custom logic execution on load.

```javascript
initSection: (args, cb, utils) => {
  // Initialization logic
}
```

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

### Example Carousel and Variant Initialization Hooks

Source: https://docs.glood.ai/for-developers/section-template/code

Demonstrates practical implementation of the `initSwiper` and `onVariantChange` callbacks, showing how to initialize a carousel and update product prices based on variant selection using provided utility functions.

```javascript
initSwiper: (Swiper, templateSettings, container, params) => {
    const carouselContainer = container.querySelector('._gai-crz-cnt');
    if (!carouselContainer) return;
    
    return new Swiper(carouselContainer, {
        slidesPerView: templateSettings.breakpoints.small.cardsPerView,
        spaceBetween: templateSettings.breakpoints.small.gutter
    });
}

onVariantChange: (args, utils) => {
    const { variant, product, container } = args;
    const priceElement = container.querySelector('._gai-prod-prc');
    if (priceElement && variant.price) {
        priceElement.textContent = utils.formatMoney(variant.price);
    }
}
```

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

### Configuration Properties Reference

Source: https://docs.glood.ai/for-developers/section-template/schemas

This section provides a comprehensive reference for all configurable properties within the project, categorized by their function. It covers settings for responsive design breakpoints and the visual presentation of product cards. Each property includes its key path, data type, a detailed description, example usage, and default value.

```APIDOC
Settings Reference:

settings.breakpoints:
  Description: Defines responsive design settings for different screen sizes.
  Properties:
    small: object
      Description: Mobile device settings.
      Example: See breakpoint example.
      Default Value: {}
    medium: object
      Description: Tablet device settings.
      Example: See breakpoint example.
      Default Value: {}
    large: object
      Description: Desktop device settings.
      Example: See breakpoint example.
      Default Value: {}
    [].cardsPerView: number
      Description: Number of cards to display per row.
      Example: `2` (mobile), `3` (tablet), `4` (desktop).
      Default Value: 4
    [].gutter: number
      Description: Space between cards in pixels.
      Example: `10` (mobile), `20` (desktop).
      Default Value: 20
    [].justifyWidgetTitle: enum
      Description: Alignment for widget titles.
      Example: `"left"`, `"center"`, `"right"`.
      Default Value: "left"
    [].widgetTitleAlignment: string
      Description: Widget title positioning.
      Example: `"left"`, `"center"`, `"right"`.
      Default Value: "left"
    [].productTitleAlignment: string
      Description: Alignment for product titles.
      Example: `"left"`, `"center"`, `"right"`.
      Default Value: "left"
    [].comparePriceVisible: boolean
      Description: Controls the visibility of the compare price feature.
      Example: `true`, `false`.
      Default Value: false
    [].imageWidth: number
      Description: Width of the product image.
      Example: 300.
      Default Value: 300
    [].imageHeight: number
      Description: Height of the product image.
      Example: 300.
      Default Value: 300
    [].screenSize: number
      Description: The width threshold in pixels for this breakpoint.
      Example: 768.
      Default Value: 768
    [].maxSectionTitleRows: number
      Description: Maximum number of rows for section titles.
      Example: 2.
      Default Value: 2
    [].maxProductTitleRows: number
      Description: Maximum number of rows for product titles.
      Example: 2.
      Default Value: 2
    [].widgetTitleFontSize: number
      Description: Font size for section titles.
      Example: 24.
      Default Value: 24
    [].productTitleFontSize: number
      Description: Font size for product titles.
      Example: 16.
      Default Value: 16
    [].productVendorFontSize: number
      Description: Font size for product vendor names.
      Example: 14.
      Default Value: 14

settings.productCard:
  Description: Defines visual and interactive settings for product cards.
  Properties:
    vendorPosition: enum
      Description: Position of the vendor name relative to the product.
      Example: `"above"`, `"below"`, `"hidden"`.
      Default Value: hidden
    addToCartMode: enum
      Description: Behavior for adding items to the cart.
      Example: `"card_hover"`, `"image_hover"`, `"fix"`.
      Default Value: card_hover
    imageHoverMode: enum
      Description: Effect applied when hovering over the product image.
      Example: `"secondary"`, `"zoom"`, `"none"`.
      Default Value: secondary
    imageObjectFit: enum
      Description: How the product image should be resized to fit its container.
      Example: `"contain"`, `"cover"`.
      Default Value: contain
    priceCompareMode: enum
      Description: Position of the price comparison information.
      Example: `"before"`, `"after"`, `"hidden"`.
      Default Value: before
    discountLabelPosition: enum
      Description: Position of the discount badge on the card.
      Example: `"left"`, `"right"`, `"center"`.
      Default Value: center
    variantSelectorType: enum
      Description: UI style for selecting product variants.
      Example: `"integrated"`, `"selector"`, `"swatch"`.
      Default Value: integrated
    showQuantitySelector: boolean
      Description: Whether to display a quantity selector on the card.
      Example: `true`, `false`.
      Default Value: false
    minQuantity: number
      Description: Minimum allowed quantity for a product.
      Example: 1.
      Default Value: (empty)
    maxQuantity: number
      Description: Maximum allowed quantity for a product.
      Example: 10.
      Default Value: (empty)
```

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

### Glood.AI: onSectionInit Hook for Section Initialization

Source: https://docs.glood.ai/for-developers/section-template/hooks

Details the onSectionInit hook, which is called during the section initialization phase. It outlines the arguments it receives, the callback function's role, and provides a JavaScript example for its implementation.

```APIDOC
Hook: onSectionInit

Purpose:
Primary initialization hook called when a section is first created.

Parameters:
1. `args` (object): Contains initialization data.
   - `recommendation` (object): Includes section details (ID, layout, title, discount config) and an array of product data.
   - `engine` (object): Contains engine name, version, and configuration.
   - `initEnginePayload` (object): Data for engine initialization.

2. `cb` (function): Callback function to handle initialization completion.
   - Receives the processed recommendation object.
   - No return value expected.

3. `gloodUtils` (object): Provides utility functions for common tasks.

Example:
```javascript
onSectionInit: (args, cb, gloodUtils) => {
    const { recommendation, engine, initEnginePayload } = args;
    cb({
        recommendation,
        engine,
        initEnginePayload,
    });
}
```

Use Cases:
- Section configuration
- State initialization
- Event listener setup
- Feature initialization
- Engine configuration
```

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

### How to Create Recently Viewed Section Guide

Source: https://context7_llms

Instructions for creating a 'Recently Viewed' section using Glood.AI. This feature helps customers easily revisit products they have previously browsed on the site.

```javascript
// Guide: How to Create Recently Viewed Section
// This guide explains how to implement a 'Recently Viewed' section.

// Function to save viewed product to local storage
function saveViewedProduct(productId, productUrl, productName, imageUrl) {
  const viewedProducts = JSON.parse(localStorage.getItem('gloodRecentlyViewed') || '[]');
  
  // Remove existing entry for this product to keep it at the top
  const updatedProducts = viewedProducts.filter(p => p.id !== productId);
  
  // Add new entry
  updatedProducts.unshift({
    id: productId,
    url: productUrl,
    name: productName,
    imageUrl: imageUrl,
    timestamp: Date.now()
  });
  
  // Limit the number of stored items
  const limitedProducts = updatedProducts.slice(0, 10);
  
  localStorage.setItem('gloodRecentlyViewed', JSON.stringify(limitedProducts));
}

// Function to display recently viewed products
function displayRecentlyViewed() {
  const viewedProducts = JSON.parse(localStorage.getItem('gloodRecentlyViewed') || '[]');
  const recentlyViewedContainer = document.getElementById('recently-viewed-products');

  if (!recentlyViewedContainer || viewedProducts.length === 0) {
    return;
  }

  let html = '<h3>Recently Viewed</h3><ul>';
  viewedProducts.forEach(product => {
    html += `
      <li class="glood-product-item" data-product-id="${product.id}">
        <div class="glood-product-image"><img src="${product.imageUrl}" alt="${product.name}"></div>
        <div class="glood-product-details">
          <div class="glood-product-name"><a href="${product.url}">${product.name}</a></div>
        </div>
      </li>
    `;
  });
  html += '</ul>';
  recentlyViewedContainer.innerHTML = html;
}

// Example: Call saveViewedProduct when a product page loads
// Assuming product details are available globally or passed as data attributes
// const currentProductId = document.body.dataset.currentProductId;
// if (currentProductId) {
//   saveViewedProduct(currentProductId, ...);
// }

// Call displayRecentlyViewed when the page loads or when the section is needed
// document.addEventListener('DOMContentLoaded', displayRecentlyViewed);

```

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

### Get Headless Recommendations API

Source: https://context7_llms

Fetches AI recommendations, including manual, rule-based, LLM, and AI-driven suggestions, using a query. This provides flexibility for headless commerce implementations.

```APIDOC
GET /api-reference/endpoint/headless-recommendations.md

Description: Get AI recommendations including Manual, Rules, LLM & AI using Query.
Purpose: To retrieve diverse recommendation types based on specific queries.
Input: Query parameters specifying recommendation criteria.
Output: Structured recommendation data.
```

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

### Example Review Widget HTML Output

Source: https://docs.glood.ai/for-developers/integrations/product-ratings

Illustrates the HTML structure generated by the `product_ratings` tag for displaying Judge.me review widgets. This output includes the necessary attributes for the widget to function correctly.

```html
<div class="jdgm-widget jdgm-preview-badge" data-id="1234567890" data-auto-install="false"></div>
```

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

### How to Create Collections Widget Section Guide

Source: https://context7_llms

Instructions for creating a 'Collections Widget' section using Glood.AI. This allows you to display curated product collections or categories within your store's pages.

```APIDOC
How to: Create Collections Widget Section

Description: Learn how to create a Collections Widget section to display product collections or categories.

Steps:
1. In Glood.AI, set up a new recommendation section.
2. Select the 'Collections Widget' type.
3. Configure which collections to display and how they should be presented (e.g., grid, carousel).
4. Optionally, set rules for which products appear within each collection.
5. Integrate the widget into your theme via Liquid.

Dependencies: Glood.AI setup, defined product collections.
Considerations: Visual design and user navigation.
```

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

### Custom Liquid Tag Example

Source: https://docs.glood.ai/for-developers/section-template/introduction

Demonstrates the usage of a custom Liquid tag within a Glood.AI section template for integrating specific functionalities, such as displaying product ratings.

```liquid
{% product_ratings product_id: product.id %}
```

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

### How to Disable Products and Tags from Recommendations Guide

Source: https://context7_llms

A guide on how to exclude specific products or tags from appearing in Glood.AI recommendations. This is useful for managing inventory, promotions, or product visibility.

```APIDOC
How to: Disable Products and Tags from Recommendations

Description: Learn how to exclude specific products or tags from appearing in Glood.AI recommendations.

Steps:
1. Access the Glood.AI settings or dashboard.
2. Navigate to the 'Exclusions' or 'Filtering' section.
3. Add product IDs or tags that should not be recommended.
4. Save the exclusion rules.

Example Exclusion Rule:
- Product ID: 123456789
- Product Tag: "clearance"
- Product Tag: "out-of-stock"

Dependencies: Glood.AI account access.
Considerations: Ensure exclusions are correctly applied to maintain recommendation relevance.
```

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

### Section Configuration Options

Source: https://docs.glood.ai/for-developers/how-to-guides/how-to-create-promoted-products-section

Details the various configuration parameters available for setting up a product recommendation section. This includes basic information, recommendation strategies, location and positioning, advanced settings, visual editor choices, and visitor segmentation targeting.

```APIDOC
Section Configuration:
  Basic Info:
    Section Name: string (Customize the name of your section)
    Set Translations: object (Add translations for different languages)

  Object Recommendation:
    Add Recommendation button: action (Initiates recommendation strategy definition)
    Page URL: string (Input field for page URL)
    Add Products button: action (Enabled after URL entry, used to select products)

  Location & Position:
    Location Selector: string (e.g., div ID, class selector, xPath; default: #shopify-section-product-template)
    Position Number: integer (Controls order within location; 1 = first section)
    Breakpoint-based configuration: object (Granular control across screen sizes)
    Widget Code Snippet: string (For direct theme code placement)
    Require app block placement: boolean (Controls section display in storefront)

  Advanced Configuration Settings:
    Product Ranking Criteria:
      Options: ["No criteria", "Bestsellers first", "Price (high to low)", "Price (low to high)", "New products first", "Personalized for viewer", "Random"] (Default: "No criteria")
    Fallback Criteria:
      Options: ["Random", "Best sellers", "Trending", "No criteria"] (Default: "Random")
    Price Range Limits:
      Minimum Price: currency (Set a floor price for displayed products)
      Maximum Price: currency (Set a ceiling price for displayed products)

  Status Section:
    Section Status: boolean (Toggle switch to enable/disable the section)

  Visual Editor:
    Editor Choice: string (Options: "Visual Editor", "Visual Editor V3")
    Template Type: string (Determines editor availability: "v2 templates" or "v3 templates")
    Layout Style (Default): string (Options: "Carousel", "Horizontal Grid")
    Layout Style (Screen Sizes):
      Small screens (mobile): string (Options: "Carousel", "Horizontal Grid")
      Medium screens (tablet): string (Options: "Carousel", "Horizontal Grid")
      Large screens (desktop): string (Options: "Carousel", "Horizontal Grid")

  Segmentation:
    Targeting Options:
      Options: ["All visitors", "First-time visitors", "Returning visitors", "Buyers", "Is customer", "Is not customer"] (Default: "All visitors")
```

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

### Section Configuration Options

Source: https://docs.glood.ai/for-developers/how-to-guides/how-to-create-bestsellers-section

Provides a structured overview of all configurable parameters for a recommendation section, including basic info, recommendation logic, display rules, advanced settings, visual editor choices, and visitor segmentation.

```APIDOC
Section Configuration:
  Purpose: Customize and control the display and behavior of recommendation sections.

  Configuration Options:
    Basic Info:
      Section Name: string (Customize the name of your section)
      Set Translations: array of strings (Add translations for different languages)

    Recommendation Configuration:
      Show Sold Out Items as Recommendations: boolean (If enabled, out-of-stock items may appear in suggestions)

    Location & Position:
      Location Selector: string (Enter a div ID, class selector, or xPath; default: #shopify-section-product-template)
      Position Number: integer (Set the position number to control order within the location; 1 = first section)
      Breakpoint-based Configuration: boolean (Enable granular control across different screen sizes)
      Require App Block Placement: boolean (Optional: Control section display in storefront)

    Advanced Configuration Settings:
      Product Ranking Criteria:
        Criteria: enum (No criteria, Price (high to low), Price (low to high), New products first, Personalized for viewer, Random)
      Fallback Criteria:
        Criteria: enum (Random, Trending, No criteria)
      Price Range Limits:
        Minimum Price: number (Set a floor price for displayed products)
        Maximum Price: number (Set a ceiling price for displayed products)

    Status Section:
      Active: boolean (Control whether this recommendation section is active or inactive on your store)

    Visual Editor:
      Editor Version: enum (Visual Editor, Visual Editor V3) (Choose between versions based on template type)
      Template Type: enum (v2 templates, v3 templates) (Determines available editor versions)
      Default Layout Style: enum (Carousel, Horizontal Grid) (Select a default layout style)
      Layout Style - Small Screens: enum (Carousel, Horizontal Grid) (Select layout for mobile)
      Layout Style - Medium Screens: enum (Carousel, Horizontal Grid) (Select layout for tablet)
      Layout Style - Large Screens: enum (Carousel, Horizontal Grid) (Select layout for desktop)

    Segmentation:
      Targeting Options: array of strings (Control which visitors see the section; options: All visitors, First-time visitors, Returning visitors, Buyers, Is customer, Is not customer)
```

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

### Enable Custom Events in V3 Template Guide

Source: https://context7_llms

Learn how to enable and configure custom events to control section visibility on your store using Glood.AI's V3 template. This guide focuses on event-driven interactions.

```javascript
// Guide: Enable Custom Events in V3 Template
// Learn how to enable and configure custom events to control section visibility on your store

// Example of dispatching a custom event
function triggerSectionVisibilityEvent(sectionId, isVisible) {
  const event = new CustomEvent('gloodSectionVisibility', {
    detail: {
      sectionId: sectionId,
      isVisible: isVisible
    }
  });
  document.dispatchEvent(event);
}

// Example of listening for the custom event
document.addEventListener('gloodSectionVisibility', (event) => {
  const { sectionId, isVisible } = event.detail;
  console.log(`Section ${sectionId} visibility changed to: ${isVisible}`);
  // Logic to show/hide sections based on the event
  const sectionElement = document.getElementById(sectionId);
  if (sectionElement) {
    sectionElement.style.display = isVisible ? 'block' : 'none';
  }
});

// Usage example: Trigger event when a product is added to cart
// addProductToCartButton.addEventListener('click', () => {
//   triggerSectionVisibilityEvent('upsell-section', true);
// });

```

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

### Complete getDefaultProductVariant Example (JavaScript)

Source: https://docs.glood.ai/for-developers/how-to-guides/how-to-set-default-variant

A comprehensive example showing the `getDefaultProductVariant` hook implementation to find the first available variant with stock, falling back to the first variant if none are available.

```javascript
const productTemplate = {
  name: 'Product Template',
  getDefaultProductVariant: (product) => {
    // Find first available variant with quantity in stock
    const defaultVariant = product.variants.find(variant => 
      variant.availableForSale && 
      variant.quantityAvailable > 0 &&
      !variant.currentlyNotInStock
    );
    
    // Return the variant ID, falling back to first variant's ID if no available variants found
    return (defaultVariant || product.variants[0]).id;
  },
  // ... other template configuration
};
```

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

### How to Create Trending Section Guide

Source: https://context7_llms

Instructions for creating a 'Trending' recommendation section using Glood.AI. This feature highlights products that are currently popular or gaining traction among shoppers.

```APIDOC
How to: Create Trending Section

Description: Learn how to create a Trending section to showcase products that are currently popular or gaining traction.

Steps:
1. In Glood.AI, create a new recommendation section.
2. Select the 'Trending Products' recommendation type.
3. Configure the criteria for 'trending' (e.g., based on recent views, purchases, or social signals).
4. Set the duration for which a product remains 'trending'.
5. Integrate the trending section into your theme using Liquid.

Dependencies: Glood.AI integration, real-time data processing.
Considerations: Defining 'trending' accurately and dynamically.
```

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

### Liquid Filter for Money Formatting

Source: https://docs.glood.ai/for-developers/section-template/introduction

Shows how to use a Liquid filter to format product prices according to the shop's currency settings, enhancing presentation in Glood.AI templates.

```liquid
{{ product.price | format_money: glood.shop.money_format }}
```

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

### Trigger Event After Delay

Source: https://docs.glood.ai/for-developers/how-to-guides/enable-custom-events

An example of dispatching the initialization event after a specified delay using `setTimeout`. This is useful for time-based loading scenarios.

```javascript
setTimeout(() => {
  dispatchEvent(new CustomEvent("initialize_app"));
}, 3000); // Show sections after 3 seconds
```

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

### Recommendation Filtering and Ranking Criteria

Source: https://docs.glood.ai/for-developers/how-to-guides/how-to-create-similar-products-section

Define how products are selected and ordered for recommendations. This includes setting ranking priorities, filtering by product attributes, and establishing fallback mechanisms when primary recommendations are unavailable.

```APIDOC
Recommendation Configuration:
  - Product Ranking Criteria:
    - Determines the order of recommended products.
    - Options:
      - "Similarity score" (default)
      - "Price (high to low)"
      - "Price (low to high)"
      - "New products first"
      - "Bestsellers first"
      - "Random"
  - Product Filter Criteria:
    - Restricts which products can be recommended based on attributes.
    - Options:
      - "Collection": Recommend products from the same collection.
      - "Products": Recommend specific products.
      - "Product Type": Recommend products with matching product type.
      - "Vendor": Recommend products from the same vendor.
      - "No criteria" (default): No filtering applied.
  - Fallback Criteria:
    - Defines behavior when primary recommendations are not available.
    - Options:
      - "Random" (default)
      - "Best sellers"
      - "No criteria"
      - "Trending"
  - Price Range Limits:
    - Minimum Price: Set a floor price for recommended products.
    - Maximum Price: Set a ceiling price for recommended products.
```

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

### Get Automatic Recommendations API

Source: https://context7_llms

Retrieves automatic product recommendations powered by Large Language Models (LLMs). This endpoint is crucial for dynamic content generation on e-commerce sites.

```APIDOC
GET /api-reference/endpoint/automatic-recommendations.md

Description: Get automatic recommendations powered using LLMs.
Purpose: To fetch AI-generated product recommendations.
Input: Typically requires product context or user session data.
Output: A list of recommended products with relevant details.
```

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

### Configure Folder Navigation (JSON)

Source: https://docs.glood.ai/features/discounts

Shows how to include pages located within specific folders in the navigation. The `pages` array accepts paths relative to the project root, allowing for organized content structures.

```json
"navigation": [
    {
        "group": "Group Name",
        "pages": ["your-folder/your-page"]
    }
]
```

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

### Advanced Configuration Settings

Source: https://docs.glood.ai/for-developers/how-to-guides/how-to-create-cross-sell-section

Fine-tunes the behavior of recommendation generation and display, including product ranking, fallback mechanisms, and price range filtering.

```APIDOC
Advanced Configuration Settings:
  - Product Ranking Criteria:
    - Type: enum
    - Options: ['No criteria', 'Bestsellers first', 'Price (high to low)', 'Price (low to high)', 'New products first', 'Personalized for viewer', 'Random']
    - Description: Defines the order in which recommended products are presented.
  - Fallback Criteria:
    - Type: enum
    - Options: ['Random', 'Best sellers', 'No criteria', 'Trending']
    - Description: Specifies what to display when primary recommendations are unavailable.
  - Price Range Limits:
    - Minimum Price:
      - Type: number
      - Description: Sets the lowest acceptable price for recommended products.
    - Maximum Price:
      - Type: number
      - Description: Sets the highest acceptable price for recommended products.
```

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

### Recommendation Configuration Options

Source: https://docs.glood.ai/for-developers/how-to-guides/how-to-create-cross-sell-section

Details the methods for generating product recommendations, including rule-based, manual, automatic, and random suggestions.

```APIDOC
Recommendation Configuration:
  - Rule-Based Recommendation:
    - Description: Recommend products based on collections, tags, product types, or vendors.
  - 1-1 Manual Recommendation:
    - Description: Manually select cross-sell products for individual items. Has highest priority.
  - Automatic Recommendation:
    - Description: Enable system to automatically suggest products based on real-time sales data.
  - Enable Random Recommendations:
    - Description: Use fallback random suggestions when no other data is available.
  - Show Sold Out Items as Recommendations:
    - Type: boolean
    - Description: If enabled, out-of-stock items may appear in recommendations.
```

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

### Dux.js Initialization and Configuration

Source: https://apps.shopify.com/recommendation-kit

Loads and initializes the Dux.js library, a Shopify-specific analytics and user tracking tool. It configures Dux with service details, event handlers, and GTM integration based on data attributes from the DOM.

```javascript
window.bugsnagApiKey = 'e6295e2834074504b103aaaf32d1afcd';
(function () {
  function getData(key) {
    const dux_info = document.getElementById('dux-data');
    if (dux_info && dux_info.dataset && dux_info.dataset[key]) {
      return dux_info.dataset[key];
    }
    return;
  }
  function loadScript(src) {
    const promise = new Promise(function(resolve, reject){
      const script = document.createElement('script');
      script.src = src;
      script.async = true;
      script.onload = () => { resolve(true); };
      script.onerror = () => { reject(false); };
      document.head.appendChild(script);
    });
    return promise;
  }
  loadScript(`https://cdn.shopify.com/shopifycloud/dux/dux-4.2.9.min.js`).then(() => {
    Dux.init({
      service: 'appstore',
      mode: getData('mode') || 'development',
      eventHandlerEndpoint: 'https://apps.shopify.com/.well-known/dux',
      enableGtm: true,
      enableGtmLoader: false,
      enableActiveConsent: false,
      shopId: getData('shop_id'),
      identityUuid: getData('identity_uuid'),
    });
  });
})();
```

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

### Trigger Event on Scroll

Source: https://docs.glood.ai/for-developers/how-to-guides/enable-custom-events

An example of dispatching the initialization event when a user scrolls to the bottom of the page. It relies on a hypothetical `isScrolledToBottom()` function to determine the scroll state.

```javascript
window.addEventListener('scroll', () => {
  if (isScrolledToBottom()) {
    dispatchEvent(new CustomEvent("initialize_app"));
  }
});
```

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

### Basic Section Template Structure

Source: https://docs.glood.ai/for-developers/section-template/introduction

Illustrates the fundamental structure of a Glood.AI section template, including Liquid markup, CSS, and JavaScript placeholders for dynamic content and styling.

```liquid
<div class="glood-section" data-section-id="{{ section.id }}">
  {%- comment -%} Template markup {%- endcomment -%}
</div>

{% stylesheet %}
  /* Template styles */
{% endstylesheet %}

{% javascript %}
  // Template JavaScript
{% javascript %}
```

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

### Track Customer Preferences Event

Source: https://docs.glood.ai/guides/glood-custom-web-pixel-events

Documents the 'glood:customer_preference' event for storing customer preferences. It details the event structure, payload fields like 'preferences' (an array of key-value objects), and provides a JavaScript example for publishing the event.

```javascript
Shopify.analytics.publish('glood:customer_preference', {
    preferences: [
        { key: 'tags', value: "tag1,tag2" }
    ]
});
```

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

### Storefront Filter Additions and Preview Parameter

Source: https://docs.glood.ai/releases

Details new filters available for storefront templates, such as `file_url` for direct file access and `handleize` for URL-friendly text conversion. Also includes a URL parameter `rk_preview=true` for previewing disabled sections on the live store.

```APIDOC
Storefront Filters:

- `file_url`: Provides direct file access within templates.
- `handleize`: Converts text into a URL-friendly format.

Preview Functionality:

- URL Parameter: `rk_preview=true`
  - Description: Enables previewing disabled sections on the live store.
  - Usage: Append `?rk_preview=true` to the store's URL.
  - Purpose: Facilitates testing and validation of sections before enabling them.
```