Tiếp theo series Woo REST API, ở bài này chúng ta sẽ đi tiếp phần cấu hình source cơ bản và Woocommerce API Authentication.
Cấu hình source cơ bản
Cài đặt Node.js
Đầu tiên, các bạn hãy cài Node.js trước nhé. Nếu đã đặt rồi thì chúng ta sẽ tiếp tục xem bên dưới, còn nếu chưa thì các bạn hãy cài đặt nó tại đây nhé Node.js . Để kiểm tra Node.js đã được cài đặt chưa hoặc xem version thì chúng ta mở cmd lên và gõ lệnh “node -v“.
Cấu hình webpack và gulp cơ bản
Sau khi đã cài đặt Node.js rồi, thì chúng ta sẽ đi cấu hình webpack và gulp cơ bản nhé. Dưới đây là source theme wordpress của mình:
Tại đây các bạn mở Terminal lên và gõ lệnh “npm init” tạo file package.json.
Chương trình sẽ hỏi bạn cấu hình những thông tin cơ bản, tạm chúng ta cứ ấn Enter rồi ấn “yes” để bỏ qua hết cũng được. Sau khi cài đặt xong thì sẽ có file package.json được tạo ra.
Tại terminal chúng ta tiếp tục dùng lệnh “npm install –global gulp-cli” để cài đặt gulp-cli. Tiếp theo chúng ta sẽ dùng lệnh “npm install –save-dev gulp” để cài gulpfile cho project của mình.
Sau khi cài xong chúng ta sẽ tạo file gulpfile.js trong source theme. Kết quả sẽ được như trong hình dưới đây.
Chúng ta tiếp tục cài webpack-stream bằng lệnh “npm install –save-dev webpack-stream” và gulp-sass bằng lệnh “npm install node-sass gulp-sass –save-dev“.
Sau khi cài đặt xong webpack-stream và gulp-sass thì tất cả môi trường cần thiết đã sẵn sàng. Bây giờ chúng ta sẽ tạo thư mục css và js để tiến hành dev nhé. Mình sẽ chỉ đưa ra đoạn code cấu hình cơ bản ở phần này thôi, còn nếu bạn nào muốn tìm hiểu thêm về webpack và gulp thì có thể xem bài này nhé!
Đầu tiên chúng ta sẽ tạo thư mục src và dist như hình dưới đây:
Tiếp theo các bạn hãy đưa đoạn code dưới đây vào file gulpfile.js và tại terminal chạy lệnh “gulp”:
const { src, dest, parallel } = require("gulp");
const sass = require("gulp-sass");
const webpack = require("webpack-stream");
function configWP() {
return (
src("src/scss/main.scss")
.pipe(sass().on("error", sass.logError))
.pipe(dest("dist/css")),
src("src/js/main.js")
.pipe(
webpack({
output: {
filename: "root.js",
},
})
)
.pipe(dest("dist/js"))
);
}
exports.default = configWP;
Mình sẽ giải thích một chút về phần này. Tất cả các phần code CSS và JS chúng ta đều code ở trong thư mục src. Sau đó lệnh “gulp” sẽ giúp bạn biên dịch code và đưa ra file code ở trong thư mục dist. Chúng ta sẽ nhúng những file CSS và JS ở thư mục dist này vào theme để chạy. Các bạn đưa đoạn code dưới đây vào file “function.php” để nhúng CSS và JS vào theme:
function theme_enqueue_script_webpack()
{
wp_register_script('first', get_template_directory_uri().'/dist/js/root.js', array('jquery'), false, true);
wp_register_style('two', get_template_directory_uri().'/dist/css/main.css', false, false);
wp_enqueue_style('two');
wp_enqueue_script('first');
}
add_action('wp_enqueue_scripts', 'theme_enqueue_script_webpack');Nếu lúc chạy “gulp” bạn nào bị lỗi đỏ như trong hình thì hãy mở terminal bên ngoài tại thư mục thêm để chạy nhé :
Woocommerce API Authentication
Như vậy là chúng ta đã cấu hình xong source code cơ bản, tiếp theo chúng ta sẽ đi sử lý phần Woocommerce API Authentication. Khi các bạn muốn dùng Woo API thì trước tiên chúng ta phải cấu hình Woocommerce API Authentication nếu không sẽ không GET dữ liệu từ link API ra được.
Nếu bạn nào chưa có dữ liệu Sản phẩm trong Woo thì cài đặt theo mình dưới đây nhé ! Đầu tiên chúng ta vào Tool -> Import tìm WooCommerce products (CSV) bấm run importer.
Sau đó nó sẽ tự hiện ra màn hình import file của Product Woo, các bạn tìm file sample_products.csv trong plugin Woo theo đường dẫn plugins\woocommerce\sample-data và import vào nhé.
Vậy là chúng ta đã có sản phẩm demo trong Product của Woo. Bây giờ chúng ta quay lại source code nhé.
Các bạn mở Terminal nên chạy lệnh “npm install –save @woocommerce/woocommerce-rest-api“. Sau đó các bạn vào file JS chúng ta đã cấu hình bên trên và đưa đoạn code này vào :
const WooCommerceRestApi = require("@woocommerce/woocommerce-rest-api").default;
const api = new WooCommerceRestApi({
url: "http://localhost/nta-woocomere", // Đây là link web của bạn
consumerKey: "ck_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", // Đây là key mà chúng ta sẽ lấy trong WooComerce
consumerSecret: "cs_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", // Đây là Secret mà chúng ta sẽ lấy trong WooComerce
version: "wc/v3", // Đây là version WC
});
// Hiện List products
api
.get("products", {
per_page: 20, // 20 products per page
})
.then((response) => {
// Successful request
console.log("Response Status:", response.status);
console.log("Response Headers:", response.headers);
console.log("Response Data:", response.data);
console.log("Total of pages:", response.headers["x-wp-totalpages"]);
console.log("Total of items:", response.headers["x-wp-total"]);
})
.catch((error) => {
// Invalid request, for 4xx and 5xx statuses
console.log("Response Status:", error.response.status);
console.log("Response Headers:", error.response.headers);
console.log("Response Data:", error.response.data);
})
.finally(() => {
// Always executed.
});
Phần consumerKey và consumerSecret chúng ta sẽ lấy trong WooComerce, vì mỗi một website sẽ có phần này riêng để bảo mật nó cũng là Woocommerce API Authentication. Để lấy được 2 phần này chúng ta sẽ vào Woocommerce -> Settings -> Advanced -> REST API -> Create an API Key. Chúng ta nhập thông tin vào và sẽ lấy được ra 2 phần này sau đó đưa vào đoạn code bên trên nhé.
Sau khi xong tất cả chúng ta chạy lệnh “gulp” trên Terminal và ra load lại website của mình mở Console Website lên xem, nếu hiện ra dữ liệu thì là chúng ta đã hoàn thành rồi nhé:
Tổng kết
Vậy là Part 2 đã kết thúc. Nếu các bạn có bất kỳ câu hỏi gì thì đừng ngại hãy gửi tin về fanpage Wolfactive nhé ! Chúng mình sẽ giải đáp câu hỏi của bạn. Các bạn có thể theo dõi tình hình series Woo REST API tại đây. Mong là bài viết này đem được lại kiến thức cho mọi người. Hẹn gặp lại các bạn ở Part 3 nhé.