Examples

Below are a few examples, ranging from simple to more complex. Shopify-Permalinks.js can be a lightweight addition to your headless project that extends Checkout capabilities, auto-populates customer information and discount codes, and much more.

Log Checkout URL on Click

Below is a simple example of how a ShopifyPermalink object can be created and used to log the checkout URL on button click.

const logCheckoutURL = (e) => {
  // Create a new ShopifyPermalink object
  const Permalink = new ShopifyPermalink('https://example-brand.myshopify.com', window.Cart.items);

  // Log the checkout URL to the console
  console.log(Permalink.url());

  // Prevent normal event behavior (if applicable)
  if (typeof e !== 'undefined') {
    e.preventDefault();
  }
}

// Call logCheckoutURL function each time the checkout button is clicked
document.querySelector('#checkout-button').addEventListener('click', logCheckoutURL);

Navigate to Checkout on Click

Below is a simple example of how a ShopifyPermalink object can be created and used to redirect a customer to checkout on button click.

const navigateToCheckout = (e) => {
  // Create a new ShopifyPermalink object
  const Permalink = new ShopifyPermalink('https://example-brand.myshopify.com', window.Cart.items);

  // Redirect the customer to checkout
  Permalink.go();

  // Prevent normal event behavior (if applicable)
  if (typeof e !== 'undefined') {
    e.preventDefault();
  }
}

// Call logCheckoutURL function each time the checkout button is clicked
document.querySelector('#checkout-button').addEventListener('click', navigateToCheckout);

Auto-Apply a Discount Code

Below is a simple example of how a ShopifyPermalink object can be created and used to automatically apply a special discount code in checkout.

// Create a new ShopifyPermalink object
const Permalink = new ShopifyPermalink('https://example-brand.myshopify.com', window.Cart.items);

// Set the 'discount' option with a special code
Permalink.setOptions('discount', 'save20');

// Redirect the customer to checkout with the discount code auto-applied
Permalink.go();

Auto-Populate All Available Options

Below is a more advanced example of how a ShopifyPermalink object can be created and used to pre-populate customer information fields, update notes, update marketing attribution fields, and more.

// Create a new ShopifyPermalink object
const Permalink = new ShopifyPermalink('https://example-brand.myshopify.com', window.Cart.items);

// Set the 'discount' option with a special code
Permalink.setOptions('discount', 'save20');

// Set the 'email' field with the customer's email address
Permalink.setOptions('email', '[email protected]');

// Set the 'shipping_address' field with the customer's shipping address
Permalink.setOptions({
    shipping_address: {
        first_name: 'John',
        last_name: 'Doe',
        address1: '1234 Super Fake, Blvd',
        city: 'San Diego',
        zip: '92117'
    }
});

// Set the cart 'attributes' with helpful tracking information
Permalink.setOptions({
    attributes: {
        source: 'affiliate',
        affiliate: 'Jane Doe'
    }
});

// Set the cart 'notes' with additional helpful information
Permalink.setOptions('note', 'Some custom note!');

// Set the cart 'ref' for marketing attribution
Permalink.setOptions('ref', 'summer-sms-campaign');

// Set the 'access_token' to set Sales Channel attribution
Permalink.setOptions('access_token', 'f0e4c2f76c58916ec258f246851bea091d14d4247a2fc3e18694461b1816e13b');

// Log the checkout URL to the console
console.log(Permalink.url());

// Redirect the customer to checkout with all customer information fields pre-populated and a discount code auto-applied
Permalink.go();