Tạo tiện ích đặt hàng 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: 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 2: Sao chép mã CSS bên dưới và đặt nó phía trên thẻ: ]]></b:skin>
/* 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:100px;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 3: Sao chép mã HTML bên dưới và đặt nó ở phía trên thẻ: <footer>. Hoặc bạn có thể đặt nó ở bất cứ đâu miễn nó nằm trong thẻ: <body> là được.

<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 4: 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 5: Đặ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 = '[email protected]', //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 6: Bạn hãy sao chép HTML bên dưới và đặt nó trên trang đăng sản phẩm của bạn nếu bạn đã nhấp vào cập nhật hoặc lưu.
<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ả!

Khi cuộc đời cho bạn cả trăm lý do để khóc, hãy cho đời thấy bạn có cả ngàn lý do để cười.

Đăng nhận xét

Cám ơn bạn đã quan tâm đặt câu hỏi với chúng tôi!
Chúng tôi sẻ phản hồi sớm nhất cho bạn.
Chúc bạn một ngày tốt đẹp!