Carousels - rocketweb-fed/magento2-theme-prime GitHub Wiki

Product and banner carousel functionality in Prime is built around WeltPixel_OwlCarouselSlider module which has been extended to allow for use of alternative carousel script - OwlCarousel has been replaced with Slick which offers similar configuration options but is faster.

Note: WelPixel_OwnCarouselSlider module needs to be installed on the project in order to use carousel functionality. There are free and paid versions of the module available. See developer page for more info: https://www.weltpixel.com/owl-carousel-and-slider.html

There are two types of carousels available that come with the extension:

• product sliders
• custom sliders

Product sliders are used to display various collections of products in a form of a carousel based on their attributes.

There are a couple of default sliders available:

• New Products (type: new_products)
• Best Sell Products (type: bestsell_products)
• Sale Products (type: sell_products)
• Recently Viewed Products (type: recently_viewed)
• Related Products (type: related_products)
• Upsell Products (type: upsell_products)
• Cross-sell Products (type: crosssel_products)

You can include any of the above product sliders on any page as widgets or layout blocks.

To include a widget on a CMS page or static block use the following snippet:

{{widget type="WeltPixel\OwlCarouselSlider\Block\Slider\Products" products_type="new_products"}}

To include product slider on any page via layout blocks use the following snippet:

<block class="WeltPixel\OwlCarouselSlider\Block\Slider\Products" name="slider.products.new">
    <arguments>
        <argument name="products_type" xsi:type="string">new_products</argument>
    </arguments>
</block>

Replace products_type attribute value with appropriate product type from the above list.

Various sliders parameters, such as which elements to show/hide, number of items, autoplay, loop, responsive settings etc. can be configured in the admin. Setting can be found in admin > Configuration > WeltPixel > Owl Carousel and Slider

Template file for product slider carousels can be found in: WeltPixel_OwlCarouselSlider/templates/product/list/items.phtml

Custom sliders allow admins to create banner carousels with user interactive elements (headings, buttons).

You can create unlimited number of custom banner sliders and place them anywhere on the site. To create a new slider go to admin > Content > Custom Sliders and click Add New button. Once you create a slider you'll need to populate it with individual banners. You can create new banners in admin > Content > Custom Slider Banners.

You can include custom slider on any page as a widget or layout block.

To include a widget on a CMS page or static block use the following snippet:

{{widget type="WeltPixel\OwlCarouselSlider\Block\Slider\Custom" slider_id="1"}}

To include custom slider on any page via layout blocks use the following snippet:

<block class="WeltPixel\OwlCarouselSlider\Block\Slider\Custom" name="homepage.carousel">
    <arguments>
        <argument name="slider_id" xsi:type="string">1</argument>
    </arguments>
</block>

Various sliders parameters, such as which elements to show/hide, number of items, autoplay, loop, responsive settings etc. can be configured in the admin and customized for each slider. To edit slider parameters go to admin > Content > Custom Sliders and add a new slider or edit an existing one.

Template file for product slider carousels can be found in: WeltPixel_OwlCarouselSlider/templates/sliders/custom.phtml

rwSlider widgets allows to convert any collection of products or banners into an interactive slider.

To initialize a slider widget use standard Magento initialization methods using either imperative or declarative notation. Below is an example of a declarative notation using:

• data-mage-init attribute

data-mage-init='{"rwSlider" : {
    "total": 8,
    "type": 'banner-slider',
    "sliderConfig": { ... }, 
    "breakpoints": { ... }
}}'

• text/x-magento-init script type

<script type="text/x-magento-init">
{
    "[data-slider='products']": {
        "RocketWeb_UiCore/js/rw-slider": {
            "total": 8,
            "sliderConfig": { ... },
            "breakpoints": { ... } 
        }
    }
}
</script>

Widget is declared in RocketWeb_UiCore module in web/js/rw-slider.js. It can extended or overriden for additional functionality.