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

Serial bài viết này mình sẽ hướng dẫn các bạn xây dựng website bất động sản bằng flatsome và acf plugin

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

Ở bài viết này mình sẽ tạo website wordpress cài đặt giao diện Flatsome và Plugin Advance Custom Field (ACF)

Link download Flatsome tại đây

Link download Plugin ACF tại đây.

Ở đây mình sẽ làm demo trên localhost để làm hướng dẫn

Sau khi các bạn cài flatsome và setup child theme xong thì chúng ta bắt đầu nhập dữ liệu demo nhé.

Mình sẽ lấy dữ liệu demo của trang web batdongsanthetrue.com về làm demo

Sở dĩ mình lấy dữ liệu trang đó làm demo vì nó cũng làm bằng theme flatsome và acf nên mình làm gần giống nó luôn để các bạn dễ hình dung

Tiến hành phân tích một website bất động sản thì chúng ta có những cái như sau :

  1. Tên bất động sản
  2. Ảnh đại diện – và thư viện hình ảnh gallery
  3. Địa chỉ bất động sản
  4. Giá bất động sản
  5. Diện tích – hướng nhà – phòng ngủ – toilet – pháp lý – trạng thái – ưu điểm

Ở đây chúng ta sẽ dùng post type product của woocommerce để làm những sản phẩm bất động sản. Sở dĩ dùng nó là vì thằng flatsome nó hỗ trợ rất tốt việc hiển thị woocommerce mà chúng ta không cần phải custom gì nhiều.

Trong post type product của woocommerce nó đã hỗ trợ nhập Tên bất động sản ( title ), nội dung bất động sản, ảnh đại diện, gallery image rồi

Giờ chúng ta cần tạo các ô để nhập diện tích – hướng nhà – phòng ngủ vâng vâng và mây mây

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

Các bạn tiến hành cài đặt plugin Advance custom field và kích hoạt nó lên.

Tiếp đến chúng ta sẽ tạo filed group để tạo các field nhập

Ở đây mình tạo Field Group có tên là Thiết Lập Bất Động Sản với các field sau :

Label Field Name
Địa chỉ diachi (text)
Hướng nhà huongnha (select)
Phòng Ngủ phongngu (select)
Phòng Wc phongwc (select)
Pháp lý phaply (text)
Trạng Thái trangthai (text)
Ưu điểm uudiem (text)

Mục Rules thì các bạn chọn Post Type / Product nhé

Các bạn có thể tạo giống mình, và ghi nhớ các field name để lát chúng ta code vào giao diện để show nó ra ngoài nhé.

Về cách tạo thì các bạn có thể xem lại bài hướng dẫn sử dụng cơ bản về acf ở bài viết này

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

Sau khi tạo xong các field các bạn tiến hành nhập nội dung demo vào

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

Sau khi nhập dữ liệu xong thì chúng ta sẽ được như thế này

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

Bây giờ chúng ta sẽ hiển thị những giá trị của field mà chúng ta đã nhập vào

Và ở đây, mình sẽ hiển thị chúng trên chỗ chọn số lượng và nút add to cart nhé.

Để show vào vị trí này thì chúng ta sẽ sử dụng hook woocommerce_before_add_to_cart_button

Viết tới đây thì mình mới để ý thấy những icon trước những label, các bạn có thể sử dụng bộ icon riêng của các bạn hoặc download bộ icon mình làm trong bài viết này ở cuối bài viết nhé

Sau khi download bộ icon về thì chúng ta tiến hành thêm icon vào theme để sử dụng, ở đây mình sử dụng child theme của flatsome nha.

Mình tạo một thư mục assets trong child theme và giải nén thư mục icon vào đó

Tiếp tục mình tạo thư mục functions để viết những function tùy biến vào

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

Trong thư mục functions vừa tạo mình sẽ tạo một file enqueue.php để enqueue file style.css của icon vào nhưu sau :

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

<?php 

function my_enqueue()
{
    wp_enqueue_style( 'icon', get_stylesheet_directory_uri() . '/assets/icon/style.css', array(), '', 'all' ) ;
}
add_action( 'wp_enqueue_scripts','my_enqueue');

Sau đó mình sẽ require_once nó vào file functions.php của child theme

Mở file functions.php của child theme lên và require_once file enqueue.php vào

require_once get_stylesheet_directory() . '/functions/enqueue.php' ;

Và mình sẽ reload lại trang web để kiểm tra xem mình đã enqueue thành công chưa.

Và bạn kiểm tra ra như bên dưới là đã enqueue file style.css của icon thành công nhé, bây giờ chúng ta sẽ sử dụng icon bình thường.

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

Để biết cách sử dụng icon thì trong thư mục icon có file demo.html các bạn mở lên thôi

Để sử dụng một icon nào thì các bạn chỉ cần gắn nó vào class của thẻ span hay thẻ i là được

Ví dụ mình muốn sử dụng icon home thì chỉ cần viết như sau : <span class=”icon-home”></span>

Đưa giá trị các field hiển thị ra ngoài

Đầu tiên mình sẽ không viết thẳng code vào file functions.php của child theme mà mình sẽ tạo file khác rồi require_once vào

Cụ thể là mình sẽ tạo file show-fields.php trong thư mục functions

Và require_once nó vào file functions.php

<?php
require_once get_stylesheet_directory() . '/functions/enqueue.php' ;
require_once get_stylesheet_directory() . '/functions/show-fields.php' ;

Bây giờ chúng ta sẽ viết code cho file show-fields.php là được

Nội dung file show-fields.php

<?php 

add_action( 'woocommerce_before_add_to_cart_button', 'show_bds_info' ) ;
function show_bds_info()
{

    $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') ;
    if (wp_is_mobile()) {
        ?>
    <table class="bds-info">
            <tr><td class="label-bds-info"><span class="icon-stack"></span> Diện tích</td><td><?php echo $dientich ; ?></td></tr>
            <tr><td class="label-bds-info"><span class="icon-compass2"></span> Hướng nhà</td><td><?php echo $huongnha ; ?></td></tr>
            <tr><td class="label-bds-info"><span class="icon-equalizer"></span> Phòng Ngủ</td><td><?php echo $phongngu ; ?></td></tr>
            <tr><td class="label-bds-info"><span class="icon-equalizer2"></span> Phòng WC</td><td><?php echo $phongwc ; ?></td></tr>
            <tr><td class="label-bds-info"><span class="icon-books"></span> Pháp Lý</td><td><?php echo $phaply ; ?></td></tr>
            <tr><td class="label-bds-info"><span class="icon-spinner"></span> Trạng Thái</td><td><?php echo $trangthai ; ?></td></tr>
            <tr><td class="label-bds-info"><span class="icon-checkbox-checked"></span> Ưu điểm</td><td><?php echo $uudiem ; ?></td></tr>
            <tr><td colspan="2"><span class="icon-map"></span> <?php echo $diachi ; ?></td></tr>

    </table>
        <?php 
    } 
    else
    {
    ?>

    <table class="bds-info">
        <tr>
            <td class="label-bds-info"><span class="icon-stack"></span> Diện tích</td><td><?php echo $dientich ; ?></td>
            <td class="label-bds-info"><span class="icon-compass2"></span> Hướng nhà</td><td><?php echo $huongnha ; ?></td>
        </tr>
        <tr>
            <td class="label-bds-info"><span class="icon-equalizer"></span> Phòng Ngủ</td><td><?php echo $phongngu ; ?></td>
            <td class="label-bds-info"><span class="icon-equalizer2"></span> Phòng WC</td><td><?php echo $phongwc ; ?></td>
        </tr>
        <tr>
            <td class="label-bds-info"><span class="icon-books"></span> Pháp Lý</td><td><?php echo $phaply ; ?></td>
            <td class="label-bds-info"><span class="icon-spinner"></span> Trạng Thái</td><td><?php echo $trangthai ; ?></td>
        </tr>
        <tr>
            <td class="label-bds-info"><span class="icon-checkbox-checked"></span> Ưu điểm</td><td><?php echo $uudiem ; ?></td>
            <td colspan="2"><span class="icon-map"></span> <?php echo $diachi ; ?></td>
        </tr>

    </table>
    <?php 
    }
}

Giải thích :

add_action( ‘woocommerce_before_add_to_cart_button’, ‘show_bds_info’ ) ;

Dòng này nghĩa là bạn sẽ lấy giá trị của hàm show_bds_info và móc nó vào hook woocommerce_before_add_to_cart_button để nó hiển thị ra

Và cái hook woocommerce_before_add_to_cart_button như mình nói ở trên là nó sẽ nằm trên cái nút ADD TO CARD

Vậy chúng ta sẽ tìm hiểu hàm show_bds_info mình đã viết những gì?

Đầu tiên mình dùng hàm get_field mà ACF cung cấp để lấy giá trị đã nhập trong bài viết và gán chúng vào những biến tương ứng

  • $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’) ;

Và sau đó là mình in những biến đó ra thôi, thật đơn giản đúng không?

Sau khi in ra thì các bạn được như thế này :

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

Tới đây thì mình đã hướng dẫn các bạn tạo những field như diện tích, phòng ngủ, trạng thái …. của bất động sản và đưa ra ngoài trang bất động sản chi tiết.

Ở các bài tiếp theo chúng ta sẽ custom một chút để show ở trang chủ và tạo thanh tìm kiếm bất động sản theo những field đã tạo nhé.

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