1. The virtual try-on system uses the Jquery tool, so you need to import the Jquery library before using it.

    <script type="text/javascript" src="./js/jquery-3.3.1.min.js">

2. Add a DIV tag to the page. This tag is the container for trying on.

 <div id="tryon_single_iframe" class="tryon_single_iframe" data-sku_str="Sku01,Sku02,Sku03" data-detault_sku="Sku01"></div>

3. Add JavaScript code. The code content is as shown below.

<script type="text/javascript" >
    var sku_str = "904201,82027,903867,903875";
    var device = "pc"; // pc  ||  m
    var detault_sku = "903875";
    load_try_on_detail(device, sku_str, detault_sku); 

    function load_try_on_detail(device, sku_str, detault_sku) {
        if (!sku_str) {
            console.error("sku_str is null");
            return;
        } else {
            jQuery("#tryon_single_iframe").data("sku_str", sku_str);
        }
        if (detault_sku) {
            jQuery("#tryon_single_iframe").data("detault_sku", detault_sku);
        }
        var formdata = new FormData();
        formdata.append('device', device);
        formdata.append("pathname", window.location.pathname);
        formdata.append("sku_str", jQuery("#tryon_single_iframe").data("sku_str"));
        formdata.append("category", "detail");
        formdata.append('domain', window.location.host);
        jQuery("#tryon_single_iframe").fadeIn(100);
        jQuery.ajax({
            url: 'https://demo.artryon.cn/index.php/admin/GetTpl/detail.html',
            type: 'POST',
            data: formdata,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                console.log("fetch success");
                jQuery("#tryon_single_iframe").html('');
                jQuery("#tryon_single_iframe").html(data);
            },
            error: function() {
                console.log("error");
            }
        });
    }
</script>