Using a document for the sidebar display

[geoffb]

Hi,

 

My client feels her left sidebar is a little bare and wants to be able to include quotes, images or just general text when the user is in a category template page. Is there a way of creating a document (say called Sidebar) and having the contents of that document show in my sidebar column on a category template?

 

Thanks

Geoff

[bsmither]

My initial thought would be to add a new sidebox with an embedded CSS as hidden, then, in the skin's CSS, make that box visible when it is a child of the category_section div.

 

Another thought is to use Smarty: if showing the {category} page, then include the {sidebox}. This is called 'display logic'.

 

I'll have a more complete solution shortly.

[bsmither]

I will assume for the moment that you have the skills to create the sidebox and get it to display by yourself. Let us know if that's not the case.

 

In the sidebox template code, it should start with:

<div id="mySidebox1" style="display:none;">

 

Then, in the skin's common.css file (using Kurouto as an example), there is a group of CSS rules for Section Wrappers.

 

After:

.category_wrapper {
    clear: left;
}

 

Add this new rule:

.category_wrapper #mySidebox1 {
    display:block !important;
}

 

This means that when the 'category_wrapper' class is present in the HTML (as when viewing a category page), then the descendant mySidebox1 div will have the display:block property that overrides the normally higher priority display:none property.

[geoffb]

Hi Brian,

 

First ever project with CubeCart so never created a sidebox yet no.

 

Thanks

Geoff

[bsmither]

Let us Kurouto as an example. Open the template file box.featured.php.

 

Right away we see a <div> with it's specific ID. An HTML document as seen by the browser should have at most one single tag (actually called a 'node') with a specific ID. The browser won't crash if more than one node has the same ID, the browser may show the page with some abnormalities, so one should strive to code for that restriction.

 

The <h3> tag gives the box it's heading, followed by whatever you want to put in there.

 

The box contents can be hard-coded material, or we can let CubeCart fetch data from the database. If from the database, we put {$placeholders} in the template, and CubeCart tells Smarty to replace the {$placeholders} with that data.

 

Your initial post suggested a "Document". That will work, but realize this document displayed in the sidebox will only be just short of 200 pixels wide (in Kurouto).

 

So, for the content, we will place after the <h3> tag:

<p class="title">{$good_info.title}</p>
{$good_info.contents}

The template will end with the closing </div>.

 

Give the new template file a name, such as box.good_info.php.

 

We now need to do four other things: write the document, insert the sidebox placeholder in the main.php template, tell CubeCart to render the template, and instruct CubeCart to fetch the data that goes in the template.

 

In the template file main.php, find the sidebar divs. You will see the boxes that are currently displayed in each. Let's insert our new box just under the {$CATEGORIES} navigation block:

<div class="{$SECTION_NAME}_wrapper">
      <div class="sidebar" id="sidebar_left">
        {$CATEGORIES}
        {$GOOD_INFO}
        {$SALE_ITEMS}
        {$MAIL_LIST}

Note: There is no requirement that the name of the template file, the name of the placeholder, the name of the template variables, etc, are consistent. But it makes keeping track of things easier.

 

In the file /classes/gui.class.php, here is most of the code that gets the data, processes that data, assigns the processed data to variables in the templates, and instructs Smarty, the template engine, to render that template.

 

At around line 283 is a function that calls subroutines to populate and render all the sideboxes - the "common" elements of every page. At line 302, we see that we can create a hook, but we will skip that option for now.

 

On a new line after $this->_displaySkinSelect(); add $this->_displayGoodInfo();

 

Further down the file, we see a series of private functions that start with _display. In alphabetical order, we will insert the function to populate the new sidebox. That happens to be above _displayLanguageSwitch().

 

Between the end of _displayDocuments() and the comments that introduce _displayLanguageSwitch(), add:

if (($doc_content = $GLOBALS['cubecart']->getDocument(99)) !== false) {
  $GLOBALS['smarty']->assign('good_info', array(
    'title' => $doc_content['doc_name'],
    'contents' => $doc_content['doc_content'],
  ));
  $content = $GLOBALS['smarty']->fetch('templates/box.good_info.php');
  $GLOBALS['smarty']->assign('GOOD_INFO', $content);
}

where 99 is the document ID number that you just composed. When the document is composed, you should set the "Show link to document on storefront" to Off.

 

Because we edited an existing template (main.php), you should now go to admin, Maintenance, Rebuild tab, and clear the cache.

 

Remember, we have CSS initially not displaying the box unless we are in the Category page.

[geoffb]

Hi Brian,

I have had a good go at this and have broken the site when complete, here is what I have done so far:

Created the CSS
Created a file called box.good_info.php and used your code supplied
My template has been altered somewhat so the sidebar in question is within a content.category.php template, there I have added {$GOOD_INFO}
Added $this->_displayGoodInfo(); to the gui.class.php template
Added:

if (($doc_content = $GLOBALS['cubecart']->getDocument(99)) !== false) {
  $GLOBALS['smarty']->assign('good_info', array(
    'title' => $doc_content['doc_name'],
    'contents' => $doc_content['doc_content'],
  ));
  $content = $GLOBALS['smarty']->fetch('templates/box.good_info.php');
  $GLOBALS['smarty']->assign('GOOD_INFO', $content);
}

further down. Although I was a little unsure of where this was to actually go i think I found the place BUT this being in the wrong place may be the issue, its after line 754 after the display document content function and the display language function!

 

I have created a Document in the admin called 'good info' too and cleared the site cache.

 

Any further help appreciated.

 

Thanks

Geoff

 

[bsmither]

In gui.class.php, near line 754, find:

    /**
     * Display language switch box
     */

Above that, add this:

  /**
   * Display Good Info box
   */
  private function _displayGoodInfo() {
    if (($doc_content = $GLOBALS['cubecart']->getDocument(99)) !== false) {
      $GLOBALS['smarty']->assign('good_info', array(
        'title' => $doc_content['doc_name'],
        'contents' => $doc_content['doc_content'],
      ));
      $content = $GLOBALS['smarty']->fetch('templates/box.good_info.php');
      $GLOBALS['smarty']->assign('GOOD_INFO', $content);
    }
  }

(Did not notice the code needed to be wrapped inside the actual named function.)

 

"the sidebar in question is within a content.category.php template"

 

That might be tricky. We will have to see how it goes.

 

"I have created a Document in the admin called 'good info'."

 

Please take note of the document_id number of this document. Change the 99 in the code above to that doc_id.

[geoffb]

Hi Brian,

 

Right, I've done that and the site is no longer breaking so that's good. The ID was 10 so included that and called it again in the content.category.php template and nothing. 

 

Pulling in the content from that document does work though as I slipped the same call {$GOOD_INFO} into the main.php and it did display, so like you said its getting it to display in the category template!

 

Geoff

[bsmither]

I'm curious to learn your rational for putting the sidebars inside a content template. And what do you mean exactly when you say the sidebar in question?

 

I think the order in which CubeCart has Smarty render the templates is important. For example, the Category Content is rendered and populated with the data that was collected to show the category. This step is the CubeCart->loadPage() function and the output is assigned to the Smarty placeholder {$PAGE_CONTENT}. Set this HTML aside.

 

In sequence, render and populate all the sideboxes. This step is the GUI->displayCommon() function. All of these sub-functions assign their respective output to the appropriate Smarty placeholders: {$CURRENCY}, {$MAIL_LIST} etc. Set all these contents aside.

 

Now, finally, render and populate the main.php template. Here, all the content that was set aside gets plugged in to the appropriate placeholders.

 

Here's how I see it: if you have {$GOOD_INFO} in a content template, then the content for {$GOOD_INFO} really should have already been rendered and populated prior to the time CubeCart->pageLoad('category')  finishes. But it's not.

[geoffb]

Hi Brian,

The website that has been created is a mile away from the skins of the cubecart ones supplied. As the homepage has a bespoke design I have stripped the skin, moved sections around ect. To start with, on the homepage we are not using the left hand column (sidebar as it's referred to) and this is only being used at one stage of the users journey, that is when they look at a category, for instance Women's Fragrances.

If you look at the demo store under the header you have a left column which to start with has Shop By Category. We are only wanting to show this column on category page where we then list sub categories. As said before this can look a little bare so the clients wants a way to add content, be it images, testimonials ect under the sub cats content. Yes it's only a narrow space but a usable one too.

Hope this makes sense. If you need to see the site to visualise it let me know.

[bsmither]

I can appreciate the reasoning for wanting to inhibit/allow parts of the page depending where you are.

 

But based on my explanation of how the templates are rendered - what data is available when and to what template - moving {$placeholders} to a different template should present some very difficult behavior to work around.

 

In post#2 above, I think are the only two viable methods of controlling the visibility of parts of the page.

 

Using the 'display logic' provided by Smarty, you can have the same {$placeholder} be in the code at more than one location, such as at the top of the left sidebar and at the bottom of the right sidebar.

 

To show just one or the other:

{if some_condition}{$contentA}{/if}

and elsewhere

{if some_other_condition}{$contentA}{/if}

 

There are other commands in Smarty that will move the scope of a {$placeholder}. For example, to show relevant content about a product's pricing in the Product Details area of the page,  but only if a {$placeholder} meets a certain condition as found in another template, perhaps the Mailing List template, Smarty can be told to handle that.