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
The SC Shopping Cart widget makes a call at the bottom of the server script to the SPCart script include for the getItems() function.
This populates data.cartItems that is used by the HTML template.
You will need to update the getItem() function in the SPCart script include (getItems() calls getItem()) to also return the variables as shown below.
No if you console the $scope.data with a CTRL+Right Click on the SC Shopping Cart widget you will see the variables.
Now you just need to update you HTML template to accommodate your new data.
<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.variables.requested_for}}</strong>
</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>
Hello
Thank you very much for the code. I am using your exact script from the script include, SPCart, and have been able to personalize the cart. I do have one question. How do I pass the name and not the sys_id for a variable of reference type from the while loop?
These two variables returned by the while loop should display the names in the cart and not the IDs.
Thanks for your help..
