Estoy tratando de mostrar imágenes o videos aleatorios en las páginas de categorías de productos. Cada página de categoría mostrará su propio conjunto de imágenes.
Lo hice de la manera típica de novato agregando en cada página de categoría de producto su propio conjunto de imágenes respectivo. ¿Hay alguna manera de que pueda usar ganchos para hacerlo en functions.php para facilitar el mantenimiento?
var total_images = 7; var image1 = document.getElementById('banner1'); var image2 = document.getElementById('banner2'); var image3 = document.getElementById('banner3'); var random_numbers = []; var random_number; var random_img = []; random_img[0] = '<a href="banner1.jpeg"><img src="banner1.jpeg"></a>'; random_img[1] = '<a href="banner2.jpeg"><img src="banner2.jpeg"></a>'; random_img[2] = '<a href="banner3.jpeg"><img src="banner3.jpeg"></a>'; random_img[3] = '<a href="banner4.jpeg"><img src="banner4.jpeg"></a>'; random_img[4] = '<a href="banner5.jpeg"><img src="banner5.jpeg"></a>'; random_img[5] = '<a href="banner6.jpeg"><img src="banner6.jpeg"></a>'; random_img[6] = '<a href="banner7.jpeg"><img src="banner7.jpeg"></a>'; while(random_numbers.length < 3){ random_number = Math.floor((Math.random() * total_images)); if(random_numbers.indexOf(random_number) < 0){ random_numbers.push(random_number); } } image1.innerHTML = random_img[random_numbers[0]]; image2.innerHTML = random_img[random_numbers[1]]; image3.innerHTML = random_img[random_numbers[2]];Desarrollé algo similar en el pasado, pero no en javascript, todo era código php. Había agregado un nuevo campo de banner en las categorías con ACF (solo uno, tendrías muchos), y luego en la página de categoría mostraría ese banner o, recursivamente, el banner del padre, hasta encontrar uno. Tendría varios campos de imagen y extraería uno al azar, tal vez pueda serle útil.
En cualquier caso, el gancho a utilizar es: acción woocommerce_before_main_content.
add_action('woocommerce_before_main_content','bannertop'); function bannertop() {recursebanner('banner_top','bannertop');} function recursebanner($type,$class) { if ( is_tax( 'product_cat' ) ) { $term = get_queried_object(); $banner = get_field('banner_top', $term); if ($banner) { echo '<div class="'.$class.'">'; echo $banner; echo '</div>'; } else { // no banner defined, parse ancestors $cat_ancestors = get_ancestors( $term->term_id, 'product_cat' ); foreach ($cat_ancestors as $cat_ancestor) { $termancestor = get_term($cat_ancestor); $banner = get_field($type, $termancestor); if ($banner) { echo '<div class="'.$class.'">'; echo $banner; echo '</div>'; break; } } } } }Si desea usar javascript en su lugar, debe agregarlo en su archivo js en el tema secundario y llamar al script, por ejemplo, así:
$ (function () { // your code });La manera fácil: instale el complemento ACF y cree sus campos: https://prnt.sc/1yek9zy . Para el campo de imagen, seleccione la URL de la imagen. Duplique el Banner 1 tantos banners como desee y configure las reglas de ubicación para la categoría de producto de taxonomía: https://prnt.sc/1yekgys
Luego vaya a una categoría de producto y agregue sus imágenes y URL: https://prnt.sc/1yeklpf Si tiene ACF pro, vaya con el campo repetidor en su lugar. Es más dinámico y puedes agregar tantos banners como quieras por categoría de producto.
Use esta guía de gancho visual para cambiar dónde desea que se muestren los banners: https://www.businessbloomer.com/woocommerce-visual-hook-guide-archiveshopcat-page/
function woo_category_banners() { $term = get_queried_object(); $banners = get_field('banners', $term->taxonomy . '_' . $term->term_id); if($banners): echo '<div class="banners">'; foreach($banners as $k => $banner): $banner_data = $banners[$k]; echo '<div class="banner"><a href="'.$banner_data['banner_url'].'"><img src="'.$banner_data['banner_image'].'"></a></div>'; endforeach; echo '</div>'; endif; } add_action('woocommerce_before_shop_loop','woo_category_banners',40);