Question: Preparing your template for Dynamic Update of results
Please choose the corresponding section for your Cherry Picker version:
Cherry Picker Product Types v3.10 and Cherry Picker Custom Fields v2.10 and newer
With new Cherry Picker versions there is no need to manually edit any files. But you may need to provide your template's CSS selector for a component element. Cherry Picker will try determine it automatically, but if it fails, it will present an alert with a corresponding message. In this case we strongly advise that you use developer tools like Firebug to inspect your website HTML markup
All that remains to do is to provide its ID in CP configurations:
Older versions
There are two steps that we'll take to make sure this feature is fully working.
1. Check that your template has component.php file.
Let's take for example default Joomla template beez_20. It has the file we need:
/templates/beez_20/component.php
It is responsible for updating only the component part of the site (products in our case) and not the whole page. Most of the quality third-party templates have this file. If not -- you can either copy it from default joomla template or contact template's developer to provide it.
2. Provide the component element's CSS selector to Cherry Picker
Component's element is a HTML element that holds the jdoc of type "component" in your template's index.php. In other words, this is the place where all your component's data is being loaded on page load. And in our particular case, this is where all Virtuemart's products are being displayed. We'd need somehow to identify this element for Cherry Picker so it knows where the newly fetched products should be inserted to replace the old ones. And the easiest way to do this is to provide a CSS selector of the component element. As an example, let's take a look at the beez_20's index.php. Look around for these lines:
Note
Some templates store their HTML markup code in separate files, most often it is layouts/default.php. So you need to edit this file instead.
index.php
.. <div id="main"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> ..
And now let's look at the component.php (we made sure it's present in the first step)
component.php
.. <body class="contentpane"> <div id="all"> <div id="main"> <jdoc:include type="message" /> <jdoc:include type="component" /> </div> </div> </body> ..
You can see that the element DIV with ID="main" wraps the jdoc of type "component" in both cases. It's exactly what we need. So all that's left for us to do is to enter "#main" (without double qutoes) in Cherry Picker back-end.
What is a CSS selector? You can easily find out at W3Schools.
The above manipulation tries to imply the following idea:
.. // This is index.php at the time before user applies filters <div id="main"> // OLD CONTENT </div> // And this is component.php. This file provides new content with updated // product results. Notice how OLD CONTENT and NEW CONTENT are wrapped inside // DIV element with same ID. This way we can take NEW CONTENT from DIV MAIN // and replace with it the OLD CONTENT in the relative DIV. <div id="main"> // NEW CONTENT </div> ..
If your template doesn't have any outer element, for example like this:
.. <body class="contentpane"> // MESSAGE and COMPONENT containers do not have distinct outer element // with ID that we could use. <jdoc:include type="message" /> <jdoc:include type="component" /> </body> ..
you can freely add one to both index.php and component.php:
.. <body class="contentpane"> <div id="dynamic_container"> // NEW container with some ID (it can be any string) <jdoc:include type="message" /> <jdoc:include type="component" /> </div> // pair new DIV with closing tag </body> ..
and enter "#dynamic_container" in CP config.
Use Firebug to visualize your page structure
It's always good to see with your eyes what youre dealing with. By using Firebug for Firefox or similar built-in Developer Tools for Chrome or Safari you should be able to locate the needed element much easier. As in the example below you can find out the necessary selector name event without openning index.php in your texteditor.
If you have not succeeded to provide a correct selector for your template's component element from the first attempt, you'll see a similar javascript error in the Console tab
Firebug console tab with error message
This could only mean that either the selector is not valid, or the element you're targeting with selector does not exist either in index.php or component.php
