Customizing the storefront to display multiple values for attributes

In this lesson, you are modifying the storefront CachedProductOnlyDisplay.jsp file to fetch multiple values for attribute dictionary attributes. The JSP displays the values on the storefront.

About this task

Feature Pack 5 Support for adding multiple values for a category entry attribute dictionary descriptive attribute is provided by default. The customization that is described in this tutorial is no longer required if you publish the Aurora starter store or the starter store enhancements for your store.

You must customize your storefront JSP file that displays catalog entries by adding a multiple value string variable into the file. This variable adds support for multiple value attributes to your storefront.

Procedure

In the Enterprise Explorer view, navigate to Stores > WebContent > MadisonsStorefrontAssetStore > Snippets > Catalog > CatalogEntryDisplay.
Open CachedProductOnlyDisplay.jsp for editing.

Locate the following code snippet:

<c:set var="descAttrCount" value="0"/>
 <c:forEach var="attribute" items="${catentry.catalogEntryAttributes.attributes}">
  <c:if test="${ attribute.usage=='Descriptive' }" >
   <c:set var="descAttrCount" value="${descAttrCount + 1}"/>
   <span class="product" id="descAttributeName_${descAttrCount}"><c:out value="${attribute.name}" escapeXml="false" />:</span>
   <c:choose>
    <c:when test="${ !empty attribute.extendedValue['Image1']  }" >
     <span id="descAttributeValue_${descAttrCount}"><c:out value="${attribute.value.value}" escapeXml="false" />&nbsp;<img src="<c:out value="${product.objectPath}${attribute.extendedValue['Image1']}" />" alt="<c:out value="${attribute.value.value}" />" border="0"/></span><br/>
    </c:when>
    <c:otherwise >
     <span id="descAttributeValue_${descAttrCount}"><c:out value="${attribute.value.value}" escapeXml="false" /></span>
	   </c:otherwise>
   </c:choose>
   <br/>
  </c:if>
 </c:forEach>

Replace the code snippet with the following code:

<c:set var="descAttrCount" value="0"/>
 <c:forEach var="attribute" items="${catentry.catalogEntryAttributes.attributes}">
  <!--- c:if test="${ attribute.usage=='Descriptive' }" -->
  <c:if test="${ attribute.usage != 'Defining' &&  attribute.usage != null}">
   <c:set var="descAttrCount" value="${descAttrCount + 1}"/>
   <span class="product" id="descAttributeName_${descAttrCount}"><c:out value="${attribute.name}" escapeXml="false" />:</span>
   <c:choose>
    <c:when test="${ !empty attribute.extendedValue['Image1']  }" >
      <span id="descAttributeValue_${descAttrCount}"><c:out value="${attribute.value.value}" escapeXml="false" />&nbsp;<img src="<c:out value="${product.objectPath}${attribute.extendedValue['Image1']}" />" alt="<c:out value="${attribute.value.value}" />" border="0"/></span><br />
    </c:when>
    <c:otherwise >
      <!--- span id="descAttributeValue_${descAttrCount}"><c:out value="${attribute.value.value}" escapeXml="false" /></span-->
      <c:set var="multiValueString" value=""/>
      <c:forEach var="multiValues" items="${attribute.values}">
       <c:set var="multiValueString" value="${multiValueString}, ${multiValues.value}"/>
      </c:forEach>
      <span id="descAttributeValue_${descAttrCount}"><c:out value="${fn:substringAfter(multiValueString, ',')}" escapeXml="false" /></span>
    </c:otherwise>
   </c:choose>
   </span><br/>
  </c:if>
 </c:forEach>

Save your changes and close the file.

Results

The support for multiple value attributes is added to your storefront. Your customization must be tested to verify that your multiple variable attributes display. Continue to the next lesson to test your customization.