Magento 2 UI Components and Visibility Conditions

Table of Contents

Introduction

Have you ever wanted to show or hide certain parts of your Magento store based on specific conditions? For example, showing special offers only to VIP customers or displaying different content in different store views? This is where Magento’s UI Components and Visibility Conditions come into play.

What are UI Components?

Think of UI Components as building blocks for your Magento store’s frontend. They combine:

JavaScript (for interactivity)
HTML (for structure)
CSS (for styling)
XML (for configuration)

These components make it easy to create consistent and reusable parts of your store’s interface.

What are Visibility Conditions?

Visibility Conditions are like smart switches that control when a UI Component should be shown or hidden. They help you create dynamic interfaces that change based on:

Who is viewing the page (customer group)
Where they are viewing from (store view)
What permissions they have
And many other conditions

Example: Customer Group Based Visibility

Let’s create a simple example that shows special offers only to specific customer groups.

Step 1: Create the PHP Class

First, we need to create a PHP class that decides when to show our component:

<?php
namespace Jigar\Blogs\Model\Condition;

use Magento\Framework\View\Layout\Condition\VisibilityConditionInterface;
use Magento\Customer\Model\Session;

class CustomerGroupVisibility implements VisibilityConditionInterface
{
    private static $conditionName = 'customer_group_visibility';

    private $customerSession;

    public function __construct(Session $customerSession)
    {
        $this->customerSession = $customerSession;
    }

    public function isVisible(array $arguments): bool
    {
        //without arguments you can also write your custom requirement here
        //and based on it you can return true/false

        // Get allowed customer groups from configuration
        $allowedGroups = $arguments['allowed_groups'] ?? [];
        
        // Get current customer's group
        $currentGroupId = $this->customerSession->getCustomerGroupId();
        
        // Check if current customer's group is allowed
        return in_array($currentGroupId, $allowedGroups);
    }

    public function getName(): string
    {
        return self::$conditionName;
    }
}

Step 2: Configure in XML

Next, we tell Magento when to use our visibility condition:

<uiComponent name="special_offers">
    <visibilityCondition name="customer_group_visibility" 
        className="Vendor\Module\Model\Condition\CustomerGroupVisibility">
        <argument name="allowed_groups" xsi:type="array"> <!-- Optional if custom logic -->
            <item name="0" xsi:type="number">1</item> <!-- General customers -->
            <item name="1" xsi:type="number">2</item> <!-- Wholesale customers -->
        </argument>
    </visibilityCondition>
</uiComponent>

Step 3: Create the UI Component

Now, let’s create the actual component that will show our special offers:

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">special_offers.special_offers_data_source</item>
        </item>
    </argument>
    <dataSource name="special_offers_data_source">
        <argument name="dataProvider" xsi:type="configurableObject">
            <argument name="class" xsi:type="string">Vendor\Module\Model\ResourceModel\SpecialOffers\Grid\Collection</argument>
            <argument name="name" xsi:type="string">special_offers_data_source</argument>
            <argument name="primaryFieldName" xsi:type="string">entity_id</argument>
            <argument name="requestFieldName" xsi:type="string">id</argument>
        </argument>
    </dataSource>
    <columns name="special_offers_columns">
        <column name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" xsi:type="string" translate="true">Title</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

Common Uses

You can use visibility conditions for:

Showing special prices to VIP customers
Displaying different content in different store views
Showing admin-only features
Displaying region-specific promotions

Visibility Conditions are a powerful way to create dynamic, personalized experiences in your Magento store. They help you show the right content to the right people at the right time.

I hope this guide helps you understand how to use visibility conditions in Magento 2. If you have any questions, feel free to ask in the comments below!

Set MAGE_INDEXER_THREADS_COUNT in Adobe Commerce Cloud

Cherry-Pick : How to Add a Commit from One Branch to Another in Git