Xây dựng website bất động sản bằng flatsome và acf Phần 2

Tiếp tục bài viết xây dựng website bất động sản bằng flatsome và acf ở bài trước, ở bài này chúng ta sẽ đưa các field diện tích, phòng ngủ … ra ngoài list bất động sản ngoài trang chủ và các trang archive

Đầu tiên mình sẽ tạo một Trang chủ và show các bất động sản ra ngoài thành dạng grid và set nó làm trang chủ luôn nhé.

Xây dựng website bất động sản bằng flatsome và acf Phần 2

Tuy nhiên các bất động sản này chỉ hiển thị hình ảnh – tiêu đề – giá chứ không hiển thị các giá trị mà chúng ta đã nhập vào các field như diện tích, phòng ngủ …

Vậy mình sẽ đưa nó ra đây như hình ảnh dưới đây

Xây dựng website bất động sản bằng flatsome và acf Phần 2

Đầu tiên các bạn tạo cho mình một file tên là show-fields-archive.php trong thư mục functions

Và tiến hành require_once nó vào functions.php của childtheme nhé

Xây dựng website bất động sản bằng flatsome và acf Phần 2

Bây giờ chúng ta sẽ tiến hành viết code cho file show-fields-archive.php để nó hiển thị giá trị các field phía dưới tiêu đề của các bất động sản.

Thì ở đây thằng flatsome nó cung cấp cho chúng ta cái hook là : flatsome_product_box_after

Và các bạn chỉ cần móc vào cái hook này là nó show đúng ngay chỗ đấy luôn

Mình sẽ viết một đoạn code trong file show-fields-archive.php để test trước :

<?php 
/**
 *
 * Hiển thị các giá trị của field diện tích, phòng ngủ, wc, ưu điểm ... vào trang archive, home, search
 */

function show_fields()
{
    echo "test" ;
}
add_action( 'flatsome_product_box_after', 'show_fields' ) ;

Và nó sẽ in ra chữ test  đúng như chỗ chúng ta cần

Xây dựng website bất động sản bằng flatsome và acf Phần 2

Bây giờ các bạn chỉ cần thay chữ test bằng các giá trị trong field kia ra là được

Tương tự như ở bài trước nên mình copy lại cái bên kia qua, mình sẽ xóa hết những label đi và chỉ để lại những icon thôi

<?php 
/**
 *
 * Hiển thị các giá trị của field diện tích, phòng ngủ, wc, ưu điểm ... vào trang archive, home, search
 */

function show_fields()
{
    $diachi  = get_field('diachi') ;
    $dientich  = get_field('dientich') ;
    $huongnha = get_field('huongnha') ;
    $phongngu = get_field('phongng') ;
    $phongwc = get_field('phongwc') ;
    $phaply = get_field('phaply') ;
    $trangthai = get_field('trangthai') ;
    $uudiem = get_field('uudiem') ;
?>
<p>
    <span class="icon-stack"></span> <?php echo $dientich ; ?>
    <span class="icon-compass2"></span> <?php echo $huongnha ; ?>
    <span class="icon-equalizer"></span> <?php echo $phongngu ; ?>
    <span class="icon-equalizer2"></span> <?php echo $phongwc ; ?>
</p>
<p class="diachi">
    <span class="icon-checkbox-checked"></span> <?php echo $diachi ; ?>
</p>
<?php 
}
add_action( 'flatsome_product_box_after', 'show_fields' ) ;

Lưu lại và chúng ta sẽ được như thế này :

Xây dựng website bất động sản bằng flatsome và acf Phần 2

Tuy nhiên có những cái nó không có dữ liệu như phòng ngủ hay phòng wc nó không có dữ liệu nên nó dồn 2 cái icon gần nhau

Chúng ta sẽ thêm hàm if để kiểm tra nếu nó không có dữ liệu thì không hiện ra, khi nào có mới hiện nên chúng ta sẽ sửa code lại một chút

<?php 
/**
 *
 * Hiển thị các giá trị của field diện tích, phòng ngủ, wc, ưu điểm ... vào trang archive, home, search
 */

function show_fields()
{
    $diachi  = get_field('diachi') ;
    $dientich  = get_field('dientich') ;
    $huongnha = get_field('huongnha') ;
    $phongngu = get_field('phongng') ;
    $phongwc = get_field('phongwc') ;
    $phaply = get_field('phaply') ;
    $trangthai = get_field('trangthai') ;
    $uudiem = get_field('uudiem') ;

    echo '<p class="bds-info">';
        if ($dientich != "") {
            echo '<span class="icon-stack"></span> ' . $dientich . 'm<sup>2</sup></span>' ;
        }
        
        if ($huongnha != "") {
            echo '<span class="icon-compass2"></span> ' . $huongnha . '</span>' ;
        }
        
        if ($phongngu != "") {
            echo '<span class="icon-equalizer"></span> ' . $phongngu . '</span>' ;
        }
        
        if ($phongwc != "") {
            echo '<span class="icon-equalizer2"></span> ' . $phongwc . '</span>' ;
        }
        
    echo '</p>' ;

    if ($diachi != "") {
        echo '<p class="diachi"><span class="icon-checkbox-checked"></span> ' . $diachi . '</span></p>' ;	
    }

    if ($uudiem != "") {
        echo '<div class="uudiem">';
            echo '<p><span>'.$uudiem.'</span></p>';
        echo '</div>';
    }
}
add_action( 'flatsome_product_box_after', 'show_fields' ) ;

Và bây giờ thì nó hiển thị khá là ok theo ý mình rồi, các bạn css lại một xíu cho dễ nhìn

.label-bds-info
{
    color: blue;
}
.uudiem
{
    width: 50%;
    text-align: center;
    position: absolute;
    left: 0;
    top: -80px;
    background: #F28B00;
    padding: 0.5em 1em;
    color: #fff;
    border-right: 2px solid #fff;
}
.product-small .col-inner
{
    border: 1px solid #dbdbdb;
    background: #eee;
    text-align: center;
}

Xây dựng website bất động sản bằng flatsome và acf Phần 2

 

Bài viết này tóm lại là chúng ta sẽ sử dụng hook của flatsome cụ thể là : flatsome_product_box_after để móc những field đã nhập ra ngoài trang danh sách sản phẩm

 

Vui lòng chờ 30 giây. Chúng tôi đang lấy link cho bạn ... !
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments