Recharge on non-product pages

// 1- Add Block element in each Product Detail and gave it this ID: custom-container

// 2- add this class to the block: custom-widget-1

// 3- if you want to display recharge for more than one product add the same ID and, Remember that class of Block has to // have a count number such as: custom-widget-1, custom-widget-2, ...)

// here's a quick demo: https://www.loom.com/share/98f305e843d2470f8159d5d965739b5f


// 4- Add this custom javascript into Custom Javascript Modal:

window.addEventListener('load', function (){
  const configs = []
  document.querySelectorAll('#custom-container').forEach((container, index) => {
  const productId = container.closest('[data-pf-type=ProductBox]').getAttribute('data-product-id')
  const config = {
    productId: parseInt(productId),
  injectionParent: `.custom-widget-${index + 1}`, // The node that will have the widget injected in
  injectionMethod: 'append', // How will the widget be injected
  injectFn: (node, target) => {}, // Runs a custom injection function
  selectors: {
    price: ['.my-price-selector'], // the selectors that will be updated based on subscription
    variant: ['.variant-selector'] // The variants to watch for to update the subscription prices
  }
  }
  configs.push(config)
})
  setTimeout(() => {
  ReChargeWidget.createWidgets(configs)
  }, 2000)
})



// for product list:


window.addEventListener('load', function (){
const classes = document.querySelectorAll('.custom-container')
classes.forEach((c, i) => {
c.classList.add(`custom-widget-${i + 1}`)
})
  const configs = []
  document.querySelectorAll('.custom-container').forEach((container, index) => {
  const productId = container.closest('[data-pf-type=ProductBox]').getAttribute('data-product-id')
  const config = {
    productId: parseInt(productId),
  injectionParent: `.custom-widget-${index + 1}`, // The node that will have the widget injected in
  injectionMethod: 'append', // How will the widget be injected
  injectFn: (node, target) => {}, // Runs a custom injection function
  selectors: {
    price: ['.my-price-selector'], // the selectors that will be updated based on subscription
    variant: ['.variant-selector'] // The variants to watch for to update the subscription prices
  }
  }
  configs.push(config)
})
  setTimeout(() => {
  ReChargeWidget.createWidgets(configs)
  }, 2000)
})