Làm trang shop đơn giản với WordPress – 06 [NEW]

Tiếp tục trong phần này, chúng ta sẽ thêm một nút đặt hàng đơn giản dựa trên plugin NinjaForm và có hiệu ứng modal khi bấm vào để nó đẹp hơn. Đây là kết quả sau khi thực hiện.

Làm trang shop đơn giản với WordPress – 06 [NEW]

Cài đặt NinjaForm

Đầu tiên, hãy cài đặt plugin NinjaForm. Sau đó vào Forms -> Add New để tạo form mới. Tại đây bạn tạo một biểu mẫu với 4 trường như sau:

  • Hộp văn bản (Họ và Tên)
  • Hộp văn bản (Số điện thoại)
  • Hộp văn bản (Địa chỉ)
  • Email (Email)
  • Trường ẩn (URL) – Giá trị mặc định: URL của bài đăng / trang
  • Trường ẩn (Tiêu đề) – Giá trị mặc định: Tiêu đề bài đăng / trang.

Mục đích của việc tạo các trường ẩn ở đây là để nó mang liên kết và tiêu đề của trang sản phẩm mà khách hàng đã đặt hàng để khi mình đọc email sẽ biết được đơn hàng này thuộc sản phẩm nào.

shopdongian-formdathang02

Sau đó lưu và đặt tên cho biểu mẫu này là Order.

Bây giờ chuyển sang Email & Hành động để thêm tính năng tự động gửi email cho bạn khi ai đó đặt hàng. Phần Từ bạn thay đổi trường email của khách hàng. Phần To lớn là email của bạn để nhận thông báo. Phần Môn học thì bạn nên đặt tiêu đề như “Đơn đặt hàng – Email khách hàng”Để ngăn email bị trùng lặp. Phần Thư điện tử tiếp đó hãy chọn Chèn tất cả các trường.

shopdongian-formdathang03

Nếu bạn muốn tạo thêm một thông báo để gửi cho khách hàng khi họ đặt hàng thành công, hãy tạo một hành động khác như thế này.

shopdongian-formdathang04

Cài đặt plugin NinjaForm – Phương thức

bổ sung NinjaForm – Phương thức có chức năng tạo hiệu ứng phương thức khi nhấp vào liên kết thay vì hiển thị ra bên ngoài. Nó giống như hiệu ứng mà tôi đã chụp ảnh ở đầu bài đăng đó.

Bây giờ bạn cài đặt plugin này và kích hoạt nó. Sau đó mở tệp /sparkling-child/content-single-sanpham.php Và tìm:

<div class="entry-price">Giá: <?php echo get_post_meta( $post->ID, ‘sanpham_price’, true ); ?></div>

Thêm bên dưới:


<div class="buy-btn"><?php echo do_shortcode( ‘[ninja_forms_modal_form id=5 text_link="Đặt hàng"]’ ); ?></div>

Trong đó, đổi 5 thành ID của phiếu đặt hàng bạn vừa tạo trước đó. Để xem ID của bạn, hãy truy cập Biểu mẫu -> Tất cả các biểu mẫu.

Bây giờ, hãy thêm phần sau vào style.css để làm cho nút đặt hàng đồng bộ hơn với chủ đề:

</pre>
<pre>/**
* Nút đặt hàng
*/
.nf-modal-link {
background-color: #DA4453;
border-color: #DA4453;
-webkit-transition: background-color 0.3s linear;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
color: #f3f3f3;
}

Bây giờ bạn có thể ra ngoài trang chi tiết sản phẩm sẽ thấy nút đặt hàng ngay bên dưới giá sản phẩm, khi bấm vào sẽ có hiệu ứng modal.

Gửi email từ localhost

Nếu bạn đang sử dụng localhost thì khi đặt hàng bạn sẽ không thể nhận được email vì localhost không có email. Vui lòng sử dụng SMTP hoặc Sendgrid của Gmail để có thể gửi thư từ localhost.

Và trong bài tiếp theo, cũng là bài cuối cùng của loạt bài này, mình sẽ hướng dẫn các bạn cách tạo trang hiển thị danh sách sản phẩm trong danh mục sản phẩm và trang lưu trữ sản phẩm.

Đánh giá nội dung này

Tiếp tục đọc trong bộ truyện