时间戳

首页 > 解决方案 > 在产品类别页面中显示随机图像

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

问题描述

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

我以典型的菜鸟方式通过在每个产品类别页面中添加各自的图像集来做到这一点。有没有一种方法可以在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]];

标签： javascriptphpjquerywordpresswoocommerce

解决方案

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

推荐阅读