Adding variables to SC Shopping Cart template in Service Portal?

[YenGar]

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

[Arne Soerensen]

Hello @diNesh_M

Attached is a copy of the html script for the shopping cart script that was previously provided.  We have a simple cart but I hope the html is still useful to you.

Thanks

Arne Soerensen

<div>
  <h1 ng-show="c.data.cartItems.length > 0" class="h3">${Your Cart}</h1>
  <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: 15%;">${Requested For}</th>
          <th style="width: 15%;">${Primary Support}</th>
          <th style="width: 12%;">${System}</th>
          <th style="width: 12%;">${Model}</th>
		  <th style="width: 12%;">${Manufacturer}</th>          
		  <th style="width: 12%;">${MTag}</th>
          <th style="width: 12%;">${System IP}</th>
          <th style="width: 10%;">${Edit/Remove}</th>
        </tr>
      </thead>
      <tbody>	
     <thead>   
<tr ng-repeat="item in c.data.cartItems track by item.sys_id | orderBy: 3">
<td>
			<div>{{item.requestedfor}}</div>
		  </td>
		  <td>
			<div>{{item.primarysupport}}</div>
		  </td>
		  <td>
			<div>{{item.variables.system_name}}</div>
		  </td>
		  <td>
			<div>{{item.variables.model}}</div>
		  </td>
		  <td>
			<div>{{item.variables.manufacturer}}</div>
		  </td>		  
		  <td>
			<div>{{item.variables.mtag}}</div>
		  </td> 
		  <td>
			<div>{{item.variables.system_ip}}</div>
		  </td>
          <td class="actions" data-th="">
            <button class="btn btn-info btn-sm" aria-label="${Edit Item} {{item.name}}" 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" aria-label="${Remove Item From Cart} {{item.name}}" ng-click="c.removeItem($event, item)"><i class="fa fa-trash-o"></i></button>
          </td>
        </tr>
       </thead>
      </tbody>
    </table>

    <div class="panel-footer">     
      <button class="btn btn-default"
         ng-click="c.clearCart()">${Clear Cart}</button>
      <button class="btn btn-default"
         ng-click="c.redirect()">${Return to DC Install Form}</button>
<button ng-disabled="c.checkoutInProgress" name="submit" ng-click="c.triggerCheckout($event)" class="btn btn-primary m-l-xs pull-right hidden-xs">
        <span ng-show="!c.checkoutInProgress">${Submit}</span>
        <span ng-show="c.checkoutInProgress">${Ordering...}</span>
      </button>
      <button ng-disabled="c.checkoutInProgress" name="submit" ng-click="c.triggerCheckout($event)" class="btn btn-primary m-l-xs visible-xs large-checkout">
        <span ng-show="!c.checkoutInProgress">${Submit}</span>
        <span ng-show="c.checkoutInProgress">${Ordering...}</span>
      </button>
    </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" aria-label="${Shopping cart icon}"></span>
        <h2 class="h3">${Your shopping cart is empty}</h2>
        <p>${Once you have added items to your shopping cart, you can check out from here.}</p>
        <a class="btn btn-primary" href="?id=index_itsd">${Return to the Service Portal}</a>
      </div>
    </div>
  </div>
</div>

[diNesh_M]

@Arne Soerensen 

Hi Arne Soerensen,

Thanks for your response .

I have tried adding the above script in the "large_shopping_cart_v2.html" ng-template but i still dont know why the Requested for variable is still displaying empty in the service portal.

Not sure whether the  script should be written in any particular place of the ng-template?.

I have put the screenshots below ,kindly let me know what changes i need to do to make the Requested for variable filled up with a value in the service portal.

Do revert if any clarification needed from my end at any time.

Thanks

[diNesh_M]

@Arne Soerensen 

Hi Arne Soerensen,

I have written the script you provided in server script of the shopping cart widget but facing difficulty to match the sys_id of the current catalog item available in the cart.

Only if i match the sys_id of present catalog item in cart with the "cart_item" field i will be able to proceed further .

Can u provide your input on this ?

I have pasted the screenshot below.

Thanks

[diNesh_M]

@RiteshAlla 

Hi Ritesh,

I have been trying to Add variables to SC Shopping Cart template in Service Portal but the requested for variable is coming empty in the widget and not sure what code needs to be adjusted in the "large_shopping_cart_v2.html" angular ng-template.

It would be of great help if you help me to fix this issue .

I will paste the screenshot and html template code for correction.

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 cartItem = GlideappCartItem.get(cartItemID);
    return {
		variables:variables.requested_for,
}

[diNesh_M]

Hi Ryan ,

I do have the similar requirement to view  some variable fields in  the SC Shopping Cart widget and i am not aware of how to achieve this .

Could you elaborate me to achieve this requirement as i am not able to open the screenshots you attached .

Thanks in advance