Uppercase only attributes

[jwlamb]

Good afternoon,

My website sells custom name tags and patches. The customer can add the text to the attribute and then the text gets added to their product. But on certain items I only want them to be able to use uppercase letters. I found one answer that added a line to the stylesheet, but it did not make the attribute uppercase. Is there a way to change it so certain attributes can only be capital letters? I don't want all attributes uppercase as some items can have lower case letters. Thank you!!

[mc12345678]

Are you wanting to control just the visual display of those attributes as all capital, or do you want to store the text with the content in all capitals?

The first could be done with css on every page where those attributes would be displayed, the second could use jquery and or internal processing to force the data to be all capital letters for the desired attribute(s).

Basically the attributes option name's id value is what will be important to know so that when encountered the data of the sub attribute would be forced to go through that code.

[jwlamb]

Basically the attributes option name's id value is what will be important to know so that when encountered the data of the sub attribute would be forced to go through that code.

I just want them to only be able to make a purchase with using uppercase letters for some items, but not all. So when they type it only permits uppercase letters in the attribute text box. Some items can have lowercase letters, so this is limited to just some attributes, particularly Option Name "Wording" Option ID 110.

[mc12345678]

I just want them to only be able to make a purchase with using uppercase letters for some items, but not all. So when they type it only permits uppercase letters in the attribute text box. Some items can have lowercase letters, so this is limited to just some attributes, particularly Option Name "Wording" Option ID 110.

I've been thinking about this more, it appears that a two pronged approach may be best. On one hand it's to use jquery to update the onscreen content to all capital letters while typing the text, but then for those without accepting enabled to use includes/extra_cart_actions to process the text attributes to uppercase before the shopping cart stores the values. Ideally both approaches would use a single file or repository to I identify the option names that are to be all capital...

[balihr]

A really simple way of doing this is to use javascript or jQuery. It's probably not the best way, but it's simple. A much better alternative would be to use CSS and convert to uppercase using php, but it's not as simple as this.

You can create a new file in includes/modules/pages/product_info/jscript_capitals.js and put this inside:

function attribUppercase(e)
{
	var charInput = e.keyCode;
	if((charInput >= 97) && (charInput <= 122)) { // lowercase
		if(!e.ctrlKey && !e.metaKey && !e.altKey) { // no modifier key
			var newChar = charInput - 32;
			var start = e.target.selectionStart;
			var end = e.target.selectionEnd;
			e.target.value = e.target.value.substring(0, start) + String.fromCharCode(newChar) + e.target.value.substring(end);
			e.target.setSelectionRange(start+1, start+1);
			e.preventDefault();
		}
	}
}
window.onload = function() {
	document.getElementById("attrib-110-0").addEventListener("keypress", attribUppercase, false);
}

Notice the part in red - check if your element has that exact ID and change if needed (right-click the input field -> Inspect Element).

[jwlamb]

A really simple way of doing this is to use javascript or jQuery. It's probably not the best way, but it's simple. A much better alternative would be to use CSS and convert to uppercase using php, but it's not as simple as this.

You can create a new file in includes/modules/pages/product_info/jscript_capitals.js and put this inside:

function attribUppercase(e)
{
	var charInput = e.keyCode;
	if((charInput >= 97) && (charInput <= 122)) { // lowercase
		if(!e.ctrlKey && !e.metaKey && !e.altKey) { // no modifier key
			var newChar = charInput - 32;
			var start = e.target.selectionStart;
			var end = e.target.selectionEnd;
			e.target.value = e.target.value.substring(0, start) + String.fromCharCode(newChar) + e.target.value.substring(end);
			e.target.setSelectionRange(start+1, start+1);
			e.preventDefault();
		}
	}
}
window.onload = function() {
	document.getElementById("attrib-110-0").addEventListener("keypress", attribUppercase, false);
}

Notice the part in red - check if your element has that exact ID and change if needed (right-click the input field -> Inspect Element).

This worked!! My only follow on question is how to add multiple attributes to do the same thing? Attribute # 108 and 112