Сброс l oop через 4 раза

Question

Я зацикливаю товары на своей странице, и цвет фона выглядит следующим образом:
'прозрачный' - 'серый' - 'прозрачный' - 'серый'

В каждой строке 4 товара но когда начинается второй ряд, он выполняет тот же порядок, как:
Ситуация 1 - Неправильная ситуация
'прозрачный' - 'серый' - 'прозрачный' - ' серый '
' прозрачный '-' серый '-' прозрачный '-' серый '

Но я хочу это так:
Ситуация 2 - Правильная ситуация
«прозрачный» - «серый» - «прозрачный» - «серый»
«серый» - «прозрачный» - «серый» - «прозрачный»

Кто-нибудь знает, как отредактировать мой l oop, чтобы получить структуру, как указано выше?

<div class="row page-margin pb-5">
    <?php
    $term = get_field('product_category'); if( $term ): $cat = esc_html( $term->slug ); endif;
    $args = array( 'post_type' => 'product', 'product_cat' => $cat);
    $loop = new WP_Query( $args );
    $product_id = get_the_id();
    $c = 0;
    $product = wc_get_product( $product_id );
    while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <div class="col-md-3 pl-0 pr-0">
            <a href="<?php the_permalink(); ?>">
                <div class="product-list-item <?php if ($c & 1) { ?>bg-grey<?php } ?>">
                    <div class="img-wrapper">
                        <?php echo $product->get_image('full', array('class' => 'img-fluid')); ?>
                    </div>
                    <div class="product-content">
                        <span class="product-title"><?php echo $product->get_name(); ?></span>
                        <span class="product-price">€ <?php $price = $product->price; $price_incl_tax = $price + round($price * ( 0 / 100 ), 2); $price_incl_tax = number_format($price_incl_tax, 2, ",", "."); $price = number_format($price, 2, ",", "."); echo $price_incl_tax; ?> incl. BTW</span>
                    </div>
                </div>
            </a>
        </div>
    <?php $c++; endwhile; wp_reset_query(); // Remember to reset ?>
</div>

Вот изображение неправильной ситуации (Ситуация 1):
Неправильная картина ситуации

Спасибо за ваше время!

Answer 1

Нет необходимости фиксировать это в вашем шаблоне. Используйте CSS для достижения этого с немного сложным списком селекторов. Вы можете заключить это в медиа-запрос, так как я вижу, что у вас есть col-md-3. Предполагая, что вы используете bootstrap, это будет @include media-breakpoint-up(md), которое вы используете.

.container {
  display: flex;
  flex-wrap: wrap;
  background: gray;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: 100px;
  background: white;
}

.item:nth-child(4n+2):not(:nth-child(8n-2)), /* 2, 10, 18… */
.item:nth-child(4n+4):not(:nth-child(8n)), /* 4, 12, 20… */
.item:nth-child(4n+1):not(:nth-child(8n+1)), /* 5, 13, 21… */
.item:nth-child(4n+3):not(:nth-child(8n+3)) { /* 7, 15, 23… */
  background: red;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
  <div class="item">19</div>
  <div class="item">20</div>
</div>

Теперь объясним логи селектора c: вы хотите нацеливать каждого 2-го и 4-го дочернего элемента на нечетные строки, а 1-го и 3-го дочернего элемента на четные строки , Для этого вы нацеливаетесь соответственно:

• Каждые 2 элемента, не кратные 6
• Каждые 4 элемента, не кратные 8
• Каждые 5 элементов, не кратные 9
• Каждые 7 элементов, не кратные 11

Надеюсь, это поможет!

Answer 2

Если вы хотите, чтобы это было сделано в php, метод, который я нашел работающим, заключается в использовании двух массивов, которые не совпадают c с прозрачным и серым.
Затем выведите эхо из одного массива в одной строке, а затем переключитесь.

Это не очень хороший код, но он помогает.

$arr1 = ['transparent', 'grey', 'transparent', 'grey'];
$arr2 = ['grey', 'transparent', 'grey', 'transparent'];


$i = 0;
$bool = true;
Your loop{
    if($bool){
        echo 'color ' . $arr1[$i] . "\n";
    }else{
        echo 'color ' . $arr2[$i] . "\n";
    }
    $i = ++$i % 4;
    if($i ==0) $bool = !$bool;
}

Вот пример кода:

https://3v4l.org/XdcHB

Answer 3

Ладно, это немного сложно, потому что вы меняете порядок принятия решения на порцию 4. Чтобы решить это, у вас может быть дополнительная переменная $flag, которая изначально установлена ​​на false.

Итак, проверка выглядит следующим образом:

if ($flag && ($c & 1) == 0 || !$flag && ($c & 1) == 1)

Это говорит о том, что мы находимся на нечетной итерации (когда $ flag равен false), а текущий $c нечетен или мы на четной итерации (когда $ flag имеет значение true), а текущий $c является четным.

Мы сбрасываем флаг, когда $c повторно инициализируется до 0, указывая на переворачивание следующей строки.

Фрагмент:

<?php

$c = 0;
$product = wc_get_product( $product_id );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <div class="col-md-3 pl-0 pr-0">
            <a href="<?php the_permalink(); ?>">
                <div class="product-list-item <?php if ($flag && ($c & 1) == 0 || !$flag && ($c & 1) == 1) { ?>bg-grey<?php } ?>">
                    <div class="img-wrapper">
                        <?php echo $product->get_image('full', array('class' => 'img-fluid')); ?>
                    </div>
                    <div class="product-content">
                        <span class="product-title"><?php echo $product->get_name(); ?></span>
                        <span class="product-price">€ <?php $price = $product->price; $price_incl_tax = $price + round($price * ( 0 / 100 ), 2); $price_incl_tax = number_format($price_incl_tax, 2, ",", "."); $price = number_format($price, 2, ",", "."); echo $price_incl_tax; ?> incl. BTW</span>
                    </div>
                </div>
            </a>
        </div>
    <?php $c = ($c + 1) % 4; $flag = $c == 0 ? !$flag : $flag; endwhile; wp_reset_query(); // Remember to reset ?>