Woocommerce - 根据订单中的产品数量更改 CSS class

Woocommerce - Change CSS class based on number of products in the order

我这里有这个简单的代码,可以在 orders.php 模板上获取订单的缩略图。

<div class="product-img-col">
    <div class="product-img-list">
        <?php foreach( $order->get_items() as $item_id => $item ) {
            $product = apply_filters( 'woocommerce_order_item_product', $order->get_product_from_item( $item ), $item );
            echo $product->get_image();
        }
        ?>
    </div>
</div>

如果订单包含 1 个产品或多个产品,我想要实现的是 class 分隔缩略图。

示例:

<div class="product-img-col">
    
    <div class="single-product-img">
        <!-- Insert code to fetch the product thumbnail for single order here -->
    </div>

    <div class="product-img-list">
        <!-- Insert code to fetch the product thumbnails for orders with multiple products here -->
    </div>

</div>

这可能吗?我知道 foreach 函数只是获取该特定订单的所有产品缩略图。如果订单 # 仅包含 1 件产品,我该如何交替添加代码以添加 if condition,然后获取产品缩略图。

编辑:更新

<div class="product-img-col">
    <div class="<?php echo count( $order->get_items() ) > 1 ? 'product-img-list' : 'single-product-img'; ?>">
        <?php foreach( $order->get_items() as $item_id => $item ) {
            $product = $item->get_product();
            echo $product->get_image();
        }
        ?>
    </div>
</div>

您可以使用内部 WooCommerce get_item_count() 功能来检查订单中有多少商品。您可以在 ternary operator.

中实现此功能

<div class="<?php echo $order->get_item_count() > 1 ? 'product-img-list' : 'single-product-img'; ?>">

另请注意,$order->get_product_from_item( $item ) 已弃用。您应该改用 $item->get_product()。这也将消除添加 woocommerce_order_item_product 过滤器的使用,因为这是在 get_product() 函数中调用的。

您还需要检查 $product 变量。现在,如果遇到产品目录中不再有产品的订单,您的代码将会崩溃。

所以像这样:

<div class="product-img-col">
    <div class="<?php echo $order->get_item_count() > 1 ? 'product-img-list' : 'single-product-img'; ?>">
        <?php 
        foreach( $order->get_items() as $item_id => $item ) {
            if ( $product = $item->get_product() ) {
                echo $product->get_image();
            }
        }
        ?>
    </div>
</div>

这是一个可行的解决方案 - 单个项目:https://prnt.sc/HhclHKDpJ1YA multiple items: https://prnt.sc/Zb9MeWUlIw6v

<?php
defined( 'ABSPATH' ) || exit;

do_action( 'woocommerce_before_account_orders', $has_orders ); ?>

<?php if ( $has_orders ) : ?>
<?php
    foreach($customer_orders->orders as $customer_order):
        $order = wc_get_order( $customer_order );
        $items = $order->get_items();
        $items_count = $order->get_item_count();
?>
    <div class="product-img-col"><div class="<?php echo count( $order->get_items() ) > 1 ? 'product-img-list' : 'single-product-img'; ?>">
    <?php foreach ( $items as $item ) {
        $product = $item->get_product();
        echo $product->get_image();
    }?></div></div>
    <?php endforeach; ?>
    <?php if ( 1 < $customer_orders->max_num_pages ) : ?>
        <div class="woocommerce-pagination woocommerce-pagination--without-numbers woocommerce-Pagination">
            <?php if ( 1 !== $current_page ) : ?>
                <a class="woocommerce-button woocommerce-button--previous woocommerce-Button woocommerce-Button--previous button" href="<?php echo esc_url( wc_get_endpoint_url( 'orders', $current_page - 1 ) ); ?>"><?php esc_html_e( 'Previous', 'woocommerce' ); ?></a>
            <?php endif; ?>

            <?php if ( intval( $customer_orders->max_num_pages ) !== $current_page ) : ?>
                <a class="woocommerce-button woocommerce-button--next woocommerce-Button woocommerce-Button--next button" href="<?php echo esc_url( wc_get_endpoint_url( 'orders', $current_page + 1 ) ); ?>"><?php esc_html_e( 'Next', 'woocommerce' ); ?></a>
            <?php endif; ?>
        </div>
    <?php endif; ?>
<?php endif; ?>