douyu0845 2019-08-05 09:16
浏览 46


I'm trying to make a dynamic galery of products with categories using Isotope and Woocommerce on wordpress but I'm stuck because the buttons don't do anything when I click on them and the console shows no error and I can't figure out why it doesn't work.

I'm using wordpress 5.2.2 with an ark theme ,bootstrap v4 and jquery version 2.2.4 . I've tried using diferent jquery versions , I've also tried to redo everything in a clean and local wordpress instalation but I had some Animsition errors .

Here is how a build the gallery in php:

function gallery(){

    Print "<div class='button-group filter-button-group'>
            <button data-filter='*' >show all</button>
            <button data-filter='.music-album'>Music</button>
            <button data-filter='.movie-soundtrack'>Movies</button>
            <button data-filter='.game-soundtrack'>Games</button>
    Print"<div class='row'>";

    $articles = new WP_Query(['post_type'=>'product']);

    if($articles->have_posts()) : while ($articles->have_posts()) : $articles->the_post();

        $product_cats = wp_get_post_terms( get_the_ID(), 'product_cat' );
        $single_cat = array_shift( $product_cats );
        $category = $single_cat->slug.' ';

        Print"<a class='grid-item ".$category."' href='".get_the_permalink()."'>";
        Print"<div class='card grid-item".$category."'>";
            Print"<img class='card-img-top'src='".get_field('image')."'alt='' width='200' height='200'>";
            Print"<h1 class='card-body'>"; the_title(); Print"</h1>";




And here is the javascript :


var $grid = jQuery('.grid').isotope({
  // options
  itemSelector: '.grid-item',
  layoutMode: 'fitRows'

jQuery('.filter-button-group').on('click', 'button', function() {
  var filterValue = jQuery(this).attr('data-filter');
  console.log(filterValue); // for tests
  $grid.isotope({ filter: filterValue });

The buttons should sort the products by category with transitions but when I click it doesn't sort anything at all and the console doesn't return any Error .

  • 写回答

1条回答 默认 最新

  • dsl2014 2019-08-05 10:36

    As @Manjunath said my "items" were not part of the grid I wanted to sort. So I just had to add "grid" to the class of my galery div .

    Thank You Manjunath !

    本回答被题主选为最佳回答 , 对您是否有帮助呢?



  • ¥20 Apache poi使用问题
  • ¥21 matlab怎么求时域信号的二阶导数
  • ¥15 判断两个表是否完全相同
  • ¥15 java map类型数据格式,如何快速通过前缀匹配元素
  • ¥15 stc12c5a60s2、QMC5883L、LCD1602组合测量磁场所需程序
  • ¥20 Win11测试yolov4,“找不到nvcuda.dll”怎么办?
  • ¥15 simulink绘制bode图
  • ¥15 php_network_getaddresses: getaddrinfo failed: Name or service not known
  • ¥15 用msg发消息出现的问题
  • ¥15 unity3d机械臂