docs.modx.pro
  1. Extras
  2. PageBuilder
  3. Section catalog
  4. Pro
  5. Products carousel

Products carousel ​

Same data as Products grid, in a carousel. Fits narrow layouts with many SKUs.

Products carousel

Информация

Requires PageBuilder Pro and miniShop3.

  • Same products as grid, in carousel form
  • Saves homepage height
  • Optional autoplay

Typical placement ​

  • Homepage: bestsellers
  • Product page: cross-sell (if not using Related products)
  • Landing: category picks

Page examples ​

Category and autoplay ​

Category and limit like the grid. Autoplay and section JS on the front end.

Similar sections ​

Block parameters ​

ParameterValue
keyproducts_carousel
LayerPro
Categorycommerce (commerce)
Chunkpagebuilderpro_products_carousel
Requirespro, minishop3

Inspector fields ​

Fill these fields in the section inspector. Field types are documented in the field types reference.

Title (title) ​

Type text. Optional.

Catalog parent (parent) ​

Type relation. Required. Pick one MODX resource in a search modal.

Limit (limit) ​

Type number. Optional.

Autoplay (autoplay) ​

Type yesno. Optional. Yes/no toggle. When autoplay is on, the site shows a pause button. Labels: pagebuilder_fe_carousel_pause and pagebuilder_fe_carousel_play.

Sort (sortby) ​

Type select. Optional. Dropdown with predefined options.

Site output ​

pb-products-carousel via msProducts.

Section data ​

Example payload after save. Media, video, and map values may be enriched on output:

json
{
  "title": "Section title",
  "parent": 101,
  "limit": 6,
  "autoplay": false,
  "sortby": "menuindex"
}

Chunk template ​

Fenom chunk pagebuilderpro_products_carousel:

fenom
{set $catalogParent = $parent.id|default:($parent_id|default:0)}
{set $listing = ''}
{if $catalogParent}
  {set $listing = $modx->runSnippet('msProducts', [
    'parents' => $catalogParent,
    'depth' => 10,
    'limit' => $limit|default:8,
    'tpl' => 'pagebuilderpro_ms3_product_carousel_slide',
    'includeVendorFields' => '*',
    'includeOptions' => 'color,size',
    'withCurrency' => 1,
    'showZeroPrice' => 1,
    'sortby' => $ms_sortby|default:'msProduct.menuindex',
    'sortdir' => $ms_sortdir|default:'ASC'
  ])}
{/if}
<section
  class="pb-section pb-section--products-carousel pb-products-carousel pb-listing pb-listing--carousel{if $cssClass} {$cssClass|escape}{/if}"
  data-pb-section="products_carousel"
  data-pb-carousel
  data-pb-autoplay="{$autoplay|default:0}"
  {if $id} id="pb-{$id|escape}"{/if}
>
  <div class="pb-section__inner">
    {if $title}
      <h2 class="pb-heading">{$title|escape}</h2>
    {/if}
    {if $listing}
      <div class="pb-carousel__viewport" tabindex="0" role="region" aria-roledescription="carousel" aria-label="{$title|default:('pagebuilder_fe_carousel_products' | lexicon)|escape}">
        <div class="pb-carousel__track">
          {$listing}
        </div>
        <div class="pb-carousel__controls">
          <button type="button" class="pb-carousel__btn" data-pb-carousel-prev aria-label="{'pagebuilder_fe_carousel_prev' | lexicon}">‹</button>
          <button type="button" class="pb-carousel__btn" data-pb-carousel-next aria-label="{'pagebuilder_fe_carousel_next' | lexicon}">›</button>
        </div>
        <button
          type="button"
          class="pb-carousel__pause"
          data-pb-carousel-pause
          hidden
          aria-pressed="false"
          data-label-pause="{'pagebuilder_fe_carousel_pause' | lexicon}"
          data-label-play="{'pagebuilder_fe_carousel_play' | lexicon}"
        >{'pagebuilder_fe_carousel_pause' | lexicon}</button>
      </div>
    {else}
      <p class="pb-listing__empty">{'pagebuilder_fe_listing_empty_carousel' | lexicon}</p>
    {/if}
  </div>
</section>

See also ​