仅当有要展示的特色产品时才包含自定义 slideshow.php

Posted 2023-02-19

【中文标题】仅当有要展示的特色产品时才包含自定义 slideshow.php

【英文标题】：include custom slideshow.php only if there is a featured product to show

【发布时间】：2022-01-12 11:26:52

【问题描述】：

这是我在这里的第一篇文章！

所以，我的问题是：当我没有在其中设置图像（或任何值）时，我不想在 page.php 中调用我的 slideshow.php，因为它会在控制台中引发错误。

如果没有特色产品要展示，如何避免不必要的 javascript 调用？

非常感谢！

这是我 page.php 中的示例，我只想在有特色产品时调用它：

<?php get_header();

if (is_front_page()) 
  include('slideshow.php');
;
?>

这是我的 slideshow.php 文件：

<div id="slideshow-container">
   <?php $query = new WP_Query( array(
      'post_type' => 'product',
      'posts_per_page' => 5,
      'product_tag' => 'featured',
      'order' => 'DESC',
  )  );

 while ($query->have_posts()) : $query->the_post(); ?>

 <?php $imgurl = get_field('slideshow_img');
 $size = 'full'; 
 if( $image ) 
    echo wp_get_attachment_image( $image, $size );
  ?>

 <article id="post-<?php the_ID(); ?>" <?php post_class( 'clearfix slides fade' ); ?> role="article">
    <a href="<?php the_permalink(); ?>" style="background-image:url('<?php echo $imgurl ?>');" class="slideimage"></a>
        <div class="container">
            <div class="title-holder">
                <h3 class="slide-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            </div>  
        </div>
        <div class="arrow-container">
           <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
           <a class="next" onclick="plusSlides(1)">&#10095;</a>
        </div>
 </article>
 <?php endwhile; ?>
 <div class="slideshow-pager">
    <span class="dot" onclick="currentSlide(1)"></span> 
    <span class="dot" onclick="currentSlide(2)"></span> 
    <span class="dot" onclick="currentSlide(3)"></span> 
    <span class="dot" onclick="currentSlide(4)"></span> 
    <span class="dot" onclick="currentSlide(5)"></span> 
 </div>  

var slideIndex = 1;
var timer;
showSlides(slideIndex);
        
window.addEventListener("load",function() 
    showSlides(slideIndex);
    timer = setInterval(function()plusSlides(1), 4000);
 )
function plusSlides(n)
clearInterval(timer);
if (n < 0)
    showSlides(slideIndex -= 1);
 else 
    showSlides(slideIndex += 1); 

if (n === -1)
    timer = setInterval(function()plusSlides(n + 2), 10000);
 else 
    timer = setInterval(function()plusSlides(n + 1), 10000);
    


function currentSlide(n)
    clearInterval(timer);
    timer = setInterval(function()plusSlides(n + 1), 10000);
    showSlides(slideIndex = n);


function showSlides(n)
    var i;
    var slides = document.getElementsByClassName("slides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) slideIndex = 1
    if (n < 1) slideIndex = slides.length
    for (i = 0; i < slides.length; i++) 
        slides[i].style.display = "none";
  
    for (i = 0; i < dots.length; i++) 
        dots[i].className = dots[i].className.replace(" active", "");
  
        slides[slideIndex-1].style.display = "block";
        dots[slideIndex-1].className += " active";
  
</script>

【问题讨论】：

小点 ;不需要分号

真的，谢谢 :)

【参考方案1】：

一个 hacky 解决方案： 有图片就引入js变量

<?php    
 if( $image ) 
        ?>
        <script> const imageExists = true;</script>
        <?php
        echo wp_get_attachment_image( $image, $size );
          
?>

在你的 js 代码中可以使用 imageExists 变量之后

【讨论】：

我把整个 js 脚本放在了 php while 循环中，它似乎可以工作，但是感谢大家！