maimai.vn api

• Trang chủ
• »
• Demo
• »
• Danh sách hàng hóa

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 Cài đặt -> Hàng hóa

Mã nguồn

HTML

<div class="demo">
    <div class="header">
        <div class="block">
            Sắp xếp:<br />
            <select id="sortBy" onchange="list()">
                <option value="1">Giá: Thấp đến Cao</option>
                <option value="2">Giá: Cao đến Thấp</option>
                <option value="0" selected="selected">Mã hàng</option>
            </select>
        </div>
        <div class="block">
            Hiển thị:<br />
            <select id="showBy" onchange="list()">
                <option value="2">2 sản phẩm</option>
                <option value="4" selected="selected">4 sản phẩm</option>
                <option value="10">10 sản phẩm</option>
            </select>
        </div>

        <div class="pager" style="float:right"></div>
        <div style="clear:both;"></div>
    </div>
    <ul class="list" id="plist"></ul>
    <div class="right">
        <b>Danh mục:</b>
        <ul id="category"></ul>
        <br />
        <b>Đặc tính:</b>
        <div id="attribute"></div>
        <br />
        <b>Giá:</b><br />
        <input type="text" id="min-price" style="width:50px" placeholder="Min" />
        <input type="text" id="max-price" style="width:50px" placeholder="Max" />
        <span style="cursor:pointer" onclick="list()">OK</span>
    </div>
    <div style="clear:both;"></div>
    <div class="footer">
        <b>Giỏ hàng:</b>
        <div id="cart-info">
            Mặt hàng: <span id="cart-info-cnt"></span>; Số lượng: <span id="cart-info-qty"></span>; Giá trị: <span id="cart-info-val"></span>.
            <span id="cart-action"><a href="cart">Xem giỏ hàng</a> | <a href="javascript:" onclick="mCart.clear(updateCartInfo)">Xóa</a></span>
        </div>
    </div>
</div>
<script id="listTemplate" type="text/x-jsrender">
    <li>
        {{if (type == 1)}}
        <a href="family/{{:seoURL}}"><img src="{{:thumb}}" class="thumb" /></a>
        <div class="code"><a href="family/{{:seoURL}}">{{:code}}</a></div>
        {{else}}
        <a href="product/{{:seoURL}}"><img src="{{:thumb}}" class="thumb" /></a>
        <div class="code"><a href="product/{{:seoURL}}">{{:code}}</a></div>
        {{/if}}
        <div class="name">{{:name}}</div>
        {{if price > 0}}
            {{if (price2 > 0)}}
            <div class="price" title="Giá cũ"><span style="text-decoration:line-through;color:red">{{>~formatNumber(price2)}} VND</span></div>
            {{/if}}
            <div class="price"><b>{{>~formatNumber(price)}}</b> VND</div>
            {{if (type == 1)}}
            <a class="order" href="family/{{:seoURL}}">Chọn phiên bản</a>
            {{else}}
            <a class="order" href="javascript:" onclick="add2Cart({{:id}}, {{:price}}, 1)">Đặt hàng</a>
            {{/if}}
        {{else}}
            <div class="price">- VND</div>
            <a class="order" href="/example/contact">Liên hệ</a>
        {{/if}}
    </li>
</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 category = '';
    var attributeTypes = [];
    var attributes = [];
    var page = 0;
    var settings = {
        company: 'demo',
        apikey: 'Xwrok26ZNzWDsoow2CUzDrnOScY5aCJrIxlsh3JQjuE%3d',
        container: 'plist',
        template: 'listTemplate'
    }

    $(document).ready(function () {
        $('#lmenuitem-13').addClass('active');

        //highlight demo code
        $('pre code').each(function (i, block) {
            hljs.highlightBlock(block);
        });

        //get categories
        mCategory.get(1, settings, function(categories) {
            if (categories) {
                $('#category').html(buildCategoryTree(categories, 1));

                //get products
                category = categories[0].seoURL;
                list();
                updateCartInfo();
            }
        });
    });
    function buildCategoryTree(categories, parent) {
        var html = '';
        for (var i=0; i<categories.length; i++) {
            if (categories[i].parentID == parent && categories[i].id > 1) {
                html += '<li><span onclick="changeCategory(\'' + categories[i].seoURL + '\', this)">';
                html += categories[i].name + ' (' + categories[i].contentCount + ')</span>';
                html += '<ul>' + buildCategoryTree(categories, categories[i].id) + '</ul>';
                html += '</li>';
            }
        }
        return html;
    }
    function changeCategory(id, dom) {
        $('#category li.active').removeClass('active');
        $(dom).parent().addClass('active');

        mCategory.detail(id, settings, function(data) {
            //display attributes
            var html = '';
            if (data.attributeTypes) {
                for (var i=0; i<data.attributeTypes.length; i++) {
                    html += '<div>' + data.attributeTypes[i].name + ':<br />';
                    if (data.attributeTypes[i].attributes) {
                        for (var j=0; j<data.attributeTypes[i].attributes.length; j++) {
                            html += '<span onclick="changeAttribute(' + data.attributeTypes[i].id + ', ' + data.attributeTypes[i].attributes[j].id + ', this)">' + data.attributeTypes[i].attributes[j].name + '</span>';
                        }
                    }
                    html += ' [<span onclick="changeAttribute(' + data.attributeTypes[i].id + ', 0, this)" style="padding:0">x</span>]</div>';
                }
            }
            $('#attribute').html(html);

            attributeTypes = data.attributeTypes;
        });
        attributes = [];
        category = id;

        list();
    }
    function changeAttribute(type, id, dom) {
        //remove all atts of type
        if (0 == id) {
            if (attributes.length > 0) {
                for (var i=0; i<attributeTypes.length; i++) {
                    if (attributeTypes[i].attributes) {
                        for (var j=0; j<attributeTypes[i].attributes.length; j++) {
                            var index = $.inArray(attributeTypes[i].attributes[j].id, attributes)
                            if (index >= 0 && type == attributeTypes[i].id) {
                                attributes.splice(index, 1);
                                $(dom).siblings('.active').removeClass('active');
                                //break;
                            }
                        }
                    }
                }
            }
        }
        else {
            var index = $.inArray(id, attributes);
            if (index < 0) {
                attributes.push(id);
                $(dom).addClass('active');
            }
            else {
                attributes.splice(index, 1);
                $(dom).removeClass('active');
            }
        }
        list();
    }
    function list() {
        switch (parseInt($('#sortBy').val())) {
            case 1:
                settings.sortBy = 2;
                settings.orderBy = 0;
                break;
            case 2:
                settings.sortBy = 2;
                settings.orderBy = 1;
                break;
            default:
                settings.sortBy = 0;
                settings.orderBy = 0;
                break;
        }
        settings.pageSize = $('#showBy').val();

        var price1 = $('#min-price').val();
        if (price1 && !isNaN(price1)) settings.price1 = parseInt(price1);
        else settings.price1 = 0;

        var price2 = $('#max-price').val();
        if (price2 && !isNaN(price2)) settings.price2 = parseInt(price2);
        else settings.price2 = 0;

        if (settings.price2 > 0 && settings.price1 > settings.price2) {
            alert('Giá không hợp lệ!');
            $('#min-price').focus();
            return;
        }

        mProduct.list(category, attributes, page, settings);
    }

    //CART
    function add2Cart(id, price, quantity) {
        if (!mCart.add(id, price, quantity, updateCartInfo)) {
            alert('Không thể thêm mặt hàng này vào giỏ hàng!');
        }
    }
    function updateCartInfo() {
        var cartCnt = mCart.count();
        $('#cart-info-cnt').html(cartCnt);
        $('#cart-info-qty').html(formatNumber(mCart.quantity()));
        $('#cart-info-val').html(formatNumber(mCart.value()));

        if (cartCnt > 0) $('#cart-action').show();
        else $('#cart-action').hide();
    }
</script>

    

Xem thêm mô tả API