Tutorials > Customize the Consumer Direct sample store > Customizing the consumer direct sample store using snippets

< Previous | Next >

Display a catalog entry thumbnail using an object snippet

In this step, we will use an object to display a catalog entry thumbnail image and other information about the catalog entry. You will add code to display this catalog entry thumbnail image above the e-Marketing Spot that you created in a previous step in this tutorial. The name of the file that contains the object snippet is CatalogEntryThumbnailDisplay.jspf.

Procedure

1. In the Enterprise Explorer view, navigate to Stores > Web Content > MyApparelStore > include > styles > style1.

2. Open the CachedHeaderDisplay.jsp file for editing.

3. Near the bottom of the file, locate the following code:

         
   </tbody>
   </table>
   

4. Add the following code above the </tbody> line:

   <!--Begin CatalogEntryThumbnailDisplay object snippet -->
          
   <tr>
          
   <td>
           
   <!--Create a CatalogEntryDataBean and populate it with the   catalog entry we want to display. -->
           
   <wcbase:useBean  classname="com.ibm.commerce.catalog.beans.CatalogEntryDataBean" scope="page">
               
   <c:set value="11212" target="${catEntryBean}" property="catalogEntryID" />
           
   </wcbase:useBean> 
      
   <!--Set variables to be sent to the CatalogEntryThumbnailDisplay.jspf object snippet --> 
          
   <c:set var="catEntry" value="${catEntryBean}" /> 
          
   <%@ include file="../images/locale/screensnap/../Snippets/ReusableObjects/CatalogEntryThumbnailDisplay.jspf"     %>
          
   </td>
          
   </tr>
   <!--End CatalogEntryThumbnailDisplay object snippet-->
   

   The value 11212 is the catalog entry ID of one of the items in the sales catalog that is on sale for a 25% discount.

   The CatalogEntryThumbnailDisplay.jspf object snippet requires that a parameter named catEntry be set before the object snippet is included. The catEntry parameter must represent a CatalogEntryDataBean, and the CatalogEntryDataBean must be populated with the catalog entry to display.

5. Save the changes.

6. Ensure the store sidebar displays properly:

   1. If the Web browser is still open from a previous step, click Refresh the current page to refresh the page. A screen capture of the Refresh the current page button follows:

   2. If the Web browser is not open, navigate to Stores > Web Content > MyApparelStore, right-click index.jsp and select Run on Server. If the Server Selection window displays, select a server and click Finish.

   3. The store header displays as in the following screen capture:

      

< Previous | Next >

+

Search Tips   |   Advanced Search