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

Question

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

我以典型的菜鸟方式做到了这一点，在每个产品类别页面中添加了各自的图像集。有没有办法可以在functions.php中使用钩子来方便维护？

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

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

然后转到产品类别并添加您的图片和网址 - 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);

Answer 2

我过去开发过类似的东西，但不是在 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
});