Order guide : Picture and description item not displayed in Service Portal

[mrandria]

Hello everyone,

I have a display issue with an order guide in Helsinki. For each items included in this order guide, I associated its short description, its picture and it's price. All of that are well displayed on back office and work as expected but not in service portal. Only the name and the price are displayed.   When I check my personal instance (in Helsinki), the OOB order guide has the same behaviour. Has anyone experienced this issue?

Thanks in advance for your support ?

Please share your solutions

M.R

[yogeshpoyyara]

Please upgrade to Helsinki patch 5 ; or insert the below script. This will add description in same format as in your Order Guide and also add the image if present.

<div ng-if="::data.sc_cat_item.picture">

                      <img class="img-responsive catalog-item-image guide-image" style="display: inline" ng-src="{{::data.sc_cat_item.picture}}" />

                  </div>

                  <div ng-if="data.sc_cat_item.description" class="m-t" ng-bind-html="data.sc_cat_item.description"></div>

              </div>

Regards,

Yogesh PH

[mrandria]

Hello,

Thank you for your message. I will check it and I let you know

Regards,

MR

[tayloca]

Yogesh,

I'm having this same problem.   Can you please tell me where would we enter this script?

Thanks!

[yogeshpoyyara]

Hi Cynthia,

Please let me know what version of Helsinki you are running.

Please insert the script in both the Orderguide and   Inluded items script. Let me add the code of the new widget i created below.

<div ng-if="data.sc_cat_item" class="container">

  <div class="row">

      <div class="col-sm-9">

          <div class="panel panel-default">

              <div class="wrapper-md">

                  <h1 class="h2 m-n font-thin">{{data.sc_cat_item.name}}</h1><br>

<div ng-if="::data.sc_cat_item.picture">

                      <img class="img-responsive catalog-item-image guide-image pull-left m-r" style="display: inline" ng-src="{{::data.sc_cat_item.picture}}" />

                  </div>

                  <div ng-if="data.sc_cat_item.description" class="m-t" ng-bind-html="data.sc_cat_item.description"></div>

              </div><br>

              <div class="wrapper-md b-t">

                  <sp-model form-model="data.sc_cat_item" mandatory="data.sc_cat_item._mandatory" ></sp-model>

              </div>

          </div>

          <div class="panel panel-default" ng-if="included.length">

              <div class="wrapper-md">

                  <h1 class="h2 m-n font-thin">${Included Items...}</h1>

              </div>

              <div class="wrapper-md b-t">

                  <div class="panel panel-default" ng-repeat="item in included | orderBy: 'order'" id="{{item.sys_id}}">

                      <div class="panel-heading"><h4><strong>{{item.name}}</strong></h4></div>

                      <div class="panel-body">

                          <div ng-if="::item.picture">

                              <img class="img-responsive catalog-item-image guide-item-image" style="display: inline" ng-src="{{::item.picture}}" />

                          </div>

                          <div>{{item.short_description}}</div>

                            <div ng-if="item.description" class="m-t" ng-bind-html="item.description"></div>

                          <div class="controlLab">

                              <sp-cat-item item="item" />

                          <sp-model form-model="item" mandatory="item._mandatory"></sp-model>

                      </div></div>

                      <div ng-if="data.showPrices && (item.price || item.recurring_price)" class="panel-footer bg-white">{{item.price}} {{item.recurring_price}}</div>

                  </div>

              </div>

          </div>

      </div>

      <div class="col-sm-3 scrollme">

          <div class="panel panel-default">

              <div class="panel-heading itemheadding">

                  <h4 class="panel-title "><strong>${Items}</strong></h4>

              </div>

              <div ng-if="included.length > 0" class="list-group" >

                                  <a class="list-group-item" href=""

                        ng-click="scrollTo(item)"

                        ng-repeat="item in included | orderBy: 'order'">

                      <i class="fa fa-chevron-right m-r-sm"></i>

                      {{item.name}}

                  </a>

              </div>

              <div class="wrapper-md">

                  <div class="m-b-xs" ng-if="data.showPrices && price">${Total price}: {{price_display}}</div>

                  <button ng-disabled="submitted" name="submit" ng-click="triggerOnSubmit()" class="btn btn-primary">{{submitButtonMsg}}</button>

                  <span ng-if="submitting" style="padding-left:4px">${Submitting...}</span>

                  <div ng-if="hasMandatory()" class="alert alert-info" style="margin-top: .5em">

                      <span ng-if="flatMandatory.length > 0">${Required information} </span>

                      <span ng-repeat="f in flatMandatory" class="label label-danger" ng-click="scrollToVar(f)" style="margin-right: 1em;display:inline-block;text-align:inherit;white-space:inherit;margin-top:.3em">{{f.label}}</span>

                  </div>

              </div>

          </div>

      </div>

  </div>

</div>

Regards,

Yogesh PH

Please mark helpful and like if it works.