Boa tarde! Por favor, estou tentando usar um custom element cujo o código JS contem uma concatenação de variáveis. Contudo, sempre que eu salvo o código, o sinal “+” some, o código fica com vazios no lugar e, consequentemente, erro no componente. Existe algum jeito específico de colocar esse operador no CMS ou é algo na escrita do código que não estou enxergando? Segue imagem do CMS e também o código do jeito como está salvo lá:
<script>
//COMPONENTE QUE PEGA OS DADOS DA COLEÇÃO PARA O COUNTDOWN DE OFERTA RELÂMPAGO DA HOME
window.CountDownInit = function () {
try {
function getCollectionInfos() {
const collection = $('#collection-countdown #time-limit-collection-countdown').attr('name')
if (!collection) {
return
}
const collectionNumber = collection.split('-')[1]
const flashCollectionData = {
number: collectionNumber,
endTime: $('#collection-countdown #time-limit-collection-countdown').attr('value'),
endDate: $('#collection-countdown #date-limit-collection-countdown').attr('value')
}
const flashCollectionDataJSON = JSON.stringify(flashCollectionData)
sessionStorage.setItem('Flash Collection Data', flashCollectionDataJSON)
}
const bodyPageClass = $('body').attr('class')
let resDateLimit = $('#date-limit-collection-countdown').val()
let resTimeLimit = $('#time-limit-collection-countdown').val()
let resHome = ''
if (bodyPageClass.includes('frn-home')) {
resHome = 'frn-home'
getCollectionInfos()
countDownShelf()
}
let resPDP = ''
if (bodyPageClass.includes('product-page')) {
resPDP = 'product-page'
getCollectionInfos()
}
let [DD, MM, YY] = ''
let [HH, MI, SS] = ''
let [DDshelf, MMshelf, YYshelf] = ''
// //Countdown Home Header
// // const countDown = setInterval(() => {
// // if (resHome) {
// // [DD, MM, YY] = $("#countdown .data-limite").text().split("/");
// // //Teste só pra ver tudo funcionando
// // [HH, MI, SS] = resTimeLimit.split(":");
// // }
// // let finishDate = new Date(YY, MM - 1, DD, HH, MI, SS);
// // var ss = parseInt((finishDate - currentDate) / 1000);
// // var mm = parseInt(ss / 60);
// // var hh = parseInt(mm / 60);
// // var dd = parseInt(hh / 24);
// // ss = ss - mm * 60;
// // mm = mm - hh * 60;
// // console.log("Dia", dd, "Horas", hh, "Minutos", mm, "Segundos", ss);
// // if (dd hh mm ss > 0) {
// // const countDown = $("#countdown-pdp");
// // countDown.removeClass("is-hidden");
// // if (
// // window.innerWidth <= 860 &&
// // document.querySelector("#countdown-pdp.v2")
// // ) {
// // document.querySelector(".salesforce")?.remove();
// // }
// // if (countDown.hasClass("v1")) {
// // if (dd < 1) dd = '0' dd;
// // if (hh < 10) hh = "0" hh;
// // if (mm < 10) mm = "0" mm;
// // if (ss < 10) ss = "0" ss;
// // // $('#countdown-pdp .clock .day').html(`${dd} dias`);
// // $("#countdown-pdp .clock .days").html(`${dd <= 0 ? dd = 0 : (dd).toFixed(0)} `);
// // $("#countdown-pdp .clock .hour").html(`${hh > 1 ? (hh - dd * 24).toFixed(0) : hh = 0} `);
// // $("#countdown-pdp .clock .minute").html(`${mm} `);
// // $("#countdown-pdp .clock .second").html(`${ss}`);
// // }
// // } else {
// // $("#countdown-pdp").addClass("is-hidden");
// // clearInterval(countDown);
// // }
// // }, 1000);
// //Countdown Home Shelf Promo Relâmpago
function countDownShelf() {
setInterval(() => {
if (!resTimeLimit || !resDateLimit) {
return;
}
let [HHShelf, MIShelf, SSShelf] = resTimeLimit.split(':');
if (resHome) {
[YYshelf, MMshelf, DDshelf] = resDateLimit.split('/');
}
let currentDate = new Date();
let finishDateShelf = new Date(
YYshelf,
MMshelf - 1,
DDshelf,
HHShelf,
MIShelf,
(SSShelf = 0o0)
);
//, HHShelf, MIShelf, SSShelf
var ssShelf = parseInt((finishDateShelf - currentDate) / 1000);
var mmShelf = parseInt(ssShelf / 60);
var hhShelf = parseInt(mmShelf / 60);
var ddShelf = parseInt(hhShelf / 24);
ssShelf = ssShelf - mmShelf * 60;
mmShelf = mmShelf - hhShelf * 60;
hhShelf = hhShelf - ddShelf * 24;
if (`${ddShelf hhShelf mmShelf ssShelf > 0}`) {
const countDownShelf = $('.countdown-shelf');
countDownShelf.removeClass('is-hidden');
if (
window.innerWidth <= 860 &&
document.querySelector('#countdown-shelf.v2')
) {
document.querySelector('.salesforce')?.remove();
}
if (countDownShelf.hasClass('v1')) {
if (ddShelf < 1) ddShelf = `${'0' ddShelf}`;
if (hhShelf < 10) hhShelf =`${'0' hhShelf}`;
if (mmShelf < 10) mmShelf =`${'0' mmShelf}`;
if (ssShelf < 10) ssShelf = `${'0' ssShelf}`;
$(
'.countdown-shelf > div.container > div > div > div > span.days'
).html(`${ddShelf > 0 ? ddShelf 'Dias' : ''}`);
$(
'.countdown-shelf > div.container > div > div > div > span.hour'
).html(`${hhShelf} : `);
$(
'.countdown-shelf > div.container > div > div > div > span.minute'
).html(`${mmShelf} : `);
$(
'.countdown-shelf > div.container > div > div > div > span.second'
).html(`${ssShelf}`);
}
} else {
$('.countdown-shelf').addClass('is-hidden');
clearInterval(countDownShelf);
}
}, 1000);
}
// //Countdown PDP
function countDownPdp() {
setInterval(() => {
const countDownPdpData = JSON.parse(sessionStorage.getItem('Flash Collection Data'))
const { endTime, endDate } = countDownPdpData
let [HHPdp, MIPdp, SSPdp] = ''
let [YYPdp, MMPdp, DDPdp] = ''
if (resPDP) {
;[YYPdp, MMPdp, DDPdp] = endDate.split('/')
;[HHPdp, MIPdp, SSPdp] = endTime.split(':')
}
let currentDate = new Date()
let currentHour = new Date().getHours()
let finishDatePdp = new Date(YYPdp, MMPdp - 1, DDPdp, HHPdp, MIPdp, SSPdp)
var ssPdp = parseInt((finishDatePdp - currentDate) / 1000)
var mmPdp = parseInt(ssPdp / 60)
var hhPdp = parseInt(mmPdp / 60)
var ddPdp = parseInt(hhPdp / 24)
ssPdp = ssPdp - mmPdp * 60
mmPdp = mmPdp - hhPdp * 60
hhPdp = hhPdp - ddPdp * 24
if (`${ddPdp hhPdp mmPdp ssPdp}` > 0) {
const countDownPdp = $('#countdown-pdp')
countDownPdp.removeClass('is-hidden')
if (window.innerWidth <= 860 && document.querySelector('#countdown-pdp.v2')) {
document.querySelector('.salesforce')?.remove()
}
if (ddPdp < 1) ddPdp = ddPdp
if (hhPdp < 10) hhPdp = hhPdp
if (mmPdp < 10) mmPdp = `${'0' mmPdp}`
if (ssPdp < 10) ssPdp = `${'0' ssPdp}`
$('#countdown-pdp .deadline .dias > div:nth-child(1)').html(`${ddPdp} `)
$('#countdown-pdp .deadline .dias > div:nth-child(2)').html('Dias')
$('#countdown-pdp .deadline .horas > div:nth-child(1)').html(`${hhPdp} `)
$('#countdown-pdp .deadline .horas > div:nth-child(2)').html('Horas')
$('#countdown-pdp .deadline .minutos > div:nth-child(1)').html(`${mmPdp} `)
$('#countdown-pdp .deadline .minutos > div:nth-child(2)').html('Minutos')
$('#countdown-pdp .deadline .segundos > div:nth-child(1)').html(`${ssPdp}`)
$('#countdown-pdp .deadline .segundos > div:nth-child(2)').html('Segundos')
// if (countDownPdp.hasClass("v1")) {
// }
} else {
$('#countdown-pdp').addClass('is-hidden')
clearInterval(countDownPdp)
}
}, 1000)
}
countDownPdp()
} catch (error) {
console.error(error)
}
}
</script>
<style>
.countdown-shelf {
.container {
display: flex;
height: 51px;
align-items: center;
.clock {
display: flex;
@media screen and (max-width: 767px) {
align-items: center;
}
.title {
width: 12%;
@media screen and (max-width: 767px) {
width: 20%;
}
}
.timer-number-holder {
width: 88%;
font-size: 20px;
font-weight: 600;
line-height: 29px;
letter-spacing: 0em;
@media screen and (max-width: 767px) {
padding-top: 10px;
}
}
}
}
}
</style>