Làm option settings wordpress bằng vue js

15/10/2022 09:39 441

Table of Contents

Trong các dự án plugin thường có phần settings và chúng ta thương lưu dữ liệu vào table option của wordpress, hôm này mình sẽ chia sẽ code để làm việc này, nó sẽ như hình bên dưới

Dữ liệu

dự liệu là object cho form setting và nút lưu

data: function () {
  return {
	settingsText: '<i class="fa fa-floppy-o" aria-hidden="true"></i>&nbsp;Lưu',	 
    settings:{
	}
  }
}

data: function () {

return {

settingsText: '<i class="fa fa-floppy-o" aria-hidden="true"></i> Lưu',

settings:{

}

Phần code html

Ví dụ sau này anh chị muốn thêm một setting mới thì chỉ cần v-model=”settings.newSetting” kiểu như vậy

<div id="settings">
<div class="row q-col-gutter-md q-mb-md">  
	<div class="col-7">
		<h1 style="font-size: 20px;
    font-weight: 700; margin-bottom:20px; line-height: 1;">Cài đặt</h1>
        <div style="margin-bottom:20px;">
         <q-input outlined v-model="settings.autoDeleteSearchHistoryAfter" label="Tự động xóa lịch sử tìm kiếm sau (đơn vị: tháng)" />
         </div>
         <div style="margin-bottom:20px;">
         <q-input outlined v-model="settings.test" label="test" />
         </div>
         <div><button class="custom-btn" @click="autoDeleteSearchHistoryAfterSave" v-html="settingsText"  ></button></div>
	</div>
	
</div>

<h1 style="font-size: 20px;

font-weight: 700; margin-bottom:20px; line-height: 1;">Cài đặt</h1>

<q-input outlined v-model="settings.autoDeleteSearchHistoryAfter" label="Tự động xóa lịch sử tìm kiếm sau (đơn vị: tháng)" />

</div>

<q-input outlined v-model="settings.test" label="test" />

</div>

</div>

Phần code js

Tất nhiên code này muốn sử dụng được phải import thư viện vue js 2x , axios và quasar cho phần ui

<script type="module">
const AJAX_URL  = '<?php echo admin_url('admin-ajax.php'); ?>'
new Vue({
el: '#settings',
data: function () {
  return {
	settingsText: '<i class="fa fa-floppy-o" aria-hidden="true"></i>&nbsp;Lưu',	 
    settings:{
	}
  }
},
methods:{
	NOTIFY(msg, type = 1){
		this.$q.notify({
			message: msg,
			color: type == 1 ? 'green' : 'red',
			position: 'top',
			timeout: 2000
		  })	
	},
    buildFormData(formData, data, parentKey) {
      if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
        Object.keys(data).forEach(key => {
          this.buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
        });
      } else {
        const value = data == null ? '' : data;

        formData.append(parentKey, value);
      }
    },
    jsonToFormData(data) {
      const formData = new FormData();

      this.buildFormData(formData, data);

      return formData;
    },
    autoDeleteSearchHistoryAfterSave(){
		this.settingsText = '<i class="fa fa-spinner fa-spin"></i>&nbsp;Lưu'
        axios.post(
        	AJAX_URL, 
            this.jsonToFormData({
            	action: 'autoDeleteSearchHistoryAfterSave', 
                settings: this.settings
            })
       ).then(res => {
            const response = res.data
			this.settingsText = '<i class="fa fa-floppy-o" aria-hidden="true"></i>&nbsp;Lưu'
			this.NOTIFY("Đã lưu thành công!",1)
          	console.log(response)
       })
        
    },
	loadSettings(){
		axios.post(
        	AJAX_URL, 
            this.jsonToFormData({
            	action: 'loadSettings', 
            })
       ).then(res => {
            const response = res.data.data
			this.settings = response
          	console.log(response)
       })
	}
},
watch:{
    
},
created(){
	this.loadSettings()
}

})
</script>

const AJAX_URL = '<?php echo admin_url('admin-ajax.php'); ?>'

new Vue({

el: '#settings',

data: function () {

return {

settingsText: '<i class="fa fa-floppy-o" aria-hidden="true"></i> Lưu',

settings:{

}

methods:{

NOTIFY(msg, type = 1){

this.$q.notify({

message: msg,

color: type == 1 ? 'green' : 'red',

position: 'top',

timeout: 2000

})

buildFormData(formData, data, parentKey) {

if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {

Object.keys(data).forEach(key => {

this.buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);

});

} else {

const value = data == null ? '' : data;

formData.append(parentKey, value);

}

jsonToFormData(data) {

const formData = new FormData();

this.buildFormData(formData, data);

return formData;

autoDeleteSearchHistoryAfterSave(){

this.settingsText = '<i class="fa fa-spinner fa-spin"></i> Lưu'

axios.post(

AJAX_URL,

this.jsonToFormData({

action: 'autoDeleteSearchHistoryAfterSave',

settings: this.settings

})

).then(res => {

const response = res.data

this.settingsText = '<i class="fa fa-floppy-o" aria-hidden="true"></i> Lưu'

this.NOTIFY("Đã lưu thành công!",1)

console.log(response)

})

loadSettings(){

axios.post(

AJAX_URL,

this.jsonToFormData({

action: 'loadSettings',

})

).then(res => {

const response = res.data.data

this.settings = response

console.log(response)

})

}

watch:{

created(){

this.loadSettings()

}

})

</script>

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

Phần code php

Tất nhiên đây là 2 function ajax nên anh chị cần add_action(“wp_ajax_

add_action("wp_ajax_loadSettings", "loadSettings");
add_action("wp_ajax_autoDeleteSearchHistoryAfterSave", "autoDeleteSearchHistoryAfterSave");
function loadSettings(){
		$stocksSettings = !empty(get_option("stocksSettings")) ? get_option("stocksSettings") : array();
		wp_send_json_success($stocksSettings);
	}
	function autoDeleteSearchHistoryAfterSave(){
		update_option('stocksSettings', (array) $_POST['settings']);
		wp_send_json_success($_POST['settings']);
	}

add_action("wp_ajax_loadSettings", "loadSettings");

add_action("wp_ajax_autoDeleteSearchHistoryAfterSave", "autoDeleteSearchHistoryAfterSave");

function loadSettings(){

$stocksSettings = !empty(get_option("stocksSettings")) ? get_option("stocksSettings") : array();

wp_send_json_success($stocksSettings);

}

function autoDeleteSearchHistoryAfterSave(){

update_option('stocksSettings', (array) $_POST['settings']);

wp_send_json_success($_POST['settings']);

}

5/5 (1 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

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

Tạo modal để thay thế cho vue-js-modal trong vuejs 2 [ 25/02/2023 12:39 ]
Tạo event click ngoài một element trong vue js [ 10/12/2022 02:09 ]
Dùng datetime picker plugin jquery trong vuejs [ 04/11/2022 02:41 ]
Cách tạo form multi field row dùng vue js [ 16/10/2022 03:47 ]
Thực hiện ajax trong vòng lặp trong vue js [ 05/10/2022 01:19 ]
Import file excel tới data dùng thư viện php excel và vue js [ 01/10/2022 07:45 ]
Live search trong array với vue js [ 19/09/2022 03:44 ]
Phát hiện detect sự kiện out click cho một element trong vue js [ 19/09/2022 01:14 ]
Sử dụng filter trong array để làm chức năng tìm kiếm cho vue js [ 09/09/2022 07:20 ]
Vue js trong một bài viết [ 10/08/2022 08:21 ]

Làm option settings wordpress bằng vue js

Dữ liệu

Phần code html

Phần code js

Phần code php

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)