Product Options dropdown and JQueryValidation custom field

  • Posts: 48
  • Thank you received: 8
  • Hikashop Business
2 weeks 1 day ago #305650

-- url of the page with the problem -- : demos.jabatec.com/
-- HikaShop version -- : 4.0.3
-- Joomla version -- : 3.9.4

Hi, in a demo installation have a product with product options via dropdown. Product options assign a predetermined value (info, example) in a custom field where the user must enter a value between a range of values of dropdown select.

Dropdown product options
L Option [0 - 2200]
XL Option [2201 - 2500]
XXL Option [2501 - 9999]

Then, once a value has been selected in the drop-down, the user must enter in a custom field a value that is within the range of the value selected in the drop-down.
With this, when the user enters a wrong value, what is out of range, I can not show an alert indicating the error with jquery validation
In the hikashop view show_default.php I have introduced the following code which in codepen.io works relatively well, but I can not make it work when I integrate it into hika.

Two doubts
It is possible to integrate jquery validation with hika.
There is another option to validate the introduction of values in a custom field.

Thank you very much

<script >
(function($) {
$(document).ready(function(){
        $("select").change(function(){
        $(this).find("option:selected").each(function(){          
        if($(this).attr("value")=="31"){
           $('input[id=alto_lw]').val("900");
            $("hikashop_product_form").validate(
                  {
                    rules: 
                    {
                     "data[item][alto_lw]": /** Brackets: https://jqueryvalidation.org/reference/#link-fields-with-complex-names-(brackets-dots)**/
                      {
                      required: true,
                      range:[0,2200]
                      }
                    }
               });	
        }
        else if($(this).attr("value")=="32"){
              $('input[id=alto_lw]').val("2200");
            $("hikashop_product_form").validate(
                  {
                    rules: 
                    {
                    "data[item][alto_lw]":  
                      {
                      required: true,
                      range:[2201,2500]
                      }
                    }
               });	 
        }
            else if($(this).attr("value")=="33"){
            $('input[id=alto_lw]').val("2500");
            $("hikashop_product_form").validate(
                  {
                    rules: 
                    {
                    "data[item][alto_lw]": 
                      {
                      required: true,
                      range:[2501,9999]
                      }
                    }
               });	 
        }            
        });
    }).change();
});
})(jQuery);    
</script>


Javier Ballester
plus.google.com/+JavierBallester
Hikashop Joomla! Magazine in Spanish
Tu tienda Online Joomla! Hikashop
magazine.joomla.org/es/ediciones-anterio...enda-online-joomla-3

Please Log in or Create an account to join the conversation.

  • Posts: 938
  • Thank you received: 73
  • Hikashop Business
2 weeks 1 day ago #305673

Hi,

Well your script is not selecting your form because you are missing id="hikashop_product_form" attribute in your form on your demo page.

Also you are missing "#" in you script.

This line:

$("hikashop_product_form").validate(

Should be like this:
$("#hikashop_product_form").validate(

And add id to your form:

<form method="post" name="hikashop_product_form" id="hikashop_product_form">


You can read more about jQuery #id selector here: www.w3schools.com/jquERY/sel_id.asp

That should fix your issue.


Thanks

Last edit: 2 weeks 1 day ago by kyratn.
The following user(s) said Thank You: Jabatec

Please Log in or Create an account to join the conversation.

  • Posts: 65411
  • Thank you received: 9529
  • MODERATOR
2 weeks 21 hours ago #305654

Hi,

You're adding the restriction with $("#hikashop_product_form").validate however, this supposes that the form is submitted.
But when you use the add to cart button, it doesn't post the form, instead, it gets the values from the form and send the values through ajax. So the validate of the form is not called and thus your rules are not executed.
Instead of doing the check on $("#hikashop_product_form").validate, you should do the check on $("#alto_lw").change (when the value in the input field changes).

The following user(s) said Thank You: Jabatec

Please Log in or Create an account to join the conversation.

  • Posts: 48
  • Thank you received: 8
  • Hikashop Business
1 week 4 days ago #305778

Hi,
thank you Kkyratn, Nicolas, work solved.
The union for validation product options and custom fields its here :woohoo:
Together with my friend @phproberto we have improved the configuration I have incorporated the 4 functionalities I was looking for.

Objective. Limit the entry of values in a custom field linked to the previously selected value in a Hikashop Options Products dropdown.

1 - The selection of a product option incorporates a range of possible values in the custom field
2 - The custom field receives a default value, and from user, you must enter a value within the range of the selected product option.
3 - Warning message to the user in case of not entering values within the range
4 - Block button sent to the cart until the introduction of a correct value in the custom field.

And the code ...

<!-- HIKA-Validator -->
<!--include jQuery Validation -->
(function($) {
$(document).ready(function(){
	var $modelSelector = $('#hikashop_product_option_0'); /** value select dropdown name **/
	var heightFieldName = 'data[item][alto_lw]'; /** custom field name **/
	var $heightField = $('input[name="' + heightFieldName + '"]');
	var $form = $('form[name="hikashop_product_form"]'); /** form name **/
	var $addToCartButton = $('.hikabtn.hikacart:not("fake")');/** css hika configuration / system / display / extra css **/

    var modelRules = {
    	'31' : { /** value product options **/
    		defaultValue: 900,
    		rules : {
    			required: true,
    			range: [1,2200]
    		}
    	},
    	'32' : {
    		defaultValue: 2201,
    		rules : {
    			required: true,
    			range: [2201,2500]
    		}
    	},
    	'33' : {
    		defaultValue: 2501,
    		rules : {
    			required: true,
    			range: [2501,9999]
    		}
    	}
    }

	function onModelChanged()
	{
		var selectedModel = $modelSelector.find("option:selected").val();
		if (!modelRules.hasOwnProperty(selectedModel)) {
			return;
		}
		$heightField.val(modelRules[selectedModel]['defaultValue']).trigger('input');
	}

	function showHeightError(validRange)
	{
		$heightField.after(
			'<small class="js-height-error" style="background-color:#EF421E; color: white; max-width:200px; position:absolute; padding:7px 5px;">'
			+ ' Este modelo solo acepta valores entre ' + validRange[0] + ' y ' + validRange[1] + '.</small>'
		);
	}

	function hideAddToCartButton()
	{
		var fakeButton = $addToCartButton.clone()
			.addClass('fake')
			.attr('onclick', 'return false;')
			.attr('href', '#')
			.css({'opacity': '0.5'});

		$addToCartButton.after(fakeButton);
		$addToCartButton.css({'display': 'none'});
	}

	function showAddToCartButton()
	{
		$('.hikabtn.hikacart.fake').remove();
		$addToCartButton.css({'display': 'inline-block'});
	}

	function validateHeight()
	{
		var selectedModel = $modelSelector.find("option:selected").val();
		var selectedHeight = parseInt($heightField.val());

		// Remove any previous error message
		$('.js-height-error').remove();

		if (!modelRules.hasOwnProperty(selectedModel)) {

			hideAddToCartButton();
			return false;
		}

		var validationRules = modelRules[selectedModel]['rules']

		if (!selectedHeight || selectedHeight < validationRules['range'][0] || selectedHeight > validationRules['range'][1]) {
			showHeightError(validationRules['range']);
			hideAddToCartButton();

			return false;
		}

		showAddToCartButton();

		return true;
	}

    $modelSelector.on('change', function(){
       	onModelChanged();
    }).trigger('change');

	$heightField.on('input', function(){
		validateHeight();
	}).trigger('input');

	$form.submit(function( event ) {
		if (!validateHeight()) {
			event.preventDefault();
		}
	});
});
})(jQuery);

Joomla! to infinity and beyond ;-))))


Javier Ballester
plus.google.com/+JavierBallester
Hikashop Joomla! Magazine in Spanish
Tu tienda Online Joomla! Hikashop
magazine.joomla.org/es/ediciones-anterio...enda-online-joomla-3
The following user(s) said Thank You: nicolas, kyratn

Please Log in or Create an account to join the conversation.

Time to create page: 0.070 seconds
Powered by Kunena Forum