Sortable_table_2

On this page, ASA’s managed template “Sortable_table_2” is used. It is specialized for displaying multiple products in a sortable table. It works perfectly with ASA 2 collections, smart collections and feeds. It is customizable in general and per shortcode.

Main features

  • Specialized for rendering sortable tables with multiple products
  • Responsive design (switches to stacked layout on small width)
  • Customizable without programming skills

Example

This first example is built with the following shortcode:

[asa2_smart_collection cat_slug="coffee-maker" limit="10" tpl="Sortable_table_2" /]
Important Info
Change the screen width to see the stacked layout on smaller screen widths.

Customization

On ASA 2’s admin page “Templates” you can customize the general options of template “Sortable_table_2“. These settings will effect every usage of this template.

Shortcode options

Besides the general settings, it is possible to overwrite template options per shortcode.

Example “title_length”

For example, to limit the title length, you can use option “title_length”:

[asa2_smart_collection tpl="Sortable_table_2" title_length="50" cat_slug="coffee-maker" limit="10" is_available_main="true" /]

Example “image_size”

To show images in medium size, you can use option “image_size”.

[asa2_smart_collection tpl="Sortable_table_2" image_size="medium" cat_slug="coffee-maker" limit="10" is_available_main="true" /]

All available options

Following you find a list of all available shortcode options for template “Sortable_table_2”:

Columns
OptionTypeValuesDescription
col_image bool "yes" / "no" Show image column
col_title bool "yes" / "no" Show title column
col_rating bool "yes" / "no" Show rating column
col_price bool "yes" / "no" Show price column
col_buy_button bool "yes" / "no" Show buy button column
Image
OptionTypeValuesDescription
image_size string
  • "small" (Small)
  • "medium" (Medium)
  • "large" (Large)
Image size
image_max_width int 0 between 999 Image max width. In pixels. 0 - 999. 0 for none.
image_effect string
  • "0" (None, no linking at all)
  • "lightbox" (Add lightbox tag and link to large version)
  • "imgpreview" (Image preview to large version on mouse hover)
  • "link_to_shoppage" (Image links to shop page)
Image effect
Title
OptionTypeValuesDescription
title_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Title color. No default. The title will be displayed in the default text color of your page, if none is set here.
title_font_css string custom text Title font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;"
title_length int 0 between 999 Title max length. Limits the title to a maximum length of characters. 0 for unlimited.
title_link_to_shop_page bool "yes" / "no" Title links to shop page
title_auto_height bool "yes" / "no" Title auto length. Applies some CSS rules to achieve one line titles.
Price
OptionTypeValuesDescription
price_color string CSS compatible color value, like hex values (#ff0000) or color names (red) Price color. The color in which the price text is displayed.
price_font_css string custom text Price font style. Utilizes the CSS font property. Example: "15px arial, sans-serif;"
Button
OptionTypeValuesDescription
button_target string
  • "shop" (Shop page)
  • "buy" (Buy page)
Button target. Decides whether the button should link to the product page or the buy page.
Misc
OptionTypeValuesDescription
table_behavior string
  • "sort-custom" (Sortable 1)
Table behavior
show_feed_index bool "yes" / "no" Show feed index. Only works when used with [asa2_feed] shortcode.
disclaimer string
  • "none" (None)
  • "asterisk_and_text" (Asterisk in title link and button. Disclaimer text in each template.)
  • "asterisk_only" (Asterisk in title link and button. No disclaimer text.)
Disclaimer. Shows a disclaimer text.
custom_css string
  • "none" (None)
  • "asterisk_and_text" (Asterisk in title link and button. Disclaimer text in each template.)
  • "asterisk_only" (Asterisk in title link and button. No disclaimer text.)
Custom CSS. Custom CSS that is applied to all occurrences of this template on a page and is only included once in the source code.

More examples

Using ASA2’s RSS Feed feature

This example uses ASA2’s RSS feed feature together with template “Sortable_table_2”. Learn more about ASA2’s RSS feed feature.

[asa2_feed tpl="Sortable_table_2" limit="5"]DJ_Equipment[/asa2_feed]
[asa2_feed tpl=”Sortable_table_2″ limit=”5″]DJ_Equipment[/asa2_feed]

 

Using ASA2’s collection feature

Learn more about ASA2’s collections feature.

This example uses options “image_size” and “title_font_css” to customize the layout limited to 5 items.

[asa2_collection tpl="Sortable_table_2" image_size="medium" title_font_css="italic bold 16px/30px Georgia, serif"]lego_star_wars[/asa2_collection]