[removed]
try{
const ONETICK_PROPERTY_FLAG = '__onetick_checkbox_id'
const ATC_BUTTON_ID = '__onetick_atc_button_id'
class OnetickCheckbox extends HTMLElement {
constructor() {
super()
}
init() {
const checkboxInput = this.querySelector('.onetick-checkbox > input')
this.addEventListener('click', e => {
e.preventDefault()
e.stopPropagation()
checkboxInput.checked = !checkboxInput.checked
})
}
connectedCallback() {
this.init()
}
}
customElements.define('onetick-checkbox', OnetickCheckbox)
;(async function () {
let allowClick = true
window.addEventListener('load', async () => {
var _a
try {
const onetickCheckBoxes = [...document.querySelectorAll('.onetick-checkbox-container')]
if (!(onetickCheckBoxes == null ? void 0 : onetickCheckBoxes.length)) return
const sectionsWrapCheckbox = []
onetickCheckBoxes.forEach((checkBox, index) => {
const currentChecboxId = checkBox.getAttribute('data-checkbox-id')
if (!currentChecboxId) return checkBox.remove()
const closestSection = checkBox.closest('.shopify-section')
if (!closestSection) return checkBox.remove()
const atcButtons = closestSection.querySelectorAll('form[action*="/cart/add"] button[type="submit"]')
const atcButton = atcButtons[atcButtons.length -1]
if (!atcButton) {
const warningBanner = checkBox.previousElementSibling
if (warningBanner) {
const errorMessageElement = warningBanner.querySelector('.onetick-error-message')
errorMessageElement[removed] = `Checkbox only works inside sections with product details. <a
href='https://help.ecomate.co/manual/why-my-checkbox-doesnt-show-on-my-theme/'
target='_blank'
48, 48, 1);'>
Learn more</a
>`
warningBanner.style.display = 'block'
}
return checkBox.remove()
}
const inputCheckbox = checkBox.querySelector('label[class="onetick-checkbox"] > input[type="checkbox"]')
if (!inputCheckbox) return checkBox.remove()
const currentSectionWrapperId = closestSection.getAttribute('id') || ''
if (
sectionsWrapCheckbox.find(
({ sectionWrapperId, checkboxId }) =>
sectionWrapperId === closestSection.getAttribute('id') && checkboxId === currentChecboxId
)
) {
const warningBanner = checkBox.previousElementSibling
if (warningBanner) {
warningBanner.style.display = 'block'
}
return checkBox.remove()
}
sectionsWrapCheckbox.push({
sectionWrapperId: currentSectionWrapperId || '',
checkboxId: currentChecboxId,
sectionElement: closestSection,
checkboxElement: checkBox,
inputCheckboxElement: inputCheckbox,
atcButtonElement: atcButton,
})
})
if (!sectionsWrapCheckbox.length) return
const uniqueSectionIds = [...new Set(sectionsWrapCheckbox.map(item => item.sectionWrapperId))]
uniqueSectionIds.forEach(sectionId => {
const checkboxesInCurrentSection = sectionsWrapCheckbox.filter(
({ sectionWrapperId }) => sectionWrapperId === sectionId
)
const currentATCButton = checkboxesInCurrentSection[0].atcButtonElement
currentATCButton.addEventListener(
'click',
e => {
if (!allowClick) {
console.log('Prevent other click events')
e.preventDefault()
e.stopPropagation()
e.stopImmediatePropagation()
}
},
true
)
currentATCButton.addEventListener('mouseup', async e => {
allowClick = false
e.preventDefault()
e.stopPropagation()
e.stopImmediatePropagation()
currentATCButton.style.pointerEvents = 'none'
currentATCButton.style.cursor = 'not-allowed'
const formATCData = { items: [] }
checkboxesInCurrentSection.forEach(({ checkboxElement, checkboxId, inputCheckboxElement }) => {
const checkBoxUpsellVariantIds = checkboxElement.getAttribute('data-upsell-variant-ids') || ''
const upsellProducts = checkBoxUpsellVariantIds.split('; ')
const isCheckedInput = inputCheckboxElement.checked
if (!isCheckedInput) return
formATCData.items.push(
...upsellProducts.map(p => ({
id: p,
quantity: 1,
properties: {
[ONETICK_PROPERTY_FLAG]: checkboxId,
[ATC_BUTTON_ID]: currentATCButton.getAttribute('id'),
},
}))
)
})
if (formATCData.items.length) {
await fetch(`${window.Shopify.routes.root}cart/add.js`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formATCData),
})
.then(response => response.json())
.then(async () => {
await fetch(`${window.Shopify.routes.root}cart.js`)
.then(response => response.json())
.then(data => {
return data
})
})
.catch(error => console.error('Failed to upsell product:', error))
}
allowClick = true
currentATCButton.style.pointerEvents = 'auto'
currentATCButton.style.cursor = 'pointer'
currentATCButton.click()
})
}, true)
await fetch(
`undefined/api?public=true&shop;=${(_a = window.Shopify) == null ? void 0 : _a.shop}&type=GET_VALID_CHECKBOXES`
)
.then(res => res.json())
.then(res => {
if (!res.success) throw new Error(res.message)
const allActiveCheckboxes = res.data
const onetickCheckBoxes2 = [...document.querySelectorAll('.onetick-checkbox-container')]
onetickCheckBoxes2.forEach(checkBox => {
const currentChecboxId = checkBox.getAttribute('data-checkbox-id')
if (!allActiveCheckboxes.includes(currentChecboxId)) return checkBox.remove()
})
})
.catch(err => {
console.error('Failed to get valid checkboxes', err)
})
console.log('Run OneTick theme helper version 1.0.0')
} catch (error) {
console.error('Error occurs in OneTick helper:', error)
}
})
})()
}catch(e){
console.log(e);
}
[removed]
