https://nordiccoder.com/blog/thiet-ke-giao-dien-ung-dung-web-bang-react-va-wordpress/
Last updated
Nếu bạn đang tìm kiếm một giải pháp hướng nội dung, bài viết này sẽ giải thích cách bạn có thể xây dựng một SPA WordPress theme bằng React trong lập trình frontend. Hãy tiếp tục đọc để tìm hiểu lý do tại sao đây là một lựa chọn tốt cho công nghệ back-end của ứng dụng web. Vậy, bạn đã tự đào tạo mình thành một kỹ sư lập trình web và giờ muốn xây dựng một cửa hàng trực tuyến nhanh chóng cho khách hàng của mình. Danh sách sản phẩm sẽ xuất hiện ngay lập tức và việc tìm kiếm sẽ lãng phí không quá một giây. Liệu Đó có phải là quá mơ mộng?
Sự thật là không. Ít nhất không có gì là không thể đạt được với sự kết hợp giữa REST API của WordPress và React, một thư viện JavaScript hiện đại.
Đúng vậy, WordPress REST API sẽ giúp bạn xây dựng nền tảng back-end cho ứng dụng web của mình. Đây là một lựa chọn tốt cho công nghệ back-end của ứng dụng web nếu bạn đang xây dựng một giải pháp hướng nội dung. WordPress cũng sẽ tương tác trơn tru với các công nghệ khác; bạn có thể sử dụng Node.js làm trọng tâm của ứng dụng để kết nối với các dịch vụ RESTful khác.
WordPress REST API là một chức năng mạnh mẽ cho WordPress, giờ đây có thể được gọi là web application framework – không chỉ là một CMS. Giờ đây, front-end và back-end đã được tách rời hoàn toàn, WordPress có thể được sử dụng làm back-end cho ứng dụng di động hoặc là back-end cho bất kỳ hệ thống nào tập trung vào nội dung.
Nhưng tại sao lại là WordPress? Lý do: Bạn sẽ ngạc nhiên về các chức năng có sẵn của WordPress. Bạn sẽ có được bộ công cụ quản lý user, quản lý media mạnh mẽ cùng một bộ API thân thiện với lập trình viên để mở rộng công việc của mình.
Trong bài viết này, tôi sẽ hướng dẫn bạn xây dựng một SPA (Single Page Application) WordPress theme bằng thư viện JavaScript có tên React, kết nối với WP REST API.
Bài viết này giả định rằng bạn đã quen thuộc với các API WordPress hiện có khác nhau, đặc biệt là các API thúc đẩy sự phát triển của các theme làm tăng tính thẩm mỹ của trang web và các chức năng cho các plugin của trang web. Tôi cũng cho rằng bạn đã thiết lập môi trường cho WordPress, chẳng hạn như LAMP stack trong môi trường Linux hoặc MacOS.
Tuy nhiên, để đơn giản, tôi sẽ chỉ đề cập đến các đường dẫn tuyệt đối như có thể nhìn thấy với nền tảng XAMPP được sử dụng với Windows.
Bây giờ, hãy tạo một phiên bản của WordPress trong localhost, đặt tên là ‘Celestial’. Đó là tên của WordPress theme mà chúng ta sẽ sử dụng để đặt hướng xây dựng các theme trong tương lai với các ứng dụng web được cung cấp bởi WordPress REST API. Bạn có thể đã quen thuộc với hệ thống phân cấp template rất được yêu thích của WordPress, nhưng với REST API, bạn có cơ hội khám phá điều gì đó khác biệt hơn!
Chúng ta cần tạo một thư mục cho theme trong wp-content\themes . Đi đến C:\xampp\htdocs\celestial\wp-content\themes\ (hoặc tương tự) và tạo một thư mục celestial . Thêm các tệp này trong thư mục theme celestial :
index.php Tập tin catch-all cho theme.
style.css Tập tin này chứa thông tin về theme (và không phải CSS thực tế).
functions.php Để viết chức năng và nhập tập tin CSS và JS.
Thêm một tệp hình ảnh có tên screenshot.jpg nếu bạn muốn một hình ảnh cho theme hiển thị bên trong dashboard.
Lưu ý : Code cho mỗi tệp dài một vài dòng và có thể được tìm thấy trên GitHub.
Tiếp theo, đăng nhập vào WordPress Dashboard, đi đến Appearance → Themes và chọn ‘Celestial’ làm theme. Bây giờ nền tảng cơ bản đã sẵn sàng, chúng ta hãy bắt đầu tạo theme.
Bạn có thể chọn theme ‘Celestial’ mà bạn đã tạo từ theme panel trong dashboard.
React là một thư viện UI rất phổ biến được Facebook hỗ trợ và duy trì. Theo kết quả Stack Overflow’s Developer Survey 2017, thì React được yêu thích nhất bởi các lập trình viên.
React: Một thư viện JavaScript để xây dựng giao diện người dùng.
Để bắt đầu dự án, bạn cần khởi tạo dự án dưới dạng dự án NPM (Node Package Manager). Điều này được thực hiện với lệnh npm init trong terminal (sau khi đã cài đặt Node.js và NPM trên máy tính của bạn). Khởi tạo dự án sẽ nhắc bạn về thông tin cấu hình nhất định. Sau khi khởi tạo thành công, NPM sẽ tạo tệp package.json trong thư mục gốc của theme. Tập tin này sẽ bao gồm các chi tiết dự án và tất cả các dependency khác.
React hiện thuộc giấy phép MIT, vì vậy chúng ta sẽ sử dụng phiên bản 16 của React làm thư viện JavaScript cho dự án này. React có một số tính năng thú vị, chẳng hạn như Virtual DOM (đại diện cho tài liệu trong bộ nhớ) và có một loạt các công cụ bao quanh nó như React Router. React cũng được sử dụng trong Project Calypso của WordPress – Dashboard cho WordPress.com.
Bây giờ chúng ta sẽ cài đặt các gói NPM cần thiết cho dự án:
1. Chạy lệnh npm install –save react react-dom trong terminal và nhấn enter để cài đặt các gói.
Sử dụng npm để cài đặt React và Reac-dom.
Vì chúng ta đang xây dựng theme dưới dạng Single Page Application (SPA), chúng ta cần sự trợ giúp của một công cụ như Webpack. Chúng ta sẽ viết code dưới dạng các component khác nhau và Webpack sẽ giúp chúng ta đóng gói tất cả chúng lại với nhau và xuất chúng dưới dạng tệp .js hoặc .css. Nói tóm lại, nó là một module bundler. Webpack trước tiên cần được cài đặt trên máy tính của bạn. Để làm điều đó, một lần nữa chúng ta có thể sử dụng NPM.
2. Chạy lệnh npm install -g webpack để có phiên bản Webpack ổn định mới nhất được cài đặt trong hệ thống của bạn. Tiếp theo, chúng ta sẽ cài đặt các gói NPM hỗ trợ Webpack trong ứng dụng.
3. Chuyển đến tệp package.json trong repo git của tôi và sao chép tất cả phần còn lại của các dependency từ đó vào dependency của tệp package.json của bạn. Sau đó chạy npm install lại để cài đặt tất cả các gói trong package.json.
{ “name”: “celestial”, “version”: “1.0.0”, “description”: “A basic theme using the WordPress REST API and React”, “main”: “index.js”, “dependencies”: { “babel-core”: “^6.26.0”, “babel-loader”: “^7.1.2”, “babel-preset-es2015”: “^6.24.1”, “babel-preset-react”: “^6.24.1”, “css-loader”: “^0.28.7”, “extract-text-webpack-plugin”: “^3.0.1”, “file-loader”: “^1.1.5”, “image-webpack-loader”: “^3.4.2”, “node-sass”: “^4.5.3”, “path”: “^0.12.7”, “react”: “^16.0.0”, “react-dom”: “^16.0.0”, “react-router-dom”: “^4.2.2”, “sass-loader”: “^6.0.6”, “style-loader”: “^0.19.0”, “url-loader”: “^0.6.2”, “webpack”: “^3.6.0” }, “devDependencies”: {}, “scripts”: { “build”: “webpack”, “watch”: “webpack –watch” }, “keywords”: [ “blog”, “decoupled”, “react”, “rest-api” ], “author”: “Muhammad Muhsin”, “license”: “GPL-3.0” }
Trên đây là danh sách tất cả các gói bắt buộc trong tệp package.json cho dự án này.
4. Sao chép các cấu hình từ GitHub và dán nó vào tệp config.js của thư mục theme của bạn.
var ExtractTextPlugin = require(“extract-text-webpack-plugin”); var path = require(‘path’);
module.exports = { entry: { app: ‘./src/index.jsx’ }, output: { path: path.resolve(__dirname, ‘dist’), filename: ‘[name].js’ }, module: { rules: [ { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: ‘style-loader’, use: [‘css-loader’,’sass-loader’], publicPath: ‘dist’ }) }, { test: /\.jsx?$/, exclude: /node_modules/, use: ‘babel-loader’ }, { test: /\.(jpe?g|png|gif|svg)$/i, use: [ ‘file-loader?name=[name].[ext]&outputPath=images/&publicPath=http://localhost/celestial/wp-content/themes/celestial/dist/images’, ‘image-webpack-loader’ ] }, { test: /\.(woff2?|svg)$/, loader: ‘url-loader?limit=10000&name=fonts/[name].[ext]’ }, { test: /\.(ttf|eot)$/, loader: ‘file-loader?name=fonts/[name].[ext]’ } ] }, resolve: { extensions: [‘.js’, ‘.jsx’] }, plugins: [ new ExtractTextPlugin({ filename: “style.css”, allChunks: true }) ] }
Quan trọng : Xin lưu ý rằng module.exports → module → rules[3] → use → publicPath có thể thay đổi tùy theo vị trí hình ảnh dist của dự án của bạn trong localhost. Nếu điều này là sai, hình ảnh có thể không hiển thị chính xác trong ứng dụng web.
5. Sau đó, các lệnh này có thể được sử dụng để biên dịch dự án:
webpack hoặc npm run build để biên dịch dự án, hoặc
webpack –watch hoặc webpack –watch npm run watch để biên dịch dự án và theo dõi các thay đổi.
Lưu ý : Để hiểu rõ hơn về Webpack, hãy đọc bài viết này của Joseph Zimmerman trên Tạp chí Smashing .
WordPress REST API đi kèm với nhiều endpoint khác nhau để tìm nạp bài đăng, trang, media, v.v. Tuy nhiên, không phải lúc nào nó cũng có tất cả các chi tiết trong respond của mình. Chẳng hạn, method của bài đăng không đưa ra URL của hình ảnh đại diện hoặc tên tác giả. Do đó, chúng ta phải thực hiện các cuộc gọi riêng cho từng yếu tố này.
Truy cập dữ liệu trang web WordPress của bạn thông qua HTTP REST API.
Nhưng nếu bạn muốn dữ liệu của mình xuất hiện trong response của bài viết thì sao? Đó là nơi mà việc mở rộng REST API xuất hiện. Đoạn code sau sẽ thêm hai biến bổ sung để response lại request của bài viết , đó là author_name và featured_image_src author_name . Code này nằm trong tệp functions.php.
// Add various fields to the JSON output function celestial_register_fields() { // Add Author Name register_rest_field( ‘post’, ‘author_name’, array( ‘get_callback’ => ‘celestial_get_author_name’, ‘update_callback’ => null, ‘schema’ => null ) ); // Add Featured Image register_rest_field( ‘post’, ‘featured_image_src’, array( ‘get_callback’ => ‘celestial_get_image_src’, ‘update_callback’ => null, ‘schema’ => null ) ); // Add Published Date register_rest_field( ‘post’, ‘published_date’, array( ‘get_callback’ => ‘celestial_published_date’, ‘update_callback’ => null, ‘schema’ => null ) ); } add_action( ‘rest_api_init’, ‘celestial_register_fields’ );
function celestial_get_author_name( $object, $field_name, $request ) { return get_the_author_meta( ‘display_name’ ); } function celestial_get_image_src( $object, $field_name, $request ) { if($object[ ‘featured_media’ ] == 0) { return $object[ ‘featured_media’ ]; } $feat_img_array = wp_get_attachment_image_src( $object[ ‘featured_media’ ], ‘thumbnail’, true ); return $feat_img_array[0]; } function celestial_published_date( $object, $field_name, $request ) { return get_the_time(‘F j, Y’); }
Mở rộng REST API với các biến bổ sung trong tệp functions.php.
Có một số WordPress contants nhất định (hay còn gọi là ‘biến’) mà chúng ta sẽ sử dụng trong suốt ứng dụng React. Đây sẽ là thông tin về các route khác nhau của ứng dụng (và sau này là các route cụ thể của WooCommerce).
Biến này được định nghĩa trong tệp functions.php. Nó sẽ được gọi là ‘CelestialSettings’ và được thêm vào celestial-scripts , phần xử lý cho tệp app.js:
wp_enqueue_script( ‘celestial-script’, get_stylesheet_directory_uri() . ‘/dist/app.js’ , array(), ‘1.0’, true );
$url = trailingslashit( home_url() ); $path = trailingslashit( parse_url( $url, PHP_URL_PATH ) );
wp_scripts()->add_data( ‘celestial-script’, ‘data’, sprintf( ‘var CelestialSettings = %s;’, wp_json_encode( array( ‘title’ => get_bloginfo( ‘name’, ‘display’ ), ‘path’ => $path, ‘URL’ => array( ‘api’ => esc_url_raw( get_rest_url( null, ‘/wp/v2’ ) ), ‘root’ => esc_url_raw( $url ), ), ‘woo’ => array( ‘url’ => esc_url_raw( ‘https://localhost/celestial/wp-json/wc/v2/’ ), ‘consumer_key’ => ‘ck_803bcdcaa73d3a406a0f107041b07ef6217e05b9’, ‘consumer_secret’ => ‘cs_c50ba3a77cc88c3bf46ebac49bbc96de3a543f03’ ), ) ) ) );
Truyền các biến WordPress (PHP) vào frontend.
Đoạn code trên cho thấy một ví dụ về việc đưa các biến WordPress (PHP) lên frontend, một kỹ thuật quan trọng và rất hữu ích khi xây dựng một theme tách rời. Biến đối tượng này giữ tiêu đề trang web, đường dẫn, URL cho API và root và ba biến liên quan đến WooCommerce (sẽ giải thích sau).
React khác với phần còn lại của các thư viện JavaScript lớn khác. Ý tôi là, chúng ta thường viết JavaScript trong HTML của mình. Tuy nhiên, khi nói đến React, chúng ta viết HTML bên trong code JavaScript của mình. Để chính xác hơn, chúng ta viết JSX bên trong JS. JSX rất giống với HTML nhưng có một vài điểm khác biệt. Thuộc tính class được viết dưới dạng className chẳng hạn. Điều này sau đó được chuyển đổi thành JavaScript đơn giản thông qua Webpack và Babel và được lưu trong app.js.
Tuy nhiên, có một vài hạn chế khi viết JSX. Chẳng hạn, chúng ta chỉ có một child trong method render() , sẽ đóng vai trò là root element cho Component. Tuy nhiên, ưu điểm của nó là dễ debug hơn. Chúng ta có thể biết chính xác nơi mắc lỗi, trong khi trong HTML thông thường, lỗi thường không được hiển thị rõ ràng. Chúng ta sẽ viết JSX cho dự án này và do đó, các tệp JavaScript sẽ có phần mở rộng là .jsx . Tuy nhiên, nó cũng có thể là .js nếu bạn thích như vậy.
Tạo các tệp sau trong thư mục src :
index.jsx (tệp chính và tệp chứa cấu hình React Router)
header.jsx (header component)
footer.jsx (footer component)
posts.jsx (để lưu trữ bài viết)
post-list.jsx (component cho một bài đăng riêng lẻ trong posts.jsx )
post.jsx (cho một bài đăng)
products.jsx (chứa tất cả các sản phẩm từ WooCommerce)
product.jsx (hiển thị một sản phẩm duy nhất từ WooCommerce)
style.scss (chứa tất cả CSS code ở định dạng SASS)
Cấu trúc thư mục của thư mục src trong dự án Celestial.
Tệp index.jsx là root của dự án. Ý tôi là, index.jsx chứa component App được render cho DOM.
import { render } from ‘react-dom’; // importing render from ReactDOM
const App = () => ( // defining the routes
<div id=”page-inner”>
<Header />
<div id=”content”>
<Switch>
<Route exact path={CelestialSettings.path} component={Posts} /> // the root path
</Switch>
</div>
<Footer />
</div>
);
// React Router
const routes = (
<Router>
<Route path=”/” component={App} />
</Router>
);
render( // rendering to the DOM by replacing #page with the root React component
(routes), document.getElementById(‘page’) // rendering the route
);
Các component khác được chỉ định trong React Router và sẽ được tải khi truy cập các route khác nhau.
Đây là cách chúng ta viết các modular component trong đó tất cả các component khác nhau cuối cùng kết thúc tại index.jsx .
Bạn sẽ nhận thấy các component được viết theo một trong hai cách sau:
const App = () => (
class Post extends React.Component {
Cách đầu tiên là cách chúng ta viết Stateless Component và cách thứ hai là một ví dụ về Stateful Component. Stateless có nghĩa là component đó không có ‘state’ trong đó. ‘state’ về cơ bản là một biến có thông tin trong component và mỗi khi biến đó thay đổi, component đó được render lại. Stateful Component còn được gọi là ‘Smart Component’. Do đó, các biến state được sử dụng cho giao tiếp bên trong component đó.
Loại thứ hai, Stateless Component không có biến state trong chúng và đôi khi được gọi là ‘Dumb Component’. Tuy nhiên, giống như các Stateful Component, chúng có ‘props’, là các thuộc tính được truyền lại cho chúng từ parent component.
Các Stateful component có các method vòng đời của React trong khi Stateless chỉ có method render() là method mặc định cho nó.
Đây là các method được gọi ở các giai đoạn khác nhau trong vòng đời của component, chúng ta có thể ghi đè để chạy code của chính mình trong các trường hợp đó. Chúng ta đang sử dụng các phương pháp sau trong ứng dụng của mình:
constructor() Được gọi trước khi một component được gắn kết.
componentDidMount() Được gọi ngay sau khi một component được gắn kết.
render() Method được gọi để hiển thị nội dung JSX (HTML).
componentDidUpdate() Được gọi khi component được cập nhật.
componentWillUnmount() Được gọi khi một component sẽ được gỡ bỏ.
Lưu ý : Tìm hiểu thêm về Component và vòng đời của chúng.
Chúng ta sẽ sử dụng JavaScript Promises để lấy dữ liệu từ WordPress REST API của mình. Đầu tiên, chúng ta có URL tới REST API trong functions.php, nơi chúng ta đã thêm nó dưới dạng biến JavaScript mà chúng ta có thể truy cập từ frontend.
Chúng ta sẽ sử dụng method fetch API của JavaScript để lấy dữ liệu từ các endpoint khác nhau. Chúng ta đang thêm một loader để hiển thị cho người dùng trong khi nội dung đang được tìm nạp:
getMorePosts() { var that = this; var totalPages;
// adding a loader jQuery(“#loader”).addClass(“active”);
this.setState({ page: this.state.page + 1 });
fetch(CelestialSettings.URL.api + “/posts/?page=” + this.state.page) .then(function (response) { for (var pair of response.headers.entries()) {
// getting the total number of pages if (pair[0] == ‘x-wp-totalpages’) { totalPages = pair[1]; }
if (that.state.page >= totalPages) { that.setState({ getPosts: false }) } } if (!response.ok) { throw Error(response.statusText); } return response.json(); }) .then(function (results) { var allPosts = that.state.posts.slice(); results.forEach(function (single) { allPosts.push(single); }) that.setState({ posts: allPosts });
// removing the loader jQuery(“#loader”).removeClass(“active”);
}).catch(function (error) { console.log(‘There has been a problem with your fetch operation: ‘ + error.message); jQuery(“#loader”).remove(); }); }
Tìm nạp dữ liệu từ các endpoint khác nhau, với loader để chỉ ra quá trình đang chạy.
React Router là thư viện sẽ xử lý client-side routing cho ứng dụng. Có thể chạy server-side routing với WordPress, nhưng để đạt được trải nghiệm SPA thực sự, chúng ta cần sự trợ giúp của React Router.
Kể từ phiên bản 4, React Router đã được chia thành ba gói: react-router , react-router-dom và react-router-native . Chúng ta sẽ sử dụng react-router-dom cho dự án này vì đó là cái được sử dụng trong các ứng dụng web.
Vì react-router-dom đã được cài đặt, chúng ta có thể ghi cấu hình router bên trong tệp index.jsx . Code sẽ như sau:
const App = () => ( <div id=”page-inner”> <Header /> <div id=”content”> <Switch> <Route exact path={CelestialSettings.path} component={Posts} /> <Route exact path={CelestialSettings.path + ‘posts/:slug’} component={Post} /> <Route exact path={CelestialSettings.path + ‘products’} component={Products} /> <Route exact path={CelestialSettings.path + ‘products/:product’} component={Product} /> <Route path=”*” component={NotFound} /> </Switch> </div> <Footer /> </div> );
// Routes const routes = ( <Router> <Route path=”/” component={App} /> </Router> );
render( (routes), document.getElementById(‘page’) );
Cấu hình router trong tệp index.jsx.
Đoạn code trên sẽ đảm nhiệm tất cả các routing, được xử lý ở phía client. Dấu * trong dòng cuối cùng nói rằng bất kỳ route nào khác không được đề cập ở trên sẽ đưa người dùng đến trang ‘404 Not found’.
Thẻ <Link to=””> được sử dụng thay vì thẻ <a href=””> để liên kết giữa các trang khác nhau bằng React Router:
<div className=”navbar-nav”> <Link className=”nav-item nav-link active” to={CelestialSettings.path} >Home <span className=”sr-only”>(current)</span></Link> <Link className=”nav-item nav-link” to={CelestialSettings.path + “products/”} >Products</Link> </div>
Sử dụng thẻ <Link to=””> để liên kết giữa các trang khác nhau.
Bây giờ bạn đã tạo ra theme, đã đến lúc thêm một số dữ liệu. Một cách để thêm dữ liệu là tạo nội dung của riêng mình. Tuy nhiên, có một cách dễ dàng hơn (và tốt hơn) để thêm dữ liệu vào trang web WordPress. Phương pháp này nhập dữ liệu placeholder từ một nguồn bên ngoài:
Truy cập https://codex.wordpress.org/Theme_Unit_Test và tải xuống theme unit test data
Đi đến Tools > Import > WordPressđể cài đặt WordPress importer.
Sau khi WordPress importer được cài đặt, nhấp vào Run Importer.
Nhấp vào ‘ Choose file ‘ trong importer
Chọn tệp đã tải xuống và nhập WordPress Theme Unit Test Data
Bây giờ bạn phải chọn tệp theme-unit-test-data.xml và tất cả nội dung sẽ hiện trên trang web của bạn.
Khi tất cả các dữ liệu được nhập chính xác.
Bây giờ, chúng ta đã sẵn sàng quản lý cửa hàng của chúng ta bằng React. Chúng ta sẽ sử dụng các tệp products.jsx và product.jsx cho mục đích này, có code tương tự với posts.jsx và post.jsx tương ứng.
Chúng ta sẽ thêm ba biến nữa vào CelestialSettings trong ‘woo’ (xem A Global JavaScript Variable):
URL
consumer_key
consumer_secret
Consumer key và Consumer secret phải được tạo từ Dashboard → WooCommerce → Settings → API → Keys/Apps.
Đối với woo URL, bạn phải thêm thủ công (vì WooCommerce chỉ cho phép chuyển qua SSL, thêm URL bằng https, ví dụ https://localhost/celestial/wp-json/wc/v2/ ).
Sao chép Consumer key và Consumer secret và dán chúng vào những vị trí thích hợp trong functions.php . Điều này sẽ đóng vai trò xác thực để truy cập WooCommerce thông qua lệnh gọi API.
Truy cập WooCommerce REST API documentation để biết thêm thông tin về API của nó. Tệp products.jsx có code để them các sản phẩm và cửa hàng. Các sản phẩm có thể được thêm bởi một admin từ dashboard. Chỉ cần truy cập Dashboard → Products→ Add New và nhập chi tiết sản phẩm.
Thêm sản phẩm mới thông qua dashboard.
Khi bạn nhấp vào một sản phẩm nhất định, bạn sẽ được đưa đến trang product.jsx:
Trang sản phẩm riêng lẻ được hiển thị dựa trên tệp product.jsx
Code cho trang trên tương tự như post.jsx :
renderProduct() { return ( <div className=”card”> <div className=”card-body”> <div className=”col-sm-4″><img className=”product-image” src={this.state.product.images ? this.state.product.images[0].src : null} alt={this.state.product.images ? this.state.product.images[0].alt : null } /></div> <div className=”col-sm-8″> <h4 className=”card-title”>{this.state.product.name}</h4> <p className=”card-text”><strike>${this.state.product.regular_price}</strike> <u>${this.state.product.sale_price}</u></p> <p className=”card-text”><small className=”text-muted”>{this.state.product.stock_quantity} in stock</small></p> <p className=”card-text”>{jQuery(this.state.product.description).text()}</p> </div> </div> </div> ); }
Code cho tệp product.jsx “alt =” Code cho tệp product.jsx
Để theme hoạt động chính xác, chúng ta phải đặt các permalinks sau trong Dashboard → Settings → Permalinks:
Trong Common Settings→ Custom Structure: http://localhost/celestial/posts/%postname%/
Trong Product permalinks→ Custom base: /products/
Nếu bạn không đặt permalinks như trên, theme có thể không hoạt động như mong muốn.
Bản Sửa Lỗi WooCommerce
Khi bạn đi đến localhost/celestial/products, rất có thể bạn sẽ nhận được một khoảng trống nơi các sản phẩm được tải. Điều này xảy ra vì WooCommerce cần các request được xác thực trong khi localhost của chúng ta không phải là https. Để khắc phục việc này:
1. Truy cập https://localhost/celestial/wp-json/wc/v2/products. Điều này sẽ làm hiện lên cảnh báo:
WooCommerce yêu cầu các request được xác thực và sẽ hiển thị cảnh báo nếu localhost không phải là https
2. Nhấp vào ADVANCED > Proceed to localhost (unsafe).
3. Bây giờ, nếu bạn quay lại trang sản phẩm, các mục sẽ được hiển thị chính xác.
Lưu ý : Nếu bạn đang sử dụng Valet trên máy Mac, bạn phải chạy Valet Secure trên trang web của mình để bảo mật trang web cục bộ bằng chứng chỉ TLS. Đây là một cách khác để khắc phục vấn đề.
ScrollMagic là một thư viện cho phép chúng ta thực hiện một số hành động nhất định khi cuộn qua trang. Để sử dụng ScrollMagic, chúng ta sẽ liệt kê thư viện JavaScript ScrollMagic trong functions.php. Chúng ta đang sử dụng ScrollMagic cho hai trường hợp trong dự án này:
Để tải các bài đăng kiểu lazy-load trong component jsx:
componentDidMount() { var that = this; window.onbeforeunload = function () { window.scrollTo(0, 0); }
// init ScrollMagic Controller that.state.controller = new ScrollMagic.Controller();
// build scene var scene = new ScrollMagic.Scene({ triggerElement: “#colophon”, triggerHook: “onEnter” }) .addTo(that.state.controller) .on(“enter”, function (e) { if (that.state.getPosts && that.getMorePosts !== null) { that.getMorePosts(); } }); }
Tải bài viết kiểu lazy-load trong component posts.jsx
Để hiển thị hình động fade-in cho các bài đăng xuất hiện bằng cách cuộn qua các bài đăng và sản phẩm trong các component jsxvà products.jsx tương ứng:
componentDidUpdate() { var FadeInController = new ScrollMagic.Controller(); jQuery(‘.posts-container .col-md-4.card-outer’).each(function () {
// build a scene var FadeInScene = new ScrollMagic.Scene({ triggerElement: this.children[0], reverse: false, triggerHook: 1 }) .setClassToggle(this, ‘fade-in’) .addTo(FadeInController); }); }
Áp dụng hình động fade-in cho các bài đăng xuất hiện khi cuộn trang
Bây giờ chúng ta đã sẵn sàng để xem theme từ frontend. Điều hướng đến localhost/celestial trên trình duyệt web của bạn và xem theme của bạn hoạt động.
Xin chúc mừng. Bây giờ bạn đã tạo thành công theme!
Nếu bạn thấy điều này hữu ích, bạn có thể xem các theme WordPress tách rời tuyệt vời khác được xây dựng bằng các thư viện / framework JavaScript hiện đại:
Foxhound: Theme tách rời đầu tiên được vào WordPress themes repository. Được viết bởi Kelly Dwan, theme này sử dụng React, Redux và React Router.
Anadama React: Một theme khác của cùng tác giả, nhưng sử dụng Flux thay vì Redux và Page thay vì React Router.
Picard: Được viết bởi chính Automattic để thể hiện khả năng của WordPress REST API.
React Verse: Một theme React và Redux tôi đã viết dựa trên Foxhound.
Bạn muốn trở thành lập trình viên chuyên nghiệp trong thời gian ngắn nhất? Bạn muốn có việc làm IT mức lương khủng sau khoá học? Hãy đăng ký các khoá học lập trình online và offline tại Nordic Coder – Trung tâm dạy lập trình uy tín và chuyên nghiệp. Ngoài ra, Nordic Coder còn là cầu nối nghề nghiệp IT giữa học viên và với các công ty công nghệ hàng đầu Việt Nam sau các khoá học lập trình.
Design thinking là gì? Tổng quan về design thinking29/09/2020Hosting miễn phí tốt nhất28/09/2020Thuê hosting web giá rẻ ở đâu?28/09/2020
