Технология акций на Woocommerce

В одном из постов я анализировал плагины для создания массовых скидок (акций). В процессе этого мною был выработан довольно универсальный алгоритм создания акций.

Переделка плагина Woo Product Category Discount

Woo Product Category Discount — плагин массово редактирующий акционную цену у категорий товаров. Я изменил этот плагин, теперь он применяет скидки относительно меток товаров (product_tag).

Я заменил все Category, category, cat на Tag, tag соответственно. Изменения делал в файлах cd-admin.php и в скрипте tag-discount.js (название скрипта также изменено). Скачать измененный плагин.

Оформление акции

Теперь оформляем акцию соответствующим образом, добавляя название, описание, изображение метки. Изображение метки заводим с помощью плагина taxonomy term image master.

Выводим изображение с акцией (и ссылкой на акцию) в карточке товара:

// Выводим параметры метки товара function tag_actions_woocommerce() { global $post; echo '<div class="actions">'; $actions_id = wp_get_object_terms($post->ID, 'product_tag'); foreach ($actions_id as $action_id) : if ( $action_id->term_image ): echo '<a href="' .get_tag_link($action_id->term_id). '">'; echo wp_get_attachment_image( $action_id->term_image, 'full' ); echo '</a>'; endif; endforeach; echo '</div>'; } add_action( 'woocommerce_single_product_summary', 'tag_actions_woocommerce', 15 );

Выводим изображение акции в архивах товаров

function woocommerce_tag_actions_in_archive() { global $post; echo '<div class="actions">'; $actions_id = wp_get_object_terms($post->ID, 'product_tag'); foreach ($actions_id as $action_id) : if ( $action_id->term_image ): echo wp_get_attachment_image( $action_id->term_image, 'full' ); endif; endforeach; echo '</div>'; } add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_tag_actions_in_archive', 8 );

CSS для акционного изображения в архиве

/* Оформление акций */
.products .product .actions {position: absolute; top: 50px; right: 5px;}
.products .product .actions img {max-width: 50px;}

В зависимости от верстки сайта — можно задать 2 изображения акции: маленького размера для архивов и большое для карточки и для вывода на странице акции. Для этого можем задействовать дополнительное изображение таксономии.

Альтернативный способ ввода

Можно вводить метку альтернативным способом с помощью данного решения. Но в этом случае придется прописывать скрипт и стиль каждой метки по отдельности.

Добавления к скрипту и стили:

$('.products .product_tag-diskont a > .label, .product_tag-diskont #product-gallery > .label').prepend('<span class="ondis">ДИСКОНТ</span>');

.products .product .label span.ondis, 
#product-content .label span.ondis {background-color: #FF5722; width: 80px;}

.products .product .label span.ondis:before,
#product-content .label span.ondis:before {border-top-color: #e23802;}

Страница акции

Страница акции выглядит как стандартный шаблон термина таксономии. Выводим вверху изображение и описание акции. Ниже динамически будут выводиться товары участвующие в акции (у которых присвоена данная метка).

Также нужно оформить страницу со всеми акциями. Для этого нужно создать шаблон с выводом терминов таксономии product_tag (меток товара).

Проверка есть ли акции (скидки)

С помощью функции:

function woo_have_onsale_products() {
	global $woocommerce;
	// Get products on sale
	$product_ids_on_sale = array_filter( wc_get_product_ids_on_sale() );
	if( !empty( $product_ids_on_sale ) ) {
		return true;
	} else {
		return false;
	}
}

// Example:
if( woo_have_onsale_products() ) {
	echo 'have onsale products';
} else {
	echo 'no onsale product';
}

Без функции, напрямую:

<?php global $woocommerce;

$product_ids_on_sale = array_filter( wc_get_product_ids_on_sale() );

if( !empty( $product_ids_on_sale ) ) {
  
 echo '<h2>Акции</h2>';
		
}  ?>

Вывод текста для товара с меткой

Еще один альтернативный простой способ вывода текста для товара с меткой, в шаблоне товара

add_filter( 'woocommerce_stock_html', 'filter_woocommerce_stock_html', 10, 3 ); 
function filter_woocommerce_stock_html( $availability_html, $availability_availability, $variation ) { 
    global $product;
    if ( has_term( '<strong>preorder</strong>', 'product_tag', $product->ID ) ) :
        // Define here your text to replace
        $availability_html = __( 'Say something here', 'woocommerce' );
    endif;

    return $availability_html; 
};

preorder — наименование необходимой метки

Краткое описание для метки

Создаем поле краткое описание (строка) для метки товара:

// Создание метаполя краткое описание метки товара
function pippin_taxonomy_add_new_meta_field() {
	?>
	<div class="form-field">
		<label for="term_meta[custom_term_meta]"><?php _e( 'Краткое описание метки', 'pippin' ); ?></label>
		<input type="text" name="term_meta[custom_term_meta]" id="term_meta[custom_term_meta]" value="">
		<p class="description"><?php _e( 'Введите краткое описание метки','pippin' ); ?></p>
	</div>
	<?php
}
add_action( 'product_tag_add_form_fields', 'pippin_taxonomy_add_new_meta_field', 10, 2 );


// Редактирование мета поля
function pippin_taxonomy_edit_meta_field($term) {

	$t_id = $term->term_id; // put the term ID into a variable

	$term_meta = get_option( "taxonomy_$t_id" ); //retrieve the existing value(s) for this meta field. This returns an array 
	print_r ($t_id); ?>
	<tr class="form-field">
	<th scope="row" valign="top"><label for="term_meta[custom_term_meta]"><?php _e( 'Краткое описание метки', 'pippin' ); ?></label></th>
	<td>
	<input type="text" name="term_meta[custom_term_meta]" id="term_meta[custom_term_meta]" value="<?php echo esc_attr( $term_meta['custom_term_meta'] ) ? esc_attr( $term_meta['custom_term_meta'] ) : ''; ?>">
	<p class="description"><?php _e( 'Введите краткое описание метки','pippin' ); ?></p>
	</td>
	</tr>
	<?php
}
add_action( 'product_tag_edit_form_fields', 'pippin_taxonomy_edit_meta_field', 10, 2 );


// Сохранение метаполя
function save_taxonomy_custom_meta( $term_id ) {
	if ( isset( $_POST['term_meta'] ) ) {
		$t_id = $term_id;
		$term_meta = get_option( "taxonomy_$t_id" );
		$cat_keys = array_keys( $_POST['term_meta'] );
		foreach ( $cat_keys as $key ) {
			if ( isset ( $_POST['term_meta'][$key] ) ) { $term_meta[$key] = $_POST['term_meta'][$key]; }
		}
		update_option( "taxonomy_$t_id", $term_meta ); // Save the option array
	}
}
add_action( 'edited_product_tag', 'save_taxonomy_custom_meta', 10, 2 );
add_action( 'create_product_tag', 'save_taxonomy_custom_meta', 10, 2 );

Какой-то замысловатый способ хранения этого поля в базе данных — не смог найти соответствующую таблицу.

Вывести значение поля в карточке и категории:

// Выводим параметры метки товара (краткое описание)
function tag_action_short_woocommerce() {
	global $product;
	echo '<div class="action-text">';
		$actions_id = wp_get_object_terms($product->get_id(), 'product_tag');
		foreach ($actions_id as $action_id) :
			$term_meta = get_option( "taxonomy_$action_id->term_id" );
			echo $term_meta['custom_term_meta'];
		endforeach;
	echo '</div>';
}
add_action( 'woocommerce_single_product_summary', 'tag_action_short_woocommerce', 15 );
add_action( 'woocommerce_shop_loop_item_title', 'tag_action_short_woocommerce', 12 );

Общий лэйбл для разных меток

Если в магазине есть акционные (временные) товары, а все метки являются акциями и меняются в зависимости от периода, то для товаров с меткой можно повесить общий лэйбл LIMITED EDITION.

т.к. у товаров выводиться класс метки такого вида product_tag+слаг метки товара, то придется отлавливать этот класс jQuery.

Нашел оригинальное решение — фильтр JAMES PADOLSEY.

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

Теперь можно заменять переменные части селекторов на символ .*

Причем данный символ включает в себя любое количество знаков.

Таким образом, можем в систему лэйблов вывести новый лэйбл:

$(document).ready(function() {
	$('li:regex(class, product_tag-.*) a > .label, div:regex(class, product_tag-.*) #product-gallery > .label').prepend('<span class="onnew">Limited Edition</span>');
});

Тэги: woocommerce