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

Question

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

对于我需要的设计，我必须向 html 添加一些包装器，因此我从这里克隆了存储库；WooCommerce 古腾堡块

添加的 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 块的简短描述？

Answer 1

我在寻找这个问题的答案时发现了这篇文章，我想您可能已经解决了它，但这里是为来到这里的任何人提供的建议解决方案。

\n

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

\n

因此，如果您将其放入functions.php中，您将在产品标题后得到简短的描述：

\n

/**\n * Add short description to WooCommerce product blocks\n */\nadd_filter('woocommerce_blocks_product_grid_item_html', 'add_short_desc_woocommerce_blocks_product_grid_item_html', 10 , 3);\nfunction add_short_desc_woocommerce_blocks_product_grid_item_html($content, $data, $product) {\n    $short_description = '<div class="wc-block-grid__product-short-description">' . $product->get_short_description() . '</div>';\n\n    // This will inject the short description after the first link (assumed: the default product link).\n    $after_link_pos = strpos($content, "</a>");\n    $before = substr($content, 0, $after_link_pos + 4);\n    $after = substr($content, $after_link_pos + 4);\n\n    $content = $before . $short_description . $after;\n\n    return $content;\n}\n

\n