Login

New to DJ-Extensions?

Extended Products Grid

Contents

Extended Products Grid

Extended Products Grid element is strongly recommended for building products list view.

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

© 2023 DJ-Extensions.com. All rights reserved.