E-commerce

Collections

Use Collections to organize your products into a logical hierarchy. Unlike categories, collections act as the primary physical folders for your store, ideal for building main navigation menus and landing pages.

The Navigation Workflow

  1. 1Menu Generation: Fetch all collections to dynamically build your storefront's navigation bar.
  2. 2Routing: Use the collection slug to create SEO-friendly URLs like /collections/summer-wear.
  3. 3Filtering: Pass the collection slug to the /products endpoint to list only relevant items.
  4. 4Theming: Retrieve collection metadata (images, descriptions) to style specific landing pages.

List Collections

Retrieve all collections configured for your store. This is typically used on app-load to populate global menus.

Request Configuration

Parameters
Live Console
GET/collections
Hit Run to test this endpoint
cURL

Implementation: Fetching Collections

JavaScript
    const getNavigation = async () => {
      const response = await fetch('https://api.electivecommerce.com/v1/collections', {
        method: 'GET',
        headers: {
          'Authorization': 'Bearer pk_live_YOUR_PUBLIC_KEY',
          'Content-Type': 'application/json'
        }
    });   
    const { success, data } = await response.json();
          
    // Array of collection objects including title, slug, description and image_url
    return data;
  };

Get Collection Details

Retrieve specific metadata for a collection by its unique slug or ID. Use this to display banners or descriptions on a collection-specific landing page.

:key

Request Configuration

Parameters
Live Console
GET/collections/:key
Hit Run to test this endpoint
cURL

Implementation: Collection Details

JavaScript
  const getCollectionInfo = async (slug) => {
      const response = await fetch(`https://api.electivecommerce.com/v1/collections/${slug}`, {
        method: 'GET',
        headers: {
          'Authorization': 'Bearer pk_live_YOUR_PUBLIC_KEY',
          'Content-Type': 'application/json'
        }
      });
    
      const { success, data, error } = await response.json();
      
      if (!success) {
        console.error('Collection not found');
        return null;
      }
    return data;
  };