MyShortlist is a highly adaptable Joomla extension.

MyShortlist has been one of our top-selling extensions for years. What makes it so popular? Its high adaptability.

Being compatible with over 60 major Joomla components, MyShortlist allows you to create wishlists, carts or favorites out of virtually anything in your Joomla website.

Using Custom Blocks, you may even define custom parts of your website as your own custom items to add into your lists!

Here are some useful tips that can make your site reach new heights by incorporating MyShortlist.

Creating Template overrides

Ever since version 1.6 (which was released in 2015), MyShortlist offers increasing support of template overrides. For an introduction in Template Overrides and how to create them, please read here.

First of all, to customize MyShortlist items with template overrides, you need to understand which two-letter code your desired component is using. For an exhaustive list of two-letter codes, please read here.

When an item is viewed, MyShortlist will automatically search for the best layout to use, depending on the extension this item comes from. It will look for such layouts in the following locations:

templates/your-template/html/mod_myshortlist/<two-letter-code>_item.php

modules/mod_myshortlist/tmpl/<two-letter-code>_item.php

If neither is found, MyShortlist will use the default_item.php layout.

Example 1: When a custom layout already exists

A very common example is to customize Virtuemart items. A Virtuemart item saved in MyShortlist has the #vm# two-letter prefix. So, to customize it, you need to copy the already existing vm_item.php file from modules/mod_myshortlist/tmpl/vm_item.php to templates/your-template/html/mod_myshortlist/vm_item.php.

Example 2: When a custom layout doesn't exist

Let's say that you want to customize the layout of an item that doesn't have its respective <two-letter-code>_item.php file in modules/mod_myshortlist/tmpl. If that's the case, you can simply copy the file default_item.php from modules/mod_myshortlist/tmpl/default_item.php to templates/your-template/html/mod_myshortlist/<two-letter-code>_item.php. Note that the target file name is not the same!

For example, if you want to create a template override for Joomla Contacts, you can simply copy default_item.php and rename it to jc_item.php according to its respective two-letter code. For more two-letter codes, see here.

Retrieving additional information about the item

That's the most tricky part. It all depends on the component you are trying to customize. Inside each layout, you can use a variable called $item. This variable contains all the information you need to get started. Here's a var dump of this variable for a Virtuemart item.

As you can see, the item object contains a property called aid (Article ID) of Myshortlist, which is the unique identifier for this specific item, as well as its own component's id, and the query with which it was loaded, to help you retrieve more information. Most usually, however, you should use the $item->object properties. Here's an example on how to do that, for Virtuemart:

$db = JFactory::getDBO();
$vm_object = $db->setQuery('SELECT * FROM `#__virtuemart_products` a LEFT JOIN `#__virtuemart_products_en_gb` b ON a.`virtuemart_product_id` = b.`virtuemart_product_id` WHERE a.`virtuemart_product_id` = "'.$item->object->id.'"')->loadObject();
var_dump($vm_object);

This would yield the following results:

From this point on, it's a matter of presenting the data you load from the database, using HTML and CSS.

If you need more advanced customizations, like adding an "Add to Cart" button for Virtuemart, I would happily implement that for you, so feel free to drop me a word.

If you don't want to make large changes to the existing layouts, you can always use a few lines of custom CSS, to achieve your desired result.

Using the Custom CSS option

Each MyShortlist module includes a Custom CSS option, in which you can write your own CSS. To be able to style the module's elements, you can use CSS selectors.

CSS Selectors

CSS or Cascading Style Sheets allows us to style HTML according to our needs, based on so called selectors, which are parts of your HTML page, accompanied by certain symbols.

Here are some useful CSS selectors for MyShortlist:

Below are some examples of what you can achieve with MyShortlist and just a few lines of custom CSS.

Full Image example

In the image above, you can see that we have a full image example. To achieve that result, you can just add the following line of CSS in your module's Custom CSS option.

.myshortlist_item_image { float: none; width: auto; margin: 5px 0; }

Easy, right?

Only Image, Floating Delete button example

This one's a little trickier. Here's what you need to write in your Custom CSS to achieve that.

.myshortlist_item_image { float: none; width: auto; margin: 5px 0; }
.myshortlist_item { position: relative; }
.myshortlist_item_left { display: none; }
.myshortlist_item_right { position: absolute; top: -8px; right: -8px; }
.myshortlist.delete_button { padding: 3px 5px; }

That's it!

There are many things you could do to customize MyShortlist exactly as you want it. Here are some other examples:

.myshortlist.delete_button { font-size: 10px; padding: 0 5px }

.myshortlist_item_title a { font-weight: bold; font-size: 15px; }

.myshortlist_item_description { display: none; }

.myshortlist_item { position: relative; }
.myshortlist_item_image {
  position: absolute; float: none; width: auto; display: none;
  top: 1.2em; padding: 1em; border: 1px solid #999; background: #f9f9f9; z-index: 1000;
}
.myshortlist_item:hover .myshortlist_item_image { display: block; }

Multiple Modules per Page

What happens if you have multiple MyShortlist modules in one page and want to style them all separately?

Each MyShortlist container has its own ID, based on the module ID, like this: myshortlist_div_<module-id>.

So, if you want to customize only one instance of the module, you can simply include the container ID, like so:

#myshortlist_div_121 .myshortlist.delete_button { /* This CSS only affects the Delete button of Module with ID 121 */ }

Further reading

One of MyShortlist's most amazing features, is the ability to define custom blocks out of virtually anything in your page.
Find out how to do that, by reading our help article titled Explaining the Custom Blocks functionality of MyShortlist.