Sightly Template Details

<sly data-sly-test="${wcmmode.edit}">
  <span class="marble-placeholder cq-marker-start">Edit ${component.title}</span>
  <br/>
</sly>

<sly data-sly-use.model="sni.models.ProductRoundup"
     data-sly-use.productList="sni.models.ProductList"
     data-sly-use.context="sni.models.Context">

  <div class="o-ProductRoundup">

    <h2 class="o-ProductRoundup--heading">${model.title}</h2>

    <ul class="o-ProductRoundup--list" data-sly-list.product="${model.products}">
      <li class="o-ProductRoundup__m-ListItem">
        <div class="o-ProductRoundup--item">
          <div class="o-ProductRoundup--wrapper">
            <a class="o-ProductRoundup--linkimage" rel="nofollow" data-type="product-link" data-sly-attribute.data-aps-asin="${product.asin}" data-sly-attribute.data-aps-asc-tag="${product.tag}" href="${product.productUrlOverride}" target="_blank" title="${product.title}">
              <img class="o-ProductRoundup--image" src="${product.image.rendition['sni6col']}" alt="${product.title}">
            </a>
            <div class="o-ProductRoundup--description">
              <p class="o-ProductRoundup--label">${product.productLabel}</p>
              <a class="o-ProductRoundup--title" rel="nofollow" data-type="product-link" data-sly-attribute.data-aps-asin="${product.asin}" data-sly-attribute.data-aps-asc-tag="${product.tag}" href="${product.productUrlOverride}" target="_blank" title="${product.title}">${product.title}</a>
              <div class="o-ProductRoundup--details">
                <a class="o-ProductRoundup--review" href="#product-${product.productId}" title="Read Review">
                  Read Review
                  <sly
                    data-sly-use.icons="fragments/icons.html"
                    data-sly-call="${icons.icon @ parent='o-ProductRoundup--review', type='arrow-down'}">
                  </sly>
                </a>
                <sly data-sly-test="${context.isMobile}" data-sly-call="${price @ product=product}"></sly>
              </div>
            </div>
          </div>
          <sly data-sly-test="${!context.isMobile}" data-sly-call="${price @ product=product}"></sly>
        </div>
      </li>
    </ul>
  </div>

  <template data-sly-template.price="${ @ product }">
    <a class="o-ProductRoundup--price" rel="nofollow" data-type="product-link" data-sly-attribute.data-aps-asin="${product.asin}" data-sly-attribute.data-aps-asc-tag="${product.tag}" href="${product.productUrlOverride}" target="_blank" title="${product.title}">
      ${product.ctaLabel}
      <sly
        data-sly-use.icons="fragments/icons.html"
        data-sly-call="${icons.icon @ parent='o-ProductRoundup--price', type='external-link'}">
      </sly>
    </a>
  </template>

  <sly data-sly-use.styleByCategory="sni-foundation/styleByCategory.html"
    data-sly-call="${styleByCategory.cmpnCss}" />
</sly>