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

Bài này thuộc phần 6 của 7 phần trong serie Shop đơn giản với WordPress

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 vào plugin NinjaForm và có hiệu ứng modal khi click vào cho đẹp mắt hơn. Dưới đây là kết quả sau khi làm xong.

shopdongian-dathang01

Cài đặt NinjaForm

Trước tiên bạn hãy cài plugin NinjaForm vào. Sau đó vào Forms -> Add New để tạo một form mới. Trong đây bạn tạo form có 4 field như sau:

  • Textbox (Họ và Tên)
  • Textbox (Số điện thoại)
  • Textbox (Địa chỉ)
  • Email (Email)
  • Hidden Field (URL) – Default Value: Post / Page URL
  • Hidden Field (Title) – Default Value: Post / Page Title.

Mục đích mình tạo các hidden field ở đây là để nó tự mang đường dẫn và tiêu đề của trang sản phẩm mà khách đặt hàng để khi mình đọc email thì sẽ biết đơn đặt hàng này của sản phẩm nào.

shopdongian-formdathang02

Sau đó lưu lại và đặt tên cho form này là Đặt hàng.

Bây giờ chuyển qua mục Email & Actions để thêm tính năng tự gửi email thông báo cho bạn khi có người đặt hàng. Phần From bạn sửa thành cái trường Email của khách. Phần To là email của bạn để nhận thông báo nhé. Phần Subject thì nên đặt tiêu đề kiểu giống như “Đơn đặt hàng – Email khách” cho email khỏi bị trùng tiêu đề. Phần Email Message thì chọn Insert All Fields.

shopdongian-formdathang03

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

shopdongian-formdathang04

Cài đặt plugin NinjaForm – Modal

Plugin NinjaForm – Modal có chức năng tạo hiệu ứng modal khi nhấp vào một đường link thay vì hiển thị hẳn ra bên ngoài. Nó giống như cái hiệu ứng mà mình chụp ảnh ở đầu bài viết đó.

Bây giờ bạn cài plugin này vào và kích hoạt lên. Sau đó mở tập tin /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 vào dưới:

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

Trong đó, thay 5 thành ID của form đặt hàng bạn vừa mới tạo khi nãy. Để xem ID bạn vào phần Forms -> All Forms.

Bây giờ thêm đoạn sau vào style.css để cái nút đặt hàng nó đồng bộ với theme hơn:

</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 hiển thị chi tiết một sản phẩm sẽ thấy nút đặt hàng ngay bên dưới giá sản phẩm, và khi nhấp chuột vào nó sẽ ra 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 do localhost không có email. Bạn hãy sử dụng SMTP của Gmail hoặc Sendgrid để có thể gửi mail từ localhost nhé.

Và ở bài sau, cũng là bài cuối cùng trong serie này mình sẽ hướng dẫn thêm cách làm trang hiển thị danh sách các sản phẩm trong danh mục sản phẩm và trang lưu trữ của sản phẩm.

Thạch Phạm

Đam mê với web và lập trình, thích viết và chia sẻ, nghiện cà phê và xăm mình, hứng thú với nhạc dân ca và nhạc không lời.

Xem thêm bài viết Subscribe

Để lại bình luận

15 Bình luận trên "Làm trang shop đơn giản với WordPress – 06"

avatar
Sắp xếp theo:   mới nhất | cũ nhất | đánh giá nhiều
Hải
Khách

kích hoạt Ninja Forms – Modal thì không kích hoạt được formsModal, e làm hoài không được, kích hoạt không đồng thời được cả 2

Hoàng
Khách

Anh Thạch ơi nếu nhiều sản phẩm thì nó chỉ gửi về yêu cầu mua chứ ko có kèm theo link sản phẩm khách đặt, Có cách nào khi gửi = ninja form thì nó tự chèn cái link sản phẩm khách chọn vào email và gửi về cho mình ko nhỉ

Công Tuyến
Khách
Chung cư One18
Khách

hay thiệt

nhat
Khách

phiên bản mới tới 5.4 Mb nó không cho uploaded file. h phải làm sao anh

fdgd
Khách

bạn có thể coppy trực tiếp vào file data trên local được mà , còn trên live thì upload dữ liệu bằng filezila là đc

Lâm
Khách

Anh ơi, tại sao em không thể kích hoạt đươc plugin NinjaForm – Modal ạ.

fdgd
Khách

Cái này là do bạn đã active plugin NinjaForm trước rồi !!! bạn thủ unactive xem có được không 😀

Dũng TV
Khách

Oops! That addon is not yet compatible with Ninja Forms THREE. Learn More.

ninja-forms-modal/ninja-forms-modal.php was deactivated.

Có phải lỗi này

Lâm
Khách

Đúng rôi bạn ạ! Bạn hướng dẫn mình khắc phục với

trungt
Khách
Phương
Khách
Phương
Khách
wpDiscuz
menu
menu