📓

GraphQL + JavaScript

Getting started

Required setup

Optional setup

Tutorials and examples

More information

Frequently asked questions

Metrics overview

User journey tracking

← Hydrogen Integration

GraphQL + JavaScript

For each parameter that is passed into our script we are providing the according GraphQL and Javascript functions.

Parameter sid

Description: Shop ID

GraphQL

{
  shop {
    id
  }
}

Parameter cid

Description: Shop ID

GraphQL

{
  customer(customerAccessToken: "customer-access-token") {
    id
  }
}

Parameter sptt

Page title used for export function meta() (in case of the official Shopify’s example structure)

Parameter sss

Search string from the URL or a search request

Parameter sctp

Example JavaScript for the cart object provided by Shopify for functions like CartMain.

Javascript

cart.cost.totalAmount.amount

Parameter cim

Example JavaScript for the cart object provided by Shopify for functions like CartMain.

Javascript

cart.totalQuantity

Parameter scr

Example JavaScript for the cart object provided by Shopify for functions like CartMain.

Javascript

cart.cost.totalAmount.currencyCode

Parameter sca

Example JavaScript for the cart object provided by Shopify for functions like CartMain.

Javascript

cart?.lines?.nodes
    .map((node, i) => {
      if (i >= 50) return;

      return {
        id: node.id,
        price: node.cost?.totalAmount?.amount,
        quantity: node.quantity,
        variantID: node.merchandise?.id,
      };
    })
    .filter(Boolean)

Parameter sci

GraphQL

collection(handle: $handle) {
	id
}

Parameter scc

GraphQL

collection(handle: $handle) {
	id
  products(
    first: $first,
    last: $last,
    before: $startCursor,
    after: $endCursor,
  ) {
    nodes {
      id
      variants(first: 1) {
        nodes {
          id
          price {
            amount
          }
        }
      }
    }
  }
}

JavaScript

collection?.products?.nodes
  .map((node, i) => {
    if (i >= 50) return;

    var variant = node.variants?.nodes[0];
    return {
      id: node.id,
      price: variant?.price?.amount,
      variantID: variant?.id,
    };
  })
  .filter(Boolean)

Parameter spi

GraphQL

query product($handle: String!, $selectedOptions: [SelectedOptionInput!]!) {
  product(handle: $handle) {
    id
  }
}

Parameter sppt

GraphQL

query product($handle: String!, $selectedOptions: [SelectedOptionInput!]!) {
  product(handle: $handle) {
		title
  }
}

Parameter scpp

GraphQL

query product($handle: String!, $selectedOptions: [SelectedOptionInput!]!) {
  product(handle: $handle) {
		variants(first: 1) {
      nodes {
        price {
          amount
        }
      }
    }
  }
}

JavaScript

product.variants?.nodes?.[0].price?.amount