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)=>{

  }
}