Page layouts are arguably one of the best features to be introduced into WebSphere Commerce. They allow the marketing staff to quickly change or schedule the layout for page types or the entire site with a few basic steps. What has to be done today is a developer has to create the page layout first – which will not be the case in a future release (more to come on that later). So what are the steps and skills needed to create a new template? The good news is the code is extremely well structured and easy to follow. If this is all new to you, you should check out this PDF to learn about layouts and widgets. The Aurora store provides modular UI widgets that can be plugged into store pages. These UI widgets are independent, self-contained entities (IEA).A page layout is a store page created for a particular layout type such as a category page, product page, or home page. A page layout has widgets associated with it and each widget has a set of configurable properties that can be provided to allow finer configuration of the widget in a layout. –IEA
The process for registering a new page can be summarized in these steps:
- Create your page JSP file – or copy an existing one to start with
- Add the new struts forward and action statements to struts-config-ext.xml
- Register the new struts action security policy
- Create two images for the tooling – a thumbnail and full image of your layout
- Insert your new PageLayout record in the database
Creating your JSP page
In my example I just wanted a “different” product page layout so I started with the existing product page layout named “ProductDisplay.jsp”. In the development version of WebSphere Commerce this page can be found at the following path: “C:\WebSphere\WCToolkit\workspace\Stores\WebContent\AuroraStorefrontAssetStore\Layouts”. Notice, this JSP is stored at the asset store layer, so all extended sites derived from the Aurora Asset store can use this asset. You have to love inheritance!
I simply copied the page to a new file named “ProductDisplay2.jsp” and changed a few things to show a different layout.
Modifying struts-config-ext.xml
Since the store front is based on struts, you will then need to register the new JSP with the struts framework. Since we are using an existing layout we can essentially copy the existing lines for the existing ProductDisplay.jsp. So search the file for “ProductDisplay” and you should see a line similar to the following:
For this forward, we will copy and paste the line and change the newly pasted line to reference our new forward:
Notice we only added a “2” to the name and the path. You will want to do this for all of your storefronts. So search for all of the “ProductDisplay” forwards and create new entries for our new JSP.
You are then going to do the same for the “action” elements in the file. This is the line I used for the action. Make sure you know your store ID’s and make them the same as the other action:
That should be it for the struts part!
Register the new struts action security policy
Now that the struts config is completed you need to create an execution policy so the action can be run by the site. Here is an example of the strutspolicy.xml that I used:
In my policy I simply gave “RootOrganization” the authority to use this struts action. This basically means it can be used by anyone in the application. Make sure you use the appropriate OwnerID in your environment. You then run the acpload command from the WCDE_installdir\bin directory. It will be similar to the following command:
acpload.bat INST1DB db2user passw0rd strutspolicy.xml DB2ADMIN
You should see a result similar to this:
Creating the tooling images
The Management Center tooling is used by the marketing team (or business team). So you have to create new images that “show” them what the layout will look like. So you need to create images for the tooling. The images should be similar to the following with dimensions of 76×126 and 176×271.
For the developer version of WebSphere Commerce the path to the where the images should be saved should be similar to the following:
<toolkit dir>\Stores\WebContent\AuroraStorefrontAssetStore\images\layouts
<toolkit dir>\Stores\WebContent\AuroraStorefrontAssetStore\images\layouts
Insert your new PageLayout record in the database
The last step is to put the database entries for your new layout in the PAGELAYOUT table. This table is what is used by management center to know what layouts are available to the tooling. Once again, I have highlighted in red values you may have to change based on your member and store ID’s.
INSERT INTO PAGELAYOUT (PAGELAYOUT_ID, NAME, VIEWNAME, MEMBER_ID, STOREENT_ID, PAGELAYOUTTYPE_ID, DESCRIPTION, THUMBNAIL, FULLIMAGE, DEVICETYPE, STATE, ISTEMPLATE) VALUES ( 20001, 'AlternateProductPageOne', ‘GenericProductPageLayoutView2’, 7000000000000000151, 10701, ‘ProductPage’, 'Alternative Page Layout', '/images/layouts/product2_thumb_small.png', '/images/layouts/product2_thumb_large.png', 'Web', 1, 0);
To see what the original GenericProductPageLayoutView values were, you can issue this select to see the record and make sure you use the same values: select * from PAGELAYOUT. For instance, here is the the original record I got my values from:
| PAGELAYOUT_ID | NAME | VIEWNAME | MEMBER_ID | STOREENT_ID | PAGELAYOUTTYPE_ID | DESCRIPTION | THUMBNAIL | FULLIMAGE | MASTERCSS | DEVICETYPE | STATE | ISTEMPLATE | CREATEDATE | LASTUPDATE | FIELD1 | FIELD2 | FIELD3 | OPTCOUNTER | UP_NAME |
| 10061 | ‘ProductPage’ | ‘GenericProductPageLayoutView’ | 7000000000000000151 | 10701 | ‘ProductPage’ | ‘ProductPageDescription’ | ‘/images/layouts/product_thumb_small.png’ | ‘/images/layouts/product_thumb_large.png’ | NULL | ‘Web’ | 1 | 0 | NULL | NULL | NULL | NULL | NULL | 1 | ‘PRODUCTPAGE’ |
Next we will see how easy it is to schedule a page layout for a given layout type on a site. Similar to web activities a business person can schedule what layouts are enabled during specific dates and times.
Reference Links:
Comments
Post a Comment