Hi community,
I'm working on the Service Portal for my organization and they would like to see some variable fields in in the SC Shopping Cart widget. The widget is using the large_shopping_cart template and by default, it shows the product, price, quantity and subtotal. We would like to have the Requested For (variable in the form) value be added to it as well so it would look like the below to reflect who the item is requested for
I am not sure how to get the variable field to be displayed in the layout. Would like to know if any of you has done something similar and would appreciate any advice/suggestions!!
This is the template that I am using - I've already made some modifications to it but would like to know how i can get variables in it:
<div>
<div ng-show="c.data.cartItems.length > 0" class="panel panel-primary b">
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width: 52%;">${Product}</th>
<th style="width: 10%;">${Requested for}</th>
<th style="width: 10%;">${Price}</th>
<th style="width: 8%;">${Quantity}</th>
<th style="width: 10%;">${Subtotal}</th>
<th style="width: 10%;"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.cartItems track by item.sys_id | orderBy: 'order'">
<td data-th="Product">
<div class="row">
<div class="col-sm-2 hidden-xs"><img ng-show="item.picture" ng-src="{{item.picture}}" alt="..." class="img-responsive item-image"/></div>
<div class="col-sm-10">
<h4 class="nomargin"><a ng-href="?id=sc_cat_item&sys_id={{item.item_id}}">{{item.name}}</a></h4>
<p class="hidden-xs">{{item.short_description}}</p>
</div>
</div>
</td>
<td>
<strong>{{item.display_price}}</strong>
<div ng-show="item.recurring_price > 0">+ {{item.display_recurring_price}} {{item.recurring_frequency_display}}</div>
</td>
<td data-th="Quantity">
<input type="number"
ng-if="item.show_quantity"
class="form-control text-center"
ng-model="item.quantity"
min="1"
max="99"
ng-model-options="{ updateOn: 'blur' }"
ng-change="c.updateQuantity(item)">
<span ng-if="!item.show_quantity">-</span>
</td>
<td>
<strong>{{item.subtotal_price}}</strong>
<div ng-show="item.recurring_subtotal > 0">+ {{item.recurring_subtotal_price}} {{item.recurring_frequency_display}}</div>
</td>
<td class="actions" data-th="">
<button class="btn btn-info btn-sm" ng-show="item.has_options" ng-click="c.editItem(item.sys_id)"><i class="fa fa-pencil"></i></button>
<button class="btn btn-danger btn-sm" ng-click="c.removeItem($event, item)"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
</tbody>
</table>
<div class="panel-footer clearfix">
<div class="pull-right">
<h4 class="text-bold">${Total price}: {{c.data.cart.display_subtotal}}</h4>
<h5 class="text-bold" ng-repeat="(key, value) in c.data.cart.recurring_subtotals">+ {{value}} {{key}}</h5>
</div>
</div>
</div>
<!-- <div class="panel b" ng-show="c.data.cartItems.length > 0">
<div class="order-details-container form-group">
<div class="order-details requested-for-details">
<div>
<label>${Requested For}</label>
<sn-record-picker field="c.requestedFor" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>
</div>
<div>
<label>${Deliver To}</label>
<textarea class="form-control" ng-model="c.deliverTo"></textarea>
</div>
</div>
<div class="order-details special-instructions-details">
<label>${Special Instructions}</label>
<textarea class="form-control" ng-model="c.additionalDetails"></textarea>
</div>
</div>-->
<div class="panel-footer">
<a href="?id=sc_home" name="submit" ng-click="triggerOnSubmit()" class="btn btn-default m-r-xs">${Continue Shopping}</a>
<button ng-disabled="c.checkoutInProgress" name="submit" ng-click="c.triggerCheckout($event)" class="btn btn-primary m-l-xs pull-right">
<span ng-show="!c.checkoutInProgress">${Checkout}</span>
<span ng-show="c.checkoutInProgress">${Ordering...}</span>
</button>
<!--<a class="btn btn-default"
ng-click="c.saveBundle()">${Save as Bundle}</a>-->
</div>
</div>
<div ng-show="c.data.cartItems.length == 0" class="panel panel-default b">
<div class="panel-body">
<div class="empty-state-content">
<span class="fa fa-shopping-cart"></span>
<h3>${Your shopping cart is empty}</h3>
<p>${Once you have added items to your shopping cart, you can check out from here.}</p>
<a class="btn btn-primary" href="?id=sc_home">${View the Catalog}</a>
</div>
</div>
</div>
</div>Thank you,
Yeny
Hi, Please check the response in one of my replies. I have added step by step on what i have done in addition and also attached the xml files if you want to download. See this response below in this thread. If you still have difficulty, then let me know.
Hello @diNesh_M
Here is what our script looks like to display the requested_for variable among others. I have also attached a screenshot of the cart with an item to better illustrate the connection between the script and actual cart.
I hope this helps.
Thanks
Arne Soerensen
scItemOptionGR = new GlideRecord("sc_item_option");
scItemOptionGR.addQuery("cart_item", cartItemID);
scItemOptionGR.query();
var variables = {};
while (scItemOptionGR.next()){
var v = scItemOptionGR.getDisplayValue('value');
variables[scItemOptionGR.item_option_new.name] = (v == null || v =='' ? '' : v);
var reqfor = '';
var gr = new GlideRecord('sys_user');
gr.addQuery('sys_id', variables.requested_for);
gr.query();
if (gr.next()) {
reqfor = gr.first_name.toString() + ' ' + gr.last_name.toString();
}
var prisupport = '';
var grp = new GlideRecord('sys_user');
grp.addQuery('sys_id', variables.primary_support_person);
grp.query();
if (grp.next()) {
prisupport = grp.first_name.toString() + ' ' + grp.last_name.toString();
}
}
var cartItem = GlideappCartItem.get(cartItemID);
return {
variables: variables,
requestedfor: reqfor,
primarysupport: prisupport,
