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];
let recaptchaToken = null; // optional

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

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",
  gender: "MALE", // may be null
  informationGroupValues: [
    {
      id: "value-id",
      value: "value"
    }
  ]
}

const recaptchaToken = getRecaptchaToken("[id$='review-form']"); // optional

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

Add a review to a product

// Set input values
const reviewInput = {
  email: "youremail@email.com",
  name: "Your Name",
  productVariantId: 123,
  review: "Muito bom!",
  rating: 5
};

const recaptchaToken = getRecaptchaToken("[id$='review-form']") // optional

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

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
};

const recaptchaToken = null; // optional

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

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
};

const recaptchaToken = null; // optional

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

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"
}

const recaptchaToken = null; // optional

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

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
    targetPrice: 200.50
};

const recaptchaToken = null; // optional

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

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);

Changelog

v1.2.0

Adds 'customer.authenticateWith2FA' function to the SDK Full version, the first step of the two-factor login: it validates the password and returns the email the access key was sent to, to be completed with 'customer.authenticateAccessKey'. It issues no token, so no cookie is persisted on this step

v1.1.0

Adds 'clearShippingSelectionOnCoupon' client option to force clearing the shipping quote selection on addCoupon and removeCoupon in the SDK Full version

v1.0.1

Adds support for recaptcha token in addToCart mutation

v1.0.0

Adds support for returning partner data in authenticated and social login actions in the SDK Full version

v0.31.0

Adds 'sf_master_user_access_token' cookie in the SDK Full version (set on 'authenticate' for master users, used by 'impersonate', removed on 'logout')