在兩個容器中並排列出woocommerce產品

Question

我編寫了此PHP代碼以按特定類別列出woocommerce產品。 我的頁面上現在有兩個div容器，我希望每個容器一個個地獲得這些產品。 該代碼按應將所有產品列出到container1中。 但是我一直堅持修改代碼，以使每個容器的產品並排列出。 如果我的問題不清楚，這就是我的意思。

該代碼的作用

container1        container2

product1          empty
product2
product3
product4

我想做的就是這個

container1        container2

product1          product2
product3          product4

該代碼是

<?php

$args = array( 'category' => array( 'shirts' ), );

$productlist = wc_get_products( $args );

// List products for container one

echo '<div class="container1>'

echo '<ul class="product-list-wrap">';

// loop through the product list
foreach ($productlist as $product) {

$productid = $product->get_id(); // get individual product id
$custom_field = get_field( 'custom_field', $productid ); // get the custom field

echo '<a href="'.$product->get_permalink().'">
<li class="product-name">'.$product->get_title().'<span class="custom">'.$custom_field.'</span>'.'</li>
</a>';
}

echo '</ul>';

echo '</div>';

// List products for container two

echo '<div class="container2>'

echo '<ul class="product-list-wrap">';

content

echo '</ul>';

echo '</div>';

?>

HTML輸出

<div class="container1">

    <ul class="product-list-wrap">

        <a href="http://localhost/project1/product/product-1/">
        <li class="product-name">Product 1<span class="custom">custom output</span></li>
        </a>

        <a href="http://localhost/project1/product/product-2/">
        <li class="product-name">Product 1<span class="custom">custom output</span></li>
        </a>

        <a href="http://localhost/project1/product/product-3/">
        <li class="product-name">Product 1<span class="custom">custom output</span></li>
        </a>

        <a href="http://localhost/project1/product/product-4/">
        <li class="product-name">Product 1<span class="custom">custom output</span></li>
        </a>

    </ul>                            

</div>

<div class="container2">

    <ul class="product-list-wrap">

    content

    </ul>

</div>

Answer 1

您可以執行以下操作：

$productList1 = array();
$productList2 = array();

foreach( $productlist as $key=>$product ) {
    if( $key % 2 == 0 ) {
        // even key (0, 2, 4, ...)
        array_push( $productList1, $product );
    }
    else {
        // odd key (1, 3, 5, ...)
        array_push( $productList2, $product );
    }
}

然后將$ productList1用於第一個容器循環，將$ productList2用於第二個容器循環。

Answer 2

<?php
// Put all your products in 1 array
$container_data = array();

foreach ($productlist as $product) {

$productid = $product->get_id(); // get individual product id
$custom_field = get_field( 'custom_field', $productid ); // get the custom field

// fill the array
$container_data[] = '<a href="'.$product->get_permalink().'">
<li class="product-name">'.$product->get_title().'<span class="custom">'.$custom_field.'</span>'.'</li>
</a>';

}

// Split your array
list($container_1, $container_2) = array_chunk($container_data, ceil(count($container_data) / 2));

// You have now 2 arrays
// $container_1
// $container_2

// Now loop again

echo '<div class="container1>';

echo '<ul class="product-list-wrap">';

foreach ($container_1 as $product) {
echo $product;
}

echo '</ul>';

echo '</div>';

// Now loop again

echo '<div class="container2>';

echo '<ul class="product-list-wrap">';

foreach ($container_2 as $product) {
echo $product;
}

echo '</ul>';

echo '</div>';