If you've created a block class and a corresponding PHTML template which renders on the frontend, you may be using something similar to the below in a CMS context to render it. This might display a collection of products in a carousel:


{{block type="PixieMedia\ProductCarousel\Block\Carousel" template="PixieMedia_ProductCarousel::carousel.phtml"}}

You may be retrieving products from a particular category, or gathering a collection by filtering products which have a particular attribute value assigned, or something else.

That's all well and good, but what if you want to allow users an element of control over some of the options applicable to how it renders? Usually, admins wouldn't be able to dictate things like how many products are in view at any one time.

Using parameters, you can grant this sort of control. Let's have a look at how this might be achieved:


{{block type="PixieMedia\ProductCarousel\Block\Carousel" template="PixieMedia_ProductCarousel::carousel.phtml" display="4"}}

For reference, this is the equivalent of this in XML;


<block class="PixieMedia\ProductCarousel\Block\Carousel" name="pm_carousel" template="PixieMedia_ProductCarousel::carousel.phtml">
<arguments>
        <argument name="display" xsi:type="string">4</argument>
</arguments>
</block>

Note the display="4".

Within your template, assuming you're extending a class which itself extends Magento/Framework/DataObject, for example Magento/Framework/View/Element/Template (this class extends Magento/Framework/View/Element/AbstractBlock which extends the aforementioned Magento/Framework/DataObject), you'll have access to the method getData(). This method will give you access to the "display" parameter we've just used.

So, to the retrieve the "display" value, we simply need to retrieve it from the block object. This can be done within the carousel.phtml template directly, as so:


$display = $block->getData("display");

The $display variable will of course equal 4.

So, what do you do with this value? That, of course, is up to you. Keeping with the carousel module, you can use the value to render a certain number of products in the carousel at once, so only 4 will show at one time, the front-end user has to scroll or toggle to the next group of products.

You may be using a third-party carousel, such as Slick – our slider of choice! In which case, you could set the “slidesToShow” option as follows:


$(".slider-container").slick({
	// Options, options
	slidesToShow: <?php echo $display; ?>
	// Options, options
});

It’s worth noting, you can set more than one parameter in the block snippet. For example, what if you want to give admins the option to set how many products should display in the carousel at certain viewports? You could give them the option as follows:


{{block type="PixieMedia\ProductCarousel\Block\Carousel" template="PixieMedia_ProductCarousel::carousel.phtml" deskdisplay="4" tabletdisplay="2" mobiledisplay="1"}}

You can then access these parameters as follows in the block template:


$deskDisplay = $block->getData("deskdisplay");
$tabletDisplay = $block->getData("tabletdisplay");
$mobileDisplay = $block->getData("mobiledisplay");