Selective Attributes (request by Asim)
// ---- Selective Attributes ---- //
function selectiveAttributes() {
var selectiveAttr = $('#selectiveAttributes').text(),
eachSelective = selectiveAttr.split('|');
$.each( eachSelective, function( key, value ) {
//Seperate all of them, could be more than 1.
var sAttr = value.split('/'),
req = sAttr[0].split('='),
attributeName = '#l-'+$.trim(req[0]).toLowerCase(),
attributeVal = $.trim(req[1]).toLowerCase(),
showhide = '#l-'+$.trim(sAttr[1]).toLowerCase();
//Hide them!
$(showhide).parent().parent().hide();
if ($(attributeName).val() == attributeVal) {
$(showhide).parent().parent().show();
} else {
//Clear them just incase.
if ($(showhide).is('select')) {
if ($(showhide + ' option[value=""]').length == 0) {
$(showhide).prepend('<option value="">Select One</option>');
$(showhide).val('');
} else {
$(showhide).val('');
}
} else {
$(showhide).val('');
}
}
});
}
selectiveAttributes();
$('select, input[type=text]').on('change', function() {
selectiveAttributes();
})
<div id="selectiveAttributes" style="display:none;">
&mvt:product:customfield_values:customfields:selectattr;
</div>
IMPORTANT! Add tolower in the attribute template (if you're on a readytheme it should be doing this already)
<mvt:assign name="l.settings:attributeID" value="'l-' $ tolower(l.settings:attribute:code)" /> (you can remove the l- or change it)
id="&mvt:attributeID;"
type=filled/filledWith|type=empty/emtpyTest
| | |
| | | Attribute CODE you want to hide/show
| | Attribute VALUE you want
| Attribute CODE you are targetting.
------------------------------------
Example:
if type EQUALS filled
filledWith is shown.
http://tguefen.mivamerchantdev.com/product/test-tube-rack.html