Page Comparison

...

ReturnP: this is the info page that the respondent lands once returned from the shelf, all data captured and appended into the hidden variables must be on a same page so you can recode it from the API

...

Code Block

language	js

if (!IsInRdgMode()) {

    var link = encodeURIComponent(GetRespondentUrl('LandingLabel'));

    Redirect("https://survey.rose.conceptsauce.io?param_id=XXXXXXX&respondent_id=" + CurrentID() + "&link=" + link, true);

}

STEP 2

API integration:

Inside the info page that the respondents returns write the javascript code in the Javascript tab.

You can find the information about each API Call at - Virtual Shelf

Info
Please do not forget to add another step to retrieve the `respondent_encoded`, this is a new method for the API that has been added. More info on this here: Basic API calls

STEP 2.1

Get the survey ID from ParamID, Check if Api call was successful

Code Block

language	js

//Get survey ID from Param ID -------------------------------------
var paramsCallObj = {
    event_type: "params_crud",
    action: "get_params",
    data: {
        params_id: cellParamID,
    },
};
var paramsCallStr = JSON.stringify(paramsCallObj);

var surveyIDcall = $.parseJSON(
    $.ajax({
        url: "https://better-params-api.rose.conceptsauce.io/api",
        type: "POST",
        data: paramsCallStr,
        dataType: "json",
        async: false,
        success: function (result) {
            console.log("success id call");
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        },
    }).responseText
);

//check if API call was succesful
var survey_id = "";
if (surveyIDcall.code == 200) {
    survey_id = surveyIDcall.data.params.survey_id;
}

STEP 2.2

Get shelf summary purchases and append the data into the hidden variables

Code Block

language	js

//get SUMMARY -----------------------------------------------------
var surveyIdCallObj = {
    event_type: "survey_data_request",
    action: "get_shop_shelf_summary_purchases",
    data: {
        target: {
            survey_id: survey_id,
            respondent_id: respondent_id,
            block_id: "shelf",
        },
    },
};
var surveyIdCallStr = JSON.stringify(surveyIdCallObj);

var resultAPIcall1 = $.parseJSON(
    $.ajax({
        url: "https://public-survey-data-api.rose.conceptsauce.io/api",
        type: "POST",
        data: surveyIdCallStr,
        dataType: "json",
        async: false,
        success: function (result) {
            console.log("success api call SUMMARY");
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        },
    }).responseText
);



//Get all SKUs and append them into the variable
var P1summarySku = Confirmit.page.getQuestion("P1SKUs");
P1summarySku.setValue(null);

var P1SKU = resultAPIcall1.data.basket_summary.sku_list;


P1summarySku.setValue(P1SKU);

...

STEP 2.3

Get the shelf details and append them into the hidden variables

...

Get all the items the respondent have looked at

Create object for the favorite that needs to be excluded

...

Code Block

language	js

var reqBodyDetails = {
    event_type: "survey_data_request",
    action: "get_shop_shelf_detail_purchases",
    data: {
        target: {
            survey_id: survey_id,
            respondent_id: respondent_id,
            block_id: "shelf",
        },
    },
};

var reqBodyDetailsStr = JSON.stringify(reqBodyDetails);

var resultAPIcall2 = $.parseJSON(
    $.ajax({
        url: "https://public-survey-data-api.rose.conceptsauce.io/api",
        type: "POST",
        data: reqBodyDetailsStr,
        dataType: "json",
        async: false,
        success: function (result) {
            console.log("success api call DETAILS");
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        },
    }).responseText
);

var rawPurchaseDet = resultAPIcall2.data.basket_details.raw_purchase_details;

//Get quantity for each SKU
var SkuQuant = [];

for (var z = 0; z < rawPurchaseDet.length; z++) {
    SkuQuant.push(rawPurchaseDet[z].quantity);
}
var SkuQtity = Confirmit.page.getQuestion("P1Quant");
SkuQtity.setValue(null);
SkuQtity.setValue(SkuQuant);


//Set total time spent at the shelf
var P1shelfTime = Confirmit.page.getQuestion("P1ShelfTime");
P1shelfTime.setValue(null);
P1exDur = resultAPIcall2.data.exercise_duration;
P1shelfTime.setValue(P1exDur);

...

STEP 2.4

Get the shelf details and append them into the hidden variables

Code Block

language	js


//get summary ITEMS looked at
var reqSumItems = {
    event_type: "survey_data_request",
    action: "get_shop_shelf_summary_items_looked_at",
    data: {
        target: {
            survey_id: survey_id,
            respondent_id: respondent_id,
            block_id: "shelf",
        },
    },
};

var reqSumItemsStr = JSON.stringify(reqSumItems);

var resultAPIcall3 = $.parseJSON(
    $.ajax({
        url: "https://public-survey-data-api.rose.conceptsauce.io/api",
        type: "POST",
        data: reqSumItemsStr,
        dataType: "json",
        async: false,
        success: function (result) {
            console.log("success api call Summary Items");
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        },
    }).responseText
);


//recode all items looked at(bought and not bought, abe vsi4ki)
var itemsLookedAt = resultAPIcall3.data.items_looked_at;

var P1look = Confirmit.page.getQuestion("P1looked");
P1look.setValue(null);

var P1lookArr = [];

for (var p = 0; p < itemsLookedAt.length; p++) {
    P1lookArr.push(itemsLookedAt[p].sku);
}

P1look.setValue(P1lookArr);

...

STEP 2.5

Creating the object that will pass the selected favorite to be grayed out:

Code Block

language	js

 var greyoutObj = {
                    "shelf": {
                      "set:disabled_products": [
                      ]
                    }
                  }
 
  var chosen = "^f('SKU')[f('P2').get()].label()^";
  
    greyoutObj.shelf["set:disabled_products"].push(chosen);
     
  var chosenParam = JSON.stringify(greyoutObj);
  var end = btoa(chosenParam);

var linkquestion = Confirmit.page.getQuestion("linkDisabled");
linkquestion.setValue(end);

...

STEP 2.5.1

Pass the selection in the redirect link

Code Block

language	js

if (!IsInRdgMode()) {

    var link = encodeURIComponent(GetRespondentUrl('ReturnB'));
    var chosenParam = f('linkDisabled').get();
  

        Redirect("https://survey.rose.conceptsauce.io?param_id=PRMS01G3H5T63290RQZY2KG8250G53&respondent_id=" + CurrentID() + "&custom_params=" + chosenParam + "&link=" + link, true);
  }

EXAMPLE OF ALL THE API CALLS AND CODE

Code Block

language	js

var respondent_id = "^CurrentID()^";
//console.log("respondent_id: " + respondent_id);

//PIPE THE CORRECT params_id based on CELL (1 or 2)
var cellParamID = "";
var Qcell = "^f('cell').value()^";
//console.log(Qcell);

if (Qcell == 1) {
    cellParamID = "PRMS01G3H5QXCJ252E6FK650KEGB0Y";
} else if (Qcell == 2) {
    cellParamID = "PRMS01G3H4T858PQD3K1FF04P3C64D";
} else if (Qcell == 3) {
    cellParamID = "PRMS01G3RTH7CHX4X160AMHK4G95H0";
} else if (Qcell == 4) {
    cellParamID = "PRMS01G3H5GZEMTF7GX9SYS00TDDM2";
}


//Get survey ID from Param ID -------------------------------------
var paramsCallObj = {
    event_type: "params_crud",
    action: "get_params",
    data: {
        params_id: cellParamID,
    },
};
var paramsCallStr = JSON.stringify(paramsCallObj);

var surveyIDcall = $.parseJSON(
    $.ajax({
        url: "https://better-params-api.rose.conceptsauce.io/api",
        type: "POST",
        data: paramsCallStr,
        dataType: "json",
        async: false,
        success: function (result) {
            console.log("success id call");
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        },
    }).responseText
);

//console.log("out");

var survey_id = "";
if (surveyIDcall.code == 200) {
    survey_id = surveyIDcall.data.params.survey_id;
}
//console.log("survey ID: " + survey_id);

//get SUMMARY -----------------------------------------------------
var surveyIdCallObj = {
    event_type: "survey_data_request",
    action: "get_shop_shelf_summary_purchases",
    data: {
        target: {
            survey_id: survey_id,
            respondent_id: respondent_id,
            block_id: "shelf",
        },
    },
};
var surveyIdCallStr = JSON.stringify(surveyIdCallObj);

var resultAPIcall1 = $.parseJSON(
    $.ajax({
        url: "https://public-survey-data-api.rose.conceptsauce.io/api",
        type: "POST",
        data: surveyIdCallStr,
        dataType: "json",
        async: false,
        success: function (result) {
            console.log("success api call SUMMARY");
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        },
    }).responseText
);

//console.log("SUMMARY OUT");
//console.log(resultAPIcall1);

//Get all SKUs and append them into the variable
var P1summarySku = Confirmit.page.getQuestion("P1SKUs");
P1summarySku.setValue(null);

var P1SKU = resultAPIcall1.data.basket_summary.sku_list;
//console.log("SKU LIST BELOW");
//console.log(P1SKU);

P1summarySku.setValue(P1SKU);

// get DETAILS ---------------------------------------------------------
var reqBodyDetails = {
    event_type: "survey_data_request",
    action: "get_shop_shelf_detail_purchases",
    data: {
        target: {
            survey_id: survey_id,
            respondent_id: respondent_id,
            block_id: "shelf",
        },
    },
};

var reqBodyDetailsStr = JSON.stringify(reqBodyDetails);

var resultAPIcall2 = $.parseJSON(
    $.ajax({
        url: "https://public-survey-data-api.rose.conceptsauce.io/api",
        type: "POST",
        data: reqBodyDetailsStr,
        dataType: "json",
        async: false,
        success: function (result) {
            console.log("success api call DETAILS");
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        },
    }).responseText
);

var rawPurchaseDet = resultAPIcall2.data.basket_details.raw_purchase_details;

//Get quantity for each SKU
var SkuQuant = [];

for (var z = 0; z < rawPurchaseDet.length; z++) {
    SkuQuant.push(rawPurchaseDet[z].quantity);
}
var SkuQtity = Confirmit.page.getQuestion("P1Quant");
SkuQtity.setValue(null);
SkuQtity.setValue(SkuQuant);


//Set total time spent at the shelf
var P1shelfTime = Confirmit.page.getQuestion("P1ShelfTime");
P1shelfTime.setValue(null);
P1exDur = resultAPIcall2.data.exercise_duration;
P1shelfTime.setValue(P1exDur);




//get summary ITEMS looked at
var reqSumItems = {
    event_type: "survey_data_request",
    action: "get_shop_shelf_summary_items_looked_at",
    data: {
        target: {
            survey_id: survey_id,
            respondent_id: respondent_id,
            block_id: "shelf",
        },
    },
};

var reqSumItemsStr = JSON.stringify(reqSumItems);

var resultAPIcall3 = $.parseJSON(
    $.ajax({
        url: "https://public-survey-data-api.rose.conceptsauce.io/api",
        type: "POST",
        data: reqSumItemsStr,
        dataType: "json",
        async: false,
        success: function (result) {
            console.log("success api call Summary Items");
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        },
    }).responseText
);

//console.log("Summary Items looked OUT");
//console.log(resultAPIcall3);

//recode all items looked at(bought and not bought, abe vsi4ki)
var itemsLookedAt = resultAPIcall3.data.items_looked_at;

var P1look = Confirmit.page.getQuestion("P1looked");
P1look.setValue(null);

var P1lookArr = [];

for (var p = 0; p < itemsLookedAt.length; p++) {
    P1lookArr.push(itemsLookedAt[p].sku);
}
//console.log(P1lookArr);
P1look.setValue(P1lookArr);

// Get Details Looked at

var reqDetLooked = {
    event_type: "survey_data_request",
    action: "get_shop_shelf_detail_items_looked_at",
    data: {
        target: {
            survey_id: survey_id,
            respondent_id: respondent_id,
            block_id: "shelf",
        },
    },
};

var resultDetLookedStr = JSON.stringify(reqDetLooked);

var resultAPIcall4 = $.parseJSON(
    $.ajax({
        url: "https://public-survey-data-api.rose.conceptsauce.io/api",
        type: "POST",
        data: resultDetLookedStr,
        dataType: "json",
        async: false,
        success: function (result) {
            console.log("success api call Details looked");
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        },
    }).responseText
);

//console.log("Details looked Items OUT");
//console.log(resultAPIcall4);

//Get Findability details
var reqFindability = {
    event_type: "survey_data_request",
    action: "get_findability_details",
    data: {
        target: {
            survey_id: survey_id,
            respondent_id: respondent_id,
            block_id: "shelf",
        },
    },
};

var reqFrindabilityStr = JSON.stringify(reqFindability);

var resultAPIcall5 = $.parseJSON(
    $.ajax({
        url: "https://public-survey-data-api.rose.conceptsauce.io/api",
        type: "POST",
        data: reqFrindabilityStr,
        dataType: "json",
        async: false,
        success: function (result) {
            console.log("success api call Findability");
            console.log(result);
        },
        error: function (error) {
            console.log(error);
        },
    }).responseText
);

//console.log("Findability OUT");
//console.log(resultAPIcall5);



$(document).ready(function () {
    $(".cf-navigation-next").click();
});

Versions Compared

Old Version 1

New Version Current

Key

STEP 2

STEP 2.1

STEP 2.2

STEP 2.3

STEP 2.4

STEP 2.5

STEP 2.5.1

EXAMPLE OF ALL THE API CALLS AND CODE