Gutenberg에 있는 Woocommerce의 블록에 제품 속성 추가

Gutenberg에 있는 Woocommerce의 블록에 제품 속성 추가

편집 I: 이전 플러그인 우커머스 블록이 블록을 설정하는 파일을 찾았습니다. https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/master/src/BlockTypes/FeaturedCategory.php 하지만 우커머스 라이브러리에는 어디에 있습니까?

EDIT II: 질문을 간단히 요약하면 다음과 같습니다.

기본 제공 기능보다 더 많은 데이터를 보여주도록 Woocommerce Blocks를 어떻게 사용자 정의합니까?

------------- 배경 ------------------------

Woocommerce Blocks에 대한 사용자 지정 속성 추가를 검색하면 WordPress 예제를 많이 찾을 수 있습니다.

예를 들어, 여기서 답이 가리키는 것은 다음을 사용하여 속성을 추가할 수 있다는 것입니다.blocks.registerBlockType 어떻게 할까요? 요?

HTML 출력에 데이터 필드를 추가할 수 있기를 원합니다.그런 다음 데이터 필드에서 제품 속성을 호출하여 해당 속성이 존재하는지 표시해야 합니다.

따라서 앞 페이지에서 Woocommerce Blocks를 사용할 때(예: 카트에 추가하기 버튼 아래에 크기가 표시됩니다), 이미지에서와 같이 크기가 카트에 추가 단추 아래에 표시됩니다.

가격을 표시/숨기는 기능인 카트에 추가 버튼을 선택하면 이미 편집 사이트에서 우커머스 블록을 선택할 수 있습니다.

하지만 저는 이 기능이 만들어지는 장소를 찾지 못했습니다.

이것은 또한 실제로 큰 도움이 될 것입니다 - 만약 당신이 나에게 Wocommerce Github 라이브러리에서 블록이 생성되는 위치를 보여줄 수 있다면.어쩌면 나는 그것들을 걸러내고 기능을 추가하는 방법을 스스로 알아낼 수 있을지도 모릅니다.

나는 - Udemy 과정을 기반으로 - 사용자 지정 플러그인을 만들고 새로운 블로그 유형을 만들고 저장하고 편집하는 방법을 알고 있습니다.

하지만 저는 우커머스 네임스페이스가 무엇인지, 블록을 어떻게 생성하는지, 데이터의 이름이 무엇인지 알아내야 합니다.Woocommerce 개발자 핸드북은 이것에 대해 아무 말도 하지 않고 있습니다 - 제가 찾은 것이 아닙니다.

3일째 인터넷 검색을 하고 있는데, 아무것도 찾을 수 없는 것 같아요.아무도 우커머스에서 이 기능을 커스터마이징하고 싶어하지 않습니다.코어의 새로운 기능(블록)인 것은 알지만, 여전히 그렇습니다.

저는 올바른 방향을 가리키기만 하면 됩니다.

저는 당신과 똑같은 문제를 다루다가 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->get_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);

저는 당신이 무엇을 요구하는지 완전히 알지 못합니다.구텐베르크 블록을 자주 참조하지만, 구텐베르크 블록이 없는 WooCommerce 저장소에 링크되어 있습니다.

하지만 제가 당신을 제대로 이해하고 있다면, 당신은 제품을 제어하는 PHP 템플릿을 찾고 있는 것입니다.에서 확인할 수 있습니다.

플러그인 개발에 사용되는 워드프레스 후크에 핵심적인 콜을 많이 볼 수 있을 것입니다.

<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, 에 정의되어 있습니다. 후크는 함수에 추가되는 이름이 붙은 액션입니다.예를 들어, 만약 당신이 조사한다면.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함수는 다음에 정의됩니다.

를 수 .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 );

도움이 되었으면 좋겠습니다.

WordPress 처럼 WooCommerce 를 할 수 있는 에 사용자 지정 특성을 할 수 .blocks.registerBlockType

하지만 여기에 문제점이 있습니다.서버측 렌더링되지 않은 블록에만 적용됩니다.

합니다와 합니다.Error loading block: Invalid parameter(s): attributes블록이 서버측 렌더링된 경우 PHP 엔드에서는 이러한 속성을 사용할 수 없기 때문입니다.

WooCommerce는 블록의 사용 가능한 속성을 업데이트하기 위한 특정 필터를 제공하지 않습니다.

은 WordPress 의입니다를 입니다.register_block_type_args

에 새 지정 입니다.woocommerce/product-tag

    add_filter(
            'register_block_type_args',
            function ( $args, $block_type ) {
                if ( 'woocommerce/product-tag' !== $block_type ) {
                    return $args;
                }

                $args['attributes']['animation'] = array(
                        'type'    => 'string',
                        'default' => '',
                );
                return $args;
            },
            10,
            2
    );

조건부 검사를 사용하면 필요한 블록에 새 특성을 추가할 수 있습니다.

동일한 방법을 사용하여 코어 블록에 새 특성을 추가할 수도 있습니다.

도움이 되길 바랍니다.

안부 전해요

언급URL : https://stackoverflow.com/questions/61089330/add-product-attribute-to-woocommerces-blocks-in-gutenberg