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

[jwlamb]

Would it be easier to have a new Option Type (checkbox, radio, text, CAPITAL only text)? Then all attributes set to "CAPITAL only text" could quickly and easily be changed to uppercase only? Then there wouldn't be a need to adjust a js file as you go.

[jwlamb]

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

I should note, only partially worked. Mobile versions of the site still allow lower case.

[balihr]

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

Just duplicate the line with your selector for each item you want to add:

document.getElementById("attrib-110-0").addEventListener("keypress", attribUppercase, false);
document.getElementById("attrib-108-0").addEventListener("keypress", attribUppercase, false);
document.getElementById("attrib-112-0").addEventListener("keypress", attribUppercase, false);

Would it be easier to have a new Option Type (checkbox, radio, text, CAPITAL only text)? Then all attributes set to "CAPITAL only text" could quickly and easily be changed to uppercase only? Then there wouldn't be a need to adjust a js file as you go.

It probably would be easier, but it would require A LOT of modifications to core files so I won't go into that.

I should note, only partially worked. Mobile versions of the site still allow lower case.

Not sure because the js file should be loaded always. What template are you using? Do you have a separate mobile-only template? Can you provide a link to the site?

[jwlamb]

Just duplicate the line with your selector for each item you want to add

I tried that, but it only works on one item and not the other.

It probably would be easier, but it would require A LOT of modifications to core files so I won't go into that.

I'm still leaning this direction.

Not sure because the js file should be loaded always. What template are you using? Do you have a separate mobile-only template? Can you provide a link to the site?

The westminster has it's own mobile version built in as far as I can tell. I don't have anything special set up for it. I pm'd you the links.

Thanks!