Overview
This tutorial will outline how you can have the different details of your listing (product
information, photos, maps, etc.) on different tabs for clean, easy navigation.
This tutorial makes use of some JavaScript and a CSS file from DynamicDrive
to output tabs that people can use to look at the different types of content
you have for each listing.
To get an idea of how this solution can be used, have a look at the demo
that showcases this script in action with three separate tabs:
Tabbed Listing Demo
Please let us know if you need assistance setting this up on your site. You
can post to the forum or fill out a support
request, or even give us a call.
| We also offer a Priority Consulting service if you would prefer to have us set these
up for you. To inquire, send us an email
or call 1-800-752-0455. |
1. The DynamicDrive code
First, you'll want to look at step 1 of
this tutorial on the DynamicDrive website. It lists the files that you'll want to download to your local
computer. You can also download these files here:
-
tabcontent.css
-
tabcontent.js
-
shade.gif
-
shadeactive.gif
You can then upload these files onto your server in the /listman/images/ directory.
The tutorial on DymanicDrive's site outlines how to add this code to your website but in the following steps
we've outlined how you can actually get this code integrated with Listings Manager
2. Adding the tabs to your Listings Manager template
You'll be working with the /templates/[industry]/_publish_listing.html in this tutorial so you'll
want to have a backup copy of this template before you get started.
First, you'll want to add the following code between the opening and closing <head> and </head>
tags in _publish_listing.html:
You may just want to customize the paths for the first two lines (tabcontent.css and tabcontent.js) depending on where
you've placed these files on your server.
Next, you'll just want to add the actual tab menu to your page, you'll want to add this somewhere near the top of
_publish_listing.html below the <body> tag (and after your header image or header navigation):
If you're going to be adding or removing tabs on your site, then you'll just want to be sure that you modify the
above code to reflect the amount of tabs you'll be using.
You'll also want to note that right after the menu there is a div tag for "tabcontentstyle". This is the opening tag for the
container that this script will use for it's different tabs.
3. Populating the Tabs with Data
The kind of detail you'll be listing on your site can really vary so in this tutorial we'll just give
you a quick example of how to populate two tabs, one for listing detail and another for your photos.
The code below should come directly after the menu that you created in the step above. Each of the tabs is in it's own
div tag which you'll notice in step 2 were named tcontent1, tcontent2, etc. To create the "Listing Detail" you would
want to use some code that looks like this:
Everything between the opening and closing <div> and </div> tags is what will show up in your first tab (tcontent1)
so you can modify this to output any other listing details you'd like.
You'll notice that there are two closing </div> tags in this piece of code and a bit of JavaScript.
At the end of step 2 we mentioned that there
was an opening tag for "tabcontentstyle" which is the container for all of the tabs. Now that we've output our two tabs, we'll
just need to close the container so you can add any other content which should be outside of the tabs (footers, links, etc.)
As the comment mentions, if you do tweak this tutorial and use more than just two tabs, they would just go where the comment
is (before the closing </div> tag and the JavaScript).
Give this a try and let us know if you have any questions.
We also offer a Priority Consulting service if you would prefer for
us to get this setup for you on your site. To inquire, send us an email
or call 1-800-752-0455.
