Trong bài này chúng ta sẽ sử dụng các kiến thức đã học và action hook và filter hook cùng với các hàm get dữ liệu , thêm sửa xóa các thẻ trong cấu trúc của sản phẩm chi tết sao cho nó giống với thiết kế frontend đã cắt.
Hiển thị ở trang chủ 1 sản phẩm cho dễ nhìn và chỉnh sửa. sửa số sp hiển thị trong hàm do_shortcode 12 > 1 sp.
Để xử lý được một sp vào file template plusgin :content-product.php chứa toàn bộ code liên quan đến việc hiển thị ra môt sản phẩm.
Tạo forder woocommerce trong theme và copy file content-product.php vào đó để định nghĩa lại các hàm trong đó.
Do hiển thị sp của woo boc trong các thẻ khác với cac thẻ của theme giao diện của mình nên cách hiển thị k thể giống nhau ta phải thay đổi các thẻ và class của woo phun dữ liệu sản phẩm ra. sử dụng action và filter để thay đổi.
bỏ phần ngôi sao đánh giá
tìm hàm xử lý hiển thị ngôi sao trong trang content-product.php copy về theme.
truy tung tìm ra file chứa vị trí khai báo và xử lý hàm đó trong plusgin/woocommerce
nếu chỉ thực hiện bỏ hiển thị thì k phải truy tung ta chỉ cần viết hàm remove bỏ đi hàm đó trong functions.php theme.
kết quả bỏ được phần ngôi sao đánh giá.
so sánh cấu trúc hiển thị sản phẩm
giao diện hiển thị sp woo: có thẻ li bọc ngoài bên trong có hai thẻ a bọc lấy các phần tử
giao diện theme mới đang làm: thẻ div class= col-sm-4 text-xs-center bọc ngoài thẻ div motsanphamchuan sau đó mới đến thẻ a class= duoi và thẻ div cùng cấp class= tren.
để thay đổi cấu trúc của woo ta thay đổi li bằng thẻ div bọc ngoài. dùng action để thay đổi
trong content-product.php ở trên có thẻ li bọc lấy có class = post-class để in ra nhiều class. Viết thẻ div bọc ngoài và xóa thẻ li cũ đi. viết thẻ div class= col-sm-4 text-xs-center bọc ngoài xóa thẻ li đi trong content-product.php
viêt div class = motsanphamchuan ngay sau div class= col-sm-4 text-xs-center.
đổi class của thể a của woo thành class= duoi
vào content-product.php
truy tìm tung tích thẻ a, trong hinh dưới là tên hàm xử lý.
copy tên hàm tìm trong plusgin woo
copy hàm đó về pate vào functions.php của theme, ta không thể đinh nghĩa lại hàm đó vì đã định nghĩa file gốc nên dù có sửa trực tiếp đổi class= duoi thì vẫn k được.
tiếp theo ta phải định nghĩa với tên hàm mới, remove hàm cũ đi rồi định nghĩa hàm mới, và viết hàm add_action với tên hàm mới định nghĩa gan với hook cũ:
xử lý tương tự với hàm xử link close, ta được kết quả cấu trúc thẻ của woo đã giống theme
cấu trúc bên trong thẻ a
bên trong thẻ a của theme có thẻ span class=onsale, của woo cũng có cấu trúc span class=onsale trùng
như vậy mà ta không thể thay đổi css của woo nên ta phải đổi lại class của ta thành span class= giamgia. rồi đổi cấu trúc của woo thành class= giamgia.
tim ham sử lý onsale trong content product của woo.
vị trí tìm thấy lại là hàm load một file khác.
copy file đó về theme
mở file copy về tìm class onsale và đổi thành class giamgia
kết quả đã đổi class thành giamgia
cấu trúc thẻ và class của nút thêm giỏ hàng:
woo: thẻ a có class =button product_type_simple....
theme:div class=tren xong moi den the a ben trong a co the i
tìm hàm xử lý add to cart
truy tim hàm này trong plusgin/woocommerce tìm được vị trí của hàm
hàm này lại load tới trang add-to-cart.php, copy về theme và mở lên để chỉnh sửa trong này
thêm thẻ div class ="tren" bọc ngoài thẻ a mạc định
copy phần tử thẻ i vào bên trong thẻ a như cấu trúc của theme
do vẫn bị ảnh hưởng bởi các class của woo nên nút thêm giỏ hàng k giống giao diện nên ta tìm và bỏ class đó đi, hoặc đổi lại class thành data-class
lưu ý cho thẻ i nằm trong thẻ a
di chuột lên có ảnh trắng mờ như trong theme
woo: cấu trúc không có thẻ div bọc ngoài thẻ ảnh
theme: có thẻ span class = anh1sp bọc lấy thẻ img
để thay đổi woo sao cho giống cấu trúc theme ta phải thêm một div có class là anh1sp bọc ngoài ảnh,
phải tìm được cái ảnh đó hiển thị là do hàm nào trong woo xử lý hiển thị ra ảnh.
tìm ra vị trí tên hàm xử lý hiển thị ảnh, nó lại xử lý bởi hàm khác
hàm xử lý in ra ảnh sản phẩm
copy tên hàm đó truy tung tiếp tìm ra hàm in ảnh sản phẩm
định nghĩa lại tên ham là thayanh. Hàm này return về chính ảnh đó, nên không thể thêm thẻ html vào trước nó như cách thông thường nên ta phải thêm một phần tử trước nó. định nghĩa một phần tử $output <span class="anh1sp" tiếp theo định nghĩa $output.= get_the_post_thumbnail tiếp là $output .="</span>"
viết hàm remove hàm cũ đi
add hàm thayanh moi vào hook cũ
thêm lại class cho đúng với class của theme
xử lý hiển thị danh mục sản phẩm tương ứng với mỗi sản phẩm
khi danh mục không có hook hàm nào xử lý bên trong trang contet-product.php mà giao diện yêu cầu hiển thị nên ta phải tự định nghĩa action xử lý.
cách sử dụng hàm này:
kiểm tra phần tử của danh mục, ta phải bỏ dòng code đó đi để in tên danh mục trong hàm.
định nghĩa một hàm tên là themdanhmuc.
khai báo hàm global $product chứa toàn bộ thông tin sản phẩm.
đặt tên biến $danhmuc = wp_get_post_terms($product->id,'product_cat');
echo biến $danhmuc trong vong lap foreach vì 1 sp có thể thuộc nhiều danh mục. và in ra tên danh mục nên để là ->name.
add_action vào hook
in ra một cái danh mục thì phải css lại:
cho cả hai class .cat display: none;
để cái class .cat:nth-child(4) display: block;
để cho các sp nằm ngang theo thiết kế tránh hiện tượng sản phẩm nằm dọc
kiểm tra cấu trúc thẻ cua theme thấy có thẻ div row bọc lấy 3 cột sản phẩm, trong giao diện woo phun ra không có div row.
tìm tên hàm xử lý hiển thị sản phẩm trong file plusgin/archive-product.php (file này dẫn ra toàn bộ sp) không có thì vào tìm trong plusgin/loop hai file loop-start.php và loop-end.php copy về theme của mình, trong hai file này ta thay thẻ ul bằng thẻ div row.
xử lý hêt hàng cho khối sản phẩm
trong theme nút tạm hết hàng có class ofs.
Tìm phần hàm xử lý các nút thêm sản phẩm tạm hết hàng trong file hiển thị sản phẩm content-product.php
vị trí của hàm
copy noi dung ham xu ly hien thị nút thêm giỏ hàng về functions.php theme
hàm kiểm tra sản phẩm còn hàng hay không
để xử lý hết hàng ta làm theo các bước:
remove ham cũ đi, add_action ham tên mới đổi vào, thêm câu điều kiện ở trên if(!$product->is_in_stock()) nếu không có hàng thi thực hiện lệnh.
vào theme kiểm tra phần tử của nút tạm hết hàng, copy phần tử của nút tạm hết hàng về dán vào dòng lệnh thực thi nếu câu điều kiện nếu không có hàng xảy ra.
viết full code xử lý hiển thị nút tạm hết hàng
phần cuối là tìm hiểu về nhãn-label
tổng quan về nhãn trong woocommerce
trong nhân của woo k hỗ trợ nhãn, ta phải tải plusgin thêm nhãn
css lại theo nhãn của plusgin ,
vào phần theme kiểm tra phần tử của nhãn, xem css và copy thuộc tính css.
vào phần admin kiểm tra phần tử của nhãn, xem css và pate dòng thuộc tính css còn thiếu của class mạc định mà plusgin nhãn xuất ra sao cho giống với thuộc tính của class nhãn của theme.
rồi copy toàn bộ css vào dán trong tệp giao diện trong admin.
thêm cả thuộc tính cho nhãn đã viết vào css class của plusgin trong phần nhãn có phần chỉnh sửa css ta thêm code css vào để hiển thị theo như giao diện.
Nhận xét :
Đăng nhận xét