Ich schleife Produkte auf meiner Seite und die Hintergrundfarbe lautet wie folgt:
'transparent' - 'grau' - 'transparent' - 'grau'

Es gibt 4 Produkte in jeder Reihe, aber wenn die zweite Reihe beginnt, erfolgt die gleiche Reihenfolge wie:
Situation 1 - Falsche Situation
'transparent' - 'grau' - 'transparent' - 'grau'
'transparent' - 'grau' - 'transparent' - 'grau'

Aber ich möchte es wie folgt:
Situation 2 - Richtige Situation
'transparent' - 'grau' - 'transparent' - 'grau'
'grau' - 'transparent' - 'grau' - 'transparent'

Weiß jemand, wie man meine Schleife bearbeitet, um die Struktur wie oben zu erhalten?

<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>

Hier ist ein Bild der falschen Situation (Situation 1):
Falsches Situationsbild

Vielen Dank für Ihre Zeit!

0
Jari Rengeling 7 Feb. 2020 im 17:12

3 Antworten

Beste Antwort

Sie müssen dies nicht fest in Ihre Vorlage codieren. Verwenden Sie CSS, um dies mit einer leicht komplexen Liste von Selektoren zu erreichen. Sie können dies in eine Medienabfrage einschließen, da ich sehe, dass Sie col-md-3 haben. Angenommen, Sie verwenden Bootstrap, dann wäre dies @include media-breakpoint-up(md), das Sie verwenden würden.

.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>

Erklären Sie nun die Auswahllogik: Sie möchten jedes 2. und 4. Kind in ungeraden Zeilen und das 1. und 3. Kind in geraden Zeilen als Ziel festlegen. Dazu zielen Sie jeweils auf Folgendes ab:

  • Alle 2 Elemente, die kein Vielfaches von 6 sind
  • Alle 4 Elemente, die kein Vielfaches von 8 sind
  • Alle 5 Elemente, die kein Vielfaches von 9 sind
  • Alle 7 Elemente, die kein Vielfaches von 11 sind

Hoffe das hilft!

1
chriskirknielsen 7 Feb. 2020 im 18:18

Ok, das ist ein wenig knifflig, weil Sie die Reihenfolge der Entscheidungen bei 4 ändern. Um dies zu entscheiden, können Sie eine zusätzliche $flag Variable haben, die anfänglich auf false gesetzt ist.

Der Scheck lautet also wie folgt:

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

Dies besagt, wenn wir uns in der ungeraden Iteration befinden (wenn $ flag falsch ist) und das aktuelle $c ungerade ist oder wenn wir uns in der geraden Iteration befinden (wenn $ flag wahr ist) und das aktuelle $c gerade ist.

Wir setzen das Flag zurück, wenn $c auf 0 neu initialisiert wird, was den nächsten Zeilenwechsel anzeigt.

Snippet:

<?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 ?>
0
vivek_23 7 Feb. 2020 im 14:43

Wenn Sie möchten, dass es in PHP ausgeführt wird, habe ich festgestellt, dass zwei Arrays verwendet werden, die nicht mit transparent und grau synchron sind.
Dann Echo von einem Array in einer Zeile und dann wechseln.

Es ist kein schöner Code, aber es macht den Trick.

$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;
}

Hier ist ein laufendes Beispiel für den Code:

https://3v4l.org/XdcHB

0
Andreas 7 Feb. 2020 im 15:00