In this tutorial let’s discuss of how to create a custom
page layout. For this we will take the sample of the product page layout which
is already present and on using this existing layout we will create a new
layout for the product page. For this we will just modify the existing code for
getting familiar of creation of page layout. Later you guys can try trails with
your own styles J
Lets start the tast prior to this lets have some basic
information like the below :
Store_id, storeent_id, member_id, Max_pagelayout_id.
Lets gather the information by simple queries,
Open the database access JSP,
- Execute : select * from STOREENT where identifier ='Aurora' ; (This query gives STOREENT_ID and MEMBER_ID of our store)
- Execute : select max(PAGELAYOUT_ID) from PAGELAYOUT; (This query gives maximum Pagelayout_id used. So we can make Max+1 for our new page layout)
Creating the new product page layout JSP:
We
will create a new product page layout by just copying the default product page
layout and modify it. In the default product page layout, we will find a double
e-marketing spot container. Lets remove this code part for our newly creating
page layout.
Open the toolkit and search(shft+ctrl+R) ProductDisplay.jsp
Copy and paste there in the same folder(/Stores/WebContent/Aurora/Layouts/).
Then rename the copied file to XProductDisplay.jsp.
Open the newly copied file and start modifying
the code by removing the double e-spot container section. Just check-out the
sample code part.
<!—Start Double E-Spot Container à
<div class=”widget_double_espot_container_position”>
<div class=”widget_double_espot_container”>
<c:choose>
<c:when test=”${env_fetchMarketingDetailsOnLoad}”>
<div dojoType=”wc.widget.RefreshArea”
id=”DoubleContentAreaESpot_Widget” controllerId=”DoubleContentAreaESpot_Controller”>
</div>
</c:when>
<c:otherwise>
<%out.flush();%>
<c:import url=”${env_jspStoreDir}Widgets/Espot/ContentRecommendation/ContentRecommendation.jsp”>
<c:param name=”emsName”
value=”CatalogBanner_Content” />
<c:param name=”numberContentPerRow”
value=”2” />
<c:param name=”catalogId”
value=”${catalogId}” />
</c:import>
<%out.flush();%>
</c:otherwise>
</c:choose>
</div>
</div>
<!—End Double E-Spot Container ->
- Lets add some CSS to this newly created page layout. Check-out the sample code part below,
<!-- Product Image and Product Information -->
<style type=”text/css”>
.left_product_information_div
{
float:left;
margin-top : 36px;
positive:relative;
}
.right_product_image_div
{
Border-right-width:0;
Margin-left:14px;
Float:left;
Position:relative;
}
<!-- Content with Right Sidebar -->
.left_recommended_products
{
Float:left;
}
.right_desc
{
Border-right-width:0;
Height:190px;
Width:700px;
Float:right;
}
.infoview
{
Margin-top:40px;
}
</style>
- Now finally modification part is done and now save the file J.
Now lets define the struts entries for the newly created
pagelayout.
We will be updating the struts entries by following the
below steps,
- Open struts-config-ext.xml and paste the following code part before to </global-forwards> tag
<!—modified for new page layout -->
<forward className="com.ibm.commerce.struts.ECActionForward"
name="XProductPageLayoutView/11001" path="/Layouts/
XProductDisplay.jsp "/>
<!—modified for new page layout -->
@Note : the store_id may be different at your end.
- Under the action-mappings update the following code part exactly before the </action-mappings> tag
<!—modified for new page layout -->
<action path=”/XProductPageLayoutView”
type=”com.ibm.commerce.struts.baseaction”>
<set-property property=”credentialsAccepted” value=”10101:P”/>
</action>
<!—modified for new page layout -->
- Save the struts file after updating all the modifications.
Update Struts configuration :
- we can update the struts by restarting the server or else
- we can update in the commerce administration console
- both the steps are doing the same task finally.
Now lets add the new thumbnail images in the newly
created product page layout:
Copy the images (i.e. product_thumb_large.png and product_thumb_small.png)
from stores>web content > Aurora > images > layouts. Edit
the images by removing double e-spot rename as XProduct_thumb_small.png and XProduct_thumb_large.png
and paste it under the same path.
Register the new product page layout in the DB:
- Restart the server after making all the above mentioned modifications
- Open the DB access JSP from the hintsandtips.html guide.
- Copy the below script and submit the query.
insert into pagelayout(PAGELAYOUT_ID, NAME, MEMBER_ID,
STOREENT_ID,PAGELAYOUTTYPE_ID, MASTERCSS, DEVICETYPE,
STATE,
ISTEMPLATE, DESCRIPTION,THUMBNAIL, FULLIMAGE, VIEWNAME)
values
(100067, 'Layout used for dress
products',7000000000000000101, 10101, 'ProductPage', null,
'Web', 1, 0, 'This layout contains the following
widgets: 1. Header, 2. Product image, 3. Product
promotions, 4. Product name, price and ratings, 5.
Product short description, 6.Product attributes
and actions, 7. Inventory details, 8. Merchandising
associations, 9. E-Marketing Spot for Catalog
entries, 10. Footer.',
'/images/layouts/XProduct_thumb_small.png',
'/images/layouts/XProduct_thumb_large.png',
'XProductPageLayoutView');
- Do remember that the above query doesn’t throw any exceptions.
Apply the New layout and start testing :
- Open the CMC and select Page layout apply our product layout
- Select the Aurora store
- Store pages for Aurora > Apparel > Women > Dresses > Catalog Entry Page layout properties > Product PageLayout Assignments.
- Drag & Drop the newly updated page layout.
- Enter today date and time for the start date in the section
- Select save and close option.
Test the new layout :
- Publish the server
- Reload the Aurora home page and navigate to Departments > Apparel > Women > dresses
- Select an item. Our custom page layout will come up.
- Now its possible to modify according to our own desired way for any product page with the layout of the same modifications.
@Let me know if any thing major obligation faced during
the modifications.
