Hướng dẫn thêm hiệu ứng Placeholder loading cho sản phẩm

Hi mọi người. Lâu quá không share code, tập trung share plugin free suốt. 😀

Nay share tới mọi người đoạn code tạo hiệu ứng loading placeholder giống facebook ý. Và cuộn trang tới đâu thì sản phẩm hiện ra tới đấy.

Hiệu ứng placeholder loading cho sản phẩm

Đơn giản thôi. Mọi người xem demo để dễ hình dung hiệu ứng tại đây

Đầu tiên là hook 1 đoạn code vào item sản phẩm, hiện html cho phần placeholder này.

add_action('woocommerce_before_shop_loop_item', 'isures_placeholder_effect');
function isures_placeholder_effect()
{
?>
    <div class="isures-ph--item">
        <div class="ph-col-12">
            <div class="ph-picture"></div>
            <div class="ph-row">
                <div class="ph-col-6 big"></div>
                <div class="ph-col-4 empty big"></div>
                <div class="ph-col-2 big"></div>
                <div class="ph-col-4"></div>
                <div class="ph-col-8 empty"></div>
                <div class="ph-col-6"></div>
                <div class="ph-col-6 empty"></div>
                <div class="ph-col-12"></div>
            </div>
        </div>
    </div>
<?php
}

Code trên thì bỏ vào function.php ha.

Rồi bây giờ thêm css cho nó ra hiệu ứng placeholder. Bỏ code dưới vào file style.css

.isures-ph--item {
    direction: ltr;
    position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
    display: flex;
    flex-wrap: wrap;
    padding: 0 10px;
    overflow: hidden;
    margin-bottom: 30px;
    background-color: #fff;
/*     border: 1px solid #e6e6e6; */
    border-radius: 2px;
	z-index: 35;
}

.isures-ph--item,
.isures-ph--item *,
.isures-ph--item :after,
.isures-ph--item :before {
    box-sizing: border-box
}

.isures-ph--item:before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;
    width: 500%;
    margin-left: -250%;
    -webkit-animation: iSuresPlaceholder .8s linear infinite;
    animation: iSuresPlaceholder .8s linear infinite;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 46%, hsla(0, 0%, 100%, .35) 50%, hsla(0, 0%, 100%, 0) 54%) 50% 50%
}

.isures-ph--item>* {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column;
    padding-right: 0;
    padding-left: 0
}

.isures-ph--item .ph-row {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 7.5px
}

.isures-ph--item .ph-row div {
    height: 10px;
    margin-bottom: 7.5px;
    background-color: #ced4da
}

.isures-ph--item .ph-row .big, .isures-ph--item .ph-row.big div {
    height: 20px;
    margin-bottom: 15px
}

.isures-ph--item .ph-row .empty {
    background-color: hsla(0, 0%, 100%, 0)
}

.isures-ph--item .ph-col-2 {
    flex: 0 0 16.66667%
}

.isures-ph--item .ph-col-4 {
    flex: 0 0 33.33333%
}

.isures-ph--item .ph-col-6 {
    flex: 0 0 50%
}

.isures-ph--item .ph-col-8 {
    flex: 0 0 66.66667%
}

.isures-ph--item .ph-col-10 {
    flex: 0 0 83.33333%
}

.isures-ph--item .ph-col-12 {
    flex: 0 0 100%
}

.isures-ph--item .ph-avatar {
    position: relative;
    width: 100%;
    min-width: 60px;
    background-color: #ced4da;
    margin-bottom: 15px;
    border-radius: 50%;
    overflow: hidden
}

.isures-ph--item .ph-avatar:before {
    content: " ";
    display: block;
    padding-top: 100%
}

.isures-ph--item .ph-picture {
    width: 100%;
    height: 250px;
    background-color: #ced4da;
    margin-bottom: 15px
}
.isures-ph--item .ph-row .circle{
	border-radius: 99%;
	width: 50px;
	height: 50px;
	display: inline-block;
	margin-right: 15px;
	margin-top: 20px;
	flex: 0 0 50px
}


@-webkit-keyframes iSuresPlaceholder {
    0% {
        transform: translate3d(-30%, 0, 0)
    }
    to {
        transform: translate3d(30%, 0, 0)
    }
}

@keyframes iSuresPlaceholder {
    0% {
        transform: translate3d(-30%, 0, 0)
    }
    to {
        transform: translate3d(30%, 0, 0)
    }
}

H là nó đã đẹp rồi. Nhưng che mất đi phần sản phẩm của chúng ta. Cần làm thêm 1 thao tác là khi scroll đến vị trí đó thì ẩn cái placeholder loading đi.

add_action('wp_footer', 'isures_placeholder_loading_scroll');
function isures_placeholder_loading_scroll()
{
?>
    <script>
        jQuery(document).ready(function($) {
            $(window).on('scroll', function() {
                let scrollDistance = $(window).scrollTop();
                $('.product-small.col').each(function(i) {
                    let position = $(this).offset().top + 250;
                    let height = $(this).height();
                    if (position <= scrollDistance + height) {
                        $(this).find('.isures-ph--item').css('display', 'none');
                    }
                });
            });
        });
    </script>
<?php
}

Cái code trên thì bỏ vào function.php luôn.

À note thêm cho mọi người số 250 ở trên mọi người có thể thay đổi nhỏ đi hoặc lớn hơn tuỳ ý. Để cuộn chưa tới thì ẩn placeholder cũng được nha.

Nếu mọi người muốn không cần cuộn trang mới ẩn placeholder thì có thể tham khảo code này.

add_action('wp_footer', 'isures_placeholder_loading_scroll');
function isures_placeholder_loading_scroll()
{
?>
    <script>
       jQuery(window).on('load',function(){
            jQuery('.isures-ph--item').css('display', 'none');
        });
    </script>
<?php
}

Bây giờ ra và thưởng thức thành quả thôi :D. nhớ xoá cache nếu code chưa hoạt động nha mọi người.!

Chúc sức khoẻ ạ!

4/5 - (48 bình chọn)

Chia sẻ khác

Đăng nhập

Đăng ký