Latest version
<script src="https://static.fbits.net/storefront-sdk/latest/storefront-sdk-full.min.js"></script>
Specific version
<script src="https://static.fbits.net/storefront-sdk/0.18.1/storefront-sdk-full.min.js"></script>
// Set configuration values
// storeUrl is optional, but snippets will only work outside
// the store if it's defined
const clientConfig = {
storefrontAccessToken: 'storefront_token',
storeUrl: 'https://mystore.fbits.store/'
}
// Creates a client
const client = StorefrontClient.createClient(clientConfig);
// 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);
// 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;
let products = [{productVariantId:123, quantity:1}];
const checkout = await client.checkout.create(products);
// 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);
// 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 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 the checkout ID e4c52f7a-ea6b-4daf-bd27-6280751d9e6f with the partner
const checkout = await client.checkout.partnerDisassociate("e4c52f7a-ea6b-4daf-bd27-6280751d9e6f");
// 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 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})
// Get user data, if logged in. Else returns null
const userInfo = await client.user.get();
// 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);
// 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);
// 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);
// 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);
// 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);
// 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 if contains
const partner = await client.partner.get();
// Set a partner by CEP if exists
const success = await client.partner.setPartnerByRegion("00000000");
// Get CEP by cookie
const cep = client.partner.getCep();
const hasPartnerByRegion = client.partner.hasPartnerByRegion();
// 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);
}
// 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);
Generated using TypeDoc