WooCommerce Blocks - 将简短的产品描述添加到产品网格

Posted

技术标签:

【中文标题】WooCommerce Blocks - 将简短的产品描述添加到产品网格【英文标题】:WooCommerce Blocks - Add short product description to product grid 【发布时间】:2020-06-08 03:49:13 【问题描述】:

所以我是第一次使用新的 WooCommerce Blocks。在我网站的主页上,我包含了“ProductBestSellers”块和“ProductOnSale”块。这两个块都显示了最畅销产品或特价产品的网格样式布局。

对于我需要的设计,我必须在 html 中添加一些包装器,因此我从这里克隆了存储库; WooCommerce Gutenberg Blocks

添加的 html 确实有效,但现在我需要在这些块中包含产品简短描述。我编辑 AbstractProductGrid.php 如下;

AbstractProductGrid.php

/**
 * Render a single products.
 * Edited: 24/02/2020 
 *
 * Added wrappers to display content with padding borders and other styling
 *
 * @param int $id Product ID.
 * @return string Rendered product output.
 */
public function render_product( $id ) 
    $product = wc_get_product( $id );

    if ( ! $product ) 
        return '';
    

    $data = (object) array(
        'permalink'     => esc_url( $product->get_permalink() ),
        'description'   => $this->get_description_html( $product ), <--- Add product short description
        'image'         => $this->get_image_html( $product ),
        'title'         => $this->get_title_html( $product ),
        'rating'        => $this->get_rating_html( $product ),
        'price'         => $this->get_price_html( $product ),
        'badge'         => $this->get_sale_badge_html( $product ),
        'button'        => $this->get_button_html( $product ),
    );

    return apply_filters(
        'woocommerce_blocks_product_grid_item_html',
        "<li class=\"wc-block-grid__product\">
            <div class=\"wc-block-grid__product__wrapper\">
                <div class=\"wc-block-grid__product__items\">
                    <a href=\"$data->permalink\" class=\"wc-block-grid__product-link\">
                        $data->image
                        $data->title
                    </a>
                    $data->badge
                    $data->rating
                    $data->description
                    <div class=\"wc-block-grid__product__price-wrapper\">
                        $data->price
                        $data->button
                    </div>
                </div>
            </div>
        </li>",
        $data,
        $product
    );


/**
 * Get the product short description.
 *
 * @param \WC_Product $product Product.
 * @return string
 */
protected function get_description_html( $product ) 
    if ( empty( $this->attributes['contentVisibility']['description'] ) ) 
        return '<p class="purple">The short description is empty</p>';
    
    return '<div class="wc-block-grid__description">' . $product->get_short_description() ? $product->get_short_description() : wc_trim_string( $product->get_description(), 400 ) . '</div>';

上面的代码返回一个空属性,我怎样才能包含新的 WooCommerce 块的简短描述?

【问题讨论】:

【参考方案1】:

我在寻找这个问题的答案时发现了这篇文章,我猜你可能已经解决了,但这里是给来这里的任何人的建议解决方案。

首先,不建议更改 WooCommerce 或 Blocks 插件的核心文件,因为如果您更新插件,您的更改将被覆盖。 更好的方法是利用插件为渲染输出公开一个过滤器,称为“woocommerce_blocks_product_grid_item_html”。

所以如果你把它放在你的functions.php中,你会在产品标题之后得到简短的描述:

/**
 * Add short description to WooCommerce product blocks
 */
add_filter('woocommerce_blocks_product_grid_item_html', 'add_short_desc_woocommerce_blocks_product_grid_item_html', 10 , 3);
function add_short_desc_woocommerce_blocks_product_grid_item_html($content, $data, $product) 
    $short_description = '<div class="wc-block-grid__product-short-description">' . $product->get_short_description() . '</div>';

    // This will inject the short description after the first link (assumed: the default product link).
    $after_link_pos = strpos($content, "</a>");
    $before = substr($content, 0, $after_link_pos + 4);
    $after = substr($content, $after_link_pos + 4);

    $content = $before . $short_description . $after;

    return $content;

【讨论】:

那将是一个很大的改进,您在哪里找到有关向 woocommerce 块添加过滤器的文档?看起来常规的循环过滤器不起作用... 在你提到的文件的第 336 行,我看到他们在从 render_product() 返回内容时使用了“apply_filters('woocommerce_blocks_product_grid_item_html',...",$data,$products),所以我刚刚迷上了那个过滤器。【参考方案2】:

这很有趣,我在我的网站上尝试过,它可以工作 - 但是我的第一个是在图片之后,这也是一个链接。

所以对我来说,@Pierre 的代码最终输出:

Image
Description
Title

任何人对如何使其输出有任何建议

Image
Title
Description

(即使图片链接到产品页面)

?

【讨论】:

以上是关于WooCommerce Blocks - 将简短的产品描述添加到产品网格的主要内容,如果未能解决你的问题,请参考以下文章

Woocommerce产品简短描述中同一类别的产品下拉列表

如何删除 Woocommerce 商店页面上的简短描述

在主页和类别页面中限制 woocommerce 产品简短描述

在WooCommerce 3.0+中添加属性为简短描述

Woocommerce 简短描述摘录长度

在帖子页面上预填充 Woocommerce 简短描述