Извините за название, я не знал, как это произнести.
По сути, у меня есть веб-страница, которая использует расширенные настраиваемые поля для заполнения продуктов, она просматривает продукты и отображает их группами по три в строке; каждый ряд чередует цвет — от светло-серого до темно-серого.
Моя проблема в том, что код, который я написал, проверяет, есть ли в каждой строке по 3 элемента, поэтому, если строка со списком продуктов заканчивается на 1 или 2, строка, содержащая div, не закрывается, что оборачивает мой нижний колонтитул и портит остальную страница. Ниже приведен мой код, за ним должно быть довольно легко следовать — вы также можете видеть, что я использую LazyLoadAny — В основном, я считаю элементы, если их больше 6, я lazyload остальных. В первом пункте я открываю контейнер строк, а когда их три, я закрываю его. Итак, еще раз, мне нужно выяснить, как закрыть контейнер, если строка заканчивается на 1 или 2 элемента, а не только на 3.
Короткая версия: Как мне закрыть строки «internal-product-light» или «internal-product-dark», если они заканчиваются 1 или 2 продуктами вместо 3?
<?php
$count = 0;
$rowCount = 0;
$rowClass = "internal-product-light";
// check if the repeater field has rows of data
if( have_rows('product_listing_repeater') ): ?>
<div class="internal-container">
<div class="full-product-line-contain">
<?php // loop through the rows of data
while ( have_rows('product_listing_repeater') ) : the_row(); $count++; $rowCount++; ?>
<?php if($rowCount == 1) { ?>
<div class="<?php echo $rowClass; ?>">
<div class="product-centering">
<?php if($count > 6) { ?>
<div class="js-lazyload">
<?php echo "<!--"; }
} ?>
<div class="internal-section product-line-item product-alignment clearfix">
<div class="product-contain">
<?php if(get_sub_field('has_link')): ?>
<a href="<?php the_sub_field('link_url')?>" class="product-link">
<?php
if(get_sub_field('has_image')):
$singleImage = get_sub_field('block_image');
?>
<img class="product-line-image" src="<?php echo $singleImage ?>" />
<?php endif; ?>
</a>
<?php endif; ?>
<div class="internal-content-contain-right no-float">
<?php if(get_sub_field('has_link')): ?>
<a href="<?php the_sub_field('link_url')?>" class="product-link-title">
<h2><?php the_sub_field('block_headline'); ?></h2>
</a>
<?php endif; ?>
<?php if(get_sub_field('has_link')): ?>
<a href="<?php the_sub_field('link_url')?>" class="product-line-btn"><?php the_sub_field('link_text')?></a>
<?php endif; ?>
</div>
</div>
</div>
<?php if($rowCount == 3) { ?>
<?php if($count > 6) { echo "-->"; ?>
</div><!-- End lazy load div -->
<?php } ?>
</div><!-- End product centering -->
</div><!-- End row -->
<?php $rowCount = 0;
if($rowClass == "internal-product-light"){ $rowClass = "internal-product-dark";}else{$rowClass = "internal-product-light";}
} ?>
<?php endwhile; ?>
</div>
</div>
Ваш последний if-statment может быть:
<?php if(($rowCount % 3) == 0) { ?>
<?php if($count > 6) { echo "-->"; ?>
</div><!-- End lazy load div -->
<?php } ?>
</div><!-- End product centering -->
</div><!-- End row -->
<?php if($rowClass == "internal-product-light"){ $rowClass = "internal-product-dark";}else{$rowClass = "internal-product-light";}
} ?>
А потом, после блока while:
<?php if(($rowCount % 3) <> 0) { ?>
<?php if($count > 6) { echo "-->"; ?>
</div><!-- End lazy load div -->
<?php } ?>
</div><!-- End product centering -->
</div><!-- End row -->
<?php if($rowClass == "internal-product-light"){ $rowClass = "internal-product-dark";}else{$rowClass = "internal-product-light";}
} ?>
x % y
возвращает остаток от x/y
,
Таким образом, следующий код на самом деле является гораздо более простым решением, чем я думал — я опубликую код, а затем разобью его.
<?php
$count = 0;
$rowCount = 0;
$rowClass = "internal-product-light";
$rowInfo = get_sub_field('product_listing_repeater');
$fieldCount = count($rowInfo);
// check if the repeater field has rows of data
if( have_rows('product_listing_repeater') ): ?>
<div class="internal-container">
<div class="full-product-line-contain">
<?php // loop through the rows of data
while ( have_rows('product_listing_repeater') ) : the_row(); $count++; $rowCount++; ?>
<?php
if($rowCount == 1) { ?>
<div class="<?php echo $rowClass; ?>">
<div class="product-centering">
<?php if($count > 6) { ?>
<div class="js-lazyload">
<?php echo "<!--"; }
} ?>
<div class="internal-section product-line-item product-alignment clearfix">
<div class="product-contain">
<?php if(get_sub_field('has_link')): ?>
<a href="<?php the_sub_field('link_url')?>" class="product-link">
<?php
if(get_sub_field('has_image')):
$singleImage = get_sub_field('block_image');
?>
<img class="product-line-image" src="<?php echo $singleImage ?>" />
<?php endif; ?>
</a>
<?php endif; ?>
<div class="internal-content-contain-right no-float">
<?php if(get_sub_field('has_link')): ?>
<a href="<?php the_sub_field('link_url')?>" class="product-link-title">
<h2><?php the_sub_field('block_headline'); ?></h2>
</a>
<?php endif; ?>
<?php if(get_sub_field('has_link')): ?>
<a href="<?php the_sub_field('link_url')?>" class="product-line-btn"><?php the_sub_field('link_text')?></a>
<?php endif; ?>
</div>
</div>
</div>
<?php if($rowCount == 3 || $count == $fieldCount) { ?>
<?php if($count > 6 || $count == $fieldCount) { echo "-->"; ?>
</div><!-- End lazy load div -->
<?php } ?>
</div><!-- End product centering -->
</div><!-- End row -->
<?php $rowCount = 0;
if($rowClass == "internal-product-light"){ $rowClass = "internal-product-dark";}else{$rowClass = "internal-product-light";}
} ?>
<?php endwhile; ?>
</div>
</div>
Как видите, я добавил переменную $fieldCount = count($rowInfo)
который считает поле повторителя ACF. Затем, когда я первоначально проверял 3 продукта, я добавил OR
заявление — <?php if($rowCount == 3 || $count == $fieldCount) { ?>
и для проверки lazyload — <?php if($count > 6 || $count == $fieldCount) { echo "-->"; ?>
Это гарантирует, что если он равен 3, он закрывает div и если это конец массива (выяснил через count
), это закрывает div.
Пожалуйста, оставляйте любые вопросы для уточнения.