Mostrar preço com desconto — p/ Nuvemshop

<!-- Colocar texto com desconto -->
<style type="text/css">
.planweb-description-discount{
    font-weight:bold;
}
.planweb-description-discount-price{
    color:#dc0414;
    font-size: 23px;
}
.planweb-description-discount-detail{
    font-weight:bold;
    font-size: 24px;
    margin-top: 32px;
    margin-bottom: 0;
   color: #dc0414;
}
.planweb-description-discount-detail-price{
    color: #dc0414;
    font-size: 30px;
}
.js-max-installments{
    font-size: 14px !important;
}
#price_display{
 color: #383838;
font-size: 16px;
}
.item-price-container .item-price{
font-size: 18px;
font-weight: normal;
}
</style>

<!-- Colocar texto com desconto -->

<script>

(() => {

	const phrase = `<div class="planweb-description-discount"><span class="planweb-description-discount-price">$preco</span> no Pix </div>`;

	const phraseProductDetail = `<div class="planweb-description-discount-detail"> <span class="planweb-description-discount-detail-price">$preco</span> no Pix</div>`;

	const discount = 10;

    const elementRef = ".price-container";

	const renderProductListItem = (product) => {

        if(!product?.querySelector('.item-price')) return;


        const containerDescription = product.querySelector(".item-description");
        const price = Number(product.querySelector('.item-price').textContent.replace('R$',"").replace(/\./g,"").replace(",","."))
        const price_final = discount ? price - (price * discount / 100) : price;

        if(!containerDescription.dataset.reformatter){
            containerDescription.dataset.reformatter = true;
            const itemPriceContainer = containerDescription.querySelector('.item-price-container');
            const newPhrase = phrase.replace("$preco", `${price_final.toLocaleString('pt-br',{ minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' })}`);
            itemPriceContainer.innerHTML = newPhrase  + itemPriceContainer.innerHTML + ' no cartão';
        }

	}

	const renderProductDetail = () => {
		const price = Number(document.querySelector('#price_display').textContent.replace('R$',"").replace(/\./g,"").replace(",","."))
		const price_final = discount ? price - (price * discount / 100) : price;

		const link = document.querySelector(elementRef);

		const parent = link.parentElement;

		const span = document.createElement("span");

		span.classList.add(`planweb-description-discount-detail`);
        span.classList.add('col-12');
        span.classList.add('mb-2');

		span.innerHTML = phraseProductDetail.replace("$preco", `${price_final.toLocaleString('pt-br',{ minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' })}`);

		//parent.insertBefore(span,link)
        link.innerHTML =  span.innerHTML + ' ou ' + link.innerHTML + ' em até 12x* no cartão';
	}

	const reformatterDescription = () => {

		const products = document.querySelectorAll("[data-product-id]");

		if(products){

			for(const product of [...products]){
				renderProductListItem(product)
			}

		}

	}

    const queryString = window.location.search
    const urlParams = new URLSearchParams(queryString)
    if(urlParams.has('offScripPlanweb')) return false

	if(LS.product){
        reformatterDescription();
		return renderProductDetail()
	}

    if(LS.template === "home"){
        const products = document.querySelectorAll('.js-item-product');
        console.log('products',products)
       for(const product of [...products]){
            renderProductListItem(product)
        }

        return;

    }

    const container = document.querySelector('.js-product-table')

    if(container){
       reformatterDescription();

        const config = { attributes: false, childList: true, subtree: false };

        const observer = new MutationObserver(function(mutations) {
            reformatterDescription()
        });

        observer.observe(container, config);

    }

})()
</script>