Блоки WooCommerce - добавьте краткое описание продукта в сетку продуктов.

Итак, я впервые использую новые блоки WooCommerce. На главной странице моего веб-сайта я включил блоки ProductBestSellers и ProductOnSale. Оба этих блока показывают макет в виде сетки для самых продаваемых продуктов или продуктов в продаже.

Для нужного мне дизайна мне пришлось добавить несколько оболочек в html, поэтому я клонировал репозиторий отсюда; Блоки Гутенберга в WooCommerce

Добавленный HTML-код действительно работает, но теперь мне нужно включить краткое описание продукта в эти блоки. Я отредактировал AbstractProductGrid.php следующим образом;

AbstractProductGrid.php

/**
 * Render a single products.
 * Edited: 24/02/2020 
 *
 * Added wrappers to display content with padding borders and other styling
 *
 * @param int $id Product ID.
 * @return string Rendered product output.
 */
public function render_product( $id ) {
    $product = wc_get_product( $id );

    if ( ! $product ) {
        return '';
    }

    $data = (object) array(
        'permalink'     => esc_url( $product->get_permalink() ),
        'description'   => $this->get_description_html( $product ), <--- Add product short description
        'image'         => $this->get_image_html( $product ),
        'title'         => $this->get_title_html( $product ),
        'rating'        => $this->get_rating_html( $product ),
        'price'         => $this->get_price_html( $product ),
        'badge'         => $this->get_sale_badge_html( $product ),
        'button'        => $this->get_button_html( $product ),
    );

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

/**
 * Get the product short description.
 *
 * @param \WC_Product $product Product.
 * @return string
 */
protected function get_description_html( $product ) {
    if ( empty( $this->attributes['contentVisibility']['description'] ) ) {
        return '<p class="purple">The short description is empty</p>';
    }
    return '<div class="wc-block-grid__description">' . $product->get_short_description() ? $product->get_short_description() : wc_trim_string( $product->get_description(), 400 ) . '</div>';
}

Приведенный выше код возвращает пустой атрибут, как я могу включить краткое описание для новых блоков WooCommerce?


wordpress php woocommerce gutenberg-blocks
person Kevin D.    schedule 24.02.2020    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Я нашел этот пост, когда искал ответ на этот вопрос, я думаю, вы, возможно, уже его решили, но вот предлагаемое решение для всех, кто сюда придет.

Во-первых, не рекомендуется изменять основные файлы WooCommerce или плагина Blocks, так как если вы обновите плагин, ваши изменения будут перезаписаны. Лучше использовать то, что плагин предоставляет фильтр для визуализированного вывода, называемый woocommerce_blocks_product_grid_item_html.

Поэтому, если вы поместите это в свой functions.php, вы получите краткое описание после названия продукта:

/**
 * Add short description to WooCommerce product blocks
 */
add_filter('woocommerce_blocks_product_grid_item_html', 'add_short_desc_woocommerce_blocks_product_grid_item_html', 10 , 3);
function add_short_desc_woocommerce_blocks_product_grid_item_html($content, $data, $product) {
    $short_description = '<div class="wc-block-grid__product-short-description">' . $product->get_short_description() . '</div>';

    // This will inject the short description after the first link (assumed: the default product link).
    $after_link_pos = strpos($content, "</a>");
    $before = substr($content, 0, $after_link_pos + 4);
    $after = substr($content, $after_link_pos + 4);

    $content = $before . $short_description . $after;

    return $content;
}
person Pierre    schedule 04.07.2020
comment
Что ж, это было бы большим улучшением, где вы нашли документацию по добавлению фильтров в блоки woocommerce? Похоже, обычные петлевые фильтры не работают ... - person Kevin D.; 07.07.2020
comment
В строке 336 упомянутого вами файла я увидел, что они использовали apply_filters ('woocommerce_blocks_product_grid_item_html', ..., $ data, $ products) при возврате содержимого из render_product (), поэтому я просто подключился к этому фильтру. - person Pierre; 08.07.2020

arrow_upward
0
arrow_downward

Это очень интересно, я пробовал это на своем сайте, и это работает, но мое первое - после изображения, которое также является ссылкой.

Итак, для меня код от @Pierre закончился следующим образом:

Image
Description
Title

У кого-нибудь есть предложения о том, как его выводить

Image
Title
Description

(Даже если изображения связаны со страницей продукта)

?

person Gomle    schedule 17.06.2021