Добавление атрибута к изображениям товаров в WooCommerce

26 июл. 2020 г., 03:10:14
Просмотры: 15.7K
Голосов: 2

Я хочу изменить изображения товаров и миниатюры в WooCommerce.

Моя цель - добавить атрибут к тегу <a>. Я хочу добавить: data-lightbox="Gallery", но не понимаю, как это сделать. Шаблонные файлы кажутся очевидным местом, но код не содержит структуры с тегом anchor, которую я ожидал:

woocommerce\single-product\product-image.php

defined( 'ABSPATH' ) || exit;

// Примечание: `wc_get_gallery_image_html` был добавлен в WC 3.3.2 и не существовал ранее. Эта проверка защищает от использования переопределений темы в старых версиях WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
    return;
}

global $product;

$columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes   = apply_filters(
    'woocommerce_single_product_image_gallery_classes',
    array(
        'woocommerce-product-gallery',
        'woocommerce-product-gallery--' . ( $product->get_image_id() ? 'with-images' : 'without-images' ),
        'woocommerce-product-gallery--columns-' . absint( $columns ),
        'images',
    )
);
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
    <figure class="woocommerce-product-gallery__wrapper">
        <?php
        if ( $product->get_image_id() ) {
            $html = wc_get_gallery_image_html( $post_thumbnail_id, true );
        } else {
            $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
            $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Ожидается изображение товара', 'woocommerce' ) );
            $html .= '</div>';
        }

        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

        do_action( 'woocommerce_product_thumbnails' );
        ?>
    </figure>
</div>

и с миниатюрами та же ситуация.

woocommerce\single-product\product-thumbnails.php

defined( 'ABSPATH' ) || exit;

// Примечание: `wc_get_gallery_image_html` был добавлен в WC 3.3.2 и не существовал ранее. Эта проверка защищает от использования переопределений темы в старых версиях WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
    return;
}

global $product;

$attachment_ids = $product->get_gallery_image_ids();

if ( $attachment_ids && $product->get_image_id() ) {
    foreach ( $attachment_ids as $attachment_id ) {
        echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', wc_get_gallery_image_html( $attachment_id ), $attachment_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped
    }
}

Полагаю, мне нужно использовать фильтр, но я раньше этого не делал. Или мне нужно удалить действие для изображения и миниатюр и добавить свою функцию?

remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

function my_plugin_show_product_image() {
// мой кастомный код для изображений, где я могу использовать свои атрибуты, структуру div и т.д.
// я не знаю, какой php-код нужен для отображения изображений
}

add_action( 'woocommerce_product_thumbnails', 'my_plugin_show_product_image', 20 );

function my_plugin_show_product_image() {
// мой кастомный код для изображений, где я могу использовать свои атрибуты, структуру div и т.д.
// я не знаю, какой php-код нужен для отображения изображений
}

add_action( 'woocommerce_before_single_product_summary', 'my_plugin_show_product_image', 10 );

Есть идеи?

0
Все ответы на вопрос 1
0

Коротко:

Мы собираемся переопределить шаблон по умолчанию и изменить функцию, которая вызывается для генерации нашего тега и изображения внутри него. Затем мы создадим эту функцию в нашем functions.php и добавим нужный атрибут к тегу.


  1. скопируйте/вставьте шаблон woocommerce/templates/single-product/product-image.php в вашу директорию: ваша-дочерняя-тема/woocommerce/single-product/product-image.php, чтобы переопределить его функционал
  2. измените $html = wc_get_gallery_image_html( $post_thumbnail_id, true ); на $html = my_custom_img_function( $post_thumbnail_id, true );
  3. скопируйте и вставьте следующий код в ваш functions.php
/**
 * переопределено из https://woocommerce.wp-a2z.org/oik_api/wc_get_gallery_image_html/
 */
function my_custom_img_function($attachment_id, $main_image = false)
{
    $flexslider        = (bool) apply_filters('woocommerce_single_product_flexslider_enabled', get_theme_support('wc-product-gallery-slider'));
    $gallery_thumbnail = wc_get_image_size('gallery_thumbnail');
    $thumbnail_size    = apply_filters('woocommerce_gallery_thumbnail_size', array($gallery_thumbnail['width'], $gallery_thumbnail['height']));
    $image_size        = apply_filters('woocommerce_gallery_image_size', $flexslider || $main_image ? 'woocommerce_single' : $thumbnail_size);
    $full_size         = apply_filters('woocommerce_gallery_full_size', apply_filters('woocommerce_product_thumbnails_large_size', 'full'));
    $thumbnail_src     = wp_get_attachment_image_src($attachment_id, $thumbnail_size);
    $full_src          = wp_get_attachment_image_src($attachment_id, $full_size);
    $alt_text          = trim(wp_strip_all_tags(get_post_meta($attachment_id, '_wp_attachment_image_alt', true)));
    $image             = wp_get_attachment_image(
        $attachment_id,
        $image_size,
        false,
        apply_filters(
            'woocommerce_gallery_image_html_attachment_image_params',
            array(
                'title'                   => _wp_specialchars(get_post_field('post_title', $attachment_id), ENT_QUOTES, 'UTF-8', true),
                'data-caption'            => _wp_specialchars(get_post_field('post_excerpt', $attachment_id), ENT_QUOTES, 'UTF-8', true),
                'data-src'                => esc_url($full_src[0]),
                'data-large_image'        => esc_url($full_src[0]),
                'data-large_image_width'  => esc_attr($full_src[1]),
                'data-large_image_height' => esc_attr($full_src[2]),
                'class'                   => esc_attr($main_image ? 'wp-post-image' : ''),
            ),
            $attachment_id,
            $image_size,
            $main_image
        )
    );

    return '<div data-thumb="' . esc_url( $thumbnail_src[0] ) . '" data-thumb-alt="' . esc_attr( $alt_text ) . '" class="woocommerce-product-gallery__image"><a data-lightbox="Gallery" href="' . esc_url($full_src[0]) . '">' . $image . '</a></div>';
}

Как видите, единственное, что мы добавили к стандартной функции — это нужный вам атрибут в последней строке @ return statement.

29 нояб. 2020 г. 20:44:29