Oxygenados Com

                    <?php
//Modo UNO
if ( is_product_category() ) {
    $term = get_queried_object();
    $thumbnail_id = get_term_meta( $term->term_id, 'thumbnail_id', true );
    if ( $thumbnail_id ) {
        $image = wp_get_attachment_image_src( $thumbnail_id, 'full' );
        if ( $image ) {
            echo '<img src="' . $image[0] . '" alt="' . $term->name . '" />';
        }
    }
}
?>

<?php
//Modo Dos como Background Image
$category = get_queried_object();
$category_id = $category->term_id;
$thumbnail_id = get_term_meta( $category_id, 'thumbnail_id', true );
$category_image_url = wp_get_attachment_url( $thumbnail_id );

if ( $category_image_url ) {
    echo '<div style="background-image:url('.esc_url( $category_image_url ).');background-size: cover;"></div>';
}
?>
                  

                    jQuery(document).ready(function ($) {
    if (window.angular) return;

});

/*** MEJOR METODO ******/
if(!window.location.toString().includes("ct_builder=true")){
 /******
  *     EL CÓDIGO AQUI
  * 
  * ***/

}
/****
Nota: Los casos de uso para esto son los siguientes:

1. Usando Swiper Slider y desea editar todas las diapositivas en Oxygen y mostrar la vista 
    del control deslizante solo en el front-end.

2. Usar scripts que se ejecutan solo en front-end o se cargan después de la carga de la página. 
    En Oxygen builder muestran un error como 'SCRIPTNAME' no está definido o no está definido.

3. y mucho más.
******/

jQuery(document).ready(function($) {

if($('html').attr('ng-app') == 'CTFrontendBuilder') return;

// YOUR CODE, which will work only in the public part of the site

});
                  

                    window.addEventListener('DOMContentLoaded', (event) => {
	document.addEventListener('click', (e)=>{
	if(e.target.classList.contains('enlace-tabs_pagina')){
	    let elsChildren = e.target.offsetParent.offsetParent
		let numero=0
		for(i=0; i<elsChildren.childElementCount; i++){
			elsChildren.children[i].classList.remove('activo')
			let childrenId =elsChildren.children[i].firstChild.id
			elsChildren.offsetParent.nextSibling.children[i].classList.remove('tab-activo')
			elsChildren.offsetParent.offsetParent.previousSibling.children[i].classList.remove('tab-activo')
			if(childrenId === e.target.id) numero = i
		}
		let txtActivo = elsChildren.offsetParent.nextSibling.children[numero].classList.add('tab-activo')
		let imgActivo = elsChildren.offsetParent.offsetParent.previousSibling.children[numero].classList.add('tab-activo')
		e.target.offsetParent.classList.add('activo')
		}		
	})
})
                  

                    window.addEventListener('DOMContentLoaded', (event) => {
	let container = document.querySelector('.tabgallery-container.js-id-00');
	let navli = container.querySelectorAll('.tab-nav li.tab-li-item');

	navli.forEach((n)=>{
		n.addEventListener('click', function(e){
		let x = this.closest(".tabgallery-container");
		var z = this.parentNode.querySelector('.tab-nav li.active'); 
		z.classList.remove('active');
		this.classList.add('active');
		let els = this.parentNode.children;
		let num = [].indexOf.call(els, this) + 1;
		x.setAttribute("data-tabgallery", num);
		let remove1 = x.querySelectorAll('.media-wrap > *');
		let remove2 = x.querySelectorAll('.tab-info-txt > *');
		
		remove1.forEach((r) => {
			if (r.classList.contains('visible')) {
				r.classList.remove('visible');
				} 
		});
		remove2.forEach((r) => {
			if (r.classList.contains('visible')) {
				r.classList.remove('visible');
				} 
		});
		
		let add1  = x.querySelector(`.media-wrap > *:nth-child(${num})`)
		if(add1) add1.classList.add('visible');
			
		let add2  = x.querySelector(`.tab-info-txt > *:nth-child(${num})`)
		if(add2) add2.classList.add('visible');
	})
		
	})
	
});
                  

                    :root {
  --borderColor: #03a9f3;
}

.border-efect-especial {
  position: relative;
  width: 140px;
  height: 64px;
  margin: auto;
  border: 1px solid #03a9f3;
  cursor: pointer;
}
.border-efect-especial::before, .border-efect-especial::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  transition: 0.3s ease-in-out;
}
.border-efect-especial::before {
  top: -5px;
  left: -5px;
  border-top: 1px solid var(--borderColor);
  border-left: 1px solid var(--borderColor);
}
.border-efect-especial::after {
  right: -5px;
  bottom: -5px;
  border-bottom: 1px solid var(--borderColor);
  border-right: 1px solid var(--borderColor);
}
.border-efect-especial:hover::before, .border-efect-especial:hover::after {
  width: calc(100% + 9px);
  height: calc(100% + 9px);
}