Home Kiến Thức Lập Trình Tạo FlashSale Countdown Trong Theme Flatsome

Tạo FlashSale Countdown Trong Theme Flatsome

11
SHARE

FlashSale Countdown hay còn gọi là chức năng đếm ngược của chương trình khuyến mãi dành cho các website bán hàng. Hôm nay mình sẽ hướng dẫn các bạn cách làm chức năng này trong theme flatsome của wordpress

Trong Flatsome có Custom Hook, khi sử dụng Custom Layout. Chọn element đấy vào vị trí muốn hiển thị countdown. (Nhớ chọn Hook này : flatsome_custom_single_product_1) .

Các bạn chèn đoạn code bên dưới vào file function.php

add_action('flatsome_custom_single_product_1', 'isures_2718_flashsale_countdown');
function isures_2718_flashsale_countdown()
{
    $thepostid = get_the_ID();
    $sale_price_dates_to    = ($date = get_post_meta($thepostid, '_sale_price_dates_to', true)) ? date_i18n('Y-m-d', $date) : '';
    $today = strtotime(date("Y/m/d"));
    $strsale_price_dates_to = strtotime($sale_price_dates_to);
    if (!empty($sale_price_dates_to)) {
 
    ?>
        <?php
        if (!empty($sale_price_dates_to)) {
 
            if ($strsale_price_dates_to >= $today) {
                $date = DateTime::createFromFormat("Y-m-d", $sale_price_dates_to);
                $year_sale = $date->format('Y');
                $month_sale = $date->format('m');
                if ($date->format('d') < 31) {
 
                    $day_sale = $date->format('d') + 1;
                } else {
                    $day_sale = $date->format('d');
                }
                echo '<div class="isures-flashsale">';
                echo '<span class="title"><svg height="21" width="108" class="flash-sale-logo flash-sale-logo--white"><g fill="currentColor" fill-rule="evenodd"><path d="M0 16.195h3.402v-5.233h4.237V8H3.402V5.037h5.112V2.075H0zm29.784 0l-.855-2.962h-4.335l-.836 2.962H20.26l4.723-14.12h3.576l4.724 14.12zM26.791 5.294h-.04s-.31 1.54-.563 2.43l-.797 2.744h2.74l-.777-2.745c-.252-.889-.563-2.43-.563-2.43zm7.017 9.124s1.807 2.014 5.073 2.014c3.13 0 4.898-2.034 4.898-4.384 0-4.463-6.259-4.147-6.259-5.925 0-.79.778-1.106 1.477-1.106 1.672 0 3.071 1.245 3.071 1.245l1.439-2.824s-1.477-1.6-4.47-1.6c-2.76 0-4.918 1.718-4.918 4.325 0 4.345 6.258 4.285 6.258 5.964 0 .85-.758 1.126-1.457 1.126-1.75 0-3.324-1.462-3.324-1.462zm12.303 1.777h3.402v-5.53h5.054v5.53h3.401V2.075h-3.401v5.648h-5.054V2.075h-3.402zm18.64-1.678s1.692 1.915 4.763 1.915c2.877 0 4.548-1.876 4.548-4.107 0-4.483-6.492-3.871-6.492-6.36 0-.987.914-1.678 2.08-1.678 1.73 0 3.052 1.224 3.052 1.224l1.088-2.073s-1.4-1.501-4.12-1.501c-2.644 0-4.627 1.738-4.627 4.068 0 4.305 6.512 3.87 6.512 6.379 0 1.145-.952 1.698-2.002 1.698-1.944 0-3.44-1.48-3.44-1.48zm19.846 1.678l-1.166-3.594h-4.84l-1.166 3.594H74.84L79.7 2.174h2.623l4.86 14.021zM81.04 4.603h-.039s-.31 1.382-.583 2.172l-1.224 3.752h3.615l-1.224-3.752c-.253-.79-.545-2.172-.545-2.172zm7.911 11.592h8.475v-2.192H91.46V2.173H88.95zm10.477 0H108v-2.192h-6.064v-3.772h4.645V8.04h-4.645V4.366h5.753V2.174h-8.26zM14.255.808l6.142.163-3.391 5.698 3.87 1.086-8.028 12.437.642-8.42-3.613-1.025z"></path></g></svg></span>';
                echo do_shortcode('[ux_countdown year="' . $year_sale . '" month="' . $month_sale . '" day="' . $day_sale . '" time="00:00" t_week="Tuần" t_day="Ngày" t_hour="Giờ" t_min="Phút" t_sec="Giây" t_week_p="Tuần" t_day_p="Ngày" t_hour_p="Giờ" t_min_p="Phút" t_sec_p="Giây"]');
                echo '</div>';
            }
        } ?>
 
<?php
    }
}

Trường hợp không dùng Custom layout hãy tham khảo các Hook tại trang single product, và thay thế Hook flatsome_custom_single_product_1 ở code trên.

Code trên mình tận dụng Shortcode ux_countdown của Flatsome cho tiện. Bây giờ làm đẹp code trên với Css.

.single-product .isures-flashsale{
    background-image: url(https://allin.isures.com/wp-content/themes/supper-market/images/bg-flashsale.jpg);
}
.single-product .isures-flashsale{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
}
.single-product .isures-flashsale span.title {
    margin-top: 10px;
    margin-right: 25px;
}
 
.single-product .isures-flashsale .ux-timer {
    margin: 0;
 
}
.single-product .isures-flashsale .ux-timer span {
    font-size: 20px;
}
.single-product .isures-flashsale .ux-timer span strong{
    font-size: 10px;
    text-transform: none
}
 
.single-product .isures--flashsale .ux-timer span {
    color: var(--isures-secondary-color)!important;
}
.single-product .isures--flashsale .ux-timer span  strong{color: #222}

 

Tải ảnh tại https://allin.isures.com/wp-content/themes/supper-market/images/bg-flashsale.jpg và up lên web của bạn nhé! Tránh trường hợp sau mất cái background. 😀

Để code trên chạy thì bạn cần giá khuyến mãi sản phẩm, kèm theo ngày hết hạn khuyến mãi nhé.

Thành quả sẽ được như này

Flashsale countdown – tính năng đếm ngược thời gian khuyến mãi sản phẩm
Flashsale countdown – tính năng đếm ngược thời gian khuyến mãi sản phẩm