Extended Products Grid
Adding Extended Products Grid element
To use Extended Products Grid, navigate to your section in YooTheme Builder:
Add a new element to the section. Extended Products Grid element is located under the DJ-Catalog2 group:
Configuration
Extended Products Grid element has 4 tabs:
-
Content - Allows to add new items and set display options. You can decide which content attributes should be displayed by checking show buttons
-
Ordering - This tab allows specifying the ordering of content attributes
-
Settings - This tab allows configuring options for content attributes (for example, position, dimensions)
-
Advanced - This tab is the default one for yootheme elements
Adding dynamic content
To add dynamic content as a source for items' attributes, navigate to Content and click the 'Add Item' button.
You should see a list of attributes for products:
Navigate to the 'Advanced' tab and select the "Products - List View" position, which is located under the "DJ-Catalog2" group.
After the dynamic source is selected, there will appear additional options for Products List view dynamic content.
Now navigate back to the "Content" tab. To assign dynamic content to the specific field, click the 'Dynamic' option and select an attribute.
Example view made by using Extended Products Grid:
Setting the ordering of attributes.
The "Ordering" tab provides an option to select the order of attributes by drag & drop each attribute from the list.
Settings
In the "Settings" tab, you can find options for the whole extended products grid element and options for specific attributes.
General options
-
Panel options
-
Grid options
-
Columns options
-
Other options - Position, Animation
Labels options
-
Labels options - Position, Dimensions
Autolabels options
-
Autolabels options - Position, Dimensions
Product media options
-
Image options - Image, Position
-
Video options - Position, Size
Category options
-
Image options - Image, Position
-
Button options - Postion, Dimensions
Producer options
-
Image options - Image, Position
-
Button options - Postion, Dimensions
Product content
-
Title options
-
Sku options
-
Hits options
-
Availability information options
-
Created by options
-
Created on options
-
Price options
-
Wishlist options
-
Introdescription options
-
Description options
-
Attributes options
Readmore options
-
Button options
Cart options
-
Add to cart options
Product additional options
-
Address options
-
City options
-
Postcode options
-
Country options
-
State options
-
Phone options
-
Mobile options
-
Fax options
-
Website options
-
Email options
-
Rating options
-
Vote options
Content attributes
Navigate to the "Content" tab and select Your item.
You will see the following attributes that are available to set for the Extended Products Grid element:
Labels
-
label - field reserved for custom labels that are assigned to the product
-
autolabels - field reserved for automatically generated labels (featured products will have featured labels generated automatically)
Product image
-
image - field reserved for the product's image
-
image alt - field reserved for the product's image alt
-
link - field reserved for the product's image link. If the linking option is set for the product image, the image will navigate the link attribute
Video
-
video - field reserved for the product's video
-
width - set the width of the product's video. This option is shown when the video field is set
-
height - set the height of the product's video. This option is shown when the video field is set
-
options (visible when the video field is set)
- show controls - show controls for the video element. This option doesn't work for linked videos
- loop video - loop the video. This option doesn't work for linked videos
- mute video - mute the video. This option doesn't work for linked videos
- play inline on mobile devices - this option doesn't work for linked videos
- lazy load video - use lazy load option for video attribute
-
autoplay - choose if the video should be played automatically
-
poster frame - field reserved for the product's video poster frame
Category
-
category button content - field reserved for the category button content
-
category image - field reserved for the category image
-
image alt - field reserved for the category image alt
-
link - field reserved for the category link
-
link title - field reserved for the category link title
-
category link target - select the target for category link attribute (same window, new window, or modal view)
Producer
-
producer button content - field reserved for the producer button content
-
producer image - field reserved for the producer image
-
image alt - field reserved for the producer image alt
-
link - field reserved for the producer link
-
link title - field reserved for the producer link title
-
producer link target - select the target for producer link attribute (same window, new window, or modal view)
Title
-
title - field reserved for product's title
-
link - field reserved for the link to the product
SKU
-
sku - field reserved for the product's sku
Hits
-
hits - field reserved for the product's hits
Availability information
-
information about availability - field reserved for the product's information about availability
Created by
-
created by - field reserved for the product's author
Created on
-
created on - field reserved for the date when the product was created
Price
-
price - field reserved for the product's price
Compare
-
compare - field reserved for the add to compare checkbox
Wishlist
-
wishlist - field reserved for the add to wishlist button
Content
-
intro description - field reserved for product's intro description
-
description - field reserved for product description
Attributes
-
attributes - field reserved for product's attributes
Readmore
-
readmore - field reserved for the readmore button content
-
link - link for the readmore button
-
link title - link title for the readmore button
-
readmore link target - select the target for the readmore link attribute (same window, new window, or modal view)
-
readmore icon - select the icon for the readmore button
-
readmore icon alignment - select the alignment for the readmore button's icon
Add to cart
-
add to cart - field reserved for the cart attribute
Additional
-
address - field reserved for the product's address
-
city - field reserved for the product's city
-
postcode - field reserved for the product's postcode
-
country - field reserved for the product's country
-
state - field reserved for the product's state
-
phone - field reserved for the product's phone
-
mobile - field reserved for the product's mobile
-
fax - field reserved for the product's fax
-
website - field reserved for the product's website
-
rating - field reserved for the product's rating
-
vote - field reserved for the product's vote
