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à mang hiệu ứng modal lúc click vào cho đẹp mắt hơn. Dưới đây là kết quả sau lúc làm cho xong.
Trước tiên bạn hãy cài plugin NinjaForm vào. Sau đấy vào Forms -> Add New để tạo một form mới. Trong đây bạn tạo form mang 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 URLHidden Field (Title) – Default Value: Post / Page Title.Mục đích mình tạo những 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 để lúc mình đọc email thì sẽ biết đơn đặt hàng này của sản phẩm nào.
Sau đấy 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 tin cho bạn lúc mang 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 tin nhé. Phần Subject thì bắt buộc đặ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ì tìm Insert All Fields.
Nếu bạn muốn tạo thêm một thông tin gửi cho khách lúc họ đặt hàng thành công thì tạo thêm một action nữa giống như thế này.
Plugin NinjaForm – Modal có chức năng tạo hiệu ứng modal lúc nhấp vào một đường link thay vì hiển thị hẳn ra bên ngoại trừ. Nó giống như cái hiệu ứng mà mình chụp ảnh ở đầu bài viết đấy.
Bây giờ bạn cài plugin này vào và kích hoạt lên. Sau đấy mở tập tin /sparkling-child/content-single-sanpham.php và tìm:
Thêm vào dưới:
Trong đấy, thay 5 thành ID của form đặt hàng bạn vừa mới tạo lúc 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ộ mang theme hơn:
/** * 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: một.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 mang thể ra ngoại trừ trang hiển thị khía cạnh 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à lúc nhấp chuột vào nó sẽ ra hiệu ứng modal.
Nếu bạn đang dùng localhost thì lúc đặt hàng bạn sẽ ko thể nhận được email do localhost ko mang email. Bạn hãy dùng SMTP của Gmail hoặc Sendgrid để mang 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ẽ chỉ dẫn thêm bí quyết làm cho trang hiển thị danh sách những 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ê mang web và lập trình, thích viết và san sớt, nghiện cà phê và xăm mình, hứng thú mang nhạc dân ca và nhạc ko lời.
Xem thêm bài viết Subscribe.
This post was made using the Auto Blogging Software from WebMagnates.org This line will not appear when posts are made after activating the software to full version.
Không có nhận xét nào:
Đăng nhận xét