Question

最近更新的WP和插件。我在古腾堡（Gutenberg）编辑器中使用的“按类别划分的产品”（Products by Category）块现在呈现出非常不同的方式。

经过一番挖掘，看来WGPB_Block_Grid_Base render和render-product函数现在正在定义内容的外观。这忽略了我之前针对该块所做的许多自定义操作和标记工作。

这是完全不同的动物，看着它，我什至不知道从哪里开始。过滤器内部有一个过滤器直接应用于标记内联：

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

是否有一种简单的方法可以覆盖他们正在使用的模板？还是我基本上是坚持编写自己的整个Gutenberg块插件以使其恢复原状？

Answer 1

我们想要更改购物车按钮和产品名称的位置，并为缩略图添加一个包装器，因此我们使用类似这样的函数中的一些自定义标记来修改输出。

function my_product_block( $html, $data, $product ) {
    $html = '<li class="wc-block-grid__product">
        <div class="image-wrap">
            <a href="' . $data->permalink . '" class="wc-block-grid__product-link">' . $data->image . '</a>
            ' . $data->button . '
        </div>
        <h3><a href="' . $data->permalink . '">' . $data->title . '</a></h3>
        ' . $data->badge . '
        ' . $data->price . '
        ' . $data->rating . '
    </li>';
    return $html;
}
add_filter( 'woocommerce_blocks_product_grid_item_html', 'my_product_block', 10, 3);

Answer 2

我最近进行了此操作，并能够使用以下功能修改渲染：

add_filter( 'woocommerce_blocks_product_grid_item_html', 'change_render_product', 10, 3);

function change_render_product( $html, $data, $product ) {
  $search = '<div class="wc-block-grid__product-title">';
  $add    = '<p>text for example</p>'.$search;
  $output = str_replace($search, $add, $html);

  return $output;
}

就我而言，我在标题上方添加了一个元素。

如何覆盖新的Gutenberg产品循环块标记

2 个答案: