Gia Huy

Trang chủ
Blogger

Tạo tiện ích đặt hàng gửi qua email trên Blogger

Gửi qua email trên Blogger
·

Xin chào tất cả nhân dịp này mình sẽ chia sẻ cách làm đơn đặt hàng gửi qua email trên blogger.

Thông thường, chúng ta có thể tìm thấy các mẫu đơn đặt hàng như thế này trên các trang mua bán như cửa hàng trực tuyến, nhưng nếu bạn có một blog thường chia sẻ các bài viết nhưng muốn bán hàng, thì một mẫu đơn đặt hàng trên Email có thể hữu ích.

Tạo tiện ích đặt hàng gửi qua email trên Blogger
Tạo tiện ích đặt hàng gửi qua email trên Blogger

Cách tạo đặt hàng gửi qua email trên Blogger

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Kiểm tra theme của bạn có cài đặt jQuery chưa? nếu bạn chưa có bạn có thể sao chép mã bên dưới và đặt nó phía trên thẻ: </head> hoặc &lt;!--</head>--&gt;&lt;/head&gt;

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>

Bước 6: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

/* Email Form by giahuy code */
.giahuy-form-mail{position:fixed;display:none;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.69);z-index:999}.form-container{width:calc(100% - 20px);max-width:500px;background:#fff;box-shadow:0 10px 35px 2px rgba(61,61,61,.3);padding:30px;box-sizing:border-box;border-radius:10px;margin:2% auto;overflow:hidden}.giahuy-form-mail.aktif{display:block}
.giahuy-form-header{background:linear-gradient(to right, #f08900,#ffd91a);color:#fff;font-weight:700;padding:15px 20px;border-radius:10px;margin:0 0 30px}
span.input-title{border-left:4px solid  #f08900;padding:0 15px;font-size:.9rem;display:block}.giahuy-form-mail #your-data{display:grid;grid-template-columns:49% 49%;grid-gap:10px;margin:10px 0 20px}
.giahuy-form-header a.form-close svg{fill:#fff;width:35px;height:35px;margin-top:-5px;float:right}
a.giahuy-btn-mail.send_form{background:linear-gradient(to right, #f08900,#ffd91a);color:#fff;font-size:15px;font-weight:bold;text-align:center;text-decoration:none;padding:10px 10px 10px 25px;width:120px;margin:15px 50px 0 0;float:left;border-radius:5px;}
.giahuy-btn-mail{background:linear-gradient(to right, #f08900,#ffd91a);font-size:15px;font-weight:700;color: #fff;display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:15px 25px;border-radius:7px;margin:15px;text-decoration:none;left:50%!important}
.giahuy-btn-mail:hover{opacity:.8;color:#fff}
.giahuy-btn-mail svg{fill:#fff;width:22px;height:22px;vertical-align:-5px;margin-right:10px}
.giahuy-input-field{position:relative;margin:15px 0 0}
.giahuy-input-field input,.giahuy-input-field textarea{font-size:15px;padding:12px 0 12px 12px;display:block;width:94%;border:1px solid #ddd;border-radius:5px}.giahuy-input-field input:focus,.giahuy-input-field textarea:focus{outline:none}
.giahuy-input-field label{color:#999;border-radius:20px;font-size:14px;font-weight:500;position:absolute;pointer-events:none;left:15px;top:15px;transition:.2s ease all}.giahuy-input-field input:focus~label,.giahuy-input-field input:valid~label,.giahuy-input-field textarea:focus~label,.giahuy-input-field textarea:valid~label{top:0;font-size:14px;color:#f08900;background:#fff;padding:1px 7px;margin:10px 0 0 -5px}
.giahuy-input-field input:focus~label,.giahuy-input-field input:valid~label,.giahuy-input-field textarea:focus~label,.giahuy-input-field textarea:valid~label{top:-20px!important;font-size:13px;color:#f08900;font-weight:700}.giahuy-input-field textarea{width:96.5%}.giahuy-input-field select{background:#fff;padding:12px 15px;border-radius:5px;margin:0 0 5px 0;border:1px solid #ccc;outline:none;width:100%;max-width:100%;font-size:14px;cursor:pointer}
.giahuy-input-field .giahuy-validasi{position:absolute;z-index:2;top:calc(100% + 20px);left:0;background:#ffd91a;color:rgba(0,0,0,.6);padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.08);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important}
.giahuy-input-field .giahuy-validasi.show{visibility:visible;opacity:1;top:calc(100% + 10px)}
.giahuy-input-field .giahuy-validasi:after{position:absolute;bottom:100%;left:12px;content:'';border:8px solid;border-color:transparent transparent #ffd91a transparent}
#name_produk{display:none}

Bước 7: Tiếp tục hãy thêm HTML sau ngay bên trên vào thẻ <footer> hoặc </body>. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;/body&gt;.

<div class='giahuy-form-mail'>
    <div class='form-container'>
        <div class='giahuy-form-header'><span class='form-title'>Biểu mẫu đặt hàng qua email</span>
            <a class='form-close' href='javascript:void' title='Đóng'>
                <svg viewBox='0 0 24 24'>
                    <path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' />
                </svg>
            </a>
        </div><span class='input-title'>Thông tin của bạn</span>
        <div id='your-data'>
            <div class='giahuy-input-field'>
                <input class='validate' id='mail_name' name='name' type='text' />
                <label>Họ tên</label>
            </div>
            <div class='giahuy-input-field'>
                <input class='validate' id='mail_nomor' name='nomor hp' type='number' />
                <label>Số lượng</label>
            </div>
            <div class='giahuy-input-field'>
                <input class='validate' id='mail_blog' name='name blog' type='text' />
                <label>Tên Blog</label>
            </div>
            <div class='giahuy-input-field'>
                <input class='validate' id='mail_url' name='url blog' type='text' />
                <label>Địa chỉ Blog</label>
            </div>
        </div><span class='input-title'>Thông tin khác</span>
        <div class='giahuy-input-field'>
            <select class='validate' id='mail_lisensi' name='giấy phép'>
                <option hidden='hidden' selected='selected' value='default'>Chọn giấy phép</option>
                <option value='1'>Gói cá nhân</option>
                <option value='2'>Gói người bán lại</option>
            </select>
        </div>
        <div class='giahuy-input-field'>
            <select class='validate' id='mail_pembayaran' name='thanh toán'>
                <option hidden='hidden' selected='selected' value='default'>Thanh toán</option>
                <option value='1'>Momo</option>
                <option value='2'>Paypal</option>
                <option value='3'>Zalo pay</option>
                <option value='4'>Chuyển khoản</option>
                <option value='5'>Viettel pay</option>
            </select>
        </div><a class='giahuy-btn-mail send_form' href='javascript:;' title='Gửi thông tin sản phẩm' type='submit'>Đặt hàng</a>
    </div>
</div>

Bước 8: Sao chép mã HTML bên dưới và đặt nó ở dưới thẻ: <data:post.body/>, thông thường thẻ <data:post.body/> có nhiều trong theme tùy theo theme của bạn, nên bạn phải chèn thử từng cái cho đúng. Nếu mã này không đúng vị trí thì tiêu đề bài viết sẽ không được gọi.

<div id='name_produk'><data:post.title/></div>

Bước 9: Đặt jQuery dưới đây ở trên thẻ: </body> hoặc &lt;!--</body>--&gt;&lt;/body&gt;

<script>
//<![CDATA[
// Email Form by giahuy code
// Open Close Button
$(".form-close").click(function(){
  $(".giahuy-form-mail").fadeOut("fast")}
);$(".show-form").click(function(){
  $(".giahuy-form-mail").fadeIn("slow")});
 
// Validation For Mailjib Column Contents
$('.giahuy-input-field .validate').each(function() {
    title = $(this).attr('name');
    label = $(this).parents('.giahuy-input-field');
    $('<span class="giahuy-validasi"><b>' + title + '</b> yêu cầu</span>').appendTo(label);
});
   $(document).on('keyup', '.giahuy-input-field .validate', function() {
    if ($(this).val() != '') {
        $(this).removeClass('focus');
        $(this).parents('.giahuy-input-field').find('.giahuy-validasi').removeClass('show');
    }
});
$(document).on('change', '.giahuy-input-field select', function() {
    $(this).removeClass('focus');
    $(this).parents('.giahuy-input-field').find('.giahuy-validasi').removeClass('show');
});
$('.send_form').click(mailchat);
function mailchat() { 
if ($('#mail_name').val() == '') { // Validation Full Name
          $('#mail_name').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.giahuy-input-field').find('.giahuy-validasi').addClass('show');
          });
        $('#mail_name').focus();
        return false;
    } else if ($('#mail_nomor').val() == '') { // mobile number validation
          $('#mail_nomor').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.giahuy-input-field').find('.giahuy-validasi').addClass('show');
          });
        $('#mail_nomor').focus();
        return false;
    } else if ($('#mail_blog').val() == '') { // Blog Name validation
          $('#mail_blog').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.giahuy-input-field').find('.giahuy-validasi').addClass('show');
          });
        $('#mail_blog').focus();
        return false;
      } else if ($('#mail_url').val() == '') { // giahuy-validation Blog Url
          $('#mail_url').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.giahuy-input-field').find('.giahuy-validasi').addClass('show');
          });
        $('#mail_url').focus();
        return false;
      } else if ($('#mail_lisensi').val() == 'default') { // License validation
          $('#mail_lisensi').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.giahuy-input-field').find('.giahuy-validasi').addClass('show');
          });
        $('#mail_lisensi').focus();
        return false;
        } else if ($('#mail_pembayaran').val() == 'default') { // Payment validation
          $('#mail_pembayaran').each(function() {
              $(this).addClass('focus');
                    $(this).parents('.giahuy-input-field').find('.giahuy-validasi').addClass('show');
          });
        $('#mail_pembayaran').focus();
        return false;
    } else {
 
      /* Email Settings */
var maillink = 'https://mail.google.com/mail/u/0/?view=cm&fs=1&tf=1&to=',
    email = 'emailcuaban@gmail.com', //Your Email Address
    mailsubject = '&subject=Xác nhận mua hàng ', //Email Subject But Appears On Smartphone Onlya
    maillink1 = '',
    jarak = '',
    maillink2 = '&body=Xin chào, tôi muốn mua mẫu của bạn với thông tin sau: '; //Welcome Message
      
/* Smartphone Support */ 
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
var maillink = 'mailto:',
    jarak ='<br>',
    maillink1 = '?cc=&bcc=';
}  
 
 /* Call Input Form */ 
var input_name = $("#mail_name").val(),
    input_nomor = $("#mail_nomor").val(),
    input_nameBlog = $("#mail_blog").val(), 
    input_urlBlog = $("#mail_url").val(),  
    input_lisensi = $("#mail_lisensi :selected").text(),
    input_pembayaran = $("#mail_pembayaran :selected").text(),
    input_nameproduk = $("#name_produk").text(),
    input_viaUrl = location.href;

/* Email Final URL */ 
var mail_link = maillink + email + maillink1 + mailsubject + input_name + maillink2 + '%0A%0A' + jarak + jarak +
    'THÔNG TIN CỦA TÔI ' + jarak + 
    '%0A-----------------------------%0A' + '%0A' + jarak + jarak +
    'Họ tên: ' + input_name + '%0A' + jarak + 
    'Số lượng: ' + input_nomor + '%0A' + jarak +
    'Tên Blog: ' + input_nameBlog + '%0A' + jarak +
    'Url Blog: ' + input_urlBlog + '%0A' + jarak +
    'Phương thức thanh toán: ' + input_pembayaran + '%0A' + jarak +
    '%0A-----------------------------%0A' + '%0A' + jarak + jarak + 
    'THÔNG TIN SẢN PHẨM %0A' + jarak +
    '-----------------------------%0A' + jarak +
    'Tên Template: ' + input_nameproduk + '%0A' + jarak + 
    'Loại giấy phép: ' + input_lisensi + '%0A' + jarak + 
    'Liên kết mẫu: ' + input_viaUrl + '%0A' + jarak + 
    '%0A-----------------------------%0A';
 
/* Open Email Window */ 
window.open(mail_link,'_blank');
window.location.href = input_viaUrl;
return false;
  }
};
//]]> 
</script>

Lưu ý: Phần mà mình đánh dấu bạn hãy thay lại địa chỉ email của bạn và tin nhắn thông báo theo ý bạn, và bấm lưu lại.

Bước 10: Vậy là xong! Thêm các mã HTML sau vào Bài đăng trên Blog của bạn thông qua Chế độ xem HTML để hiển thị tiện ích đặt hàng gửi qua email.

<div style='text-align:center'>
<a class='giahuy-btn-mail show-form' href='javascript:void' title='Mua ngay'><svg viewBox='0 0 24 24'><path d='M17,18C15.89,18 15,18.89 15,20A2,2 0 0,0 17,22A2,2 0 0,0 19,20C19,18.89 18.1,18 17,18M1,2V4H3L6.6,11.59L5.24,14.04C5.09,14.32 5,14.65 5,15A2,2 0 0,0 7,17H19V15H7.42A0.25,0.25 0 0,1 7.17,14.75C7.17,14.7 7.18,14.66 7.2,14.63L8.1,13H15.55C16.3,13 16.96,12.58 17.3,11.97L20.88,5.5C20.95,5.34 21,5.17 21,5A1,1 0 0,0 20,4H5.21L4.27,2M7,18C5.89,18 5,18.89 5,20A2,2 0 0,0 7,22A2,2 0 0,0 9,20C9,18.89 8.1,18 7,18Z'/><line x1='12' x2='12' y1='2' y2='16'/></svg>Mua ngay</a></div>

Trên đây là hướng dẫn tạo tiện ích đặt hàng gửi qua email trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!

Tham khảo: www.wendycode.com

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.