maimai.vn api

• Trang chủ
• »
• Demo
• »
• Giỏ hàng

Dữ liệu sử dụng được kết nối với maimai.vn demo

Trong dịch vụ quản lý maimai.vn, bạn chọn menu Bán hàng -> Hóa đơn bán hàng

Mã nguồn

HTML

<div class="demo">
    <ul class="cart-list" id="clist"></ul>
    <div class="footer" style="text-align:right">
        <div style="float:left"><a href="javascript:" onclick="viewOrderForm()"><u>Lập đơn hàng</u></a></div>
        <div style="float:right">Tổng: <b><span id="cart-total"></span></b> VND | <a href="javascript:" onclick="mCart.clear(viewCart)">Xóa</a></div>
        <div style="clear:both"></div>
    </div>
    <div id="submit-order" style="display:none">
        <form class="form" id="order-form" onsubmit="return order()" style="width:470px;min-height:150px;border-right:solid 1px #fff;float:left">
            <input type="hidden" id="order-partner" />
            Tên<br /><input type="text" id="order-name" style="width:300px" /><br />
            Điện thoại<br /><input type="text" id="order-phone" style="width:300px" /><br />
            Email<br /><input type="text" id="order-email" style="width:300px" /><br />
            Thời điểm yêu cầu<br /><input type="text" id="order-required" style="width:300px" placeholder="mm/dd/yyyy" /><br />
            Địa chỉ<br />
            <select id="order-country" onchange="onChangeCountry()"></select>
            <select id="order-city" onchange="onChangeCity()"></select>
            <select id="order-district"></select>
            <textarea id="order-address" style="width:300px;height:50px"></textarea><br />
            <button>Đặt hàng</button>
        </form>
        <div id="account" style="width:230px;float:right">
            <form class="form" id="login-form" onsubmit="return login()">
                <b>Đăng nhập</b><br />
                <input type="text" name="name" id="login-name" class="required" style="width:200px" placeholder="Tên" /><br />
                <input type="password" name="password" id="login-password" class="required" style="width:200px" placeholder="Mật khẩu" /><br />
                <button>Đăng nhập</button>
            </form>
            <span class="validate"></span>
            <div style="margin:10px 0 0 5px"><a href="/example/account">Đăng ký</a></div>
        </div>
        <div style="clear:both"></div>
    </div>
</div>
<!--JSRender templates-->
<script id="cartTemplate" type="text/x-jsrender ">
    <li>
    <div class="thumb"><a href="product/{{:url}}"><img src="{{:thumb}}" /></a></div>
    <div class="code">{{:code}} <a href="product/{{:url}}">{{:name}}</a></div>
    <div class="price"><b>{{>~formatNumber(price)}}</b></div>
    <div class="quantity"><input value="{{:quantity}}" onchange="mCart.updateQuantity({{:id}}, this.value, viewCart)" /></div>
    <div class="line-total"><b>{{>~formatNumber(price * quantity)}}</b></div>
    <div class="del"><a href="javascript:" onclick="mCart.remove({{:id}}, viewCart)">Xóa</a></div>
    </li>
</script>
<script id="geoTemplate" type="text/x-jsrender">
    <option value="{{:id}}">{{:name}}</option>
</script>

Javascript/CSS

<link href="//api.maimai.vn/content/demo.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//api.maimai.vn/scripts/mget.js"></script>
<script src="//api.maimai.vn/scripts/jsrender.js"></script>
<script>
function formatNumber(str) {
    str += '';
    x = str.split(' ');
    x1 = x[0];
    x2 = x.length > 1 ? ',' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ' ' + '$2');
    }
    return x1 + x2;
}
$.views.helpers({
    formatNumber: function (str) {
        return formatNumber(str);
    }
});
var settings = {
    container: 'clist',
    template: 'cartTemplate',
    company: 'demo',
    apikey: 'Xwrok26ZNzWDsoow2CUzDrnOScY5aCJrIxlsh3JQjuE%3d',
    taxlist: 2,/*ID bang thue VAT*/
    onCompleted: onCompleted
}

$(document).ready(function () {
    mGeo.getCountries(settings, function(data) {
        if (data) $('#order-country').html($('#geoTemplate').render(data));        
        onChangeCountry();
    });
    viewCart();
});
function onChangeCountry() {
    mGeo.getCities($('#order-country').val(), settings, function(data) {
        if (data) $('#order-city').html($('#geoTemplate').render(data));        
        onChangeCity();
    });
}
function onChangeCity() {
    mGeo.getDistricts($('#order-city').val(), settings, function(data) {
        if (data) $('#order-district').html($('#geoTemplate').render(data));        
    });
}
function viewCart() {
    var count = mCart.count();
    var value = mCart.value();
    if (0 == count || 0 == value) {
        $('.demo').html('<div class="notice">Không có mặt hàng nào trong giỏ hàng của bạn!<br /><br /><a href="products"><u>Danh sách hàng hóa</u></a></div>');
    }
    else {
        mCart.list(settings);
    }
}
function onCompleted(cart) {
    $('#cart-total').html(formatNumber(mCart.value()));
}
function viewOrderForm() {
    if (!$('#order-partner').val()) {
        mAccount.getInfoDetail(settings, function(data) {
            if (data.account) {
                $('#order-partner').val(data.account.name);
                $('#order-name').val(data.account.fullname ? data.account.fullname : data.account.name);
                $('#order-phone').val(data.account.phone);
                $('#order-email').val(data.account.email);
                $('#order-address').val(data.account.address);

                $('#account').html('<a href="/example/account">Tài khoản</a>');
            }
        });
    }
    $('#submit-order').toggle();
}
function order() {
    if (!$('#order-name').val()) {
        alert('Hãy nhập tên của bạn!');
        $('#order-name').focus();
        return false;
    }
    if (!$('#order-phone').val()) {
        alert('Hãy nhập điện thoại của bạn!');
        $('#order-phone').focus();
        return false;
    }
    if (!$('#order-address').val()) {
        alert('Hãy nhập địa chỉ của bạn!');
        $('#order-address').focus();
        return false;
    }
    if ($('#order-email').val() && !mHelper.validateEmail($('#order-email').val())) {
        alert('Email không hợp lệ!');
        $('#order-email').focus();
        return false;
    }

    var required = $('#order-required').val();
    var email = $('#order-email').val();
    var address = $('#order-address').val();
    var description = $('#order-name').val() + ' ' + mHelper.formatPhonenumber($('#order-phone').val());
    var settings = {
        company: 'demo',
        apikey: 'Xwrok26ZNzWDsoow2CUzDrnOScY5aCJrIxlsh3JQjuE%3d'
    }
    mCart.order(email, required, address, description, settings, function() {
        mCart.clear();
        $('.demo').html('<div class="notice">Cám ơn bạn đã đặt hàng!<br /><br /><a href="products"><u>Danh sách hàng hóa</u></a></div>');
    });
}
function login() {
    if ($('#login-name').val().length < 2) {
        alert('Tên không hợp lệ!');
        $('#login-name').focus();
        return false;
    }
    if ($('#login-password').val().length < 6) {
        alert('Mật khẩu không hợp lệ!');
        $('#login-password').focus();
        return false;
    }
    mAccount.login($('#login-name').val(), $('#login-password').val(), settings, function (data) {
        if (data.account) { $('#submit-order').hide(); viewOrderForm(); }
        else $('#account .validate').html('<div class="notice">Đăng nhập thất bại, hãy kiểm tra tên và mật khẩu của bạn!</div>');
    });
    return false;
}
</script>

    

Xem thêm mô tả API