Mọi ý kiến đóng góp, xin liên hệ với tôi! Contact

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: 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ả!

Tham khảo: www.wendycode.com

Getting Info...

Về tác giả

Mỗi khi có ý định từ bỏ hãy nghĩ đến lý do mà bạn bắt đầu.

Đăng nhận xét

Vui lòng không chia sẻ bất kỳ chi tiết nhạy cảm hoặc cá nhân nào ở đây.
Cookie Consent
Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn.
Thêm chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu mà chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.