Tutorial - mark it sold!

As I've been working on a new site for one of our clients, I thought it would be a nice touch to add a "Sold" feature. I've done this sort of thing before with Extra Fields and text, but now I wanted to step it up to a cool image overlay. After looking at some options using Extra Fields, I came up with a very simple solution that is simple to implement.

Step 1

The first thing you want to do is create a "Sold" image. To do this, create a transparent PNG image with whatever sold graphic you want. Create the image the exact size that you have your thumbnails set to...in this example, its 120x90 px. Name the image sold.png and upload it to your image folder of your current template that you are using.

Step 2

Now its time to create an Extra Field. Login to your site admin. Under Categories, select Extra Fields. Create a drop-down list called "Availability" with the following 2 options:

Option 1: Available
Option 2: Sold

Step 3

In your template file showlistings.tpl, replace your current image call with the following (replace fid=1 with your "id number" / example fid=3 or whatever the ID number is that shows in your admin)

Code:

{if $sDisPhoto == "Y"}
<div class="slimage">
    <div class="sl{get_extra_field id=$entry.id fid=1}"><a href="{$entry.link}" title="{$entry.title}"><span>{$entry.title}</span></a></div>
    <a href="{$entry.link}" title="{$entry.title}">
    {if $entry.image != ""}<img src="thumbs/small_{$entry.image|escape:"url"}" alt="{$entry.title}" title="{$entry.title}" />
    {else}<img src="templates/{$smarty.const.MAIN_TEMPLATE}/images/nophotosmall.gif" alt="{$entry.title}" title="{$entry.title}" />{/if}</a>
</div>
{/if}

Step 4

Now its time to create the magic with some simple CSS. Add the following to your template's CSS file.

Code:

.slimage {
    border: 1px solid #fff;
    margin-right: 25px;
    width: 120px;
    height: 90px;
    float: left;
    text-align: center;
    position: relative;
}
.slSold {
    position: absolute;
    background: url('path-to/templates/myCustomTemplate/images/sold.png') no-repeat;
}
.slSold a {
    width: 120px; /* make sure this matches the thumbnail size in the admin settings */
    height: 90px; /* make sure this matches the thumbnail size in the admin settings */
    display: block;
}
.slSold span {
    display: none;
}
.sl {
    display: none;
}
.slAvailable {
    display: none;
}

Here's what my example looks like when a listing is marked sold, the thumbnail is still clickable to boot:



Hopefully some of you can make use of this little customization

Now THAT'S nice! Thanks.

@michael

Thanks...hopefully you can implement that into your projects

I am having a bit of an issue with this.. What is the " proper ID" where do i find that? Also when i add the code to the viewlistings.tpl my desctipons and images for products are not lined up

@rockbassray

The ID is the number that is assigned to the Extra Field, it is displayed in the admin under Extra Fields...towards the left side. If your ID is "3", change the code to fid=3

The code in this example should be placed in the showlistings.tpl ... not the viewlistings.tpl. Also, depending on your template, you may have to make some CSS/HTML changes to make it work.

Which template are you using? If you're using a table based template such as the Default, you would probably look for something like this:

Code:

<td class="{$entry.class}"><a href="{$entry.link}" title="{$entry.title}">{if $entry.image != ""}<img src="thumbs/small_{$entry.image|escape:"url"}" border="0" alt="{$entry.title}" />{else}<img src="templates/{$smarty.const.MAIN_TEMPLATE}/images/nophotosmall.gif" border="0" alt="{$entry.title}" />{/if}</a></td>

and replace it with something like this:

Code:

<td class="{$entry.class}">
<div class="slimage">
    <div class="sl{get_extra_field id=$entry.id fid=1}"><a href="{$entry.link}" title="{$entry.title}"><span>{$entry.title}</span></a></div>
    <a href="{$entry.link}" title="{$entry.title}">
    {if $entry.image != ""}<img src="thumbs/small_{$entry.image|escape:"url"}" alt="{$entry.title}" title="{$entry.title}" />
    {else}<img src="templates/{$smarty.const.MAIN_TEMPLATE}/images/nophotosmall.gif" alt="{$entry.title}" title="{$entry.title}" />{/if}</a>
</div>
</td>

Great idea, I'm glad someone wrote a mod! Thanks freeze2.
I am having an issue getting it to display the sold image though. Any ideas to what I might be doing wrong?

Can you share a link with a listing that is marked as sold?

I sure can. This site is still a work in progress and this is just a test ad.

http://www.miniranchers.com/viewlisting.php?view=1


Is there a path issue or something like that?

Yup...looks like the path to your image is incorrect

Code:

background: url(../templates/Neo-2Charcoal/images/sold.png) no-repeat;

Find the URL of the image and insert it into your CSS ... that should solve your hiccup

Ok, so that's the little problem I had!
Thanks for taking a look for me.

I always thought they should have had a mod just like this. I'm glad you made one for all of us to share!

Thanks again!

Good to hear you got things worked out

Is the file name showlistings.tpl still the same in v4.2.4 Developer? I can't seem to find it anywhere!

@Katie Kennedy

It sure is ... you should be able to locate it using the following path: templates/default/showlistings.tpl

Well that was easy. Thank you! Now for stupid question number 2: what portion of the showlistings.tpl is the image call? In other words, where do I put step 3 and what do I delete? Can you tell I have no idea what I'm doing?

There's a post a little earlier in this thread describing a table based template such as the Default, have a look at that...its probably the info you need.

I've done all this and my image still isn't showing up. I put the CSS portion at the bottom of my CSS file. Is that correct? I'm not sure what else I would be doing wrong...

How 'bout a link to the site you are working on...that may help find the problem.

http://www.mondakmarketplace.com/viewlisting.php?view=15

Thanks for your help!

Hi Katie, looking at the following page (this is where the sold image would show)

http://www.mondakmarketplace.com/category.php?cat=hunting-fishing

It doesn't look like you've added the code to your showlistings.tpl

Code:

{if $sDisPhoto == "Y"}
<div class="slimage">
    <div class="sl{get_extra_field id=$entry.id fid=1}"><a href="{$entry.link}" title="{$entry.title}"><span>{$entry.title}</span></a></div>
    <a href="{$entry.link}" title="{$entry.title}">
    {if $entry.image != ""}<img src="thumbs/small_{$entry.image|escape:"url"}" alt="{$entry.title}" title="{$entry.title}" />
    {else}<img src="templates/{$smarty.const.MAIN_TEMPLATE}/images/nophotosmall.gif" alt="{$entry.title}" title="{$entry.title}" />{/if}</a>
</div>
{/if}

Also, checking your css, you will need to update your image path to where you have your sold image stored

Code:

.slSold {
    position: absolute;
    background: url('path-to/templates/cherry/images/sold.png') no-repeat;

Should look something like the following if you uploaded the sold image to the images folder of your template:

Code:

.slSold {
    position: absolute;
    background: url('http://www.mondakmarketplace.com/templates/cherry/images/sold.png') no-repeat;

Once you make those changes, you should see your sold image

I feel like I have tried everything but I can't get it to work.

This is the image it is supposed to show up on: http://selloffroad.com/viewlisting.php?view=32

It would be awesome if someone could help out.
Thanks!