Default Code
Default Template Javascript
For Developers
- Developer Guide
- Section Template
- Integrations
- How to guides
- Default Code
Default Code
Default Template Javascript
Default Template Javascript code reference
This Template Javascript contains the essential JavaScript hooks required for the proper functioning of the V3 storefront. Each hook serves a specific purpose in the recommendation engine’s lifecycle.
// @ts-ignore
return {
initSwiper: (
Swiper,
templateSettings,
container,
params,
defaultSettings,
utils
) => {
const carouselContainer = container.querySelector('._gai-crz-cnt')
if (!carouselContainer) {
console.error(
'GLOOD.AI:ERROR: Carousel container not found for section',
params.recommendation.section.id
)
return
}
const settings = templateSettings?.carousel?.swiperConfig || {}
const swiperConfig = utils.merge(defaultSettings, settings)
const breakpoints = Object.values(templateSettings.breakpoints).reduce(
(acc, curr) => ({
...acc,
[curr.screenSize]: {
slidesPerView: curr.cardsPerView,
spaceBetween: curr.gutter,
},
}),
{}
)
const swiper = new Swiper(
carouselContainer,
utils.merge(swiperConfig, {
breakpoints,
})
)
return swiper
},
onSectionInit: (args, cb, gloodUtils) => {
const { recommendation, engine, initEnginePayload } = args
cb({
recommendation,
engine,
initEnginePayload,
})
},
onSectionRenderComplete: (args, utils) => {},
onVariantChange: (args, utils) => {},
onSwatchChange: (args, utils) => {},
validateCartOperation: async (payload, recommendation, utils, gloodUtils) => {
return {
payload,
error: null,
href: false,
}
},
onCartOperationComplete: (args, utils, gloodUtils) => {},
onProductDataReceived: (args, utils) => {},
getProductDetailsQuery: (recommendation, glood) => {
// use graphql variables to pass the country and language
return `
featuredImage{
url
}
handle
id
title
availableForSale
priceRange {
minVariantPrice {
amount
currencyCode
}
}
compareAtPriceRange {
minVariantPrice {
amount
currencyCode
}
}
options(first: 10){
name
optionValues{
name
swatch{
color
image{
previewImage{
url
}
}
}
}
}
variants(first:250){
nodes{
compareAtPrice{
amount
currencyCode
}
id
image{
url
}
price{
amount
currencyCode
}
currentlyNotInStock
title
quantityAvailable
availableForSale
selectedOptions{
name
value
}
}
pageInfo{
endCursor
}
}
images(first: 2){
nodes{
url
}
}
vendor
variantsCount{
count
}
tags
availableForSale
`
},
transformProductData: (product) => {
return {
featuredImage: product.featuredImage.url
? {
src: product.featuredImage.url,
}
: null,
handle: product.handle,
id: parseInt(product.id.replace('gid://shopify/Product/', '')),
title: product.title,
vendor: product.vendor,
images: product.images.nodes.map((image) => ({
src: image.url,
})),
variants: product.variants.nodes.map((variant) => ({
id: parseInt(variant.id.replace('gid://shopify/ProductVariant/', '')),
compareAtPrice: variant.compareAtPrice?.amount || null,
price: variant.price.amount,
image: variant.image?.url
? {
src: variant.image.url,
}
: null,
currentlyNotInStock: variant.currentlyNotInStock,
title: variant.title,
quantityAvailable: variant.quantityAvailable,
availableForSale: variant.availableForSale,
selectedOptions: variant.selectedOptions,
})),
available: product.availableForSale,
compareAtPrice: product.compareAtPriceRange.minVariantPrice.amount,
price: product.priceRange.minVariantPrice.amount,
variantsCount: product.variantsCount.count,
tags: product.tags,
availableForSale: product.availableForSale,
options: product.options.map((option) => ({
name: option.name,
optionValues: option.optionValues.map(
(optionValue) => optionValue.name
),
swatches: option.optionValues.map(
(optionValue) => optionValue.swatch
)
})),
}
},
onAmazonProductSelect: (args)=>{
}
}
Was this page helpful?