在代码中渲染 WooCommerce 块 'Product Filter – Attributes' 而不是通过后端

Question

WooCommerce 提供 Gutenberg 块“产品过滤器 - 属性”，您可以将其添加到侧边栏或页脚小部件或基本上任何地方，您可以在其中添加 Gutenberg 块。

但是，我需要在覆盖的 woocommerce 模板“archive-product.php”中的一个非常具体的位置渲染这个块。

有谁知道，怎么可能只用代码渲染古腾堡块？

然后我还需要告诉块，它应该为哪些属性提供过滤器。在后端，您只需选择要过滤的全局 woocommerce 属性。我需要在代码中完成所有这些。

谢谢，祝你愉快

Answer 1

块内容（包括 woocommerce 块）可以通过 do_blocks() 函数在模板中呈现。

生成块代码最简单的方法是新建一个post/page，插入你想要的块，根据需要配置attributes/settings，然后从Visual编辑器到代码编辑器（快捷方式：Ctrl+Shift+Alt+M）以获取所需的代码。

这是用于插入模板文件的“您的属性”的属性过滤器块示例：

<?php 
    echo do_blocks('<!-- wp:woocommerce/attribute-filter {"attributeId":1,"heading":"Filter by your-attribute"} -->
        <div class="wp-block-woocommerce-attribute-filter is-loading" data-attribute-id="1" data-show-counts="true" data-query-type="or" data-heading="Filter by your-attribute" data-heading-level="3"><span aria-hidden="true" class="wc-block-product-attribute-filter__placeholder"></span></div>
        <!-- /wp:woocommerce/attribute-filter -->'
    );
?>

注意。 为了正确呈现块，woocommerce 或自定义 JS 和 CSS 也需要排队..

在代码中渲染 WooCommerce 块 'Product Filter – Attributes' 而不是通过后端

Render WooCommerce Block 'Product Filter – Attributes' in code rather than via backend

php

wordpress

woocommerce

wordpress-gutenberg