Hi,
thank you Kkyratn, Nicolas, work solved.
The union for validation product options and custom fields its here
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
)))