Với sự phát triển của thương mại điện tử ngày nay, lựa chọn và thiết kế một trang web bán hàng trở nên phổ biến hơn. Chọn và thiết kế căn cứ vào nhu cầu thiết kế và sử dụng của khách đến với website. Xây dựng một web đơn giản không tốn quá nhiều chi phí nhưng vẫn đảm bảo hiển thị các sản phẩm, giá và đặt hàng.
Hướng dẫn tạo giỏ hàng trong wordpress và form liên hệ
Mục Paypal and shopping cart settings điền một số thông tin:
Shopping Cart title: tiêu đề hiện lên trên nội dung giỏ hàng.
Text/Image to Show When Cart Empty: Nhập văn bản khi giỏ hàng trống hoặc URL ảnh muốn hiển thị.
Currency: đơn vị tiền tệ. VD: VNĐ, USD,…
Currency Symbol: ký hiệu đơn vị tiền. VD: ở việt nam là: đ hoặc vnđ
Add to Cart button text or Image: nhãn nút thêm vào giỏ hàng, mặc định: Add to Cart.
Hoangweb checkout process URL: Địa chỉ page thanh toán, mục này bạn tạo 1 page thanh toán rồi copy page slug vào đây. VD: thanh-toan Giải thích: Khi nhấn nút thanh toán ở phần cuối giỏ hàng sẽ chuyển đến trang này, đồng thời gửi tham số POST vào page. Nếu trang sử lý thanh toán khác domain thì nhập đầy đủ URL. VD: http://domain2.com/thanh-toan
Nhấn Update options để lưu lại.
Sử lý thanh toán
Nhập sản phẩm thông qua bài viết, sử dụng custom field để thêm giá và những thuộc tính khác cho sản phẩm. WordPress phiên bản mới đã hỗ trợ custom field, metabox custom field nằm bên dưới mebox excerpt nếu không thấy làm theo hình dưới:
Mở chúng tôi chèn đoạn sau để hiển thị giá của sản phẩm.
Tiếp theo chúng ta sẽ Chèn nút Add to cart, nhấn vào add to cart sản phẩm sẽ được thêm vào giỏ hàng và giỏ hàng được hiện ra.
Hàm wpspc_hw_show_messages(); hiển ra các thông báo tương ứng với trạng thái thêm/cập nhật/xóa sản phẩm từ giỏ hàng. Thay đổi Nội dung tin nhắn sử dụng filter ” wpspc_hw_add_to_cart_hook ” thêm đoạn code sau trong theme functions.php
– Truyền tên sản phẩm, giá và ID bài viết của sản phẩm vào short code wp_cart_button, shortcode sinh ra form và nút thêm vào giỏ hàng.
– Đặt mã shortcode “show_wp_shopping_cart” vào nơi bạn cần hiển thị giỏ hàng, nếu chèn trong code bạn sử dụng hàm do_shortcode hoặc chèn shortcode trực tiếp vào page và thậm trí có thể chèn vào widget text. Lưu ý: mặc định nếu copy mã shortcode [show_wp_shopping_cart] vào nội dung trong widget text wordpress sẽ không hiểu, xem hướng dẫn chèn shortcode vào widget text.
Một số hooks sử lý CSS
– Sử lý nội dung HTML khi giỏ hàng trống, thay vì plain text thiết lập trong phần cấu hình. Thêm đoạn sau vào functions.php
– Thêm thuộc tính class vào nút add to cart.
– Thêm thuộc tính class vào nút checkout.
Sử lý form liên hệ khi nhấn nút thanh toán
Nếu bạn chịu tìm tòi một chút, sẽ thấy thông tin giỏ hàng được plugin shopping cart này lưu vào biến SESSION, để biết chính xác bạn in toàn bộ biến session ra màn hình:
Ví dụ kết quả nhận được:
Kết quả trên cho thấy nội dung của giỏ hàng lưu tại phần từ simpleCart của mảng SESSION. Như vậy phần sử lý dữ liệu form checkout ở trên là thừa.
Field này không cho hiển thị khi người mua hàng chuyển sang trang liên hệ mà được ẩn đi, tạo thêm trường này có tác dụng khai báo trường để sử dụng trong code. Checkbox vào Hide label, field “Input CSS” nhập giá trị css để ẩn đối tượng input này:
Lưu ý: ngoài cách điền trực tiếp css làm ẩn đối tượng vào trường “input CSS”, bạn có thể chọn vào “Disable field” cũng có tác dụng tương tự. Nhấn Save Changes để lưu trường.
– Sau khi đặt liên hệ thanh toán xong cần xóa nội dụng giỏ hàng đi sử dụng reset_wp_cart().
Sử dụng đoạn code ở trên nếu như dữ liệu của form giỏ hàng đã được lưu vào $_SESSION['wspsc_postdata']. Cách này sẽ gây dư thừa dữ liệu như tôi đã giải thích ở trên dữ liệu của giỏ hàng đã được lưu trước đó, nếu trong trường hợp, bạn muốn bỏ qua bước khách hàng phải nhấn vào checkout, để tối giản các bước sau khi nhấn vào đặt hàng web sẽ tự động redirect sang trang thanh toán thì cách này không dùng được. Tại sao vậy? bởi vì chúng ta căn cứ vào form giỏ hàng để trích xuất dữ liệu, khi redirect trực tiếp sẽ không thông qua form giỏ hàng này. Sử dụng đoạn code sau đây thay thế code cũ:
Gửi mail thông báo khách hàng
Quá trình khách hàng đặt hàng qua form hoàn tất, bạn gửi một email có nội dung thông báo đến địa chỉ khách hàng đã cung cấp trên form về thông tin đơn hàng. Thêm vào cuối action “fsctf_mail_sent” trong functions.php.
Lưu ý bạn cần cấu hình gửi mail trong wordpress thì tính năng này mới hoạt động được.
Sử lý trang thành công sau khi submit contact form
Nhấn Publish.
Nhập độ chễ cho màn hình chờ (loading) khi người dùng submit form “Redirect delay in seconds”. Tính năng này bạn check vào “Enable redirect after the message sends”, mặc định contact form có độ chễ là 3 giây.
Hiển thị thông tin đơn hàng trong trang thành công
Các tham số được truyền vào bao gồm tất cả các fields của form được khai báo như: email_to,name_to,from_name,from_email,subject,message, và các fields khác do người dùng tạo thêm. Ngoài ra có một số fields chứa thông tin khác là:
date_time: thời gian submit form.
ip_address: địa chỉ IP từ người submit form.
full_message: nội dung toàn bộ các trường của form.
và các trường mà mình đã tạo thêm ở tab General settings, như vậy ở đây mình có thêm tham số “google_form”.
Nhận thấy nếu tất cả các tham số này truyền vào URL thì quá dài, làm cho URL sẽ không hoạt động tốt. Bạn có thể loại bỏ những tham số không cần dùng đến bằng cách liệt kê chúng tại mục “Query string fields to ignore”. Nhấn vào liên kết help ở bên cạnh để biết các tham số được truyền vào URL.
– Chú ý: Mỗi một tham số được viết trên 1 dòng. vd: chúng ta sẽ loại bỏ tham số full_message, ip_address, date_time.
Mục tiếp theo bên cạnh “Query string fields to rename” cho phép bạn đổi tên tham số, mỗi tham số viết trên 1 dòng, ví dụ chúng ta sẽ đổi tham số from_name thành name, from_email thành email:
Ngoài ra, bạn cũng thể thêm các tham số ngoài cùng với giá trị của tham số vào URL, khai vào thêm vào mục “Query string key value pairs to add:”. Ví dụ sau đây thêm nhiều tham số mỗi tham số viết trên 1 dòng.
Đã hoàn tất các bước tạo giỏ hàng và form liên hệ. Giờ đến lúc bạn thử nghiệm tính năng giỏ hàng của website rùi. Truy câp vào trang chi tiết của một sản phẩm, bạn nhận được kết quả:
Nhấn vào nút Add to cart/Thêm vào giỏ hàng, để thay đổi số lượng sản phẩm trong giỏ hàng rất đơn giản chỉ bằng cách thay đổi con số trong input box với sản phẩm muốn mua thêm. Giỏ hàng sẽ tự động cập nhật.
Nhấn vào nút Thanh toán, bạn được chuyển sang form để lại thông tin liên hệ đặt mua sản phẩm.
Sau khi điền đầy đủ thông tin như trên, bạn nhấn vào nút gửi đi.
Tham khảo một vài plugin làm web bán hàng bằng wordpress.
Một số plugins làm web bán hàng đơn giản:
Nếu bạn muốn xây dựng một trang bán hàng chuyên nghiệp và thường xuyên mở nhiều đợt khuyến mãi thì plugin này là sự lựa chọn rất tốt cho bạn. Không chỉ dừng lại từ việc tạo giỏ hàng, thanh toán trực tuyến, Cart66 Pro còn có các chức năng tự động tính toán giá trị mặt hàng dựa trên kích thước, cân nặng khi thanh toán, ngoài ra còn cho phép bạn tạo nhiều mã giảm giá cho shop của bạn để thu hút khách hàng.
WordPress eStore plug-in
Không chỉ có plugin hỗ trợ trong việc tạo các giỏ hàng và các chức năng thanh toán. WordPress còn có cả bộ plugin và theme đi kèm để “hô biến” WordPress của bạn thành một shop bàn hàng thực thụ. Với chức năng cài đặt dễ dàng nhưng chuyên nghiệp, WordPress eStore sẽ giúp bạn có một trang bán hàng và quản lý hàng hóa thật chuyên nghiệp.
EShop là một plugin tạo cửa hàng mua sắm trực tuyến cho blog WordPress của bạn. Hàng loạt các tính năng chuyên nghiệp được đưa vào bộ plugin này giúp bạn có thể tạo một cửa hàng bán hàng trực tuyến đa chức năng. Ngoài các chức năng cơ bản như tạo giỏ hàng , đăng ký thành viên , thanh toán , tính thuế , ..v…v..v…EShop còn cho phép bạn tạo các chức năng bán hàng chia sẻ phần trăm ( Affiliate ). Bạn có thể tìm hiểu cách tùy chỉnh code , tải themes miễn phí dành cho plugin này cũng như hướng dẫn sử dụng tại http://quirm.net/
WP e-commerce
Một plugin thật sự đơn giản ( chỉ bao gồm chức năng tạo nút Add to cart vào bài viết và chức năng thanh toán ) dành cho những bạn có nhu cầu làm trang bán hàng đơn giản.
WordPress Simple PayPal Shopping Cart
Một plugin bán hàng “thuần chủng” với PayPal. Tất nhiên nó chỉ hỗ trợ thanh toán qua PayPal mà thôi.
Market press
Một bộ plugin tạo trang bán hàng cực kỳ chuyên nghiệp , hỗ trợ SEO rất tốt cũng như hỗ trợ tốt trên WordPress chúng tôi . Tuy nhiên bạn phải trả phí để có thể sử dụng bộ plugin này.
Demo : http://wp-ecommerce.org/
Đây là một plugin chuyên dụng để quản lý các hóa đơn đặt hàng trong WordPress . Hỗ trợ giao thức SSL khi xem các hóa đơn để tăng tính bảo mật nội dung .
FoxyPress Plug-in
Thêm một lựa chọn nữa để làm một trang bán hàng đơn giản . Với plugin này bạn có thể dễ dàng tạo các bài viết bán hàng bằng những đoạn short code dễ nhớ và tiện dụng .
TikiPress Plug-in
Một plugin mới “ra lò” và đang trong giai đoạn thử nghiệm. Plugin này cho phép bạn tạo các vé mua hàng đặc biệt trong một sự kiện cụ thể được thiết lập trong trang quản lý.
Image Store Plug-in
Một plugin tuyệt vời nếu bạn đang có nhu cầu tạo trang bán hình ảnh . Image Store cho phép bạn tạo các Gallery hình ảnh kèm chức năng chọn vào giỏ hàng và thanh toán một cách chuyên nghiệp. Chế độ xem hình ảnh với Jquery sẽ giúp bạn có được một trang bán hình ảnh trông thật chuyên nghiệp .
Demo : http://imstore.xparkmedia.com/