This design technique will allow you to create extended information pages that contain extra information related to your sections e.g. extra information about the product(s) within the section.
The first task is to create the mechanism to support an extra pop-up window that is launched from the section links.
To begin with, you are going to create the layout for the extra pop-up page.
1. Go to 'Design | Library'
2. Right-click on any of the layout type groups in the 'Layouts' tab and select 'New Layout Type'.
3. Give it a name of 'Section Popup Layout' and ensure you select 'Pop-up' under 'Rules'.
4. Click 'OK'.
5. Right-click on this new layout type group and select 'New Layout'.
6. Give it a name of 'Section PopUp Page' and click 'OK'.
7. Now double-click on this layout to edit it.
8. Click the 'Edit Layout Details' button.
9. Change the value in the 'Extended Info Page Filename Field' from:
to:
10. Click 'OK'.
This will automatically use a filename for the popup pages of 'popup_' followed by the ID of the section.
Now you need to put some layout code into this layout. The best way to do this is to go into one of the layouts in the existing 'Extended Info Layout' group and copy and paste the content from there into the new 'Extra Information Page' layout. You can amend this as necessary to remove all the product specific-fields and insert your new extra section information.
Next, you need to create a layout selector to include the new 'Section PopUp Page' into the store design.
1. Right-click on the 'Section Popup Layout' group and select 'New Selector'.
2. Give it a name of 'SectionPopUpPage'.
3. Give it a prompt of 'Layout for Section PopUp Page'.
4. Under 'Place of Setting', select 'Site' and 'Section and set the 'Tab Name' to 'Properties'.
5. Change to the 'Values' tab.
6. Highlight 'Section PopUp Page' in the left list and click the '>' button to move it to the right list.
7. Change back to the 'Basic Definition' tab.
8. Click 'OK'.
You are now ready to create a link to your extra information page.
1. Close the library and look at the 'Design' tab.
2. Select a section link layout that you want to include this link for.
3. Copy and paste the following code somewhere in the section link layout:
The 400 values are for the width and height of the window – so feel free to amend these values accordingly.
The first task is to create the mechanism to support an extra pop-up window that is launched from the section links.
To begin with, you are going to create the layout for the extra pop-up page.
1. Go to 'Design | Library'
2. Right-click on any of the layout type groups in the 'Layouts' tab and select 'New Layout Type'.
3. Give it a name of 'Section Popup Layout' and ensure you select 'Pop-up' under 'Rules'.
4. Click 'OK'.
5. Right-click on this new layout type group and select 'New Layout'.
6. Give it a name of 'Section PopUp Page' and click 'OK'.
7. Now double-click on this layout to edit it.
8. Click the 'Edit Layout Details' button.
9. Change the value in the 'Extended Info Page Filename Field' from:
HTML Code:
<Actinic:Variable Name="ExtendedInfoPageName"/>
HTML Code:
popup_<actinic:variable name="SectionID"/>.html
This will automatically use a filename for the popup pages of 'popup_' followed by the ID of the section.
Now you need to put some layout code into this layout. The best way to do this is to go into one of the layouts in the existing 'Extended Info Layout' group and copy and paste the content from there into the new 'Extra Information Page' layout. You can amend this as necessary to remove all the product specific-fields and insert your new extra section information.
Next, you need to create a layout selector to include the new 'Section PopUp Page' into the store design.
1. Right-click on the 'Section Popup Layout' group and select 'New Selector'.
2. Give it a name of 'SectionPopUpPage'.
3. Give it a prompt of 'Layout for Section PopUp Page'.
4. Under 'Place of Setting', select 'Site' and 'Section and set the 'Tab Name' to 'Properties'.
5. Change to the 'Values' tab.
6. Highlight 'Section PopUp Page' in the left list and click the '>' button to move it to the right list.
7. Change back to the 'Basic Definition' tab.
8. Click 'OK'.
You are now ready to create a link to your extra information page.
1. Close the library and look at the 'Design' tab.
2. Select a section link layout that you want to include this link for.
3. Copy and paste the following code somewhere in the section link layout:
HTML Code:
<actinic:variable name="SectionPopUpPage" /> <a href="javascript:ShowPopUp('popup_<actinic:variable name="SectionID"/>.html',400,400);">Click here to launch extra information page</a>