CamperManagement.cmCampers Snippet

cmCampers can be used to aggregate data on the different vehicles in the database.

Snippet Properties¶

You can use the following properties in cmCampers to adjust its behaviour and to make it your own. Some of them overlap with the cmCamperDetails snippet.

1. Unconfirmed
2. Active
3. Favorite
4. Conditionally sold
5. Sold
6. Inactive | 1,2,3,4 | | numimages | Integer indicating how many images should be retrieved. | 1 | | target | Integer resource ID for the camper details page. Will be used with makeUrl to create a link following friendly url settings, passing "cid" in the URL with the camper ID. | 2 | | tplOuter | Chunkname. Outer template to wrap the entire result set. Placeholders | cmDefaultTplOuter | | tplItem | Chunkname. Template for one item. [Placeholders|display/ADDON/CamperManagement.Placeholders+you+can+use] | cmDefaultTplItem | | tplImageOuter | Chunkname. Outer template to wrap the entire image result set, called for every vehicle item. [Placeholders|display/ADDON/CamperManagement.Placeholders+you+can+use] | cmDefaultTplImageOuter | | tplImageItem | Chunkname. Template for one image item. [Placeholders|display/ADDON/CamperManagement.Placeholders+you+can+use] | cmDefaultTplImageItem | | tplOptionsOuter | Chunkname. Outer template to wrap the entire options result set, called for every vehicle item. [Placeholders|display/ADDON/CamperManagement.Placeholders+you+can+use] | cmDefaultTplOptionsOuter | | tplOptionsItem | Chunkname. Template for one option item. [Placeholders|display/ADDON/CamperManagement.Placeholders+you+can+use] | cmDefaultTplOptionsItem | | tplOwner | Chunkname. Template to use for displaying owner information. [Placeholders|display/ADDON/CamperManagement.Placeholders+you+can+use] | cmDefaultTplOwner | | searchFromRequest | 1 | 0. When 1, this will also check POST and GET requests for the status to filter on, the sort field and the sort direction. Fields it looks out for and overrides the snippet properties with if found are: status, sort, dir. When it finds a status filter, it will set a placeholder "statusfilter" you could use in your template. | 0 | | locale | Locale used for the money_format function which formats the price. | it_IT | | toPlaceholder | When set it will set a placeholder, the key being what you pass to &toPlaceholder, with the result of the function. | |

Example usage¶

Example1: Simple overview of latest additions¶

Override the item chunk and image item chunk, getting the last 4 added vehicles and linking to the details page with ID 12.

[[!cmCampers? &tplItem=`cmTplItem` &tplImageItem=`cmTplImage` &limit=`4` &target=`12`]]

cmTplItem chunk:

<li onclick="location.href='[[+url]]'">
    <div class="status[[+status]]"></div>
    [[+images:default=`<img src="/assets/templates/lighthouse/cmimg/ph.png" />`]]
    <h4><a href="[[+url]]" title="[[+brand]] [[+type]]">[[+brand]] [[+type]]</a></h4>
    <ul>
        <li><span>Manufactured:</span> [[+manufactured]]</li>
        <li><span>Mileage:</span> [[+mileage]]</li>
        <li><span>Engine:</span> [[+engine]]</li>
        <li><span>Price:</span> &euro; [[+price]]</li>
    </ul>
</li>

With additional CSS styling, this is the result (obviously there are things that could be improved):

Example2: Slideshow with vehicles marked as favorite¶

This slideshow assumes you have a some kind of plugin set up to handle the slideshow, but is intended to show how you could use the different tpl properties to just get the output you need.

We put this is the template (it matches our slideshow script):

<div id="slideshow">  
   [[!cmCampers? &status=`2` &tplOuter=`cmHomeOuter` &tplItem=`cmHomeItem` &tplImageItem=`cmHomeImage` &searchFromRequest=`0` &target=`12` ]]
</div>

We're filtering on status 2 (favorites), and are using a few template chunks:

cmHomeOuter, which only outputs the inner stuff instead of the default of an unordered list. We could actually put the div from the template (part above) in our outer template, too.

[[+items]]

cmHomeItem, which outputs the images and the caption for one vehicle. Again, this is specific for our slideshow and your scripts may require something different.

<div class="slide">
  <a href="[[+url]]" title="[[+brand]] [[+type]]" >[[+images]]</a>
  <div class="slider-infobox">
    <p><a href="[[+url]]" title="[[+brand]] [[+type]]" >[[+brand]] [[+type]] - &euro; [[+price]]</a></p>
  </div>
</div>

cmHomeImage which simply puts in the image tag.

<img src="[[+image]]" alt="[[+brand]] [[+type]]" />

All of the above gives us the following output in the front-end for one item:

 <div class="cycle">
  <a href="aanbod/details.html?cid=12" title="TEC Siena Saphir 510 TR" ><img src="/assets/components/campermanagement/uploads/2011/12/cm25917-723.jpg" alt="TEC Siena Saphir 510 TR" /></a>
  <div class="slider-infobox">
    <p><a href="aanbod/details.html?cid=12" title="TEC Siena Saphir 510 TR" >TEC Siena Saphir 510 TR - &euro; 5.999,00</a></p>
  </div>
</div>

Combined with our slideshow script and a bunch of css, we get this result, which fades in/out from vehicle to vehicle.

Example3: Horizontal row style overview¶

Coming soon..!

Suggestion: Slideshow of images per vehicle¶

Every image can have multiple images, but as the numimages property defaults to 1 you wont see that right away. Using the tplImageOuter and tplImageItem chunks you could set up a mini slideshow of images on an overview page. I think this is an interesting concept and if anyone has done that or would like to do that, I would love to hear about that. You can contact me via hello at markhamstra dot com.