The example below is a Pure JavaScript and is best used on the client side. For instance this script sits on the Client side platform such as Confirmit/decrypt etc..
It is used when the respondent is redirected back to the client platform after completion of the Virtual Shelf exercise. This example below requests the respondent Data. i.e. what they clicked on and outputs this for the client to implement/map to the field required.
You can see a live example of this in the below link:
https://jsfiddle.net/pabragin/7r4jabhw/26/
/* © 2018 ConceptSauce ltd */ /* The API URL and the Respondent ID */ var mappleUrl = "https://survey-api.csiolabs.me/?projectid=4963d1e1-0776-48c6-6690-83a76a7c7b5f&pageid=9178c8b3-1dc1-444d-65c0-8e5e142b7e50&respondentid=hn12345", submitButton = document.getElementById("btn_continue"); function onSuccess(result) { var questions = result.questions, ul = document.getElementsByTagName("ul"); questions.forEach(function(question) { if (question.questionTitle === "q1") /* CAUTION... Virtual Shelf QType NameID set in CS Platform. Make sure you change q1 to the correct title! */ { var products = question.qResponseData.basketContent; productsBoughtFill(ul, products); var clicked = question.qResponseData.productViewEvents; productsClickFill(ul, clicked); } }); submitButton.style.visibility = "visible"; } function onError(response) { alert("Error"); } function productsBoughtFill(ul, products) { var myCount = 0; if (products.length) { ul[0].innerHTML += "<strong>BOUGHT:</strong>"; products.forEach(function(product, id) { ul[0].innerHTML += "<li>UPC: " + product.userMeta.UPC + " title: " + product.title + " qty: " + product.quantity + " Per Item Price: " + product.priceParams.basePrice + "</li>" }); } } function productsClickFill(ul, products) { if (products) { var clickedString = ""; ul[0].innerHTML += "<strong>CLICKED:</strong>"; products.forEach(function(product, id) { ul[0].innerHTML += "<li>UPC: " + product.userMeta.UPC + " title: " + product.title + "</li>"; }); } } function getJSON(url, success, error) { var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.responseType = 'json'; xhr.onload = function() { var status = xhr.status; if (status === 200) { success(xhr.response); } else { error(xhr.response); } }; xhr.send(); }; getJSON(mappleUrl, onSuccess, onError);