Como usar Controles de Conditions no Elementor

Por

Garanta uma boa experiência e um código mais limpo

Widgets customizados possuem a vantagem de serem extremamente versáteis e gerantem um conteúdo diversificado (texto, imagem, vídeo) com apenas um Widget.

O uso desses controles pode deixar seu código mais limpo e garantir uma experiência melhor ao utilizar o Widget em uma página.

Para ilustrar esse exemplo vamos utilizar um widget bem simples que conta com os seguintes itens:

  • Titulo
  • Texto
  • Imagem ou Vídeo (nunca ambos)

Esse é o visual do Widget:

O vídeo e a imagem abaixo ilustram um exemplo de Controle Condicional  aplicado a um Widget do Elementor.

Ao aplicar o Controle de Condicional é dado ao usuário o poder de escolher qual tipo de mídia será usado, não havendo a necessidade de mostrar ambos os campos (vídeo ou imagem), sendo que apenas um será usado. E o no código surge a possibilidade de renderizar o conteúdo escolhido pelo usuário. 

Mas como utilizar uma condition?

Primeiro, entenda o que é um control

Ao criar um novo Widget para o Elementor (aprenda como fazer isso aqui) você deve registrar controls para isso. 

Exemplo de um control que usamos em nosso widget, o Título (TEXT): 

$this->add_control(
		'titulo',
		[
			'label' => __( 'Título', 'plugin-domain' ),
			'type' => Controls_Manager::TEXT,
			'placeholder' => __( 'Insira o título aqui', 'pipefy-2020-admin' ),
		]
    );

E isso resultará em:

Note que utilizamos vários parâmetros dentro do control: label, type e placeholder. Para usarmos o parâmetro de condition basta inseri-lo dentro do de um control.

Já sabe o que é um control? Vamos seguir!

Passo a passo

Agora que você já está familiar ao conceito de control podemos começar a inseir o parâmetro de condition em um exemplo real.

Passo 1

Primeiro vamos criar um control de CHOOSE (veja mais sobre aqui), para que o usuário possa escolher entre imagem ou vídeo.

$this->add_control(
			'imagem_ou_video',
			[
				'label' => __( 'Usar imagem ou vídeo?', 'plugin-domain' ),
				'type' => \Elementor\Controls_Manager::CHOOSE,
				'options' => [
					'imagem' => [
						'title' => __( 'Imagem', 'plugin-domain' ),
						'icon' => 'fa fa-image',
					],
					'video' => [
						'title' => __( 'Vídeo', 'plugin-domain' ),
						'icon' => 'fa fa-video',
					],
				],
				'default' => 'imagem',
				'toggle' => true,
			]
		);

Passo 2

Vamos criar o um control para a imagem e já inserir uma condition (condição) para que ela apareça para o usuário. E a condição é que o control ‘imagem_ou_vídeo’ seja igual a opção ‘imagem’.

$this->add_control(
		'selecionar_image',
		[
			'label'   => __( 'Imagem', 'plugin-domain' ),
			'type'    => \Elementor\Controls_Manager::MEDIA,
			'default' =>
			  [
				'url'  => \Elementor\Utils::get_placeholder_image_src(),
			  ],
			  'condition' => 
			  [
			    'imagem_ou_video' => 'imagem',
			  ],
		]
	);

Passo 3

Agora vamos criar o um control para o vídeo e também inserir uma condition (condição) para que ela apareça para o usuário. Dessa vez a condição é que o control ‘imagem_ou_vídeo’ seja igual a opção ‘video’.

$this->add_control(
		'selecionar_image',
		[
			'label'   => __( 'Imagem', 'plugin-domain' ),
			'type'    => \Elementor\Controls_Manager::MEDIA,
			'default' =>
			  [
				'url'  => \Elementor\Utils::get_placeholder_image_src(),
			  ],
			  'condition' => 
			  [
			    'imagem_ou_video' => 'imagem',
			  ],
		]
	);

 Pronto!

Ao selecionar o ícone “Imagem”, logo abaixo o campo de imagem aparecerá para que o usuário insira a imagem de sua preferência. E ao selecionar o ícone “Vídeo” é possível inserir o vídeo desejado.

Ver código completo

🎉 Bônus!

Você pode utilizar o parâmetro de condition de modo mais avançado. Nesse modo utilizaremos no plural condiitons. 

Relação AND/OR:

  'conditions' => 
  [
    'relation' => 'and', //podemos usar 'and' ou 'or'
    'terms' => 
    [
        [
            'name' => 'imagem_ou_video',
            'operator' => '==',
            'value' => 'imagem'
        ],
        [
            //vamos imaginar que criamos um control SWITCHER para mostrar ou não o título, chamado 'mostrar_titulo'
            'name' => 'mostrar_titulo',
            'operator' => '==', //aqui podemos utilizar outros operadores do php ex: >= , !==, < . etc
            'value' => 'sim'
        ]
    ]
  ]

Post photo by Justin Luebke on Unsplash

1 comentário em “Como usar Controles de Conditions no Elementor”

Deixe uma resposta