menex.ru
← Все статьи

Акция, при заказе двух и более товаров можно выбрать бесплатный подарок в Woocommerce

15.12.2023 • Теги: #hook #jQuery #Oxygen #PHP #woocommerce #wordpress #Хук

На одном сайте по доставке еды, нужно было провести акцию. Где при заказе двух блюд, можно было выбрать в подарок одно бесплатное. Реализация должна быть на сайте, чтобы покупатель выбрав два определенных блюда, мог сам выбрать подарок и чтобы все это попало в корзину и при оформлении заказа продавец видел подарок. Чтобы меньше тарантить времени оператору на выяснение у клиента какой подарок он хочет.

Сайт по доставке сделан на Wordpress + Woocommerce. Поэтому исходя из этого, весь механизм акции был реализован в рамках этой связки. Времени было мало на реализацию, поэтому поступили просто, на сколько это возможно, применив различные «костыли» и ухищрения.

Реализовали это в сниппете для удобства и дальнейшего использования. Из дополнительных «костылей» было лишь заведение новых блюд (клонов) с нулевой ценой и отличными артикулами от оригинала. А также размещением их в других категориях, чтобы не выводить их на основной странице каталога.

И так механизм акции

При заказе двух определенных товаров, проявляется сообщение о возможности выбрать бесплатный подарок. Выбрав подарок, он попадает в корзину с нулевой ценой. Заверщив оформление заказа, оператор получает заказ в котором есть основные товары и подарочный товар.

Реализация акции на сайте

Сайт сделан на wordpress + woocommerce, а также Oxygen.

  1. Создали отдельную страницу на которой вывели через шорткод определённые товары которые необходимо заказать в количестве 2 шт.
[products category="tovar-category"]
  1. На этой же странице добавили код:
<div class="basket-btn__counter_xxx">

</div>

К этому блоку мы привязываем Аякс событие которое срабатывает при добавлении товара в корзину.

  1. В сниппетах пишем код который собственно при добавлении очередного товара в корзину проверяет лежат ли товары с определёнными ID в количестве 2 шт. которые должны быть заказаны для возможности выбрать бесплатный подарок.

Сам код

Выкладываю код как есть, чтобы взять при необходимости. По комментариям в коде можно посмотреть что, за что отвечает.

// Код для акции при заказе 2 товаров, 3-е - бесплатно
add_filter('woocommerce_add_to_cart_fragments', 'header_add_to_cart_fragments', 25);

function header_add_to_cart_fragments( $fragments ) {
    ob_start();

  ?>
<div class="basket-btn__counter_xxx">
  <?php 
global $woocommerce;

/* Массив из ID товаров, которые необходимо заказать n количество */  
$array_ids_sravnit = array(6098, 6118, 6122, 6126, 6128, 6130, 6132, 6134, 6136, 6138, 6140, 6142, 6144, 6146, 12094, 12098, 33482, 155916, 231001, 231003, 409070, 409073, 409076, 409084, 409088, 409092, 409100, 409108, 409112, 409116, 409120, 409128, 409163, 409166, 409170, 471081, 471083, 471085, 485417, 485419, 485420, 493382); 
/* ID вариаций первого варианта, 30 см (малый вес) */ 
$array_ids_variant_one_sravnit = array(34084, 34175, 34178, 34180, 34182, 34184, 34186, 34189, 34192, 34194, 34196, 34198, 34202, 34231, 409071, 409074, 409077, 409086, 409090, 409094, 409102, 409110, 409114, 409118, 409122, 409130, 409164, 409168, 409171);
/* ID вариаций первого варианта, 40 см (большой вес) */
$array_ids_variant_two_sravnit = array(34085, 34176, 34179, 34181, 34183, 34185, 34187, 34190, 34193, 34195, 34197, 34199, 34203, 34232, 409072, 409075, 409078, 409087, 409091, 409095, 409103, 409111, 409115, 409119, 409123, 409131, 409165, 409169, 409172);
/* ID товаров подарочных с нулевой ценой */
$array_ids_podarok = array(565671, 565672, 565673, 565674, 565675, 565676, 565677, 565678, 565679, 565680, 565681, 565682, 565683, 565684, 565685, 565686, 565687, 565688, 565689, 565690, 565691, 565692, 565693, 565694, 565695, 565696, 565697, 565698, 565699, 565700, 565701, 565702, 565703, 565704, 565705, 565706, 565707, 565708, 565709, 565710, 565711, 565712, 565713, 565714, 565715, 565716, 565717, 565718, 565719, 565720, 565721, 565722, 565723, 565724, 565725, 565726, 565727, 565728, 565729, 565730, 565731, 565732, 565733, 565734, 565735, 565736, 565737, 565738, 565739, 565740, 565741);



/* первоночальный счетчик товаров которые подарочные  */  
$count_tovar_podarok_zakaz = 0;   
/* первоночальный счетчик товаров в заказе из верхнего списка  */  
$count_tovar_zakaz = 0; 
/* первоночальный счетчик товаров в заказе первой вариации  */  
$count_tovar_variant_one_zakaz = 0;
/* первоночальный счетчик товаров в заказе второй вариации  */  
$count_tovar_variant_two_zakaz = 0;  

foreach ($woocommerce->cart->get_cart() as $item):
        /*print_r($item);*/

        /* первым делом проверяем есть ли ID подарка в корзине*/
        if (in_array($item['product_id'], $array_ids_podarok)) {
            $count_tovar_podarok_zakaz = $count_tovar_podarok_zakaz + $item['quantity'];
        }

        /* проверка, сколько заказано товаров всего из общего списка ID */
        if (in_array($item['product_id'], $array_ids_sravnit)) {
            $count_tovar_zakaz = $count_tovar_zakaz + $item['quantity'];
        }
        /* проверка, сколько заказано товаров из списка ID первой вариации */
        if (in_array($item['variation_id'], $array_ids_variant_one_sravnit)) {
            $count_tovar_variant_one_zakaz = $count_tovar_variant_one_zakaz + $item['quantity'];
        }
        /* проверка, сколько заказано товаров из списка ID второй вариации */
        if (in_array($item['variation_id'], $array_ids_variant_two_sravnit)) {
            $count_tovar_variant_two_zakaz = $count_tovar_variant_two_zakaz + $item['quantity'];
        }
endforeach;
/* тестирование вывод информации на страницу */
/*echo 'всего заказано пицц: '.$count_tovar_zakaz.'<br>';
echo 'всего заказано пицц 30 см: '.$count_tovar_variant_one_zakaz.'<br>';
echo 'всего заказано пицц 40 см: '.$count_tovar_variant_two_zakaz.'<br>';
echo 'подарок: '.$count_tovar_podarok_zakaz.'<br>'; */
/* END тестирование вывод информации на страницу */


    if ($count_tovar_zakaz >= 2 && $count_tovar_podarok_zakaz == 0) {
        if ($count_tovar_variant_two_zakaz >= 2 && $count_tovar_podarok_zakaz == 0) {
            echo '<div class="message_podarok"><div class="message_podarok-text"><h2>Вы можете выбрать в&nbsp;подарок любую пиццу</h2><p><p><img id="image-16-565071" alt="" src="/wp-content/uploads/down-arrow.svg" class="ct-image animation-jamp lazyloaded"></p>' . do_shortcode( '[products category="podarok-picca-italyanskaya-40-sm"]' ) . do_shortcode( '[products category="podarok-picca-amerikanskaya-40-sm"]' ) .'</p><span class="close">x</a></div></div>';
            echo '<div class="message_podarok_popup"><div class="message_podarok-text"><center><h4>Вы заказали 2 пиццы.<br>Вам доступна<br><span>третья пицца<br>в подарок</span></h4><span class="but_ok">Выбрать пиццу</span></center><span class="close">x</a></div></div>';
            //echo '<script type="text/javascript">jQuery(document).ready(function() {  var cookieIndicator = jQuery(".message_podarok_popup"); cookieIndicator.stop().animate({ opacity: "1", bottom: "30px" }, 2000); })</script>';
            echo '<script type="text/javascript">jQuery(document).ready(function() {    jQuery(".message_podarok_popup").addClass("animation"); })</script>';
        }
        else {
          echo '<div class="message_podarok"><div class="message_podarok-text"><h2>Вы можете выбрать в&nbsp;подарок пиццу&nbsp;30&nbsp;см</h2><p><p><img id="image-16-565071" alt="" src="/wp-content/uploads/down-arrow.svg" class="ct-image animation-jamp lazyloaded"></p>' . do_shortcode( '[products category="podarok-picca-italyanskaya-30-sm"]' ) . do_shortcode( '[products category="podarok-picca-amerikanskaya-30-sm"]' ) . '</p><span class="close">x</a></div></div>';
          echo '<div class="message_podarok_popup"><div class="message_podarok-text"><center><h4>Вы заказали 2 пиццы.<br>Вам доступна<br><span>третья пицца<br>в подарок</span></h4><span class="but_ok">Выбрать пиццу</span></center><span class="close">x</a></div></div>';
          //echo '<script type="text/javascript">jQuery(document).ready(function() {    var cookieIndicator = jQuery(".message_podarok_popup"); cookieIndicator.stop().animate({ opacity: "1", bottom: "30px" }, 2000); })</script>';
          echo '<script type="text/javascript">jQuery(document).ready(function() {  jQuery(".message_podarok_popup").addClass("animation"); })</script>';
        }

    }

  ?>

<script type="text/javascript">
            //Закрыть окно с сообщением
            jQuery(".message_podarok .close").click(function () {
                jQuery(".message_podarok").addClass("opacitydisplay");
                /*jQuery(".message_podarok_popup").addClass("opacitydisplay");*/
                setTimeout(function() {
                    jQuery('.message_podarok').addClass('nodisplay');
                    /*jQuery('.message_podarok_popup').addClass('nodisplay');*/
                }, 200 ); // 200 - задержка в мс до срабатывания
            });

            jQuery(".message_podarok_popup .close").click(function () {
                jQuery(".message_podarok_popup").addClass("opacitydisplay");
                jQuery(".message_podarok").addClass("opacitydisplay");
                setTimeout(function() {
                    jQuery('.message_podarok_popup').addClass('nodisplay');
                    jQuery('.message_podarok').addClass('nodisplay');
                }, 200 ); // 200 - задержка в мс до срабатывания
            });

            jQuery(".message_podarok_popup .but_ok").click(function () {
                /*jQuery(".message_podarok_popup").addClass("opacitydisplay");*/
                jQuery(".message_podarok").removeClass("opacitydisplay");
                jQuery('.message_podarok').removeClass('nodisplay');
                jQuery(".message_podarok").addClass("on");
                setTimeout(function() {
                    /*jQuery('.message_podarok_popup').addClass('nodisplay');*/
                    jQuery('.message_podarok').addClass('anime');
                }, 200 ); // 200 - задержка в мс до срабатывания
            });

            jQuery(".message_podarok .woocommerce ul.products li.product a.button").click(function () {
                jQuery(".message_podarok").addClass("opacitydisplay");
                jQuery(".message_podarok_popup").addClass("opacitydisplay");
                setTimeout(function() {
                    jQuery('.message_podarok').addClass('nodisplay');
                    jQuery('.message_podarok_popup').addClass('nodisplay');
                }, 200 ); // 200 - задержка в мс до срабатывания
            });



            </script>  
</div>
<?php

    $fragments['.basket-btn__counter_xxx'] = ob_get_clean();
    return $fragments;  
}



add_action( 'wp_footer', function () { 

?>

<style>
.message_podarok {
    position: fixed;
    top: 0;
    left: -3000px;
    right: 3000px;
    bottom:0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    z-index: 10000000000;
    display:none;
    opacity:0;
    transition: all 0.6s cubic-bezier(.43,1.55,.37,.87);
}
.message_podarok.on {
    display:block;
}
.message_podarok.on.anime {
  opacity:1;
  left: 0;
  right: 0;
}
.message_podarok_popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom:-300px;
    width: 100%;
    z-index: 1000000000;
    opacity:0;
    transition: all 0.3s cubic-bezier(.43,1.55,.37,.87);
}
  .message_podarok_popup.animation {
    opacity: 1;
    bottom: 30px;
}
.message_podarok .message_podarok-text {
    background: #fff;
    padding: 40px;
    box-shadow: 0 0 40px 0px #ccc;
    width: fit-content;
    margin: 0 auto;
    border-radius: 5px;
    font-size: 16px;
    position: relative;
}
.message_podarok .message_podarok-text h2 {
    font-size: 46px;
    text-align: center;
    width:100%;
    color: #4B1417;
}
@media only screen and (max-width: 768px) {
    .message_podarok .message_podarok-text h2 {
        font-size: 28px;
  }
}
.message_podarok .message_podarok-text img.ct-image {
    display: block;   
}
.message_podarok_popup .message_podarok-text {
    background: #FFFDF8;
    padding: 15px 8px;
    box-shadow: 0 0 40px 0px #ccc;
    width: fit-content;
    min-width: 253px;
    margin: 0 auto;
    border-radius: 12px;
    font-size: 16px;
    position: relative;
}
.message_podarok_popup .message_podarok-text h4 {
    color: #4B1417;
    font-size: 15px;   
    line-height: 130%
}
.message_podarok_popup .message_podarok-text h4 span {
    font-size: 28px;
    line-height: 100%;
    display:block;
    margin:3px 0 0 0;
}
.message_podarok_popup .but_ok {
    display: block;
    border-radius: 7px;
    background: #FDC701;
    padding: 10px;
    margin:9px 0 0 0;
    color: #4B1417;
    text-align: center;
    font-family: Roboto Slab;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 101.5%;
    width: fit-content;
    cursor: pointer;
}
.message_podarok .close,
.message_podarok_popup .close {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    top: 5px;
    right: 5px;
    cursor: pointer;
}
.message_podarok .close {
  top: 20px;
  right: 20px;
}
.message_podarok .close:before, 
.message_podarok .close:after,
.message_podarok_popup .close:before, 
.message_podarok_popup .close:after {
    position: absolute;
    left: 50%;
    top: 15%;
    content: ' ';
    height: 20px;
    width: 1px;
    background-color: #b4b905;
}
.message_podarok .close:before, 
.message_podarok_popup .close:before {
    transform: rotate(45deg);
}
.message_podarok .close:after,
.message_podarok_popup .close:after {
    transform: rotate(-45deg);
}
.message_podarok.opacitydisplay,
.message_podarok_popup.opacitydisplay {
    opacity: 0;
    transition: opacity 0.1s linear;*/
}
.message_podarok.nodisplay,
.message_podarok_popup.nodisplay {
    display:none;
}
    </style>



    <?php }, 1000);

Благодарность

Большое спасибо сайту misha.agency. Именно на нем я нашел реализацию для соей задачи.