Unlocking Shopify Storefront API with JavaScript: Overcoming Liquid & AJAX API Limits

// 1. Storefront API Configuration
const SHOPIFY_STORE_DOMAIN = 'your-shop-name.myshopify.com'; // Replace with your store domain
const STOREFRONT_ACCESS_TOKEN = 'your_storefront_access_token_here'; // Public token with scoped permissions
const API_VERSION = '2024-01'; // Current API version

const GRAPHQL_URL = `https://${SHOPIFY_STORE_DOMAIN}/api/${API_VERSION}/graphql.json`;

// 2. Define the GraphQL Query
const PRODUCTS_QUERY = `
  query getTopProducts {
    products(first: 5, sortKey: CREATED_AT, reverse: true) {
      edges {
        node {
          id
          title
          handle
          priceRange {
            minVariantPrice {
              amount
              currencyCode
            }
          }
          featuredImage {
            url
            altText
          }
        }
      }
    }
  }
`;

// 3. Helper Function to Fetch Data
async function fetchShopifyData(query, variables = {}) {
  try {
    const response = await fetch(GRAPHQL_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': STOREFRONT_ACCESS_TOKEN,
      },
      body: JSON.stringify({
        query: query,
        variables: variables,
      }),
    });

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const result = await response.json();

    if (result.errors) {
      console.error('GraphQL Errors:', result.errors);
      return null;
    }

    return result.data;
  } catch (error) {
    console.error('Fetch Error:', error);
    return null;
  }
}

// 4. Execute and Process Data
async function initStorefrontFeature() {
  const data = await fetchShopifyData(PRODUCTS_QUERY);
  
  if (data && data.products) {
    const products = data.products.edges.map(edge => edge.node);
    console.log('Retrieved Products:', products);
    
    // Example: Render items dynamically in your DOM
    /*
    products.forEach(product => {
      console.log(`Title: ${product.title} - Price: ${product.priceRange.minVariantPrice.amount} ${product.priceRange.minVariantPrice.currencyCode}`);
    });
    */
  }
}

// Run the initialization
initStorefrontFeature();