Converting the eProcurement Shopping Cart Template

To gather information about the current template:

1. Select PeopleTools > Portal > Structure and Content.

2. Within Structure and Content, click Portal Objects, then click Templates.

3. Click the Edit link next to the ePro Shopping Cart Template.

4. Copy the text in the HTML Area field. Save it to a text file. After you have changed the template type, this HTML will be removed.

5. Click the Security tab and note the current security for this content reference.

   This step is important if specific permissions or roles have been set. Later, you apply these permissions to the new iScript that will be created.

To create the iframe template iScript:

1. Open the WEBLIB_PV.ISCRIPT.FieldFormula PeopleCode in edit mode.

2. At the bottom of the PeopleCode, enter the following code:

   Declare Function ptIframeTemplateHNav PeopleCode WEBLIB_PT_NAV.ISCRIPT1 FieldFormula;
   
   /*
     * builds the inline frame template with the drop-down navigation
   */
   Function IScript_PVShopCart_Template
   
      /* parameter 1: HTML object name that will be used to generate the inline frame template */
      	   %Response.Write(ptIframeTemplateHNav("PV_SHOP_CART_HNAV_TEMPLATE"));
   
   End-Function;
   

To create the iframe template HTML definition:

1. In Application Designer, open the PT_HNAV_TEMPLATE HTML definition.

2. Clone the definition and save it as the value that was used in parameter 1 of the new iScript.

3. Open the text file that contains the original template HTML and locate the pagelets that you need to move to the new template, for example:

   <frame name="CART" id="CART" frameborder="no" scrolling="auto" noresize src="" style="border-top:ridge #CCCCCC 5px;">
        <IClientComponent Name="Links">
            <Source Node="ERP" Pagelet="EP_PV_REQ_LINKS_PGLT">dummy</Source>
        </IClientComponent> 
   </frame>
   

4. Change the HTML so that it looks like this:

   <div id="pvcartpagelet">
        <iframe name="CART" id="CART" frameborder="no" src="">
   	         <pagelet name="Links">
                   <source Node="ERP" Pagelet="EP_PV_REQ_LINKS_PGLT"/>
             </pagelet> 
        </iframe>
    </div>
   

   Note: The iframe template does not support the IClientComponent template meta tag. These meta tags are deprecated and are replaced by the pagelet meta tag.

5. Locate where you want to position the Links pagelet in the PV_SHOP_CART_HNAV_TEMPLATE iframe template. If the pagelet is to exist to the right or left of the target content, place the pagelet inside of the iframe content container <div>. In this scenario, the pagelet will be located to the right of the target content.

   
                     <div id="ptifrmcontent">
     <div id="ptifrmtarget">
       <iframe id="ptifrmtgtframe" name="TargetContent" title="%bind(:6)" frameborder="0" scrolling="auto" onload="ptrc.onLoadTC()" src="">
         <target Name="target" params="%bind(:7)"/>
       </iframe>   	
     </div><div id="pvcartpagelet">
       <iframe name="CART" id="CART" frameborder="no" src="">
         <pagelet name="Links">
           <source Node="ERP" Pagelet="EP_PV_REQ_LINKS_PGLT"/>
         </pagelet> 
       </iframe>
     </div>
     %bind(:8)
     <script type="text/javascript" src="%bind(:9)"></script>
   </div>

6. Add the style information for the new pagelet. Ideally, these styles should go into a style sheet to take advantage of style sheet caching on the web server and browser. For this example, the embedded style approach places the style in the head section of the template.

   <style type="text/css">
   /* style for the CART pagelet container div */
   #pvcartpagelet { 
     position:absolute; /* required: the position must be fixed so the iframe can be sized properly */
   
     %AlignEnd:0;       /* meta CSS to position the location of the pagelet */ 
     margin:0;
     width:30%;         /* required:must be a percentage,value so the correct width is rendered when the browser is resized */	
   }
   
   /* style for the CART iframe */
   #CART { width:100%; height:100%; } 
   </style>
   

   Image: Test HTML object: PV_SHOPCART_HNAV_TEMPLATE with shopping cart pagelet

   The following screenshot is an example of full HTML definition that contains template with shopping cart pagelet.

   

   If a pagelet needs to expand to the width of the page, the following HTML and style information can be used:

   <style type="text/css">
   #wideframecontainer { 
     position:relative;                      /* required: */
     border:1px solid #336699; 
     margin: 2px 5px; 
     clear:both;
    }
   #wideframe { width:100%; height:50px; }
   </style>
   ...
   <!--must be located outside of the content container div-->
   <div id="wideframecontainer">
       <iframe name="wide" id="wideframe" frameborder="no" src="">
         <pagelet name="Test">
           <source Node="LOCAL_NODE" href="s/WEBLIB_PV.ISCRIPT1.FieldFormula.IScript_PT_TEST"/>
         </pagelet> 
       </iframe>
    </div>
   

   Image: Test HTML object: PV_SHOPCART_HNAV_TEMPLATE with shopping cart and wide pagelet

   The following screenshot is an example of a full HTML definition that contains a wide pagelet:

   

To set security for the template iScript:

1. Select PeopleTools > Security > Permissions & Roles > Permission Lists.

2. Enter the permission list that you noted when you gathered information about the template earlier.

3. Enable Web Library security for the permission list.

4. Continue until all permission lists and roles are added.

To convert the template content reference:

1. Select PeopleTools > Portal > Structure and Content.

2. Within Structure and Content, click Portal Objects, then click Templates.

3. Click the Edit link next to the ePro Shopping Cart Template.

4. Change the usage type to inline frame template.

5. Change the storage type to Remote By URL.

6. Enter the iScript record, field, and PeopleCode function names.

7. Click the Save button.

8. Stop and restart the application and web servers.

9. Test the template.

This table describes some common errors and possible causes: