JSFiddle - React, Tailwind, and code Playground

by Danilo Sousa

JavaScript

__APP.pageProduct = {
	init(){		
		this.setArrowsImages()
		this.setColorChoices()
		this.setVideo()
		this.verifySkusVariation()
		this.setSealOff()
		this.setFlagPromo( dataLayer[0].productReferenceId )
		this.qtyControlls()
		this.btnWishList()
		//this.setBackground(vtxctx.departmentName)
		//this.infosFloat()
		this.warnMe()
		this.setBannerMoreDetails( dataLayer[0].productReferenceId )
		this.setDetails()
		this.buyTogether()
		this.setRelatedProducts()
		this.showListSocials()
		this.evaluate()
		//this.labelBlackFridayPgProduct()
	},
	fixVtexJqzoom() {
		var imgWidth = $('#image #image-main').width() || 512;
		
		// $('#image').height($('#image #image-main').height()).width($('#image #image-main').width());

		window.LoadZoom = function(pi) {
			var optionsZoom = {
				zoomType: 'innerzoom',
				zoomWidth: imgWidth,
				zoomHeight: imgWidth,
				showEffect: 'fadein',
				hideEffect: 'fadeout'
			};

			$(".image-zoom").jqzoom(optionsZoom);
		}
		LoadZoom(0);

		ImageControl($("ul.thumbs a:first"), 0);
		clickThumbs();
	},
	setColorChoices(){
		const prodName = document.querySelector('.fn.productName')
		const colors = document.querySelectorAll('.item-dimension-Cor .dimension-Cor')

		//console.log("prodName",prodName);

		colors.forEach( item => {
			//console.log("colors",item);
			item.style.backgroundImage = `url("/arquivos/${FUNC.clearCharac( prodName.textContent +' - '+ item.textContent)}.jpg")`
			item.setAttribute('title', item.textContent)
		})
	},
	setVideo(){
		const videoIframe = document.querySelector('.value-field.Video iframe')

		if( !videoIframe ) return

		const videoId = videoIframe.getAttribute('src').split('/')
		const boxThumb = document.querySelector('.main-content__productFirstInfos--image .thumbs')
		const boxThumbItems = boxThumb.querySelectorAll('a')
		const liThumb = document.createElement('li')
		const aThumb = document.createElement('a')
		const imgThumb = document.createElement('img')

		boxThumbItems.forEach( item =>...