2 Replies Latest reply on Jul 20, 2017 4:22 AM by alexanderg3253559

    Hotel starrating in Recs Box Design is not rendering

    alexanderg3253559 Level 1

      Hi everyone,

      We have a challenge in getting our starrating for hotels rendered in our Recommendations Box Design. You can see the result of our work in the footer of  the following page: Reisen mit ITS - Ihrem Reiseanbieter für erholsamen Urlaub | ITS.de

       

      Below please find the code for the box design. Any ideas?

       

      I would be grateful for any help.

      Best

      Alex

       

              </div>

          </div>

      </section>

      <div class="ITS_module-ct">

        <div class="ITS_OBJ_area-ct-grid">

          <div class="ITS_OBJ_grid-cont">

            <div class="ITS_col-12">

              <div class="ITS_module-headline">

                <h2 class="ITS_OBJ_txt-headline-medium ITS_ext--bold ITS_ext--textcenter">Das könnte Sie auch interessieren</h2>

              </div>

              <div class="ITS_MOD_teaser">

                <article class="ITS_MOD_teaser-item ITS_MOD_teaser-product ITS_MOD_recommendations-item">

                  <div class="ITS_MOD_teaser-item__cont">

                    <div class="ITS_MOD_teaser-content"> <a class="ITS_OBJ_style-protect" href="$entity1.pageUrl">

                      <div class="ITS_MOD_teaser-photo">

                        <div class="ITS_OBJ_photo">

                          <figure class="ITS_OBJ_style-protect ITS_OBJ_photo__ratio">  <img src="$entity1.thumbnailUrl?w=549&h=349"

                                                                       srcset="$entity1.thumbnailUrl?w=251&h=160 251w,

                                                                               "$entity1.thumbnailUrl?w=549&h=349 549w,

                                                                               "$entity1.thumbnailUrl?w=644&h=409 644w"

                                                                       sizes="(min-width: 1281px) 251px,

                                                                              (min-width: 1200px) 27vw,

                                                                              (min-width: 961px) 26vw,

                                                                              (min-width: 761px) 39vw,

                                                                              66vw"

                                                                       alt="" width="549" height="349"> </figure>

                        </div>

                      </div>

                      <div class="ITS_MOD_teaser-desc">

                        <div class="ITS_OBJ_txt-textxsmall-growing ITS_OBJ_col-itsGrey1 ITS_OBJ_txt--singleline">$entity1.destinationCountry • $entity1.destinationregion • $entity1.destinationCity</div>

                        <h3 class="ITS_OBJ_style-protect ITS_OBJ_txt-medium-growing ITS_ext--bold ITS_OBJ_col-itsPrimary1 ITS_OBJ_txt--singleline ITS_OBJ_product-desc__title">$entity1.name</h3>

                        <div class="clearfix">

       

       

      #set($starRating=$entity1.starRating)

      #set($starRatingTmp=$starRating.replace(".5", ""))

      #if($starRating==$starRatingTmp )

      #set($halfstar=0)

      #else

      #set($halfstar=1)

      #end

       

       

      #if($starRating>1)

      xxx

      #end

      #if($starRatingTmp>1)

      yyy

      #end

      #if(2>1)

      zzz

      #end

                          <figure class="ITS_OBJ_ui-stars-wrp" title="$entity1.starRating Sterne">

                            <div aria-hidden="true" class="ITS_OBJ_symbol ITS_OBJ_ui-stars ITS_ext--half">

      #foreach( $foo in [1..$starRatingTmp] )

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

      #end

       

       

       

       

                            </div>

                            <figcaption class="ITS_OBJ_ui-stars__caption">$entity1.starRating Sterne</figcaption>

                          </figure>

                          <div class="ITS_OBJ_product-desc__rating ITS_OBJ_txt-textxsmall ITS_OBJ_col-holidaycheck ITS_show-tb"> <i class="ITS_OBJ_symbol-thumbsup">

                            <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                              <use xlink:href="#thumbsup" />

                            </svg>

                            </i> <span>  Bewertung: $starRatingTmp / $starRating</span> </div>

                        </div>

                        <p class="ITS_OBJ_style-protect ITS_OBJ_txt-textsmall-growing ITS_ext--small-line-height ITS_OBJ_col-itsGrey1 ITS_OBJ_product-desc__copy">                    

                          #set( $traveltype1 = $entity1.traveltype.replace("Pauschalreisen", "Pauschalreise"))<span class="entity.Traveltype" id="entity.traveltype-traveltype:$entity1.Traveltype"><strong>$traveltype1</strong><br></ span>z.B. $entity1.Reisedauer Nächte,  ab $entity1.Abreisedatum, $entity1.Room, $entity1.Boardtype</p>

                      </div>

                      <div class="ITS_MOD_teaser-cta">

                        <div class="ITS_OBJ_teaser-cta">

                          <button class="ITS_OBJ_ui-button ITS_OBJ_ui-button--secondary ITS_OBJ_ui-button--price ITS_OBJ_ui-shadow ITS_ext--full ITS_ext--singleline " type="button"> <span>Erw. ab € <span class="ITS_price"><span class="PR_num"#set( $eurovalue1 = $entity1.value.replace(",", "X") )

      #set( $eurovalue1 = $eurovalue1.replace(".00", ".-") )

      #set( $eurovalue1 = $eurovalue1.replace("X", ".") )

      <span class="entity.value" id="entity.value-price:$entity1.value">$eurovalue1</span><span class="PR_cl"></span></span></span> </button>

                        </div>

                      </div>

                      </a> </div>

                  </div>

                </article>

       

       

                <article class="ITS_MOD_teaser-item ITS_MOD_teaser-product ITS_MOD_recommendations-item">

                  <div class="ITS_MOD_teaser-item__cont">

                    <div class="ITS_MOD_teaser-content"> <a class="ITS_OBJ_style-protect" href="$entity2.pageUrl">

                      <div class="ITS_MOD_teaser-photo">

                        <div class="ITS_OBJ_photo">

                          <figure class="ITS_OBJ_style-protect ITS_OBJ_photo__ratio">  <img src="$entity2.thumbnailUrl?w=549&h=349"

                                                                       srcset="$entity2.thumbnailUrl?w=251&h=160 251w,

                                                                               "$entity2.thumbnailUrl?w=549&h=349 549w,

                                                                               "$entity2.thumbnailUrl?w=644&h=409 644w"

                                                                       sizes="(min-width: 1281px) 251px,

                                                                              (min-width: 1200px) 27vw,

                                                                              (min-width: 961px) 26vw,

                                                                              (min-width: 761px) 39vw,

                                                                              66vw"

                                                                       alt="" width="549" height="349"> </figure>

                        </div>

                      </div>

                      <div class="ITS_MOD_teaser-desc">

                        <div class="ITS_OBJ_txt-textxsmall-growing ITS_OBJ_col-itsGrey1 ITS_OBJ_txt--singleline">$entity2.destinationCountry • $entity2.destinationregion • $entity2.destinationCity</div>

                        <h3 class="ITS_OBJ_style-protect ITS_OBJ_txt-medium-growing ITS_ext--bold ITS_OBJ_col-itsPrimary1 ITS_OBJ_txt--singleline ITS_OBJ_product-desc__title">$entity2.name</h3>

                        <div class="clearfix">

                          <figure class="ITS_OBJ_ui-stars-wrp" title="$entity2.starRating Sterne">

                            <div aria-hidden="true" class="ITS_OBJ_symbol ITS_OBJ_ui-stars ITS_ext--half">

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star-half" />

                                </svg>

                              </div>

                            </div>

                            <figcaption class="ITS_OBJ_ui-stars__caption">entity1.starRating Sterne</figcaption>

                          </figure>

                          <div class="ITS_OBJ_product-desc__rating ITS_OBJ_txt-textxsmall ITS_OBJ_col-holidaycheck ITS_show-tb"> <i class="ITS_OBJ_symbol-thumbsup">

                            <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                              <use xlink:href="#thumbsup" />

                            </svg>

                            </i> <span>Bewertung: $entity2.customerRating/6</span> </div>

                        </div>

                        <p class="ITS_OBJ_style-protect ITS_OBJ_txt-textsmall-growing ITS_ext--small-line-height ITS_OBJ_col-itsGrey1 ITS_OBJ_product-desc__copy">         

      #set( $traveltype2 = $entity2.traveltype.replace("Pauschalreisen", "Pauschalreise"))<span class="entity.Traveltype" id="entity.traveltype-traveltype:$entity2.Traveltype"><strong>$traveltype2</strong><br></ span>

       

       

       

       

      z.B. $entity2.Reisedauer Nächte,  ab $entity2.Abreisedatum, $entity2.Room, $entity2.Boardtype</p>

                      </div>

                      <div class="ITS_MOD_teaser-cta">

                        <div class="ITS_OBJ_teaser-cta">

                          <button class="ITS_OBJ_ui-button ITS_OBJ_ui-button--secondary ITS_OBJ_ui-button--price ITS_OBJ_ui-shadow ITS_ext--full ITS_ext--singleline " type="button"> <span>Erw. ab € <span class="ITS_price"><span class="PR_num"#set( $eurovalue2 = $entity2.value.replace(",", "X") )

      #set( $eurovalue2 = $eurovalue2.replace(".00", ".-") )

      #set( $eurovalue2 = $eurovalue2.replace("X", ".") )

      <span class="entity.value" id="entity.value-price:$entity2.value">$eurovalue2</span><span class="PR_cl"></span></span></span> </button>

                        </div>

                      </div>

                      </a> </div>

                  </div>

                </article>

       

       

                <article class="ITS_MOD_teaser-item ITS_MOD_teaser-product ITS_MOD_recommendations-item">

                  <div class="ITS_MOD_teaser-item__cont">

                    <div class="ITS_MOD_teaser-content"> <a class="ITS_OBJ_style-protect" href="$entity3.pageUrl">

                      <div class="ITS_MOD_teaser-photo">

                       <div class="ITS_OBJ_photo">

                          <figure class="ITS_OBJ_style-protect ITS_OBJ_photo__ratio">  <img src="$entity3.thumbnailUrl?w=549&h=349"

                                                                       srcset="$entity3.thumbnailUrl?w=251&h=160 251w,

                                                                               "$entity3.thumbnailUrl?w=549&h=349 549w,

                                                                               "$entity3.thumbnailUrl?w=644&h=409 644w"

                                                                       sizes="(min-width: 1281px) 251px,

                                                                              (min-width: 1200px) 27vw,

                                                                              (min-width: 961px) 26vw,

                                                                              (min-width: 761px) 39vw,

                                                                              66vw"

                                                                       alt="" width="549" height="349"> </figure>

                        </div>

                      <div class="ITS_MOD_teaser-desc">

                        <div class="ITS_OBJ_txt-textxsmall-growing ITS_OBJ_col-itsGrey1 ITS_OBJ_txt--singleline">$entity3.destinationCountry • $entity3.destinationregion • $entity3.destinationCity</div>

                        <h3 class="ITS_OBJ_style-protect ITS_OBJ_txt-medium-growing ITS_ext--bold ITS_OBJ_col-itsPrimary1 ITS_OBJ_txt--singleline ITS_OBJ_product-desc__title">$entity3.name</h3>

                        <div class="clearfix">

                          <figure class="ITS_OBJ_ui-stars-wrp" title="$entity3.starRating Sterne">

                            <div aria-hidden="true" class="ITS_OBJ_symbol ITS_OBJ_ui-stars ITS_ext--half">

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star-half" />

                                </svg>

                              </div>

                            </div>

                            <figcaption class="ITS_OBJ_ui-stars__caption">11 Sterne</figcaption>

                          </figure>

                          <div class="ITS_OBJ_product-desc__rating ITS_OBJ_txt-textxsmall ITS_OBJ_col-holidaycheck ITS_show-tb"> <i class="ITS_OBJ_symbol-thumbsup">

                            <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                              <use xlink:href="#thumbsup" />

                            </svg>

                            </i> <span>Bewertung: $entity3.customerRating/6</span> </div>

                        </div>

                        <p class="ITS_OBJ_style-protect ITS_OBJ_txt-textsmall-growing ITS_ext--small-line-height ITS_OBJ_col-itsGrey1 ITS_OBJ_product-desc__copy">

       

       

                          #set( $traveltype3 = $entity3.traveltype.replace("Pauschalreisen", "Pauschalreise"))<span class="entity.Traveltype" id="entity.traveltype-traveltype:$entity3.Traveltype"><strong>$traveltype3</strong><br></ span>z.B.

      $entity3.Reisedauer Nächte,  ab $entity3.Abreisedatum, $entity3.Room, $entity3.Boardtype</p>

                      </div>

                      <div class="ITS_MOD_teaser-cta">

                        <div class="ITS_OBJ_teaser-cta">

                          <button class="ITS_OBJ_ui-button ITS_OBJ_ui-button--secondary ITS_OBJ_ui-button--price ITS_OBJ_ui-shadow ITS_ext--full ITS_ext--singleline " type="button"> <span>Erw. ab  <span class="ITS_price"><span class="PR_num"#set( $eurovalue3 = $entity3.value.replace(",", "X") )

      #set( $eurovalue3 = $eurovalue3.replace(".00", ".-") )

      #set( $eurovalue3 = $eurovalue3.replace("X", ".") )

      <span class="entity.value" id="entity.value-price:$entity3.value">$eurovalue3</span><span class="PR_cl"></span></span></span> </button>

                        </div>

                      </div>

                      </a> </div>

                  </div>

                </article>

       

       

                <article class="ITS_MOD_teaser-item ITS_MOD_teaser-product ITS_MOD_recommendations-item">

                  <div class="ITS_MOD_teaser-item__cont">

                    <div class="ITS_MOD_teaser-content"> <a class="ITS_OBJ_style-protect" href="$entity4.pageUrl">

                      <div class="ITS_MOD_teaser-photo">

                        <div class="ITS_OBJ_photo">

                          <figure class="ITS_OBJ_style-protect ITS_OBJ_photo__ratio">  <img src="$entity4.thumbnailUrl?w=549&h=349"

                                                                       srcset="$entity4.thumbnailUrl?w=251&h=160 251w,

                                                                               "$entity4.thumbnailUrl?w=549&h=349 549w,

                                                                               "$entity4.thumbnailUrl?w=644&h=409 644w"

                                                                       sizes="(min-width: 1281px) 251px,

                                                                              (min-width: 1200px) 27vw,

                                                                              (min-width: 961px) 26vw,

                                                                              (min-width: 761px) 39vw,

                                                                              66vw"

                                                                       alt="" width="549" height="349"> </figure>

                        </div>

                      </div>

                      <div class="ITS_MOD_teaser-desc">

                        <div class="ITS_OBJ_txt-textxsmall-growing ITS_OBJ_col-itsGrey1 ITS_OBJ_txt--singleline">$entity4.destinationCountry • $entity4.destinationregion • $entity4.destinationCity</div>

                        <h3 class="ITS_OBJ_style-protect ITS_OBJ_txt-medium-growing ITS_ext--bold ITS_OBJ_col-itsPrimary1 ITS_OBJ_txt--singleline ITS_OBJ_product-desc__title">$entity4.name</h3>

                        <div class="clearfix">

                          <figure class="ITS_OBJ_ui-stars-wrp" title="$entity4.starRating Sterne">

                            <div aria-hidden="true" class="ITS_OBJ_symbol ITS_OBJ_ui-stars ITS_ext--half">

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star" />

                                </svg>

                              </div>

                              <div class="ITS_OBJ_ui-single-star">

                                <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                                  <use xlink:href="#star-half" />

                                </svg>

                              </div>

                            </div>

                            <figcaption class="ITS_OBJ_ui-stars__caption">21 Sterne</figcaption>

                          </figure>

                          <div class="ITS_OBJ_product-desc__rating ITS_OBJ_txt-textxsmall ITS_OBJ_col-holidaycheck ITS_show-tb"> <i class="ITS_OBJ_symbol-thumbsup">

                            <svg height="100" overflow="hidden" preserveAspectRatio="none" viewBox="0 0 100 100" width="100" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">

                              <use xlink:href="#thumbsup" />

                            </svg>

                            </i> <span>Bewertung: $entity4.customerRating/6</span> </div>

                        </div>

                        <p class="ITS_OBJ_style-protect ITS_OBJ_txt-textsmall-growing ITS_ext--small-line-height ITS_OBJ_col-itsGrey1 ITS_OBJ_product-desc__copy">

                         

                          #set( $traveltype4 = $entity4.traveltype.replace("Pauschalreisen", "Pauschalreise"))<span class="entity.Traveltype" id="entity.traveltype-traveltype:$entity4.Traveltype"><strong>$traveltype4</strong><br></ span>z.B. $entity4.Reisedauer Nächte,  ab $entity4.Abreisedatum, $entity4.Room, $entity4.Boardtype</p>

                      </div>

                      <div class="ITS_MOD_teaser-cta">

                        <div class="ITS_OBJ_teaser-cta">

                          <button class="ITS_OBJ_ui-button ITS_OBJ_ui-button--secondary ITS_OBJ_ui-button--price ITS_OBJ_ui-shadow ITS_ext--full ITS_ext--singleline " type="button"> <span>Erw. ab € <span class="ITS_price"><span class="PR_num"#set( $eurovalue4 = $entity4.value.replace(",", "X") )

      #set( $eurovalue4 = $eurovalue4.replace(".00", ".-") )

      #set( $eurovalue4 = $eurovalue4.replace("X", ".") )

      <span class="entity.value" id="entity.value-price:$entity4.value">$eurovalue4</span><span class="PR_cl"></span></span></span> </button>

                        </div>

                      </div>

                      </a> </div>

                  </div>

                </article>

               

              </div>

            </div>

          </div>

        </div>

      </div>

       

       

      </section>