在产品类别页面中显示随机图像

Question

我正在尝试在产品类别页面中随机显示 images/video。每个类别页面都会显示自己的一组图像。

我以典型的菜鸟方式在每个产品类别页面中添加了各自的图像集。有没有一种方法可以让我在 functions.php 处使用 hooks 来方便维护？

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]];

Answer 1

我以前开发过类似的东西，但在javascript里没有，都是php代码。我用 ACF 在类别中添加了一个新的横幅字段（只有一个，你会有很多），然后在类别页面上我会显示那个横幅，或者递归地显示父亲的横幅，直到我找到一个。你会有多个图像字段，你会随机提取一个，也许它对你有用。

无论如何，要使用的挂钩是：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;
                }
            }
        }
    }
}

如果你想使用 javascript，你必须将它添加到子主题的 js 文件中，并调用脚本，例如：

$ (function () {
   // your code
});

Answer 2

简单的方法 - 安装 ACF 插件并创建您的字段 - https://prnt.sc/1yek9zy。对于图像字段 select image url。根据需要复制横幅 1，并将位置规则设置为分类产品类别 - https://prnt.sc/1yekgys

然后转到产品类别并添加您的图片和 urls - https://prnt.sc/1yeklpf 如果您有 ACF pro，请改用中继器字段。它更具活力，您可以为每个产品类别添加任意数量的横幅。

使用此视觉挂钩指南更改您希望显示横幅的位置 - 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);

在产品类别页面中显示随机图像

Display random Images in product category page

javascript

php

wordpress

jquery

woocommerce