Storefront SDK

Installation

Latest version

<script src="https://static.fbits.net/storefront-sdk/latest/storefront-sdk.min.js"></script>

Specific version

<script src="https://static.fbits.net/storefront-sdk/0.2.0/storefront-sdk.min.js"></script>

Examples

Creating a client

// Set configuration values
// storeUrl is optional, but snippets will only work outside
// the store if it's defined
const clientConfig = {
    storefrontAccessToken: 'storefront_token',
    checkoutUrl: 'https://mystore.checkout.fbits.store/',
    storeUrl: 'https://mystore.fbits.store/'
}

// Creates a client
const client = StorefrontClient.createClient(clientConfig);

Rendering a snippet

// Renders a snippet without variables
const snippet = await client.snippet.render("mytemplate.html", "myquery.graphql");

// Renders a snippet with variables
const snippet = await client.snippet.render("mytemplate.html", "myquery.graphql", variables);

Getting checkout information

// Gets checkout information based on the checkoutUrl cookie domain
const checkout = await client.checkout.get();

// Gets checkout information based on a specific checkoutId
const checkout = await client.checkout.get("checkout_id");

const checkoutUrl = checkout.data.url;

Create a new checkout

let products = [{productVariantId:123, quantity:1}];

const checkout = await client.checkout.create(products);

Add product to cart

// To the checkoutId based on the checkoutUrl cookie domain
// Add the product variant 123 with quantity = 1
const checkout = await client.checkout.add(123);

// Add multiple products at once
let products = [{productVariantId:123, quantity:2}, {productVariantId:456, quantity:1}];
const checkout = await client.checkout.add(products);


// To a specific checkout Id
let checkoutId = "ced364d6-c6a3-4165-92c9-22e0415e8822";

// Add the product variant 123 with quantity = 1
const checkout = await client.checkout.add(123, checkoutId);

// Add multiple products at once
let products = [{productVariantId:123, quantity:2}, {productVariantId:456, quantity:1}];
const checkout = await client.checkout.add(products, checkoutId);

Remove product from cart

// To the checkoutId based on the checkoutUrl cookie domain
// Remove the product variant 123 with quantity = 1
const checkout = await client.checkout.remove(123);

// Remove multiple products at once
let products = [{productVariantId:123, quantity:2}, {productVariantId:456, quantity:1}];
const checkout = await client.checkout.remove(products);

// To a specific checkout Id
let checkoutId = "ced364d6-c6a3-4165-92c9-22e0415e8822";

// Remove the product variant 123 with quantity = 1
const checkout = await client.checkout.remove(123, checkoutId);

// Remove multiple products at once
let products = [{productVariantId:123, quantity:2}, {productVariantId:456, quantity:1}];
const checkout = await client.checkout.remove(products, checkoutId);

Associate a partner with a checkout

// Associate the checkout ID e4c52f7a-ea6b-4daf-bd27-6280751d9e6f with the partner access token a1b2c3d4
const checkout = await client.checkout.partnerAssociate("e4c52f7a-ea6b-4daf-bd27-6280751d9e6f", "a1b2c3d4");

Disassociate a partner with a checkout

// Disassociate the checkout ID e4c52f7a-ea6b-4daf-bd27-6280751d9e6f with the partner
const checkout = await client.checkout.partnerDisassociate("e4c52f7a-ea6b-4daf-bd27-6280751d9e6f");

Generic form

// Submit a generic form with a generic body and file, if contains

let body = {
    value1: "key1",
    value2: 2
};

let files = document.getElementById("file-input").files;
let file = files[0];

var response = await client.genericForm.send(body, file);

Generic query

// Generic query without variables
let result = await client.query("{ shop { name checkoutUrl }}")

// Generic query with variables
let query = `
query ($productId: Long!) {
  product(productId:$productId) {
    productName
  }
}
`

let result = await client.query(query, {productId: 123})

Getting logged user information

// Get user data, if logged in. Else returns null
const userInfo = await client.user.get();

Getting logout URL

// Get URL for logout, redirecting to the given 'url' parameter or to the home page by default
const logoutUrl = client.user.logoutUrl(url);

// Set input values
// To get a 'recaptchaToken' you can use our reCAPTCHA SDK available in
// https://recaptcha.fbits.net/script?loja=mystore&formulario=formSelector&pagina=Site&Producao=True
// where 'mystore' is the store name and 
// 'formSelector' is the selector for your html element (e.g. [id$='newsletter-form'])
const input = {
  email: "youremail@email.com",
  name: "Your Name",
  informationGroupValues: [
    {
      id: "value-id",
      value: "value"
    }
  ]
  recaptchaToken: getRecaptchaToken("[id$='review-form']")
}

// Register the given email and name in the newsletter
await client.newsletter.create(input);

Add a review to a product

// Set input values
const reviewInput = {
  email: "youremail@email.com",
  name: "Your Name",
  recaptchaToken: getRecaptchaToken("[id$='review-form']"),
  productVariantId: 123,
  review: "Muito bom!",
  rating: 5
}

// Send your review for approval
const yourReview = await client.product.createReview(reviewInput);

Add a product to wishlist

// Set input values
const wishlistInput = {
    // CustomerAccessToken can be obtained from logged user informations
    // client.user.get()
    customerAccessToken: "CustomerAccessToken",
    productId: 123
};

// Add the product to the customer's wishlist
const wishlistedProducts = await client.wishlist.add(wishlistInput);

Remove a product from wishlist

// Set input values
const wishlistInput = {
    // CustomerAccessToken can be obtained from logged user informations
    // client.user.get()
    customerAccessToken: "CustomerAccessToken",
    productId: 123
};

// Remove the product from the customer's wishlist
const wishlistedProducts = await client.wishlist.remove(wishlistInput);

Create an alert for product back in stock

// Set input values
const alertInput = {
    productVariantId: 123,
    name: "Your name",
    email: "your.email@email.com",   // The alert will be sent to this email
    partnerAccessToken: "partnerAccessToken"
}

// Create the alert for the specified product
const alert = await client.product.createRestockAlert(alertInput);

Create an alert for product price

// Set input values
const alertInput = {
    productVariantId: 123,
    name: "Your name",
    email: "your.email@email.com",   // The alert will be sent to this email
    recaptchaToken: "recaptchaToken",
    targetPrice: 200.50
};

// Create the alert for the specified product
const alert = await client.product.createPriceAlert(alertInput);

Get the page partner

// Get the page partner if contains
const partner = await client.partner.get();

Set a partner by region

// Set a partner by CEP if exists
const success = await client.partner.setPartnerByRegion("00000000");

Get the partner CEP

// Get CEP by cookie
const cep = client.partner.getCep();

If has partner by region cookies

const hasPartnerByRegion = client.partner.hasPartnerByRegion();

Add a listener to a topic

// add a listener to events of the given type, triggering a callback function when a message is received
// the callback function can receive an object as parameter, sent in the message
client.event.addListener("event unique ID", "event type", function(paramsObject) { callbackExample("my event name", paramsObject) });

// callback function example
function callbackExample(eventName, paramsObject) {
  console.log("The event " + eventName + "triggered this function!");

  // object can be used to send data to wherever you need, like a data monitor or analyzer
  // e.g. Google Analytics 4
  gtag("event", eventName, paramsObject);
}

Send a message to a topic

// paramsObject can be any data needed, e.g. product info
const paramsObject = {
  productName: "Product Name",
  productId: 123,
  price: 456,00
};

// send the message to all listeners of the specified type
client.event.messageListeners("event type", paramsObject);