将产品属性添加到古腾堡中的 Woocommerce 块

Question

编辑我：我找到了旧插件 Woocommerce Blocks 设置块的文件：https : //github.com/woocommerce/woocommerce-gutenberg-products-block/blob/master/src/BlockTypes/FeaturedCategory.php但在哪里它在 Woocommerce 库中？

编辑二：简而言之问题：

您如何自定义 Woocommerce Blocks 以显示比内置功能更多的数据？

- - - - - - - 背景 - - - - - -

如果您搜索为 Woocommerce Blocks 添加自定义属性，您会发现很多 WordPress 示例。

例如，this，答案指出，您可以使用blocks.registerBlockType. 但是如何为 Woocommerce Blocks 做到这一点？

我希望能够向 HTML 输出添加数据字段。然后数据字段应调用产品属性并显示它是否存在。

因此，当您在首页上使用 Woocommerce Blocks 时 - 例如，尺寸将显示在添加到购物车按钮下方 - 如图所示。

当您在编辑网站上选择 Woocommerce Block 时，您可能知道显示/隐藏价格、添加到购物车按钮、评论的功能已经存在。

但是我还没有找到创建这个功能的地方。

这实际上也是一个很大的帮助——如果你能告诉我这些块是在 Woocommerce Github 库中的哪里创建的。也许我可以弄清楚如何过滤它们并添加功能

我知道 - 基于 Udemy 课程 - 如何创建自定义插件并创建新的博客类型，保存和编辑。

但我需要弄清楚 Woocommerce 命名空间是什么、它们如何创建块以及它们的数据被称为什么。Woocommerce 开发人员手册对此没有任何说明 - 不是我发现的。

我已经在互联网上搜索了三天，我只是不明白我似乎无法找到任何关于此的信息。没有其他人想在 Woocommerce 中自定义此功能。我知道它是核心中的一个新功能（块），但仍然如此。

我只需要指出正确的方向。

Answer 1

我正在处理与您完全相同的问题，我通过深入挖掘 WC blocks plugin repo 找到了答案。

我发现你必须对这个钩子应用一个过滤器： woocommerce_blocks_product_grid_item_html

原始 HTML 是这样的：

<li class="wc-block-grid__product">
        <a href="{$data->permalink}" class="wc-block-grid__product-link">
            {$data->image}
            {$data->title}
        </a>
        {$data->badge}
        {$data->price}
        {$data->rating}
        {$data->button}
</li>

这样您就可以过滤 html 代码并通过将这段代码添加到您的代码中functions.php并对其进行自定义以满足您的需要来修改它

function wc_add_date_to_gutenberg_block( $html, $data, $product ) {
    $dateStr = get_post_meta($product->id, 'ticket_start_time', true);
    $date = new DateTime($dateStr);
    $data->date = "<p>Date: " . $date->format('d-m-Y H:i') . "</p>";
    $output = "
<li class=\"wc-block-grid__product\">
        <a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
            {$data->image}
            {$data->title}
        </a>
        {$data->date} <- I added this one
        {$data->badge}
        {$data->price}
        {$data->rating}
        {$data->button}
</li>
    ";

    return $output;
}

add_filter("woocommerce_blocks_product_grid_item_html", "wc_add_date_to_gutenberg_block", 10, 3);

Answer 2

我不太清楚你在问什么。您经常引用古腾堡块，但已链接到没有任何古腾堡块的 WooCommerce 存储库。

但如果我理解正确的话，您正在寻找控制产品的 PHP 模板。您可以在content-product.php

您会看到很多对插件开发do_action中使用的 WordPress 挂钩核心的调用。

<li <?php wc_product_class( '', $product ); ?>>
    <?php
    /**
     * Hook: woocommerce_before_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_open - 10
     */
    do_action( 'woocommerce_before_shop_loop_item' );

    /**
     * Hook: woocommerce_before_shop_loop_item_title.
     *
     * @hooked woocommerce_show_product_loop_sale_flash - 10
     * @hooked woocommerce_template_loop_product_thumbnail - 10
     */
    do_action( 'woocommerce_before_shop_loop_item_title' );

    /**
     * Hook: woocommerce_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_product_title - 10
     */
    do_action( 'woocommerce_shop_loop_item_title' );

    /**
     * Hook: woocommerce_after_shop_loop_item_title.
     *
     * @hooked woocommerce_template_loop_rating - 5
     * @hooked woocommerce_template_loop_price - 10
     */
    do_action( 'woocommerce_after_shop_loop_item_title' );

    /**
     * Hook: woocommerce_after_shop_loop_item.
     *
     * @hooked woocommerce_template_loop_product_link_close - 5
     * @hooked woocommerce_template_loop_add_to_cart - 10
     */
    do_action( 'woocommerce_after_shop_loop_item' );
    ?>
</li>

如果您搜索 中定义的操作挂钩content-product.php，您会发现它们是在 中定义的wc-template-hooks.php。钩子是添加函数的命名操作。例如，如果您查看该woocommerce_after_shop_loop_item操作，您会发现这两个函数附加到它。

add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );

和woocommerce_template_loop_product_link_close函数woocommerce_template_loop_add_to_cart定义在wc-template-functions.php

content-product.php您可以通过在 中创建文件来在主题中创建一个全新的文件yourtheme/woocommerce/content-product.php，但是您会失去 WooCommerce 的许多内置功能和兼容性。

更好的办法是删除钩子，然后添加新的动作woocommerce_after_shop_loop_item。例如，woocommerce_template_loop_product_link_close当前定义为：

function woocommerce_template_loop_product_link_close() {
    echo '</a>';
}

您可以通过在functions.php文件中执行以下操作来覆盖它：

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );

function custom_template_loop_product_link_close() {
    echo 'Hello world!</a>';
}
add_action( 'woocommerce_after_shop_loop_item', 'custom_template_loop_product_link_close', 5 );

我希望这有帮助。