OroCommerce For developers: customize slick carousel options from layout

Slick js library already included by default with OroCommerce , So the carousel which present - Feature Products , New Arrival , Top Selling , Related Products , UpSell Products – is customizable , and you can change many options from YAML files with layout systems .

Let’s start by adding a products_carousel.ymlfor example inside Resources/views/layouts/blank/page/products_carousel.yml and start by customize Feature Products carousel , push this lines inside the file :

 
layout:
    actions:
        - '@setOption':
            id: featured_products
            optionName: slider_options
            optionValue:                     
                    slidesToShow: 5
                    arrows: true
                    responsive:
                        - {breakpoint: 1199, settings: {slidesToShow: 4, arrows: true}}
                        - {breakpoint: 993, settings: {slidesToShow: 3, arrows: true}}
                        - {breakpoint: 641, settings: {slidesToShow: 2, arrows: true}}
                        - {breakpoint: 415, settings: {slidesToShow: 1, arrows: true}}

You can change here slidesToShow & arrows generally or by devices size other thing you choose between enable or not the slick on featured_products block :

 
        - '@setOption':
            id: featured_products
            optionName: use_slider
            optionValue: true

and this is other example for to selling products:

 
        - '@setOption':
            id: top_selling_products
            optionName: slider_options
            optionValue:                     
                    slidesToShow: 5
                    arrows: true
                    responsive:
                        - {breakpoint: 1199, settings: {slidesToShow: 4, arrows: true}}
                        - {breakpoint: 993, settings: {slidesToShow: 3, arrows: true}}
                        - {breakpoint: 641, settings: {slidesToShow: 2, arrows: true}}
                        - {breakpoint: 415, settings: {slidesToShow: 1, arrows: true}}

And you show or hide the full container related to specific configuration like this:

 
        - '@setOption':
            id: top_selling_items_container
            optionName: visible
            optionValue: '=data["ibnab_customview"].isTPEnable()'

other thing you can move or remove by using @move @remove layout system prefix.

Note: