1

Tenho um script em jQuery, que basicamente filtra as variações de produtos do Woocomerce Wordpress e seleciona a opção desejada adicionando o atributo "selected", o grande problema é que, eu tenho um botão para selecionar a variação, como podem ver na imagem abaixo, só que independente do lugar onde eu clique na variação, ela é selecionada, já testei diversas formas, mas estão surgindo alguns bugs, o que eu precisava é que, somente ao clicar no "SELECIONAR" o item fosse selecionado, aqui está o link caso queiram dar uma olhada em funcionamento:

https://www.agenciagoup.com.br/projetos/sperone/produto/caixas-de-tomadas/mobiliario/spe-2702/

agradeço desde já a ajuda!

inserir a descrição da imagem aqui

;(function ( $ ) {
'use strict';

/**
 * @TODO Code a function the calculate available combination instead of use WC hooks
 */
$.fn.tawcvs_variation_swatches_form = function () {
	return this.each( function() {
		var $form = $( this ),
			$vselect = $('.variation-select'),
			clicked = null,
			selected = [];

		$form.addClass( 'swatches-support' )
		$vselect.on( 'click', '.selecionar, .selecionado', function ( e ) {
			e.preventDefault();
			e.stopPropagation(); // para nao haver bubbling do evento para os pais
			var $el = $( this ).parents( '.swatch' ),
					$select = $el.closest( '.value' ).find( 'select' ),
					attribute_name = $select.data( 'attribute_name' ) || $select.attr( 'name' ),
					value = $el.data( 'value' );

				$select.trigger( 'focusin' );

				// Check if this combination is available
				if ( ! $select.find( 'option[value="' + value + '"]' ).length ) {
					$el.siblings( '.swatch' ).removeClass( 'selected' );
					$select.val( '' ).change();
					$form.trigger( 'tawcvs_no_matching_variations', [$el] );
					return;
				}

				clicked = attribute_name;

				if ( selected.indexOf( attribute_name ) === -1 ) {
					selected.push(attribute_name);
				}

				if ( $el.hasClass( 'selected' ) && e.currentTarget.className == "selecionado" ) {
					$select.val( '' );
					$el.removeClass( 'selected' );

					delete selected[selected.indexOf(attribute_name)];
				} else {
					$el.addClass( 'selected' ).siblings( '.selected' ).removeClass( 'selected' );
					$select.val( value );
				}

				$select.change();
			} )
			.on( 'click', '.reset_variations', function () {
				$( this ).closest( '.variations_form' ).find( '.swatch.selected' ).removeClass( 'selected' );
				selected = [];
			} )
			.on( 'tawcvs_no_matching_variations', function() {
				window.alert( wc_add_to_cart_variation_params.i18n_no_matching_variations_text );
			} );
	} );
};

$( function () {
	$( '.variations_form' ).tawcvs_variation_swatches_form();
	$( document.body ).trigger( 'tawcvs_initialized' );
} );

})( jQuery );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<td class="value">
<div class="variation-selector variation-select-image hidden">
<select id="pa_opcoes-de-acabamento" class="" name="attribute_pa_opcoes-de-acabamento" data-attribute_name="attribute_pa_opcoes-de-acabamento" data-show_option_none="yes">
        <option value="">Escolha uma opção</option>
        <option value="spe-2702-tba-pi" class="attached enabled">SPE-2702-TBA-PI</option>
        <option value="spe-2702-tba-po" class="attached enabled">SPE-2702-TBA-PO</option>
        <option value="spe-2702-tbi" class="attached enabled">SPE-2702-TBI</option>
        <option value="spe-2702-tbm" class="attached enabled">SPE-2702-TBM</option>
        <option value="spe-2702q-cz" class="attached enabled">SPE-2702Q-CZ</option>
        <option value="spe-2702q-pr" class="attached enabled">SPE-2702Q-PR</option>
        <option value="spe-2702r-cz" class="attached enabled">SPE-2702R-CZ</option>
        <option value="spe-2702r-pr" class="attached enabled">SPE-2702R-PR</option>
</select>
</div>
<div class="tawcvs-swatches" data-attribute_name="attribute_pa_opcoes-de-acabamento">
<span class="swatch swatch-image swatch-spe-2702-tba-pi" title="SPE-2702-TBA-PI" data-value="spe-2702-tba-pi">
<img class="hs-rsp-popup variation-img" src="https://www.agenciagoup.com.br/projetos/sperone/wp-content/uploads/2018/01/SPE-2702-TBA-PI-600x600.jpg">
<span class="middle">
<span class="variation-desc">
Dimensões: 190X190mm
Material: Alumínio Polido
Tipo: QUADRADA
Cor: Aluminio polido
</span>
<span class="variation-selected">SELECIONADO</span>
<p class="variation-select ">
<img class="var-slc-img" src="https://www.agenciagoup.com.br/projetos/sperone/wp-content/themes/sperone/img/selecionar.png">
<a class="selecionar">Selecionar</a>
<a class="selecionado">Selecionado</a>
</p>
<a href="https://www.agenciagoup.com.br/projetos/sperone/wp-content/uploads/2018/01/SPE-2702-TBA-PI-600x600.jpg" class="hs-rsp-popup variation-ampliar">
<img class="var-slc-img" src="https://www.agenciagoup.com.br/projetos/sperone/wp-content/themes/sperone/img/lupav.png">Ampliar
<img class="hs-rsp-popup" src="https://www.agenciagoup.com.br/projetos/sperone/wp-content/uploads/2018/01/SPE-2702-TBA-PI-600x600.jpg">
</a>
</span>
</span>

3
  • Não consegui perceber o problema. Vc quer que clique onde tem "✔ selecionar" para selecionar o produto?
    – Sam
    13/07/2018 às 12:22
  • bom dia!, isso mesmo, somente quando clicar em "SELECIONAR", não clicando em qualquer lugar do container, Att. 13/07/2018 às 12:29
  • entendo, com o exemplo do Leite abaixo funcionou, só que agora ele não remove o selecionado ao clicar novamente. 13/07/2018 às 12:38

2 Respostas 2

2

Pelo que percebo estás a colocar o 'onClick' no .swatch, que é o container da imagem e descrição da variação.

Deves mudar o teu código para adicionar o evento apenas no link Selecionar que é o <a class="selecionar">Selecionar</a>.

// mudar .swatch para .selecionar para o evento ser triggered no link em vez do container .swatch
$vselect.on( 'click', '.selecionar', function ( e ) {
    e.preventDefault();
    e.stopPropagation(); // para nao haver bubbling do evento para os pais
    var $el = $( this ).parents( '.swatch' ), // aqui trocava o $( this ) para que $el continue a ser o .swatch e o código abaixo continue a ser válido
4
  • Deu certo!, só que se eu clico novamente no "Selecionado", ele não remove o selected, muito obrigado pela ajuda! 13/07/2018 às 12:35
  • eu tentei editar essa parte, desta forma, mas não funcionou if ( ! $select.find( 'option[value="' + value + '"]' ).length ) { $vselect.siblings( '.swatch' ).removeClass( 'selected' ); $select.val( '' ).change(); $vselect.trigger( 'tawcvs_no_matching_variations', [$el] ); return; } 13/07/2018 às 12:48
  • O código deste bloco if ( $el.hasClass( 'selected' ) ) { é que controla o que fazer caso cliques numa variação que esteja ou não seleccionada. Tens de fazer ai debug e perceber se está a remover a class css correctamente e a limpar as variáveis como pretendes.
    – Leite
    13/07/2018 às 13:07
  • poderia me explicar melhor? não tenho muita experiência em jQuery 13/07/2018 às 13:13
2

Além de fazer o que propôs a resposta do @Leite, é preciso diferenciar qual link foi clicando entre .selecionar e .selecionado para alternar entre um e outro.

Para isso, acrescente no evento a classe .selecionado:

                                          ↓
$vselect.on( 'click', '.selecionar, .selecionado', function ( e ) {...

No if onde é verificado se possui a classe .selected, insira mais uma condição:

                                            ↓
if ( $el.hasClass( 'selected' ) && e.currentTarget.className == "selecionado" ) {
...
}

Desta forma o script saberá qual link foi clicado. Da forma anterior o script está retirando a classe .selected de todos os blocos, mesmo tendo adicionado antes.

5
  • Perfeito dvd, vocês são demais! muito obrigado pela ajuda! 13/07/2018 às 13:18
  • dvd, se puder me ajudar em mais uma função por favor, eu tentei adicionar funções paralelas para remover a classe selected depois de adicionar o produto ao carrinho, mas nada funciona, alguma maneira de contornar isso? 13/07/2018 às 17:03
  • atualizei o código de como eu estou usando atualmente 13/07/2018 às 17:05
  • Quais são essas funções paralelas? Não consegui visualizar no código.
    – Sam
    13/07/2018 às 17:22
  • eu estava tentando fazer uma "gambiarra", usando o window load pra remover a class selected, ele remove a classe, mas se eu recarrego a página ela volta, e depois some de novo, gostaria que realmente desselecionasse, também estava tentando resetar o quantity, mas não ficou bom $(window).on('load', function () { $('.single_variation_wrap :input.qty').each(function() { $(this).attr('value','1'); }); }); 13/07/2018 às 18:00

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .