Добавить атрибут продукта в блоки Woocommerce в Гутенберге

ИЗМЕНИТЬ I: Я нашел файл, в котором старый плагин Woocommerce Blocks устанавливает блоки: https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/master/src/BlockTypes/FeaturedCategory.php Но где это в Woocommerce библиотека?

РЕДАКТИРОВАТЬ II: Вкратце:

Как вы настраиваете блоки Woocommerce, чтобы отображать больше данных, чем встроенные функции?

------------- фон ------------

Если вы ищете добавление настраиваемых атрибутов для блоков Woocommerce, вы найдете множество примеров WordPress для этого.

Например, this, где в ответе указано, что вы можете добавлять атрибуты с помощью blocks.registerBlockType. Но как это сделать для блоков Woocommerce?

Я хочу иметь возможность добавлять поле данных в вывод HTML. Поле данных должно затем вызвать атрибут продукта и показать, существует ли он.

Поэтому, когда вы используете блоки Woocommerce на своей главной странице - например, размер будет отображаться под кнопкой добавления в корзину - как на изображении.

введите здесь описание изображения

Как вы, возможно, знаете, функция отображения / скрытия цены, кнопка добавления в корзину, обзоры уже есть, когда вы выбираете блок Woocommerce на сайте редактирования.

Но я не нашел места, где создается этот функционал.

На самом деле это тоже было бы очень полезно - если бы вы могли показать мне , где в библиотеке Woocommerce Github блоки создаются. Может быть, я сам пойму, как отфильтровать их и добавить функциональность

Я знаю - на основе курса Udemy - как создать собственный плагин и создать новый тип блога, сохранить и отредактировать.

Но мне нужно выяснить, что такое пространство имен Woocommerce, как они создают свои блоки и как называются их данные. В справочнике разработчика Woocommerce об этом ничего не говорится - не то, что я нашел.

Я искал в Интернете уже три дня и просто не понимаю, что не могу найти НИЧЕГО по этому поводу. Что никто другой не хочет настраивать эту функцию в Woocommerce. Я знаю, что это новая функция (блоки) в ядре, но все же.

Мне просто нужно указать правильное направление.


person Peter Højlund Andersen    schedule 07.04.2020    source источник
comment
Думаю файл нужно здесь править. github.com/woocommerce/woocommerce- Gutenberg-products-block /   -  person Seamus Leonard    schedule 17.06.2020


Ответы (2)


Я имел дело с той же проблемой, что и вы, и я нашел ответ, глубоко покопавшись в репозитории плагинов блоков WC.

Я обнаружил, что к этому хуку нужно применить фильтр: 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);

person Charlie Ruiz    schedule 14.09.2020
comment
Вау - правда :) Выглядит супер мило. Спасибо. - person Peter Højlund Andersen; 16.09.2020

Я не совсем понимаю, о чем вы спрашиваете. Вы часто ссылаетесь на блоки Гутенберга, но связались с репозиторием 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, вы найдете их в _ 5_. Хуки - это именованные действия, к которым добавляются функции. Например, если вы посмотрите на действие 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 определены в _10 _

Вы можете создать совершенно новый 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 );

Надеюсь, это поможет.

person Josh Bradley    schedule 16.04.2020
comment
Привет, Джош. Спасибо за ваш ответ. Я уже использовал это в разработке раньше. Это не то, что я ищу. Это не приведет к настройке блока в редакторе Гутенберга. Это то, что я ищу. Чтобы настроить блоки woocommerce, чтобы отображалось больше данных, чем встроенная функциональность. - person Peter Højlund Andersen; 17.04.2020
comment
И они есть в репозитории WooCommerce, с которым вы связаны? Я не смог найти там никаких блоков Гутенберга, если это так. Вы можете указать мне правильный репозиторий? - person Josh Bradley; 17.04.2020
comment
Они создаются в этом репозитории: Блоки Woocommerce - но я должен признать, что мои знания на этом заканчиваются. Я перешел на использование старых шорткодов Woocommerce и настраиваемого кода, как вы предложили. Больше всего мне кажется странным, что новые блоки Woocommerce так плохо документированы, когда дело доходит до настройки. - person Peter Højlund Andersen; 23.04.2020