Using Alternate Designs

Squiz Matrix allows you to create hyperlinks in your design to allow users to select alternate designs to use. For example, you can create a text only or low bandwidth version of the Design and allow the user to switch to that Design. You can then allow the user to switch back to the original design or continue browsing the Site using that Design. This is achieved by adding the query string parameters SQ_DESIGN_NAME and SQ_ACTION into the hyperlink and setting up a user defined design on the Settings screen of an asset. To understand how this works, consider the examples outlined below.

Creating a Hyperlink to a Printer Friendly Design

We have created a separate Design to use as the printer friendly design for our Site and a hyperlink to this Design needs to be created in our main Design. To do this, the following code is added into the parse file of the main Design.

<a href="<MySource_PRINT id_name="__global__" var="asset_link" full_url="true" />?SQ_DESIGN_NAME=printer_friendly" target="_blank">
   Printer Friendly
</a>

This hyperlink will open the printer friendly Design for the current page in a new window. Please note that you can enter any name you want for SQ_DESIGN_NAME. For example, you can enter SQ_DESIGN_NAME=print instead.

On the Settings screen of the Site, a user defined design is created. The value that is assigned to the SQ_DESIGN field is entered into the Design Code field (in this case its printer_friendly) and the printer friendly Design is selected in the New field. The Design is applied to the Site and its child assets and is used when the user clicks on the hyperlink.

The User Defined Printer Friendly Design section

Creating a Hyperlink to a Text Only Design

We have created a separate Design to use as the text only design for our Site and a hyperlink to this Design needs to be created in our main Design. To do this, the following code is added into the parse file of the main Design.

<a href="<MySource_PRINT id_name="__global__" var="asset_link" full_url="true" />?SQ_DESIGN_NAME=text_only&SQ_ACTION=set_design_name" target="_blank">
   Text Only
</a>

This hyperlink will open the text only Design for the current page in the current window. This Design will continue to be used for any other pages the user visits in the Site. Please note that you can enter any name you want for SQ_DESIGN_NAME. For example, you can enter SQ_DESIGN_NAME=text instead.

To allow the user to switch back to the original Design, the following code is added to the text only Design.

<a href="<MySource_PRINT id_name="__global__" var="asset_link" full_url="true" />?SQ_ACTION=clear_design_name">
   Clear design
</a>

This hyperlink will revert the Design back to the default frontend design.

On the Settings screen of the Site, a user-defined design is created. The value that is assigned to the SQ_DESIGN field is entered into the Design Code field (in this case its text_only) and the text only Design is selected in the New field. The Design is applied to the Site and its child assets and is used when the user clicks on the hyperlink.

PreviousNext