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?
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?