What are the Custom Blocks

Normally in Joomla, each item is placed on a separate page. Sometimes, however, you need to show certain items within a single page, like in category views or other cases.

That is why we made the Custom Blocks functionality. With it, you can specify parts of your page's HTML as unique items to add to favorite lists, using CSS selectors.


Adding Custom Parts of your Joomla website into favorites with MyShortlist

How to define a Custom Block

To define a Custom Block, you go to Components > MyShortlist > Custom Blocks and click new. The first you need to identify for a custom block, is its container HTML element.

This is not the container of all the items to be added in favorites, like .row, but the container of each unique item, like .sub-item.

After writing the container, you need to identify a title element for the Custom Block. A title is mandatory for the custom block to work. Usually these blocks have nothing structural that truly separates them from one another, so the title is used as an identifier for the favorites list, unless a link selector is specified. To select something as the Custom Block title, you can once again write a CSS selector. Only this time, the selector is relative. This means that you don't have to write .sub-item .title. You only have to write something like .title as everything is hereby considered to be placed inside in the container of the favorite item.

The same applies for the Description Selector, which optionally points to a small text that describes this favorite item and the Image selector that optionally includes an image for this favorite item.


Custom Block Link

The Use Current URL as Item Link option allows you to choose whether to use the URL of the current page as the URL to be opened when someone clicks on the favorite item.

If you choose not to use the current URL as the item link, a link selector field opens where you can write a CSS selector for the item link. If the item link is recognized by MyShortlist as one of the 30+ compatible components, the item is automatically identified and handled the common way. This feature allows you to include buttons in category pages for items that are compatible, like Joomla or K2 articles, Virtuemart products, Ads or Events.

Sometimes, you may want to use the Custom Block functionality just to place the button inside single item pages of compatible components. In that case, you may also enable the Get Item ID from URL option. This way, the button is automatically added in the container selector you wrote (thus allowing you to place it anywhere in your page) and the favorite item is also automatically recognized.


Why is this amazing!

There is no limit to what you can do with MyShortlist's Custom Blocks! You can create a MyShortlist cart module, in which your site users can add items and send orders containing any custom part of your website! With its increasingly large amount of compatible components and the ability to add practically anything from your website into back-end customizable and front-end user-defined lists, MyShortlist is the ultimate solution for Joomla websites!


A word about CSS Selectors

At first, it might seem difficult to use this feature if you are unfamiliar with CSS. However, when editing the item you will see a table of CSS selectors (also shown below) that explains what you can write in these fields. Usually it is not difficult to identify what you need. Just right-click on the item you want within your site and choose "Inspect" or "Inspect element". If you move your mouse over certain items, you will be able to identify them, as they change color. Also, if you click to add a new style rule, the CSS selector is automatically created for you.

CSS Selector Help Table for Joomla MyShortlist Custom Blocks

Selector Example Example Description
.item Selects all elements with class="item"
#title Selects the element with id="title"
* Selects all elements
p Selects all <p> elements
div, p Selects all <div> elements and all <p> elements
div p Selects all <p> elements inside <div> elements
div > p Selects all <p> elements where the parent is a <div> element
[target] Selects all elements with a target attribute
[target="_blank"] Selects all elements with target="_blank"
a[href^="https"] Selects every <a> element whose href attribute value begins with "https"
[title*="item"] Selects all elements that contain the substring "item" in their title attribute
a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"


If you need more help, feel free to contact us!