Script syntax error jQuery product variation

Question

I have a script in jQuery, which basically filters the product variations of Woocomerce Wordpress and selects the desired option by adding the attribute "Selected", the big problem is that, I have a button to select the variation, as you can see in the image below, only that regardless of where I click the variation, it is selected, I have tested several forms, but are appearing some bugs, what I needed is that, just by clicking on "SELECT" the item was selected, here is the link if you want to take a look at working:

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

thanks in advance for the help!

;(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>

Answer 1

As I understand it, you’re putting onClick on .swatch, which is the image container and variation description.

You should change your code to add the event only in the link Select which is the <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

Answer 2

In addition to doing what you proposed the @Leite response, you need to differentiate which link was clicking between .selecionar and .selecionado to switch between one and the other.

Add the class to the event .selecionado:

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

In the if where it is checked if it has the class .selected, insert one more condition:

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

This way the script will know which link was clicked. In the previous way the script is removing the class .selected of all blocks, even having added before.