Request a Call Back

Enter your number and one of our friendly ecommerce experts will be in touch. All fields are required.

Speak to our experts today 0333 004 0333
Speak to one of our experts today or Request a Callback
User Guides

EKM Tag: showdata

This is the most advanced tag within the EKM platform, it's purpose is to output information saved within your shop onto your website. It is commonly used to display products and categories from your shop.

Conditional Tokens

This tag now supports {conditional-tokens}{/conditional-tokens}. Read more about conditional tokens.

  • Tag Information
  • Tag Builder
  • Nesting This Tag

This is the most advanced tag within the EKM platform, it's purpose is to output information saved within your shop onto your website. It is commonly used to display products and categories from your shop.

Basic Use
In it's most basic use the showdata tag can be implemented in this way which would output the chosen data in table form. You can then progressively add other attributes to further customise the tag.

[ekm:showdata]
	data='products';
[/ekm:showdata]
								
Advanced Use
Here is an example of advanced use of the ekm:showdata tag.

[ekm:showdata]

	id='category-products';

	data='products';
	location='auto';

	cols='2';
	rows='6';
	counterreset='';
	page_navigation='auto';

	orderby='orderlocation, name';
	skiprecords='0';
	excludelist='';
	includelist='';

	editbuttons='YES';

	image_ratio='auto';
	image_width='auto';
	image_height='auto';

	font_formatting='yes';

	output_start='';
	output_row_start='';
	output_column_start='';
	output_item='';
	output_column_end='';
	output_row_end='';
	output_end='';

	output_column_blank='';

[/ekm:showdata]
								
Tag Attributes
Show
show='yes';

Sets whether the tag will be output. Set this to no and the tag will not output. Useful for turning off seasonal offers.

Value
Description
yes
Will output the showdata if it has data to display.
no
Will prevent the showdata tag from being output.
Tag Hide Toggle
tag_hide_toggle='yes';

Sets whether the showdata tag can be turned on or off in the editor.

Value
Description
yes
Hides the option for the showdata tag to be turned off.
no (default)
Shows the option to hide the showdata tag.
ID

Specify an ID for the showdata tag which will be targeted by the filterby or sortby tags.

Information Note

This ID must meet the rules of a HTML id in that it cannot start with anything but a letter and cannot have special characters other than hyphens and underscores.

Value
Description
{user defined}
Specify a meaningful identifier for the showdata tag.
Data

Allows you to specify the type of data you wish to output. This could be products, categories, special offers or related products.

Value
Description
categories
Outputs only category data for the given criteria.
products
Outputs only products data for the given criteria.
searchresults
Used to output results of a search query on the search page.
specialoffers
Outputs all special offer products.
relatedproducts
Outputs all related product data for the given criteria. Normally used on the product page with location attribute set to auto
recentlyviewedproducts
Outputs products recently viewed by the customer.
randomproducts
Outputs products at random.
Location

Here you can specify which category or product you wish the data to be relative to. This is defined by either specifying a category or product ID (found in the address bar) or auto which will load data relative to the page you're viewing.

Example: If you were in the "Audio Systems" category with the id 21 and the location was set to auto then only products or subcategories would load in the showdata

Value
Description
auto
The system will automatically figure out the ID of the page you are currently viewing.
0
This is the predefined ID for the EKM homepage and system pages such as Terms & Conditons, Sitemap, Cart and Checkout.
{user defined number}
A single category or product page ID hardcoded by yourself.
Columns

Define the number of products or categories you wish to output per row in the showdata output.

Value
Description
auto
This defaults the number of columns to be output to 2
{user defined number}
Enter the number of products/categories per row you wish to output
Rows

Define the number of rows of products/categories you wish to display before pagination is shown. If pagination is set to auto.

Value
Description
auto
This defaults the number of rows to be output to 2
{user defined number}
Enter the number of rows you wish to output
Counter Reset

Define the number of columns will be output before the [counter] tag is reset to 0. This is typically used to define the last column of a row to remove CSS margin and border. You will normally set this value to be the same as the cols attribute

Value
Description
{user defined number}
Enter the number of columns you want to be output before the [counter] is reset to 0
Page Navigation

Page Navigation or Pagination as it's often known, allows you to limit the number of products/categories that are displayed on a page but have extra pages to display any remaining products.

Example: If you had 100 products, your rows set to 10 and your columns set to 1 - You would see your first 10 products followed by page navigation links with pages 1 to 10.

Value
Description
auto
This will tell pagination to only be visible if the number of products exceeds the number being displayed.
no

There may be some instances where you do not wish page navigation to display when you have more products than currently showing.

A good example of this would be showing your 'Top 10' special offers. In this case you may have more special offers than 10, but you wouldn't want it to inconsistently show more than 10 results.

Order By

You can choose the order of the information output in a showdata tag using this attribute. It will allow you to order by name, price, lastmodified, productweight, id or orderlocation

Note: Remember if you change this from auto you will be unable to use the 'Order' controls in the front end of EKM.

Value
Description
auto
The default action for orderby is to order first by orderlocation which is set using 'Order' controls in 'View Shop' and secondly by name (if two orderlocation values are the same).
orderlocation

Orders the outputted data in the order the user has set in the front end (View Shop) of EKM using the order controls.

id

Orders the product/catgeory by it's product/catgeory ID.

name

Orders the products or categories by their [name].

price

Order products by their price. Products Only

lastmodified

Order products or categories by when they were last modified.

productweight

Order products by their product weight if you have enabled and defined this for each product. Products Only

latest-in

Order products by when they were added to your shop. Useful for showing your latest products. Products Only

viewdate

Order products by when they were viewed by the customer. This will output the newest first by default and only works with recentproducts data attribute. Products Only

You are also able to change the direction of the order for this attribute by appending DESC or ASC to the end of each value.

Example: Order by price from lowest to highest orderby='price ASC'; or to order highest to lowest use orderby='price DESC';

You are also able to select two orderby values to use one as a callback.

Example: If you wanted to order from lowest to heighest in price, but have some products the same price, you may want to then order by ID. To do this you comma seperate values like orderby='price ASC, id DESC';

Skip Records

The skip record attribute is used in cases where you want the showdata to begin outputting data from a specific record number.

Example: For example you may wish to start outputting data after the 200th entry. So in the skip record attribute you would put 200 and the first 200 records would be skipped.

Value
Description
{user defined number}
The number of the records to be skipped before output begins.
Exclude List

Here you can specify the IDs of products or categories you wish to exclude from the output. All records will then be output, apart from the IDs listed.

Value
Description
{user defined number}
The IDs of products or categories you wish to exclude. Each is to be comma seperated.
Include List

Here you can specify a list of items to ONLY be included in the showdata output.

Value
Description
{user defined number}
The IDs of products or categories you only wish to include. Each is to be comma seperated. All other entries will be ignored and only those in the list will be output.
Edit Buttons

During the output of products or categories you can decide whether or not you wish to output edit buttons for each of the items.

Value
Description
YES
Edit buttons will be display on products and categories.
NO
Edit buttons will NOT be display on products and categories.
Image Size Ratio

The EKM shop has a powerful image resizing feature that allows you to upload high resolution images and have the system resize them to a smaller size for displaying on your online shop.

The image_ratio attribute, when set to a specific value, will ensure that neither the width or height of the image exceeds the value you've set.

Example 1: You have a product image, like the one above, with a width of 150px and a height of 100px and your image_ratio attribute is set to 50px. Because the width is larger than the height the image scaling system will ensure that the width of this image will not exceed the value of image_ratio, in this case 50px.

Example 2: You have a product image, like the one above, however the height is 150px and the width of 100px and you have set the image_ratio attribute to 50px. Because the height is larger, this time, than the width the image scaling system will ensure that the height of this image will not exceed the value of image_ratio, in this case 50px.

NOTE: The image scaling system will never make an image bigger. So if you have an image smaller than your image_ratio the image will remain unchanged at it's original size.

Value
Description
auto
If you intend to set image_width or image_height set this to auto. If this value is set to auto it can be controlled from the "Design" section of EKM.
{user defined number}
Define the maximum height or width you wish your images to be. Enter 200 which will resize images to 200px
Image Width Size

This works in the same way as image ratio however there is one key difference, instead of limiting both height and width by the same value, you can specify to only limit the width. This means your images can exceed whatever height you like, but will never exceed the defined width.

Example 1: You have a portrait image of your product. The image is 300 high and 150 wide. You set your image_width to 100 because you want the width to never be more than 100 pixels width. When the image system does this the height will remain unrestrained and only the width will be reduced.

Example 2: You have a landscape image of a product. The image is 150px wide with 100px high. You set your image_width to 100. The image system will now resize this image so the width is no wider than 100px but disregards the height as this can be anything.

NOTE: The image scaling system will never make an image bigger. So if you have an image width smaller than your image_width the image will remain unchanged at it's original size.

Value
Description
auto
If you intend to set image_ratio or image_height set this to auto. If this value is set to auto it can be controlled from the "Design" section of EKM.
{user defined number}
Define the maximum width you wish your images to be. Enter 200 which will resize images to 200px wide.
Image Height Size

This works exactly like the image_width attribute however instead of reducing the width to the specified value it will reduce only the height leaving the width to be anything regardless of whether it is greater or less than the value you set.

Example 1: You have a portrait image of one of your products, you want the height to never exceed 250 pixels, so you set the image_height to 250. Now when your image is resized the width will be ignored but the height will be forced down to 250 pixels.

NOTE: The image scaling system will never make an image bigger. So if you have an image height smaller than your image_height the image will remain unchanged at it's original size.

Value
Description
auto
If you intend to set image_ratio or image_width set this to auto. If this value is set to auto it can be controlled from the "Design" section of EKM.
{user defined number}
Define the maximum height you wish your images to be. Enter 200 which will resize images to 200px high.
Font Formatting

This attribute allows you to specify whether you want EKM to specify font sizes, font names and font colours for your text or whether you would like to define them yourself using CSS. If set to no the system will not output <font> tags within it's output.

Value
Description
yes
If set the system will output font tags and format the text to the font settings you have defined in the backend.
no
If set the system will remove all font tags from it's output.
Add To Cart Text
add_to_cart_text='Add To Cart';

Set the text for the [add_to_cart_link] attribute tag.

Value
Description
{user defined}
Define your own text to be output for the add to cart link.
Header Title Text
header_title_text='Products';

Set the text to be output for the [header_title_text] attribute tag.

Value
Description
{user defined}
Define your own text to be output in the header.
Filter Results Always Output
filter_results_always_output='yes';

When set to yes the output_start and output_end will always be output even if no products are returned. Useful if your output start or output end contain filter controls.

Value
Description
yes
Will output the contents of output_start and output_end even when no results are shown.
no
If no results are returned for a filter the output start and end will not be output.
Output No Items
output_no_items='No Items To Output';

Output a message or block of HTML to be displayed when the showdata returns no products. This is useful for search results or showing a message when a product filter is too specific.

Value
Description
{user defined}
Specify your own column end HTML. This will normally be closing HTML tags.
Output Start

Here you can specify what will be output at the start of the ekm:showdata. Typically you would start to output some HTML and a title for the data to be output.

Example: You would open a containing div at this point inside followed by a h1 tag for the title "Products".

Value
Description
auto
The default output for the output_start is <TABLE BORDER=0 CELLSPACING=5 WIDTH=100%>
{user defined}
Specify your own starting HTML.
[search-term]
Outputs the current search terms. Search Page Only
[showing-results-count]
Outputs the total number of results currently showing on the page.
[result-count]
Outputs the total number of items in this showdata. Useful to output the number of results for a search query.
[results-start]
Outputs the number for the starting result output in this showdata. Useful when pagination is on.
[results-end]
Outputs the number for the end result output in this showdata. Useful when pagination is on.
[current-page]
Outputs the current page you are on. Useful for displaying current page number when pagination is on.
[total-pages]
Outputs the total number of pages for this showdata.
[header_title_text]
Will output the value of header_title_text by default.
[pagination]
Outputs the pagination navigation.
Output Row Start

Here you can specify any code that will be output at the beginning of each new row. Typically you would open a container for each row at this point.

Value
Description
auto
The default output for the output_row_start is <TR>
{user defined}
Specify your own row start HTML.
Output Column Start

Here you can specify the code you want to be output at the start of each column. This is typically used when using a table layout which is not recommended.

Value
Description
auto
The default output for the output_column_start is <TD>
{user defined}
Specify your own column start HTML.
Output Item

When an entry is output from the showdata it is contained within this attribute. Here you can choose what information will be output and in what order.

Value
Description
auto
The default output for the output_item is <TABLE BORDER=0 CELLPADDING=3 WIDTH=100%><TR><TD WIDTH=10>[image]</TD><TD ALIGN=LEFT>[name][shortdescription-BR][shortdescription]<FONT FACE="arial" SIZE=2 COLOR="DARKRED">[price-BR]<B>[price]</B></FONT></TD></TR></TABLE>
{user defined}
Specify your own item HTML and include the tags you wish to use. A full list of these tags can be seen below.

Within [ekm:tags] you would need to open and close them in the same way you would open and close HTML tags. However with attribute tags, like the ones below, they are self closing and work alone without any need to close them.

Value
Description
[id]
Outputs the product or category's ID
[name]
Outputs the product or category's name/title with a surrounding link and edit buttons
[name-NOEDIT]
Outputs the product or category's name/title with a surrounding link but NO edit buttons
[name-NOEDIT-NOLINK]
Outputs the product or category's name/title without a surrounding link or edit buttons
[url]
Outputs the product or category's relative URL.
Example: super-dry-tshirt-blue-p-23.asp which can be used within a <a href=""> tag.
[description]
Outputs the product or category's full description.
Note: With products this will output the entire description including any HTML. We recommended you use [shortdescription] for products
[shortdescription]
Outputs a product's short description. Products Only
[image]
Outputs the product or category's main image. This will be scaled as per the image_ratio, image_width or image_height attributes.
[image-url]
Outputs the product or category's main image as a URL. This can be implemented then as a background-image using CSS or within img HTML tag.
[image_2]
Outputs the product's second image. This will be scaled as per the image_ratio, image_width or image_height attributes.
[image_2-url]
Outputs the product's second image as a URL. This can be implemented then as a background-image using CSS or within img HTML tag.
[image_3]
Outputs the product's third image. This will be scaled as per the image_ratio, image_width or image_height attributes.
[image_3-url]
Outputs the product's third image as a URL. This can be implemented then as a background-image using CSS or within img HTML tag.
[image_4]
Outputs the product's fourth image. This will be scaled as per the image_ratio, image_width or image_height attributes.
[image_4-url]
Outputs the product's fourth image as a URL. This can be implemented then as a background-image using CSS or within img HTML tag.
[image_5]
Outputs the product's fifth image. This will be scaled as per the image_ratio, image_width or image_height attributes.
[image_5-url]
Outputs the product's fifth image as a URL. This can be implemented then as a background-image using CSS or within img HTML tag.
[productcode]
Outputs the product's product code.
[brand]
Outputs the product's brand.
[condition]
Outputs the product's conditon.
[gtin]
Outputs the product's gtin number.
[mpn]
Outputs the product's mpn number.
[stock]
Outputs the product's stock count.
[stock-variants]
Outputs the product's stock level including variants.
[stock-variants-highest]
Outputs the highest stock level for all product variants.
[rrp]
Outputs the product's RRP.
[rrp-line]
Outputs the product's RRP with a line through.
[price]
Outputs the product's Price.
[vat_price]
Outputs the product's VAT price.
[saving-total]
Outputs the total saving for the price against RRP as a currency value.
[saving-percentage]
Outputs the total saving for the price as a percentage value.
[counter]
Outputs the value of the "counter", this will increment by one for each output record until it is reset using the counterreset attribute.
[counter-noreset]
Outputs the value of the "counter", this will increment by one for each output record. This is not reset by the counterreset attribute.
[editbuttons]
Outputs edit buttons for a product or category if they were switched off with the [name-NOEDIT] attribute tag.
[lastmodifed]
Outputs the time and date when the product or category was last modified. See the formatdate attribute for more information.
[customer_reviews_average_stars]
Outputs the average star rating for a given product. If there are no ratings no stars will be output. Products Only
[customer_reviews_average_star_value]
Outputs the average star rating for a given product as an integer. Useful for using your own star images. Products Only
[customer_reviews_total]
Outputs the total number of customer reviews for a given product. Products Only
[loyaltypoints]
Outputs the amount of loyalty points awarded against the product being output. Example: 1000 Products Only
[loyaltypoints-value]
Outputs the monetary value of the loyalty points awarded for the product being output. Example: £10.00 Products Only
[add_to_cart_link]
Outputs a link to add the currently output product to the cart. Products Only
[add_to_cart_link-url]
Outputs the URL to add the currently output product to the cart. Products Only
[can_be_added_to_cart]
Outputs a boolean value indicating whether a product can be added to the cart. If "Add To Cart" buttons have been turned off on a product this will output no otherwise it outputs yes. Products Only
[has-options]
Outputs a boolean value indicating whether a product has variants or options. If a product has no variants or options it will output no otherwise it outputs yes. Products Only
[active_item]
Outputs the contents of the active_item_output attribute when the current category or product page is the current or a child of the item being output. Useful for highlighting active pages in a menu or product list.
Output Column End

Here you need to begin closing your HTML tags that were opened within the output_column_start attribute.

Value
Description
auto
The default output for the output_column_end is </TD>
{user defined}
Specify your own column end HTML. This will normally be closing HTML tags.
Output Row End

Here you will begin closing any HTML tags that were opened within the output_row_start attribute.

Value
Description
auto
The default output for the output_row_end is </TR>
{user defined}
Specify your own row end HTML.
Output End

Here you will close any HTML tags that were opened within the output_start attribute.

Value
Description
auto
The default output for the output_end is </table>
{user defined}
Specify your own starting HTML.
[search-term]
Outputs the current search terms. Search Page Only
[showing-results-count]
Outputs the total number of results currently showing on the page.
[result-count]
Outputs the total number of items in this showdata. Useful to output the number of results for a search query.
[results-start]
Outputs the number for the starting result output in this showdata. Useful when pagination is on.
[results-end]
Outputs the number for the end result output in this showdata. Useful when pagination is on.
[current-page]
Outputs the current page you are on. Useful for displaying current page number when pagination is on.
[total-pages]
Outputs the total number of pages for this showdata.
[pagination]
Outputs the pagination navigation.
Output No Filter Items
output_no_filter_items='';

Define any HTML or text to be output when a filter selection yields no results. Useful if the customer has selected a price range that no products fall within.

Value
Description
{user defined}
Define your own HTML and Text to be output.
Output Column Blank

This is typically only used for table layouts. This attribute allows you to output content for any remaining column gaps in a row.

Example: If you have 31 products. Your cols attribute is set to 3. This would output 10 rows of 3 products and one row of 1 product. In a table layout however you'd still need to insert the 2 remaining blank table cells to complete a valid table. Using this attribute you can insert blank table cells to correctly finish the table.

Value
Description
auto
The default output is <td></td>
{user defined}
Specify your own starting HTML.
Active Item Output
active_item_output='active';

Define any HTML or text to be output in place of the [active_item] attribute in output_item.

Value
Description
{user defined}
Define your own HTML and Text to be output.
Active When Child Is Active
active_when_child_is_active='yes';

Sets whether or not an item should be treated as active when a child is active. For example when viewing a product page the category that product is in will be set as active.

Value
Description
yes
Will mark the item as active if a child is active.
no
Will only be marked as active if the item is active, but not a child.
Pagination
Pagination

pagination='[previous][pagenumbers][next]';
										

Allows you to specify the pagination layout.

Value
Description
{user defined}
Specify your own HTML
[resultstart]
Outputs the current page's starting result number. Example: the first result on page 1 would be 1, the first result on page to may be 11.
[resultend]
Outputs the current page's last result number.
[resultcount]
Outputs the total number of results for the showdata.
[page]
Outputs the number of the page you are currently on.
[pages]
Outputs the total number of pages.
[previous]
Outputs a link to navigate to the previous page.
[next]
Outputs a link to navigate to the next page.
[pagenumbers]
Outputs the page number links.
Page Number Layout

pagination_pagenumber='[link]';
										

Allows you to specify the HTML for previous page button.

Value
Description
{user defined}
Specify your own HTML
[link]
Outputs the page number as a link.
[href]
Outputs the href for the page number.
[page]
Outputs the contents of pagination_current_page or pagination_other_page depending on that page's state.
[number]
Outputs the number of the page being output.
[url]
Outputs the URL of the page being output.
Next Button Layout

pagination_next='[link]';
										

Allows you to specify the HTML for each next page button.

Value
Description
{user defined}
Specify your own HTML
[link]
Outputs the next link.
[href]
Outputs the href for the next.
[url]
Outputs the URL for the next.
Page Seperator

pagination_seperator='';
										

Allows you to specify what goes between each page button.

Value
Description
{user defined}
Specify your own HTML
Pagination Ellipsis

pagination_ellipsis='...';
										

Allows you to specify the ellipsis trial that appear between page numbers.

Value
Description
{user defined}
Specify your own HTML
Page Limit

pagination_limit='5';
										

Set the maximum number of page number links that can be output.

Value
Description
{user defined}
Specify your own HTML
Page Ellipsis Trail

pagination_ellipsis_trail='2';
										

Set the number of page number links to be output before ellipsis is shown.

Value
Description
{user defined}
Specify your own HTML
Current Page Link Attributes

pagination_current_page=' class="current-page" ';
										

Set any HTML attributes to be output on the current page link.

Value
Description
{user defined}
Specify your own HTML
Other Page Link Attributes

pagination_other_page=' class="page" ';
										

Set any HTML attributes to be output on tall other page links.

Value
Description
{user defined}
Specify your own HTML
Load More
Load More Button

load_more_button='on';
										

Set whether the load more button should be used instead of pagination.

Value
Description
on
Will enable the load more button to be used instead of page by page pagination.
Endless Load More

load_more_button_endless='yes';
										

Set whether or not the next page of items should automatically load when you reach the bottom of the list. This functionality is disabled on mobile devices.

Value
Description
yes
Will automatically load more items when the bottom of the list is reached.
no
Will require the load more button to be pressed to load more.
Load More Button Text

load_more_title_text='Load More';
										

Set the text to be output on the button.

Value
Description
{user defined}
Specify your own button text.
Load More Button Class

load_more_class=' .ui-load-more-button ';
										

Set any additional classes to be added to the load more button.

Value
Description
{user defined}
Specify your own additional classes.
Load More Button Code

load_more_code='<button [class] [attributes]>[title]</button>';
										

Set any the HTML markup to be used for the load more button.

Value
Description
{user defined}
Specify your own HTML
[class]
Outputs the class attribute with required classes and any additional classes set in the load_more_class attribute.
[attributes]
Outputs the required attributes. Without this the load more button may not function.
[title]
Outputs the button text specified in load_more_title_text.
Thumbnail Hover
Show Hover Thumbnail (Products Only)

show_hover_thumbnail='yes';
										

Set whether another product image should be shown when hover over a product in a list.

Value
Description
yes
Will display another product image when the item is hovered over.
no
The image will not change when hovering over item in a list.
Thumbnail Image Number

hover_thumbnail_imagenumber='2';
										

Set the number of the image to be shown. Can range from 2-5. Setting 2 would show the product's first additional image.

Value
Description
2 (default)
Will display the first additional product image.
3
Will display the second additional product image.
4
Will display the third additional product image.
5
Will display the fourth additional product image.
Thumbnail Switch Fade

hover_thumbnail_fade='yes';
										

Set whether the thumbnail should fade as it changes.

Value
Description
yes
When the product is hovered the new image will fade in.
no
When the product is hover it will display the new image, but won't fade.
Other Attributes
Maximum Image Width

max_image_width='';
										

Allows you to specify the maximum width of the image. If a image is used which is larger than this amount it will be resized to fit.

Value
Description
auto
Uses the value set in the Design section.
{user defined}
Specify the image size
Maximum Image Height

max_image_height='';
										

Allows you to specify the maximum height of the image. If a image is used which is larger than this amount it will be resized to fit.

Value
Description
auto
Uses the value set in the Design section.
{user defined}
Specify the image size
Category Title Font

category_title_font='';
										

Allows you to specify a font to use for category names.

Value
Description
auto
Uses the value set in the Design section.
nothing
No font formatting will be applied. Useful when applying your own styling with CSS
{user defined}
Specify the font you wish to use. Example: Arial, Verdana
Category Title Size

category_title_size='';
										

Used to specify the font size used when displaying a Category's name.

Value
Description
auto
Uses default set within the Design & Layout Section
nothing
No formatting will be used. Useful if your using CSS.
{user defined}
Any HTML Font Size value (eg: 3, +4, 6)
Category Title Style

category_title_style='';
										

Used to specify the font style used when displaying a Category's name.

Value
Description
auto
Uses default set within the Design & Layout Section
nothing
No formatting will be used. Useful if your using CSS.
{user defined}
Any HTML Font Style value (eg: bold, italic, underlined)
Category Description Font

category_description_font='';
										

Used to specify the font used when displaying a Category's description.

Value
Description
auto
Uses the value set in the Design section.
nothing
No font formatting will be applied. Useful when applying your own styling with CSS
{user defined}
Specify the font you wish to use. Example: Arial, Verdana
Category Description Size

category_description_size='';
										

Used to specify the font size used when displaying a Category's description.

Value
Description
auto
Uses default set within the Design & Layout Section
nothing
No formatting will be used. Useful if your using CSS.
{user defined}
Any HTML Font Size value (eg: 3, +4, 6)
Category Description Style

category_description_style='';
										

Used to specify the font style used when displaying a Category's description.

Value
Description
auto
Uses default set within the Design & Layout Section
nothing
No formatting will be used. Useful if your using CSS.
{user defined}
Any HTML Font Style value (eg: bold, italic, underlined)
Product Name Font

product_title_font='';
										

Used to specify the font used when displaying a Product's name.

Value
Description
auto
Uses the value set in the Design section.
nothing
No font formatting will be applied. Useful when applying your own styling with CSS
{user defined}
Specify the font you wish to use. Example: Arial, Verdana
Product Name Size

product_title_size='';
										

Used to specify the font size used when displaying a Product's Name.

Value
Description
auto
Uses default set within the Design & Layout Section
nothing
No formatting will be used. Useful if your using CSS.
{user defined}
Any HTML Font Size value (eg: 3, +4, 6)
Product Name Style

product_title_style='';
										

Used to specify the font style used when displaying a Product's Name.

Value
Description
auto
Uses default set within the Design & Layout Section
nothing
No formatting will be used. Useful if your using CSS.
{user defined}
Any HTML Font Style value (eg: bold, italic, underlined)
Product Description Font

product_description_font='';
										

Used to specify the font used when displaying a Product's description.

Value
Description
auto
Uses the value set in the Design section.
nothing
No font formatting will be applied. Useful when applying your own styling with CSS
{user defined}
Specify the font you wish to use. Example: Arial, Verdana
Product Description Size

product_description_size='';
										

Used to specify the font size used when displaying a Product's description.

Value
Description
auto
Uses default set within the Design & Layout Section
nothing
No formatting will be used. Useful if your using CSS.
{user defined}
Any HTML Font Size value (eg: 3, +4, 6)
Product Description Style

product_description_style='';
										

Used to specify the font style used when displaying a Product's description.

Value
Description
auto
Uses default set within the Design & Layout Section
nothing
No formatting will be used. Useful if your using CSS.
{user defined}
Any HTML Font Style value (eg: bold, italic, underlined)
Element Replace

element_replace='';
										

If any item in the output_item parameter doesnt exist or is empty replace it with this element. So for example if you had the code...

[name] - [description]

And description was empty and your element_replace was set to 'nothing here' you would get the following...

Apple iPod - nothing here

The main use for this tag is when you're using a table layout and instead of an empty cell you could set the element_replace to so you would still maintain a grid style layout.

Value
Description
auto
{user defined}
Any HTML Code or Plain Text
Format Date

formatdate='';
										

Allows you to specify how your [lastmodified] will be formated.

Value
Description
auto
{user defined}
Any HTML Code or Plain Text

Example: Would output 13 - 03 - 1989


formatdate='[day_of_month] - [month] - [year]';
										
Value
Description
[month]
Outputs the numerical month value. Example 3
[full_month]
Outputs the full month name. Example March
[abbreviated_month]
Outputs the abbreviated month name. Example Mar
[day_of_month]
Outputs the numerical day of the month. Example 13
[ordinal]
Outputs the ordinal for the current day of the month. Example th
[day_of_the_year]
Outputs the numerical value for the day of the year. Example 90
[year]
Outputs the full year value. Example 1989
[year_partial]
Outputs the last two digits of the year. Example 89
[day_number]
Outputs the numerical value for the day of the week, between 1 and 7. Example 2
[day_name_short]
Outputs the short version of the day's name. Example Tue
[day_name]
Outputs the full day's name. Example Tuesday
Tag Builder

With some EKM Tag you are able to build the tags using a WYSIWYG-like interface and have the code plus some basic CSS generated for you. This can then be included in your custom HTML.

This code is only a starting point and in most cases will need tweaks to the widths within the CSS to fit your template. The example code should work with most 2012 and beyond templates with little editing.

Select Your Layout
Data Type
more information
Location
more information
Columns
more information
Rows
more information
Page Navigation
more information
Order By
more information
Skip Records
more information
Exclude List
more information
Include List
more information
Edit Buttons
more information
Image Ratio
more information
Image Width
more information
Image Height
more information
Font Formatting
more information
What Would You Like To Output?
Image
Name
Stars
Number of Reviews
Short Description
Price
RRP
  • Live Preview

View a live preview of your showdata output, tweak and adjust it in real-time and then when you're ready copy and paste into your EKM shop.

  HTML

[ekm:showdata]

	data='[attr-data]';
	location='[attr-location]';

	cols='[attr-cols]';
	rows='[attr-rows]';
	counterreset='[attr-cols]';
	page_navigation='[attr-page_navigation]';

	orderby='[attr-orderby]';
	skiprecords='[attr-skiprecords]';
	excludelist='[attr-excludelist]';
	includelist='[attr-includelist]';

	editbuttons='[attr-editbuttons]';

	image_ratio='[attr-image_ratio]';
	image_width='[attr-image_width]';
	image_height='[attr-image_height]';

	font_formatting='[attr-font_formatting]';

	output_start='<div id="[attr-data]">';
	output_row_start='<div class="row cf">';
	output_column_start='';
	output_item='
	<div class="item i-[counter]">
        <div class="item-image">[image]</div>
        <div class="item-name">[name]</div>
        <div class="item-stars">[customer_reviews_average_stars]</div>
        <div class="item-reviews">[ekm:nested_if]iftype="EQUALS"; ifvalue="[customer_reviews_total]"; ifvalue2=""; ifthen=""; ifelse="[customer_reviews_total] Reviews";[/ekm:nested_if]</div>
        <div class="item-short-description">[shortdescription]</div>
        <div class="item-price">[price]</div>
        <div class="item-rrp">[rrp]</div>
	</div><!-- .item -->
	';
	output_column_end='';
	output_row_end='</div><!-- .row -->';
	output_end='</div><!-- #products -->';

	output_column_blank='';

[/ekm:showdata]
											

  CSS

#[attr-data] {padding: 10px 0;}
#[attr-data] .item {float: left; width: [css-item-width]; text-align: center; border: solid 1px #efefef; margin: 5px 10px 5px 0; padding: 5px;}
#[attr-data] .item.i-[attr-cols] {margin-right: 0;}
#[attr-data] .item:nth-child([attr-cols]) {margin-right: 0;}
#[attr-data] .item:hover .item-info {display: block;}
#[attr-data] .item-image {}
#[attr-data] .item-image img {width: [css-image_width]; height: [css-image_height]; max-width: [css-item-width];}
#[attr-data] .item-name a {display: block; text-decoration: none; font-size: 11px; font-weight: bold; margin: 5px 0 0; color: #28b4db;}
#[attr-data] .item-stars {padding: 5px 0;}
#[attr-data] .item-reviews {padding: 2px 0; font-size: 9px;}
#[attr-data] .item-short-description {font-size: 10px; margin: 5px 0 0;}
#[attr-data] .item-price {font-size: 16px; font-weight: bold; margin: 5px 0 0;}
#[attr-data] .item-rrp {font-size: 11px; margin: 5px 0 0; text-decoration: line-through}
											

Note: This section contains some advanced demonstrations of EKM Tags. If you are not fully familiar within ekm:tags please avoid using this section for reference.

The EKM system allows for some tags to be nested within other tags. The showdata tag is actually one of the most commonly nested EKM Tags as it is often used for dynamic menus.

Please be aware that nesting tags can sometimes have a negative affect on page loading times as it requires more database queries.

Nesting Showdata - Level 1

When nesting a showdata tag within another showdata tag there are a few changes to the tag that need to be made to ensure the tag works as expected. Below is an example of how you would nest one ekm:showdata tag within another in its most basic form.


[ekm:showdata]
   data='products';
   location='auto';
   output_item='

	   [ekm:nested_showdata]
		  data="all";
		  location="[id]";
		  output_item="[nested_name]";
	   [/ekm:nested_showdata]

   ';
[/ekm:showdata]
								

When nesting a tag at Level 1 you must change the opener and closer tag to append nested_ (see example) and all single quotes ' should change to double quotes ".

Within a nested_showdata tag if you wish to pull information from within it you must append nested_ to all attribute tags. However if you wish to use information from the parent showdata tag you can still leave these unappended.

As you can see within the example i have used both the [id] tag and [nested_name] tag within the nested showdata. This example is actually used to pull data from the location defined by the [id] tag.

Nesting Showdata - Level 2

When nesting two showdata tag's within another showdata tag there are a few changes to the tag that need to be made to ensure the tag works as expected. Below is an example of how you would nest one ekm:showdata tag within another, within another, in its most basic form.


[ekm:showdata]
   data='products';
   location='auto';
   output_item='

	   [ekm:nested_showdata]
		  data="all";
		  location="[id]";
		  output_item="

			  [ekm:nested_nested_showdata]
				 data=(all);
				 location=([nested_id]);
				 output_item=([nested_nested_name]);
			  [/ekm:nested_nested_showdata]

		  ";
	   [/ekm:nested_showdata]

   ';
[/ekm:showdata]
								

When nesting a tag at Level 2 you must change the opener and closer tag to append nested_nested_ (see example) and all single/double quotes " of the nested nested tag should change to brackets/braces ().

Nesting Showdata - Level 3

When nesting three showdata tag's within another showdata tag there are a few changes to the tag that need to be made to ensure the tag works as expected. Below is an example of how you would nest one ekm:showdata tag within another, within another, within another, in its most basic form.


[ekm:showdata]
   data='products';
   location='auto';
   output_item='

	   [ekm:nested_showdata]
		  data="products";
		  location="[id]";
		  output_item="

			  [ekm:nested_nested_showdata]
				 data=(all);
				 location=([nested_id]);
				 output_item=(

					 [ekm:nested_nested_nested_showdata]
						data=#all#;
						location=#[nested_nested_id]#;
						output_item=#[nested_nested_name]#;
					 [/ekm:nested_nested_nested_showdata]

				 );
			  [/ekm:nested_nested_showdata]

		  ";
	   [/ekm:nested_showdata]

   ';
[/ekm:showdata]
								

When nesting a tag at Level 3 you must change the opener and closer tag to append nested_nested_nested_ (see example) and all single/double quotes " or brackets () of the nested nested nested tag should change to hashes #.