В этой статье мы рассмотрим уникальный способ, позволяющий вашим клиентам легко использовать продукт или группу продуктов, за которые они, возможно, уже заплатили, возможно, на конференции или другом подобном мероприятии.
Давайте поговорим немного больше о концепции. Скажем, вы владелец магазина с революционно новым продуктом и представляете его тысячам людей на конференции. В конце вашего выступления клиенты, желающие попробовать ваш продукт, могут сделать это и заплатить за него заранее. Возможно, вы даже соблазнили их, снизив цену до первых 500 клиентов.
В этом сценарии в WooCommerce вы создадите 500 купонов со скидкой в 100%. Вы можете использовать плагин Smart Coupons для генерации этих 500 купонов, чтобы вам не пришлось создавать их вручную. Каждый покупатель, внесший предоплату, получает код купона, но, насколько ему известно, это просто код для погашения продуктов.
Создание кодов купонов
Если вы достаточно серьезно относитесь к своему предложению, то постарайтесь сделать так, чтобы коды купонов выглядели случайными, и пользователям было трудно, если вообще возможно, ввести действительный код купона. Убедитесь, что вы выбрали, какие товары привязаны к этому купону, чтобы мы могли добавить их в корзину автоматически позже. Взгляните на один из купонов, которые я создал, обратите пристальное внимание на настройки:
Создание страницы продуктов WooCommerce
Вы можете легко сделать копию вашего page.php и превратить его в шаблон страницы, чтобы вы могли использовать его для страницы, которую мы собираемся отправить этим клиентам, чтобы они могли использовать свои продукты. Назовите это что-то вроде page-coupon-redeem.php
Следующая разметка — это то, что мы будем использовать для форматирования формы, отображаемой для клиента на этой странице. Это просто форма с двумя полями, одно для ввода их кода и кнопка фактической отправки. Мы стараемся сделать это как можно более простым для клиента; поэтому мы собираемся делать все через Ajax, чтобы страницы загружались как можно меньше.
<div class="redeem-coupon">
<form id="ajax-coupon-redeem">
<p>
<input type="text" name="coupon" id="coupon"/>
<input type="submit" name="redeem-coupon" value="Redeem Offer" />
</p>
<p class="result"></p>
</form><!-- #ajax-coupon-redeem -->
</div><!-- .redeem-coupon -->Когда пользователь вводит код и нажимает кнопку отправки, значение, введенное в текстовое поле, отправляется на проверку, и если оно окажется действительным, то пользователь будет перенаправлен на страницу «Корзина», и продукты уже будут там. оформить заказ по цене 0 долларов США. Если по какой-либо причине код неверен, мы уведомляем пользователя о том, что что-то не так и введенный код недействителен.
Создание функциональности Ajax
Если вы никогда не выполняли Ajax в WordPress, пожалуйста, обратитесь к моей предыдущей статье « Добавление Ajax в ваш плагин WordPress», чтобы получить краткое представление о том, как Ajax выполняется в WordPress.
Давайте начнем создавать функциональность Ajax, необходимую для того, чтобы наша «Страница ваших продуктов» функционировала должным образом. Весь следующий код помещается в ваш файл functions.php вашей темы.
Зарегистрировать наш Ajax Handler
Сначала зарегистрируйте наш обработчик вызовов Ajax, подключившись к действиям wp_ajax_$actionwp_ajax_nopriv_$action
add_action( 'wp_ajax_spyr_coupon_redeem_handler', 'spyr_coupon_redeem_handler' );
add_action( 'wp_ajax_nopriv_spyr_coupon_redeem_handler', 'spyr_coupon_redeem_handler' );
Обратите внимание, что одна и та же функция обрабатывает вызов Ajax для обоих клиентов, независимо от того, вошли они в систему или нет.
Далее мы собираемся начать строить нашу логику для учета следующих возможных сценариев:
- Текстовое поле кода пустое
- Код недействителен, это означает, что код купона недействителен
- Успешно представить действующий купон
Обработка купонной логики
Теперь, когда мы зарегистрировали наши действия и знаем, что делать, нам нужно написать реальную функцию, которая будет обрабатывать наши возможные сценарии.
<?php
function spyr_coupon_redeem_handler() {
// Get the value of the coupon code
$code = $_REQUEST['coupon_code'];
// Check coupon code to make sure is not empty
if( empty( $code ) || !isset( $code ) ) {
// Build our response
$response = array(
'result' => 'error',
'message' => 'Code text field can not be empty.'
);
header( 'Content-Type: application/json' );
echo json_encode( $response );
// Always exit when doing ajax
exit();
}
// Create an instance of WC_Coupon with our code
$coupon = new WC_Coupon( $code );
// Check coupon to make determine if its valid or not
if( ! $coupon->id && ! isset( $coupon->id ) ) {
// Build our response
$response = array(
'result' => 'error',
'message' => 'Invalid code entered. Please try again.'
);
header( 'Content-Type: application/json' );
echo json_encode( $response );
// Always exit when doing ajax
exit();
} else {
// Coupon must be valid so we must
// populate the cart with the attached products
foreach( $coupon->product_ids as $prod_id ) {
WC()->cart->add_to_cart( $prod_id );
}
// Build our response
$response = array(
'result' => 'success',
'href' => WC()->cart->get_cart_url()
);
header( 'Content-Type: application/json' );
echo json_encode( $response );
// Always exit when doing ajax
exit();
}
}
Обработка отправки формы с помощью jQuery
Теперь осталось только создать код jQuery для отправки кода купона в WordPress для обработки и обработки возвращаемых данных JSON.
jQuery( document ).ready( function() {
jQuery( '#ajax-coupon-redeem input[type="submit"]').click( function( ev ) {
// Get the coupon code
var code = jQuery( 'input#coupon').val();
// We are going to send this for processing
data = {
action: 'spyr_coupon_redeem_handler',
coupon_code: code
}
// Send it over to WordPress.
jQuery.post( woocommerce_params.ajax_url, data, function( returned_data ) {
if( returned_data.result == 'error' ) {
jQuery( 'p.result' ).html( returned_data.message );
} else {
// Hijack the browser and redirect user to cart page
window.location.href = returned_data.href;
}
})
// Prevent the form from submitting
ev.preventDefault();
});
});
Конечный результат
Стиль формы полностью зависит от вас. Я использовал стандартную тему Twenty Twelve и фиктивные данные WooCommerce, и с некоторыми правилами CSS это то, что я получил ниже.
Сообщение об ошибке пустого поля
Сообщение об ошибке неверного кода
Действительный код / корзина заполнена
Вывод
Несмотря на то, что этот сценарий может не подходить для каждого магазина, WooCommerce предлагает нам набор инструментов через их API, чтобы мы могли выполнить практически все, о чем мы думаем. Добавьте WordPress к смеси, и вы получите полное решение для электронной коммерции, которое не имеет себе равных.
Я надеюсь, что в этой статье я предоставил некоторое представление о том, как работают купоны в WooCommerce, и вам будет удобнее использовать их в своем следующем проекте.