Как отследить клик клик по элементу WP ACF

Question

Сделал каталог на Wordpress при помощи ACF Pro использовал Повторитель.

            <?php $catalog = get_field('catalog'); ?>
            <?php if( $catalog ): ?> 
                <?php foreach( $catalog as $catalogitem ):?>
                    <div class="catalog__item open-modal" data-modal="#modal1">
                        <div class="catalog__img"><img src="<?php echo $catalogitem['productimg'] ?>" alt="catalog"></div>
                        <div class="catalog__title"><?php echo $catalogitem['productname']?></div>
                    </div>
                <?php endforeach;?>
            <?php endif; ?>

На сайте это выглядит вот так

В саму карточку я вывожу не все свойства которые я задал в повторителе, на каждую карточку можно нажать и открывается модалка, так вот, как отследить по какой карточке кликнул я, и занести в переменные данные карточки по которой я кликнул, чтобы эти переменные в дальнейшем выводить в модалке.

Answer 1

В код вставить data атрибут с айди товара

<?php $catalog = get_field('catalog'); ?>
 <?php if( $catalog ): ?> 
                <?php foreach( $catalog as $catalogitem ):?>
                    <div class="catalog__item open-modal" data-modal="#modal1" data-product-id="<?php echo $catalogitem['product-id'] ?>">
                        <div class="catalog__img"><img src="<?php echo $catalogitem['productimg'] ?>" alt="catalog"></div>
                        <div class="catalog__title"><?php echo $catalogitem['productname']?></div>
                    </div>
  <?php endforeach;?>
<?php endif; ?>

Потом в js уже догружайте данные по айди

<script>

    jQuery(document).ready(function() { 
        
        jQuery('body').on('click', ".open-modal",function(){
            
             var product_id = jQuery(this).attr( "data-product-id" ); 
            
             jQuery.ajax({
                                                  url: '<?php echo admin_url( 'admin-ajax.php' ); ?>',
                                                  type: 'GET',
                                                  data: 'action=product&product_id=' + product_id, 
                                                  success: function( data ) {
                                                        
                                                        <!-- тут что-нибудь делать с содержимым модалки -->
                                                  }                   
                        });
            
        });     
    });    

</script>

БЛОГ НА HUSL

Как отследить клик клик по элементу WP ACF

Ответы (1 шт):