Вопрос или проблема
У меня есть тема с WooCommerce. У некоторых продуктов есть более одной фотографии, и когда пользователь наводит курсор на такие продукты, фотографии (из галереи фотографий) переключаются.
Я хочу сделать изображение продукта кликабельным. Для этого я использовал следующий код и добавил его в functions.php
if ( ! function_exists( 'woocommerce_get_product_thumbnail' ) ) {
/**
* Получить миниатюру продукта или изображение-заглушку, если она не задана.
*
* @subpackage Loop
* @param string $size (по умолчанию: 'shop_catalog')
* @param int $deprecated1 Устарело с WooCommerce 2.0 (по умолчанию: 0)
* @param int $deprecated2 Устарело с WooCommerce 2.0 (по умолчанию: 0)
* @return string
*/
function woocommerce_get_product_thumbnail( $size="shop_catalog", $deprecated1 = 0, $deprecated2 = 0 ) {
global $post;
if ( has_post_thumbnail() ) {
return '<a href="' . get_permalink( $post->ID ) . '">' . get_the_post_thumbnail( $post->ID, $size ) . '</a>';
} elseif ( wc_placeholder_img_src() ) {
return wc_placeholder_img( $size );
}
}
}
}
Этот код работает для продуктов с одним изображением, но для изображений с переключением он не работает.
Вот моя разметка для изображений с переключением.
<div class="product-thumb">
<div class="product-flash-wrap"></div>
<div class="product-thumb-primary">
<a href="https://wordpress.stackexchange.com/#someURI">
<img width="300" height="300" src="https://wordpress.stackexchange.com/#someURI" class="attachment-shop_catalog size-shop_catalog wp-post-image" >
</a>
</div>
<div class="product-thumb-secondary">
<img width="300" height="300" src="https://wordpress.stackexchange.com/#someURI" class="attachment-shop_catalog size-shop_catalog"> </div>
<div class="wccpf-fields-container"></div>
</div>
Как видите, только первое изображение обернуто в ссылку.
Поэтому у меня вопрос. Как сделать миниатюры продуктов с переключением кликабельными?
Любая помощь будет очень полезна.
Вы можете использовать Javascript, чтобы сработал клик. Например:
$('.product-thumb').click(function(event) {
var product_link = $(this).find('product-thumb-primary a');
// Не срабатывает клик на существующей ссылке
if(!event.target.href && product_link.length) {
document.location.href = product_link.attr('href');
}
});
Не протестировано, но это базовая логика.
Ответ или решение
Для реализации кликабельного изображения продукта с эффектом замены изображений при наведении мыши в WooCommerce, можно внести изменения в HTML-разметку и добавить немного JavaScript для достижения желаемого поведения.
На основе вашего запроса и предоставленного кода, задача состоит в том, чтобы сделать так, чтобы вся область миниатюры продукта была кликабельной, включая вторичное изображение, которое проявляется при наведении.
Вот шаги, которые помогут вам это сделать:
Шаг 1: Изменение HTML-разметки
Ваш текущий HTML использует <a> только для первичного изображения. Чтобы сделать весь элемент <div class="product-thumb"> кликабельным, мы переместим тег <a> так, чтобы он обертывал обе миниатюры. Измените вашу разметку следующим образом:
<div class="product-thumb">
<a href="https://wordpress.stackexchange.com/#someURI">
<div class="product-flash-wrap"></div>
<div class="product-thumb-primary">
<img width="300" height="300" src="https://wordpress.stackexchange.com/#someURI" class="attachment-shop_catalog size-shop_catalog wp-post-image" >
</div>
<div class="product-thumb-secondary">
<img width="300" height="300" src="https://wordpress.stackexchange.com/#someURI" class="attachment-shop_catalog size-shop_catalog">
</div>
</a>
<div class="wccpf-fields-container"></div>
</div>Теперь весь блок product-thumb стал кликабельным благодаря обёртке <a>.
Шаг 2: Добавление JavaScript для замены изображений
Следующий шаг – добавить JavaScript для обработки эффекта наведения, чтобы когда пользователь наводит мышь на миниатюру продукта, вторичное изображение появлялось вместо первичного.
Вы можете использовать следующий код JavaScript:
jQuery(document).ready(function($) {
$(".product-thumb").hover(
function() {
var secondaryImage = $(this).find(".product-thumb-secondary img").attr("src");
$(this).find(".product-thumb-primary img").attr("src", secondaryImage);
},
function() {
var primaryImage = $(this).find(".product-thumb-primary img").data("primary-src"); // Предположим, что мы сохранили исходный src в data-атрибуте
$(this).find(".product-thumb-primary img").attr("src", primaryImage);
}
).each(function() {
var primaryImageSrc = $(this).find(".product-thumb-primary img").attr("src");
$(this).find(".product-thumb-primary img").data("primary-src", primaryImageSrc); // Сохраняем исходный src
});
});Шаг 3: Добавление стилей CSS (при необходимости)
Если необходимо, добавьте стили CSS для обеспечения плавного эффекта при замене изображений. Например:
.product-thumb img {
transition: opacity 0.3s ease-in-out;
}Заключение
Теперь у вас есть решение, которое делает миниатюры продуктов кликабельными, позволяя пользователю легко переходить на страницу продукта, а также предоставляя эффект замены изображений при наведении. Убедитесь, что вы протестировали код на вашем сайте, чтобы убедиться в правильности работы. Если у вас возникнут дополнительные вопросы, не стесняйтесь спрашивать!