Give Your Clients Control Of Their Sidebar

[Wishbone]

This tutorial shows a way to allow your clients to control which sidebar elements appear on which page, with drag-and-drop reordering, using only a Global Content Block and AdvancedContent.



My original article on uniqu3's blog

Smarty is one of the ingredients that makes CMSMS truly configurable. Often, we need to change our sidebars depending on which page we are on. For example, on our Blog page, we might not want our latest blog entries in the sidebar, and replace it with something else. Smarty provides a way to control this:

Code: Select all

{if $page_alias == 'blog'}
   {* Show another sidebar element *}
 {else}
   {* Show the Blog sidebar element *}
 {/if}

While this is easy for us, it's not all that flexible, and your clients will make a mess of it if you give them template access. If the site increases to hundreds of pages, the above code can get quite messy. There is a very easy way to allow your clients to click checkboxes and re-order them on a page-per-page basis.

Setting the default blocks and order
Let's create a Global Content Block called 'sidebar_order' that contains the list (and order) of our sidebar elements. These will just contain brief names that describes the functions. When creating this GCB, click off 'Use WYSIWYG' (version 1.9+) not 'Turn WYSIWYG on/off' which is slightly different.

Code: Select all

blog,calendar,login

This indicates that we want a blog, calendar and FEU login for the webmaster to choose from, in that order.

AdvancedContent
In my opinion, AdvancedContent is the best module in the Forge. Regular {content} allows us to define multiple content blocks, but {AdvancedContent} allows us to present checkboxes, multiselects, etc. to the page editor, and define presets for these. We're going to use this module to define a multiselect to allow the webmaster to decide which sidebar elements can be on which page. Install AdvancedContent, (see note at bottom before installing) then go to Extensions -> AdvancedContent in the control panel and click on 'Set all Pages of type Content to type Advanced Content.'. This will change all 'content' pages to now be 'AdvancedContent'. For some reason, you can't have AdvancedContent be the default page type, so you have to remember to switch each page to AdvancedContent upon new page creation.

Let's create our 'sidebar_element' AdvancedContentBlock. Insert the following tag into your template, right after the </__body> tag:

Code: Select all

{content block='sidebar_elements' block_type='select_multiple' label='Sidebar Elements' assign='sidebar_elements' items=":::global_content name=sidebar_order:::" default=":::global_content name=sidebar_order:::" delimiter=',' page_tab='options' smarty='true' sortable_items='true'}

Note that we're using {content} instead of {AdvancedContent}.. For some reason, the latest version doesn't like the 'sortable_items' parameter, and will give you an error when you use it. Since your page is of AdvancedContent content type, this will still work.

Let's pick the above tag apart to understand what we're doing:

block='sidebar_elements'
This is the internal name of the content block in the database.

block_type='select_multiple'
This is the type. Normally 'select_multiple' gives you a multi-select list box.

label='Sidebar Elements'
The title that the editor sees.

assign='sidebar_elements'
Put the choices that the webmaster selected in a Smarty variable with this name.

items=":::global_content name=sidebar_order:::"
The list of items to choose from. We have our list in a GCB. You can't use { } inside of a tag. AdvancedContent uses ':::' to designate a smarty command.

default=":::global_content name=sidebar_order:::"
This indicates which ones we want selected by default. Since it's the same GCB, we are saying we want all selected. If you want a different list, use a different GCB.

delimiter=','
Normally '|' is the default delimiter.. We're using a comma.

page_tab='options'
We don't want this on the main tab. Not expected to change often.. Put it at the bottom of the 'Options' tab. Give it a new name, and it will create new tab for it.

smarty='true'
Indicates that 'items' and 'default' have Smarty in it. Don't take it literally.

sortable_items='true'
We want this list to be sortable. It changes the multi-select listbox to checkboxes, with drag-and-drop capabilities.. Drag the arrows.

The Template
Now to put this all together. In your template, let's write some Smarty code where your sidebar normally is:

Code: Select all

{assign var='sidebar_elements' value=','|explode:$sidebar_elements}
{foreach from=$sidebar_elements item='element'}

  {if $element == 'blog'}
    {* Latest Blog sidebar stuff goes here *}
  {/if}

  {if $element == 'calendar'}
    {* Upcoming Events sidebar stuff goes here *}
  {/if}

  {if $element == 'login'}
    {* The Login box goes here *}
  {/if}

{/foreach}

Pretty easy. The above code turns the comma separated list 'sidebar_elements' (remember assign=sidebar_elements above?) into an array, then does a foreach on them. It spits out the keywords (block, calendar, login) in the order that the editor chose, then presents the HTML/smarty code that belongs to that keyword.

Usage
Now let's put it to work. Edit (or create) a page. Click on 'Options', scroll to the bottom, click on and off which elements you want for this page. If you want to change the order, drag the arrows and drop the element where you want. Click on Submit and you're done! One note. All new pages get this property. All the existing pages will have a blank sidebar. You have to edit each page, then 'Submit' and the defaults will be saved.

Enjoy!

AdvancedContent Note
A new version (0.7.2) was released. I installed it and it broke everything. All content blocks were hidden (collapsed), and the defaults didn't work. I reverted back to 0.7.1, then filed a bug report.

[jjl64]

Having come upon a need for this functionality well after these posts were first written, I have followed these instructions with the current versions of the modules and find it works quite well in all respects but one: I can't seem to get the sortable/moveable checkboxes on my Options tab. Instead, I get a simple multi-select list box.

So while I can pick and choose which sidebar elements appear on each page, I cannot rearrange the order in which they appear.

Before posting all of the specific mods that I made I thought I'd ask whether there's some known change or new setting that i am unaware of to the Advanced Content module that would cause this behavior.

[applejack]

For some reason, you can't have AdvancedContent be the default page type, so you have to remember to switch each page to AdvancedContent upon new page creation.

Which makes it far from ideal to provide to a client. I just hope that the next version of the core incorporates many of the capabilities of AdvancedContent. It is about time. The problem with relying on such a module is that it can break with core updates and if you have built a site which relies on it heavily if the module stops being supported then it becomes a major issue.

[Wishbone]

Actually, as of 1.10, you can set the default content type.

Site Admin -> Page Defaults -> Default Content Type

[Wishbone]

Before posting all of the specific mods that I made I thought I'd ask whether there's some known change or new setting that i am unaware of to the Advanced Content module that would cause this behavior.

I haven't tested this at all in 1.10 .. This write-up was tested in 1.9.4.1 (I think)

[applejack]

It was perhaps more of a general comment that such functionality as being able to include different content types such as drop downs, checkboxes etc ought to be part of the core. Can't see any reason as to why not, hopefully it will be soon.

[Wishbone]

I agree. Maybe not as complicated as AdvancedContent, but certainly the usual "custom field" types.

Recently, I've been using CGContentUtils, because it's much more lightweight, especially when I only need a single checkbox.