How to display RITM info to Service Portal Cart?

[Bob20]

I'm trying to modify the Service Portal cart to show the Short Description on SP Cart (both large and small views). I have made a clone of the Cart widget and the cart template, however I can't seem to find the information I need to edit the widget to show on the RITM Short Description in the cart view. Currently the OOTB view is like this:

What I'm hoping to achieve to has it look like this:

I had look through various Community posts and thought that this might work...

{{::data.sc_cat_item.short_description}}   -   However it does not return any data. I'm clearly missing something.

The "Design request: Rack Cards for Rec Centre Promotion" in the example is just a hack, but is the actual Short Description of the RITM. I know that the Widget loops through the items in the cart and populates the page table with the data it pulls from the RITM for things like cost. We do not   use cost/qty in our case and that has already been removed.

Might anyone be able to provide clear direction on this?

Thanks.

Bob.

[Bob20]

I have found this post that appears to indicate that it is possible to access the submission form data and post it in the cart list (both large and small):

Shopping Cart Available for Service Portal .

B.

[Michael Ritchie]

Bob, I can confirm the data is there as it shows up in the "old school" service catalog UI in the platform UI:

Its a matter of updating the widget to include the variables.   Unfortunately that is not an area of expertise for me.

[Bob20]

I ended up getting help with the script and angular template from ServiceNow. Frank Schuster, you're a great guy. I cloned the Shopping Cart Widget as well as the Angular Template. The variable I was trying to display from the cart iten is u_mr_job_name.

Angular Template addition:

<p ng-if="item.variables.question"><h4><b>${Job}:</b> {{::item.variables.value}}</h4></p> 

Server Script:

//Frank Schuster @ SNOW Code
for(var p=0; p < data.cartItems.length; p++) {
data.cartItems[p].variables = getVariables(data.cartItems[p].sys_id);
}

//retrieve variables from the item option table (until we can figure out how to use sn_sc.CartJS)
function getVariables(cartItem) {
var variables = {};

var grItemOption = new GlideRecord("sc_item_option");
grItemOption.addQuery("cart_item", cartItem);
grItemOption.addQuery("item_option_new.name", "u_mr_job_name"); //name of the variable (better: do gs.getProperty() and write the value into a sys_property to retrieve from there)
grItemOption.query();
if(grItemOption.next()) {
variables.question = grItemOption.getDisplayValue("item_option_new");

//try to retrieve the display value for that variable from the question_choice table, otherwise fall back to the variable value (Example: QC value would be "64GB" vs variable value "sixtyfour").
var grQuestionChoice = new GlideRecord("question_choice");
if(grQuestionChoice.get("value", grItemOption.getValue("value"))) {
variables.value = grQuestionChoice.getDisplayValue("text");
} else {
variables.value = grItemOption.getDisplayValue("value");
}
}

return variables;
}

[YenGar]

Hi Bob, 

Can you tell me where in the angular ng-template did you add the code- <p ng-if="item.variables.question"><h4><b>${Job}:</b> {{::item.variables.value}}</h4></p> 

I am trying to achieve something similar and would like to know where this line can be added in the template.

Thank you so much!! 

Yeny

[Bob20]

Yeny,

I'm just back from vacation, and a bit busy. I'll get back to you in a few days.

Bob.