Tutorials > Customize the Consumer Direct sample store > Add dynamic text

< Previous | Next >


Create a preview page for the location of the text message

Overview

The Change Pages page features a View Location button for each dynamic message. When a user clicks this button, a preview of the relevant store page is displayed indicating the location on the page where the message will display. The preview page is a standalone HTML page that is identical to the actual store page but with the dynamic message text highlighted.


Create a preview page

  1. Browse to the discount details page of the consumer direct sample store.

  2. Select...

    View | Source

    A window containing the HTML source of the page opens.

  3. Save the HTML source to...

    WC_EAR/images/locale/screensnap/Stores.war/tools/stores/ConsumerDirect/text/preview/locale/Preview_DiscountDisclaimer.html

  4. Edit Preview_DiscountDisclaimer.html

  5. Locate the lines of HTML that define the static message This discount may not freely combine with other special offers. The best combination allowed will be determined automatically for each order at the checkout: 

    <span class="discount">
       
    <img src="/wcsstore/ConsumerDirect/images/Discount_star.gif"  
         align="middle"/>
    &nbsp;This discount may not freely combine with other special offers. 
    The best combination allowed will be determined automatically for each order at the checkout.

</span>

  6. Highlight the static message by wrapping its text in a red-bordered HTML table: 

    '<table border="10" width="100%">
<tr><td>'+'This discount may not freely combine with other special offers. 
The best combination allowed will be determined automatically for each order at the checkout.'+'</td></tr></table>'

  7. Locate the link element that specifies the style sheet: 

    <link rel="stylesheet" href="/wcsstore/ConsumerDirect/css/Master1_1.css" type="text/css"/>

  8. Because the preview page will be placed in a different location than the discount details page, change the path to the style sheet: 

    <link rel="stylesheet" href="../B2C_Master.css" type="text/css"/>

  9. To include images from the product display store page in the preview:

    1. Load the preview page into a Web browser and take note of broken images.

    2. Return to the store page from Step 1 and save the required images to the following directory:

      WC_eardi../images/locale/screensnap/Stores.war/tools/stores/ConsumerDirect/text/preview/locale

    3. Return to the Preview_DiscountDisclaimer.html file and change the src attribute of the img element for all the affected images to refer to the ../images directory.

  10. Optional: To distinguish Preview_DiscountDisclaimer.html as a preview file and remain consistent with existing consumer direct sample store preview files:

    1. Insert the following text immediately after the opening <body> tag: 

      <table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
   
<td class="h2center">Preview</td>
</tr>
<tr>
   
<td class="buttonback"><a href="#"  onclick="window.close()">Close Window</a></td>
</tr>
<tr>
   
<td class="template">

    2. Insert the following text immediately before the closing </body> tag: 

         
</td>
</tr>
<tr>
   
<td class="buttonback"><a href="#"  onclick="window.close()">Close Window</a></td>
</tr>
</table>

  11. Save and close the file.

< Previous | Next >


+

Search Tips   |   Advanced Search