Support

Account

Home Forums Backend Issues (wp-admin) ACF gallery in repeater

Unread

ACF gallery in repeater

  • Hi,

    I’m working on a site template where the owner of the website should be able to add/remove items from a repeater – works fine! The issue is, that on each repeater item there’s a button. When the button is clicked, a modal pops up and in there is a slider with images from a gallery assigned to each repeater item. This also works but the “display none” still goes in all the slides but is not visible and returns an empty slide (the image is still visible in the console).

    What can it be?
    I’ll try to paste the code below.

    <?php   
    /**
     *  Template Name: Products */
    $card_counter = 0; 
    ?>
    
    <?php get_header(); ?>
    <div class="page-margin">
        <h1 class="goldtext"><?php echo get_the_title(); ?></h1>
        <div class="center"><?php the_content(); ?></div>
        <div class="whitespace"></div>
    
        <?php if ( have_rows('products') ) : ?>
        <div class="product_card">
            <?php while ( have_rows('products') ) : the_row(); ?>
    
                <?php
                    $product_name = get_sub_field('product_name');
                    $btn_text = get_sub_field('btn_text');
                    $background_image = get_sub_field('background_image');
                    $product_description = get_sub_field('product_description');
                    $images = get_sub_field('product_gallery');
                ?>
    
                <div class="cta_card_inner product_card_inner" style="background-image: url(<?= $background_image['url']; ?>)">
                    <div class="cta_card_inner_background">
                        <h3 class="goldtext"><?= $product_name; ?></h3>
                        <div class="ctadetails">
                            <p class="cta_description"><?= $product_description; ?></p>
                                <button class="primary-btn center openModal">
                                    <span class="button-leftpart-primary">
                                        <?= $btn_text; ?>
                                    </span>
                                    <span class="button-rightpart-primary">
                                        <p class="button-content-right">🡒</p>
                                    </span>
                                </button>
    
                        </div>
                    </div>
                </div>
    
                <div class="modal productsPopupModal" id="card-<?php echo $card_counter;?>">
                    <div class="products-popup productsPopup " id="cards-<?php echo $card_counter; $card_counter += 1; ?>">
                        <div class="products-popup-heading">
                            <button type="button" class="products-close-popup goldtext closeModal">✖</button>
                            <h3 class="goldtext center"><?= $product_name; ?></h3>
                        </div>
                        <div class="products-slideshow">
                            <?php if($images): ?>
                                <?php foreach( $images as $image ): ?>
                                    <img />" />
                                <?php endforeach; ?>
                            <?php endif; ?>
                            <button class="slideshow-arrow-left goldtext" onclick="plusDivs(-1)">❮</button>
                            <button class="slideshow-arrow-right goldtext" onclick="plusDivs(1)">❯</button>
                        </div>
                    </div>
                </div>
    
            <?php endwhile; ?>
        </div>
    
        <?php endif; ?>
    </div>
    <?php get_footer(); ?>
    
    // MODAL
    const readMoreBtns = document.querySelectorAll(".openModal");
    const closeBtns = document.querySelectorAll(".closeModal");
    var cardCount = 0;
    
    readMoreBtns.forEach((btn) => {
      let productsPopupModal = "card-" + cardCount;
      let productsPopup = "cards-" + cardCount;
    
      btn.addEventListener("click", () => {
        document.querySelector("#" + productsPopupModal).style.display = "block";
        document.querySelector("#" + productsPopup).style.display = "block";
      });
    
      closeBtns.forEach((btn) => {
        let productsPopupModal = "card-" + cardCount;
        let productsPopup = "cards-" + cardCount;
    
        btn.addEventListener("click", () => {
          document.querySelector("#" + productsPopupModal).style.display = "none";
          document.querySelector("#" + productsPopup).style.display = "none";
        });
      });
    
      cardCount += 1;
    });
    
    // SLIDESHOW
    var slideIndex = 1;
    showDivs(slideIndex);
    
    function plusDivs(n) {
      showDivs((slideIndex += n));
    }
    
    function showDivs(n) {
      var i;
      var x = document.getElementsByClassName("productsSlideImg");
      if (n > x.length) {
        slideIndex = 1;
      }
      if (n < 1) {
        slideIndex = x.length;
      }
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
      }
      x[slideIndex - 1].style.display = "block";
    }
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.