Syntax error in script variation of jQuery products

Question

Syntax error in script variation of jQuery products

Navigation

#1 by (2 votes)
#2 by (2 votes)

1

I have a script in jQuery, which basically filters the variations of Woocomerce Wordpress products and selects the desired option by adding the "selected" attribute, the big problem is, I have a button to select the variation, as you can see in I have tried several ways, but some bugs are coming up, what I needed is that just clicking on the "SELECT" item would be selected, here it is the link if you want to take a look at how it works:

link

Thank you in advance for your 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><tdclass="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"><spanclass="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"><aclass="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<imgclass="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>

javascript html jquery

asked by anonymous 13.07.2018 / 13:52

2 answers

How to return the records of the last 7 days counting the current day with postgreSQL? PHP does not recognize connection as parameter

score 2 · Answer 1

So I realize you're putting 'onClick' into .swatch , which is the image container and variation description.

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

score 2 · Answer 2

In addition to doing what you proposed the @Lite answer, you need to differentiate which link was clicked between .selecionar and .selecionado to switch between one and the other.

To do this, add the class .selecionado to the event:

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

No% of% where it is checked if it has class if , enter one more condition:

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

In this way the script will know which link was clicked. In the previous way, the script is removing the .selected class from all blocks, even though it has been added before.