maimai.vn api

• Trang chủ
• »
• Demo
• »
• Chi tiết 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="detail" id="pdetail"></div>

    <div class="right">
    <b>Mặt hàng trong danh mục:</b>
    <ul id="prels"></ul>
    </div>
    <div style="clear:both"></div>
</div>

<!--JSRender templates-->
<script id="detailTemplate" type="text/x-jsrender">
    <h1>{{:name}}</h1>
    <div class="code">Mã hàng: {{:code}}</div>
    {{if familyCode}}<div class="code">Nhóm hàng: <a href="/example/family/{{:familyURL}}">{{:familyCode}}</a></div>{{/if}}
    {{if attributes}}
    <div class="attributes">
        {{for attributes}}
        {{:typeName}}: <b>{{:name}}</b> |
        {{/for}}
    </div>
    {{/if}}
    {{if price > 0}}
        {{if (price2 > 0)}}
        <div class="price">Giá cũ: <span style="text-decoration:line-through;color:red">{{>~formatNumber(price2)}} VND</span></div>
        {{/if}}
    <div class="price">Giá: <b>{{>~formatNumber(price)}}</b> VND | <a class="order" href="javascript:" onclick="add2Cart({{:id}}, {{:price}}, 1)">Đặt hàng</a></div>
    {{else}}
    <div class="price">Giá: - VND | <a class="order" href="/example/contact">Liên hệ</a></div>
    {{/if}}
    <p>{{:description}}</p>
    {{if imgs}}
        {{for imgs}}
        <a href="{{:#data}}" target="_blank"><img src="{{:#data}}" class="product-img" /></a>
        {{/for}}
    {{else}}
    <a href="{{:thumb}}" target="_blank"><img src="{{:thumb}}" class="product-img" /></a>
    {{/if}}
</script>
<script id="relsTemplate" type="text/x-jsrender ">
    <li>
    <a href="javascript:" onclick="detail('{{:seoURL}}')"><img src="{{:thumb}}" class="thumb" /></a>
    <div class="code"><a href="javascript:" onclick="detail('{{:seoURL}}')">{{:code}}</a></div>
    <div class="name">{{:name}}</div>
    <div class="price"><b>{{>~formatNumber(price)}}</b> VND</div>
    </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 settings = {
        company: 'demo',
        apikey: 'Xwrok26ZNzWDsoow2CUzDrnOScY5aCJrIxlsh3JQjuE%3d',
        type: 2, /*1: family, 2: product*/
        container: 'pdetail',
        template: 'detailTemplate',
        onCompleted: onCompleted
    }
    var relSettings = {
        container: 'prels',
        template: 'relsTemplate',
        count: 3
    }

    $(document).ready(function () {
        var id = window.location.pathname.split('/')[3];
        detail(id);
    });

    function detail(id) {
        mProduct.detail(id, settings, relSettings);
    }
    function onCompleted(data) {
        if (null == data.product) {
            $('.demo').html('<div class="notice">không tìm thấy sản phẩm!</div>');
        }
    }

    //CART
    function add2Cart(id, price, quantity) {
        if (mCart.add(id, price, quantity, updateCartInfo)) {
            alert('Mặt hàng đã được thêm vào giỏ hàng!');
        }
        else {
            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