Thêm custom field cho dokan

24/04/2022 14:10 308

Table of Contents

Giới thiêu sơ về Dokan là nền tảng multi shop giống shopee, tiki, lazada. Trong quá trình dev chúng ta cần thêm custom field cho nó thì làm sao. Vâng ngay sau đây mình xin chia sẽ cách làm: (lưu ý tất cả các code trong bài viết này dùng trong class)

Thêm vào add new product

Trong dokan thêm mới sản phẩm nó sẽ mở ra một popup chứ không giống như custom field trong admin wordpress new và edit đều chung

trong ví dụ dưới đây, mình sẽ thêm các custom field: đơn vị tính, thương hiệu, xuất xứ, loại sản phẩm và vị trí

Code html để tạo field

Sau đây là code tham khảo:

add_action( 'dokan_new_product_after_product_tags', array( $this, 'dokan_product_field' ), 10 );
function dokan_product_field(){
    //các phần tử select được tạo từ acf
    $selects_product_type = get_field_object('field_62626d90b0a8e');
    $selects_product_position = get_field_object('field_626271f21b1b6');
    ?>
    <div class="dokan-form-group">
    <label>Đơn vị tính</label>
    <div class="acf-input-wrap"><input type="text" id="_unit_product" name="_unit_product"></div></div>
    <div class="dokan-form-group"><label>Thương hiệu</label><div class="acf-input-wrap"><input type="text" id="_product_brand" name="_product_brand"></div></div>
    <div class="dokan-form-group"><label>Xuất xứ</label><div class="acf-input-wrap"><input type="text" id="_product_origin" name="_product_origin"></div></div>
    
    <div class="dokan-form-group">
    <label>Loại sản phẩm</label>
    <select id="product_type" class="dokan-form-control dokan-select2" name="product_type[]" multiple >
    <option value="0">Select</option>
    <?php foreach($selects_product_type['choices'] as $key => $val){ ?>
    <option value="<?php echo $key; ?>"><?php echo $val; ?></option>
    <?php }?>
    </select>
    </div>
    <div class="dokan-form-group">
    <label>Vị trí</label>
    <select id="product_position" class="dokan-form-control dokan-select2" name="product_position[]" multiple >
    <option value="">Select</option>
    <?php foreach($selects_product_position['choices'] as $key => $val){ ?>
    <option value="<?php echo $key; ?>"><?php echo $val; ?></option>
    <?php }?>
    </select></div>
    <?php
}

add_action( 'dokan_new_product_after_product_tags', array( $this, 'dokan_product_field' ), 10 );

function dokan_product_field(){

//các phần tử select được tạo từ acf

$selects_product_type = get_field_object('field_62626d90b0a8e');

$selects_product_position = get_field_object('field_626271f21b1b6');

<div class="dokan-form-group"><label>Thương hiệu</label><div class="acf-input-wrap"><input type="text" id="_product_brand" name="_product_brand"></div></div>

<option value="0">Select</option>

<?php foreach($selects_product_type['choices'] as $key => $val){ ?>

<?php }?>

</select>

</div>

<option value="">Select</option>

<?php foreach($selects_product_position['choices'] as $key => $val){ ?>

<?php }?>

</select></div>

<?php

}

Các bài viết khác có thể hữu ích với bạn

Các functions làm việc với dokan

Xử lý submit lưu dữ liệu

Khi người dùng click create product hoặc create & add new thì dữ liệu sẽ cần phải lưu vào cơ sỡ dữ liệu và đây là code

add_action( 'dokan_new_product_added', array( $this, 'dokan_save_add_product_meta' ), 10, 2 );
function dokan_save_add_product_meta($product_id, $postdata){
    if ( ! dokan_is_user_seller( get_current_user_id() ) ) {
        return;
    }

    if ( ! empty( $postdata['_unit_product'] ) ) {
        update_post_meta( $product_id, '_unit_product', $postdata['_unit_product'] );
    }
    if ( ! empty( $postdata['_product_brand'] ) ) {
        update_post_meta( $product_id, '_product_brand', $postdata['_product_brand'] );
    }
    if ( ! empty( $postdata['_product_origin'] ) ) {
        update_post_meta( $product_id, '_product_origin', $postdata['_product_origin'] );
    }
    if ( ! empty( $postdata['product_type'] ) ) {
        update_post_meta( $product_id, 'product_type', $postdata['product_type'] );
    }
    if ( ! empty( $postdata['product_position'] ) ) {
        update_post_meta( $product_id, 'product_position', $postdata['product_position'] );
    }
    
}

add_action( 'dokan_new_product_added', array( $this, 'dokan_save_add_product_meta' ), 10, 2 );

function dokan_save_add_product_meta($product_id, $postdata){

if ( ! dokan_is_user_seller( get_current_user_id() ) ) {

return;

}

if ( ! empty( $postdata['_unit_product'] ) ) {

update_post_meta( $product_id, '_unit_product', $postdata['_unit_product'] );

}

if ( ! empty( $postdata['_product_brand'] ) ) {

update_post_meta( $product_id, '_product_brand', $postdata['_product_brand'] );

}

if ( ! empty( $postdata['_product_origin'] ) ) {

update_post_meta( $product_id, '_product_origin', $postdata['_product_origin'] );

}

if ( ! empty( $postdata['product_type'] ) ) {

update_post_meta( $product_id, 'product_type', $postdata['product_type'] );

}

if ( ! empty( $postdata['product_position'] ) ) {

update_post_meta( $product_id, 'product_position', $postdata['product_position'] );

}

Edit dữ liệu custom field

Nhưng đã đề cập ban đầu thì việc xử lý giữa thêm mới và edit của dokan là khác nhau, nên chúng ta cần làm phần edit cho nó và nó cũng có 2 phần

Lấy dữ liệu đã lưu và hiển thị vào các custom field

Code tham khảo:

add_action( 'dokan_product_edit_after_product_tags', array( $this, 'dokan_show_on_edit_page' ), 99, 2 );
function dokan_show_on_edit_page($post, $post_id){
    $_unit_product         = get_post_meta( $post_id, '_unit_product', true );
    $_product_brand         = get_post_meta( $post_id, '_product_brand', true );
    $_product_origin         = get_post_meta( $post_id, '_product_origin', true );
    $product_type         = get_post_meta( $post_id, 'product_type', true );
    $product_position         = get_post_meta( $post_id, 'product_position', true );
    $selects_product_type = get_field_object('field_62626d90b0a8e');
    $selects_product_position = get_field_object('field_626271f21b1b6');
    ?>
    <div class="dokan-form-group">
    <label>Đơn vị tính</label>
    <div class="acf-input-wrap"><input type="text" id="_unit_product" name="_unit_product" value="<?php echo $_unit_product; ?>"></div></div>
    <div class="dokan-form-group"><label>Thương hiệu</label>
    <div class="acf-input-wrap"><input type="text" id="_product_brand" name="_product_brand" value="<?php echo $_product_brand; ?>"></div></div>
    <div class="dokan-form-group"><label>Xuất xứ</label>
    <div class="acf-input-wrap"><input type="text" id="_product_origin" name="_product_origin" value="<?php echo $_product_origin; ?>"></div></div>
    
    <div class="dokan-form-group">
    <label>Loại sản phẩm</label>
    <select id="product_type" class="dokan-form-control dokan-select2" name="product_type[]" multiple >
    <option  value="0">Select</option>
    <?php foreach($selects_product_type['choices'] as $key => $val){
        $selected = '';
        if(in_array($key,$product_type)){ $selected = "selected"; }
         ?>
    <option <?php echo $selected; ?> value="<?php echo $key; ?>"><?php echo $val; ?></option>
    <?php }?>
    </select>
    </div>
    <div class="dokan-form-group">
    <label>Vị trí</label>
    <select id="product_position" class="dokan-form-control dokan-select2" name="product_position[]" multiple >
    <option value="">Select</option>
    <?php foreach($selects_product_position['choices'] as $key => $val){
        $selected = '';
        if(in_array($key,$product_position)){ $selected = "selected"; }
         ?>
    <option <?php echo $selected; ?> value="<?php echo $key; ?>"><?php echo $val; ?></option>
    <?php }?>
    </select></div>
    <?php
}

add_action( 'dokan_product_edit_after_product_tags', array( $this, 'dokan_show_on_edit_page' ), 99, 2 );

function dokan_show_on_edit_page($post, $post_id){

$_unit_product = get_post_meta( $post_id, '_unit_product', true );

$_product_brand = get_post_meta( $post_id, '_product_brand', true );

$_product_origin = get_post_meta( $post_id, '_product_origin', true );

$product_type = get_post_meta( $post_id, 'product_type', true );

$product_position = get_post_meta( $post_id, 'product_position', true );

$selects_product_type = get_field_object('field_62626d90b0a8e');

$selects_product_position = get_field_object('field_626271f21b1b6');

<div class="dokan-form-group"><label>Thương hiệu</label>

<option value="0">Select</option>

<?php foreach($selects_product_type['choices'] as $key => $val){

$selected = '';

if(in_array($key,$product_type)){ $selected = "selected"; }

<option <?php echo $selected; ?> value="<?php echo $key; ?>"><?php echo $val; ?></option>

<?php }?>

</select>

</div>

<option value="">Select</option>

<?php foreach($selects_product_position['choices'] as $key => $val){

$selected = '';

if(in_array($key,$product_position)){ $selected = "selected"; }

<option <?php echo $selected; ?> value="<?php echo $key; ?>"><?php echo $val; ?></option>

<?php }?>

</select></div>

<?php

}

Lưu dữ liệu khi nhấn submit

Lưu dữ liệu thì cũng giống như thêm mới chỉ khác là action hook móc vào khác nhau thôi. Sau đây là code

add_action( 'dokan_product_updated', array( $this, 'dokan_save_add_product_meta' ), 10, 2 );
function dokan_save_add_product_meta($product_id, $postdata){
    if ( ! dokan_is_user_seller( get_current_user_id() ) ) {
        return;
    }

    if ( ! empty( $postdata['_unit_product'] ) ) {
        update_post_meta( $product_id, '_unit_product', $postdata['_unit_product'] );
    }
    if ( ! empty( $postdata['_product_brand'] ) ) {
        update_post_meta( $product_id, '_product_brand', $postdata['_product_brand'] );
    }
    if ( ! empty( $postdata['_product_origin'] ) ) {
        update_post_meta( $product_id, '_product_origin', $postdata['_product_origin'] );
    }
    if ( ! empty( $postdata['product_type'] ) ) {
        update_post_meta( $product_id, 'product_type', $postdata['product_type'] );
    }
    if ( ! empty( $postdata['product_position'] ) ) {
        update_post_meta( $product_id, 'product_position', $postdata['product_position'] );
    }
    
}

add_action( 'dokan_product_updated', array( $this, 'dokan_save_add_product_meta' ), 10, 2 );

function dokan_save_add_product_meta($product_id, $postdata){

if ( ! dokan_is_user_seller( get_current_user_id() ) ) {

return;

}

if ( ! empty( $postdata['_unit_product'] ) ) {

update_post_meta( $product_id, '_unit_product', $postdata['_unit_product'] );

}

if ( ! empty( $postdata['_product_brand'] ) ) {

update_post_meta( $product_id, '_product_brand', $postdata['_product_brand'] );

}

if ( ! empty( $postdata['_product_origin'] ) ) {

update_post_meta( $product_id, '_product_origin', $postdata['_product_origin'] );

}

if ( ! empty( $postdata['product_type'] ) ) {

update_post_meta( $product_id, 'product_type', $postdata['product_type'] );

}

if ( ! empty( $postdata['product_position'] ) ) {

update_post_meta( $product_id, 'product_position', $postdata['product_position'] );

}

Dùng select2 trong dokan

đối với các field dùng select multiple (cho phép chọn nhiều dữ liệu), thì cần dùng select2 để cho giao diện người dùng trông nó chuyên nghiệp và dễ sử dụng, việc load thư viện select2 là không cần vì dokan nó đã load rồi chúng ta chỉ cần dùng thôi, sau đây là code

jQuery(function($){
	var dokan_custom_field = {
		__construct: function(){
			this.select_handle();	
		},
		select_handle: function(){
			$('#product_type').select2();
			$('#product_position').select2();
		}
	}
	dokan_custom_field.__construct();
});

jQuery(function($){

var dokan_custom_field = {

__construct: function(){

this.select_handle();

select_handle: function(){

$('#product_type').select2();

$('#product_position').select2();

}

dokan_custom_field.__construct();

});

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Các functions làm việc với dokan [ 30/06/2022 11:45 ]
Thêm new order status và customize send email dokan [ 15/04/2022 14:26 ]
Thêm nút in hóa đơn (print order invoice) trong phần quản lý đơn hàng trong dokan [ 22/07/2021 13:26 ]

Thêm custom field cho dokan

Thêm vào add new product

Code html để tạo field

Xử lý submit lưu dữ liệu

Edit dữ liệu custom field

Lấy dữ liệu đã lưu và hiển thị vào các custom field

Lưu dữ liệu khi nhấn submit

Dùng select2 trong dokan

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)