11/08/2018, 20:50

7 bước làm trang web bán hàng ( phần 1 )

7 bước làm trang web bán hàng ( phần 1 ) Với wordpress , thì việc làm 1 site bán hàng thì plugin woocommerce là một lựa chọn khá là hợp lý. Nhưng mà đối với nhu cầu của chúng ta là chỉ để show sản phẩm, và đặt hàng đơn giản thì plugin lại quá cồng kềnh, vì nó có nhiều chức năng mà ta không ...

7 bước làm trang web bán hàng ( phần 1 )
Với wordpress , thì việc làm 1 site bán hàng thì plugin woocommerce là một lựa chọn khá là hợp lý. Nhưng mà đối với nhu cầu của chúng ta là chỉ để show sản phẩm, và đặt hàng đơn giản thì plugin lại quá cồng kềnh, vì nó có nhiều chức năng mà ta không dùng đến. Mình sẽ hướng dẫn các bạn cách làm một tính năng như vậy cùng với tính năng đặt hàng đơn giản để bạn có thể thực hành. Cụ thể, chúng ta sẽ làm những việc sau đây:

  1. Tạo custom post type .
  2. Tạo các custom post field cho post type này (giá, mã sản phẩm,…v..v…).
  3. Tạo custom taxonomy cho post type.
  4. Tạo trang hiển thị danh sách sản phẩm.
  5. Tạo trang hiển thị chi tiết sản phẩm.
  6. Tạo trang giỏ hàng cho người dùng đặt hàng.
  7. Trải nghiệm tính năng vừa tạo ra.

Chắc các bạn nhìn danh sách các bước , có bạn cũng chưa hiểu, các bạn yên tâm là đến từng phần các bạn sẽ rõ. Trong khuôn khổ bài viết này chúng ta sẽ thưc hiện bước đầu tiên.

Tạo custom post type để làm gì. Mặc định trong WordPress sẽ cho bạn Page và Post để xuất bản nội dung và hai cái này được gọi là post type. Nếu bạn có nhu cầu sử dụng nhiều hơn 2 post type, ví dụ làm thêm một post type khác với mục đích đăng sản phẩm thì bắt buộc chúng ta phải tự tạo một post type tương ứng, và cái post type mà do chúng ta tự tạo ra thì được gọi là Custom Post Type.

Có nhiều plugin tạo Custom Post Type. Nhưng mình sẽ hướng dẫn các bạn dùng code để tạo post type mà bạn muốn. và kèm theo sau đó là mình sẽ hướng dẫn các bạn sử dụng một số plugin thay cho việc code.

Code

Đầu tiên, Sẽ là một ví dụ đơn giản để bạn hiểu được cách nó làm việc. Và đây là mã của nó :

function create_posttype() {

    register_post_type( 'movies',
        // CPT Options
        array(
            'labels' => array(
                'name' => __( 'Movies' ),
                'singular_name' => __( 'Movie' )
            ),
            'public' => true,
            'has_archive' => true,
            'rewrite' => array('slug' => 'movies'),
        )
    );
}
// Kích hoạt hàm tạo custom post type
add_action( 'init', 'create_posttype' );

Code trên đăng ký post type là “Products” với các mảng các option. Phần đầu là nhãn, nó cũng là một mảng. Phần thứ 2 chứa các tham số khác như hiển thị công khai, có chuyên mục, và đường dẫn với Url.Đó là cấu trúc, quan trọng là ta sẽ khai báo những gì trong đó. Bạn có thể xem qua các tham số tạiregister_post_type – WordPress Codex.

Và dưới đây là code chi tiết :

/*
* Tạo function  tạo custom post type
*/
function custom_post_type() {

    $labels = array(
        'name'  => _x( 'Sản phẩm', 'Post Type General Name', 'prefix_theme_cua_ban' ),
        'singular_name'=> _x( 'Sản phẩm', 'Post Type Singular Name', 'prefix_theme_cua_ban' ),
        'menu_name'  => __( 'Sản phẩm', 'prefix_theme_cua_ban' ),
        'parent_item_colon'   => __( 'Cha của sản phẩm', 'prefix_theme_cua_ban' ),
        'all_items'   => __( 'Tất cả sản phẩm', 'prefix_theme_cua_ban' ),
        'view_item'  => __( 'Xem sản phẩm', 'prefix_theme_cua_ban' ),
        'add_new_item'   => __( 'Thêm sản phẩm', 'prefix_theme_cua_ban' ),
        'add_new'   => __( 'Thêm sản phẩm', 'prefix_theme_cua_ban' ),
        'edit_item'    => __( 'Sửa sản phẩm', 'prefix_theme_cua_ban' ),
        'update_item'  => __( 'Cập nhật sản phẩm', 'prefix_theme_cua_ban' ),
        'search_items' => __( 'Tím kiếm', 'prefix_theme_cua_ban' ),
        'not_found'   => __( 'Chưa có sản phẩm', 'prefix_theme_cua_ban' ),
        'not_found_in_trash'  => __( 'Chưa có sản phẩm', 'prefix_theme_cua_ban' ),
    );


    $args = array(
        'label'               => __( 'Sản phẩm', 'prefix_theme_cua_ban' ),
        'labels'              => $labels,
        //Các tính năng được hỗ trợ trong post type
        'supports'            => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'comments', 'revisions', 'custom-fields', ),
        'taxonomies'          => array( 'category', 'post_tag' ),//Các taxonomy được phép sử dụng để phân loại nội dung
        'hierarchical' => false, //Cho phép phân cấp, nếu là false thì post type này giống như Post, false thì giống như Page
        'public' => true, //Kích hoạt post type
        'show_ui' => true, //Hiển thị khung quản trị như Post/Page
        'show_in_menu' => true, //Hiển thị trên Admin Menu (tay trái)
        'show_in_nav_menus' => true, //Hiển thị trong Appearance -> Menus
        'show_in_admin_bar' => true, //Hiển thị trên thanh Admin bar màu đen.
        'menu_position' => 5, //Thứ tự vị trí hiển thị trong menu (tay trái)
        'can_export' => true, //Có thể export nội dung bằng Tools -> Export
        'has_archive' => true, //Cho phép lưu trữ (month, date, year)
        'exclude_from_search' => false, //Loại bỏ khỏi kết quả tìm kiếm
        'publicly_queryable' => true, //Hiển thị các tham số trong query, phải đặt true
        'capability_type' => 'page' //
    );

    // Tạo post type với slug tên là sản phẩm và các tham số trong biến $args ở trên
    register_post_type( 'san-pham', $args );

}

// Kích hoạt hàm tạo custom post type
add_action( 'init', 'custom_post_type', 0 );

Bạn copy đoạn code trên vào file “function.php” và tận hưởng thành quả.

'san-pham -itha.edu'

Plugin

Ở phần tiếp theo chúng ta sẽ dùng plugin để tạo Sản phẩm và Danh mục sản phẩm. Dành cho các bạn không chuyên hoặc ko muốn động vào code.

Chúng ta sẽ sử dụng plugin “Types” . Một trong những plugin được đánh giá rất tốt. Bạn download nó tại đây .
plugin type itha.edu
Sau khi kích hoạt plugin chúng ta sẽ thấy xuất hiện plugin trên thanh menu.
type-menu-itha.edu
Mặc định wordpress đã có các post type là “Đa phương tiện”, “Trang”, “Bài viết”.

Để thêm post type là Sản phẩm . Chúng ta sẽ thêm mới bằng kích vào nút “Thêm dạng bài viết tùy biến mới

Sau đó ta sẽ thấy giao diện để thêm các thuộc tính của 1 post type.
'tên và mô tả'
Tiếp đến, chúng ta sẽ thấy phần nhãn của post type, phần này bạn có thể để mặc định .
'nhãn sản phẩm itha.edu'
Quan trọng nhất vẫn là phần chọn các tính năng của post type. Bạn muốn hiển thị chức năng nào thì bạn tích vào chức năng đó. “Tiêu đề”,”Editor”,”Trích dẫn”,”Thumbnail” là những phần quan trọng mà mình nghĩ bạn nên chọn.
'thuộc tính hỗ tợ post type'

Một phần nữa trong các thuộc tính của 1 post type là chọn “Taxomony” ( Dah mục sản phẩm ). Ở đây chúng ta chưa tạo “Danh mục sản phẩm” nên phần này chúng ta sẽ để sau. Bước cuối cùng là nhấn “Save Custom post type”.
'luu post type'
Kết quả :
'ket-qua'
Chúng ta đã tạo song phần sản phẩm . Giờ thì chúng ta tạo Danh mục sản phẩm cho phần sản phẩm.
'tao taxonomy'
Để tạo danh mục sản phẩm chúng ta vào “custom taxomomies”. Ở đây chúng ta chưa có taxomomy nào. Để thêm một taxonomy như Danh mục sản phẩm. Chúng ta nhấn “Add new”.Cũng giống tạo custom post type là sản phẩm . Tạo danh mục sản phẩm cũng như vậy.
'tiêu đề taxonomy'
Để thêm phần sản phẩm có trong danh mục sản phẩm các bạn chọn post type là “sản phẩm” và nhấn “Save custom taxomomies”.
'luu taxonomy'
'thanh qua'
Trải qua 2 bước tạo Sản phẩm và Danh mục sản phẩm với plugin “types” . Bạn đã có phần để nhập sản phẩm và danh mục sản phẩm. Ở phần 2, chúng ta sẽ thêm các trường dữ liệu cho sản phẩm như giá, hình ảnh, và những thứ bạn muốn.

Chúc các bạn thành công.

Link bài gốc:http://itha.edu.vn/7-buoc-lam-trang-web-ban-hang-phan-1/

0