The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 01-10-2013, 10:06 PM
hello235's Avatar
hello235 is offline
Junior Member
 
Join Date: Jan 2013
Posts: 3
Question

Set maxlength of a product option text field - javascript?


I need to add some product option text fields so that customers can add personalisation text to be engraved on our products.

There is a limit to the number of characters we can engrave on each line.


If I use the html widget, I can manually edit the field's maxlength when pasting in the code. However, I'd really like to use the Wordpress plugin.

Is there a way I can add some code (perhaps using Javascript in the Wordpress theme files?) to change the maxlength of the relevant fields as the customer types?


Hoping there is a genius out there who can help!

Thanks,

J.
  #2  
Old 01-16-2013, 02:01 PM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Yes, sure, it is totally possible with help Javascript API and jQuery.

In order to set maxlength for inputbox you should add following code on the source page, where Ecwid is installed:
Code:
<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page){
  if (page.type == "PRODUCT") {  
     $("input.ecwid-productBrowser-details-optionTextField").attr('maxlength','6');
  };
})
</script>
This code will set maxlegth = 6 symbols for all input boxes on the product detailed page.

If you want to set max lenght of inputbox for the particular product you should use following code:
Code:
<script type="text/javascript">
Ecwid.OnPageLoaded.add(function(page){
  if ((page.type == "PRODUCT") && (page.productId == "11111")) {  
     $("input.ecwid-productBrowser-details-optionTextField").attr('maxlength','6');
  };
})
</script>
"11111" should be changed to the ID of particular product.

Please, note that these scripts require jQuery library installed on your site. Please, refer to this post for details: http://www.ecwid.com/forums/showthread.php?t=11106#5

If any questions will appear, please, feel free to ask.
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
  #3  
Old 02-09-2013, 03:51 PM
Mark Button's Avatar
Mark Button Mark Button is offline
Junior Member
 
Join Date: Feb 2013
Posts: 1
Default

This works great on the product page, but can you advise how to implement this when you're in the cart as well.

1: Field is required
2: Drag the product to the Shopping Bag
3: In the shopping bag you're alerted required fields are missing
4: Hit the 'change button'
5: In the popup that now appears you can type beyond the character limit.

Thanks!
  #4  
Old 04-09-2013, 07:59 PM
gewgawgiftstore.co.uk's Avatar
gewgawgiftstore.co.uk gewgawgiftstore.co.uk is offline
Junior Member
 
Join Date: Feb 2012
Posts: 11
Question

Hi,

As mentioned in the ideas section, having the option to choose the max character length of a text field would help us out also. I've noticed that those text fields have a default 200 max setting (see snippit below), so there must be an easyish way to let us change that.

<input id="ecwid-productoption-21471097-Line_1_:0028max_15_characters:0029" class="gwt-TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption-Line_1_:0028max_15_characters:0029" type="text" maxlength="200"></input>

Thanks,

Chris
  #5  
Old 04-10-2013, 01:30 PM
Maya's Avatar
Maya Maya is offline
Ecwid Team
 
Join Date: Feb 2010
Location: Ecwid headquarter
Posts: 5,876
Default

Quote:
Originally Posted by gewgawgiftstore.co.uk View Post
Hi,

As mentioned in the ideas section, having the option to choose the max character length of a text field would help us out also. I've noticed that those text fields have a default 200 max setting (see snippit below), so there must be an easyish way to let us change that.

<input id="ecwid-productoption-21471097-Line_1_:0028max_15_characters:0029" class="gwt-TextBox ecwid-productBrowser-details-optionTextField ecwid-productoption-Line_1_:0028max_15_characters:0029" type="text" maxlength="200"></input>

Thanks,

Chris
Hello Chris,

Unfortunately, the only way to set max length for input box is usage of custom script as described in the post above: http://www.ecwid.com/forums/showthread.php?p=82243#2
__________________
Maya N., Ecwid Team

------------------
Welcome to our new Help Center!
  #6  
Old 05-18-2013, 03:49 PM
gewgawgiftstore.co.uk's Avatar
gewgawgiftstore.co.uk gewgawgiftstore.co.uk is offline
Junior Member
 
Join Date: Feb 2012
Posts: 11
Default Cart Change Options Pop-Up

Hi,

Thought I'd share this code which sets the maxlength based on a number in the text field's title (with thanks to Expert System from SO!).

Code:
<script>
Ecwid.OnPageLoaded.add(function(page){
var regex = new RegExp("max_(\\d+)_characters");
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
    var inp = inputs[i];
    if (regex.test(inp.id)) {
        var newLimit = inp.id.match(regex)[1];
        inp.maxLength = newLimit;
}        
}
});
</script>
However, as Mark said below, it doesn't affect the change options pop-up box in the cart.

Any ideas?

Edit: The Product HTML code options are not limited by this code, but can be with this:

Code:
<script>var regex = new RegExp("max_(\\d+)_characters");
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
    var inp = inputs[i];
    if (regex.test(inp.id)) {
        var newLimit = inp.id.match(regex)[1];
        inp.maxLength = newLimit;
    }        
    }</script>
I put both codes in the footer section of the site tracking codes.

Now, just the cart pop-up to go!

Last edited by gewgawgiftstore.co.uk; 05-20-2013 at 08:06 PM. Reason: Extra info
  #7  
Old 06-02-2013, 08:06 PM
gewgawgiftstore.co.uk's Avatar
gewgawgiftstore.co.uk gewgawgiftstore.co.uk is offline
Junior Member
 
Join Date: Feb 2012
Posts: 11
Default

I've been trying to get this working in the cart change option pop-up, but can't work it out. There must be a simple way to implement this, with a slight change to the code. Any help very appreciated.
  #8  
Old 06-03-2013, 01:51 PM
Eugene Rimmer's Avatar
Eugene Rimmer Eugene Rimmer is offline
Senior Member
 
Join Date: Jan 2011
Location: Ecwid headquarters
Posts: 7,765
Default

Quote:
Originally Posted by gewgawgiftstore.co.uk View Post
I've been trying to get this working in the cart change option pop-up, but can't work it out. There must be a simple way to implement this, with a slight change to the code. Any help very appreciated.
If there was such a way, we would already suggest it. Unfortunately there is no any event triggered when that popup layer appears, so the script has nothing to react to.
  #9  
Old 06-03-2013, 04:55 PM
gewgawgiftstore.co.uk's Avatar
gewgawgiftstore.co.uk gewgawgiftstore.co.uk is offline
Junior Member
 
Join Date: Feb 2012
Posts: 11
Default Set Maxlength of Cart Change Options Pop-up

Hi Eugene, thanks for your answer. I'm a little confused though. I asked the guys at Qualiteam for a quote to carry out the work, but didn't go through with it because I'd managed to get 2/3 of it done myself.

However in the spec they stated that:
"The script should be triggered on the products details and cart (on 'change options' popup) pages. "
If they thought they could implement it, it must be possible! I know it's a bit cheeky, but could you ask them what they were intending to implement?

Thank you,

Chris
  #10  
Old 06-07-2013, 10:12 AM
gewgawgiftstore.co.uk's Avatar
gewgawgiftstore.co.uk gewgawgiftstore.co.uk is offline
Junior Member
 
Join Date: Feb 2012
Posts: 11
Talking Fixed: Alter Text Field Maxlength to Limit User's Input

Many, many, many thanks to ExpertSystem on Stack Overflow for his help with this and Ecwid Support for pointing me in the right direction (tested on IE10, firefox 21, chrome 27).

The code below is for people using Yola and Ecwid together, but I guess the original code may work for people using other sitebuilders. It limits the number of characters a user can enter into input fields, in Ecwid, by checking for a number in the input field's title (in this case the value between 'max' and 'characters') and replacing that as the field's maxLength value. It limits fields in the product browser, in the html widgets and in the cart pop-up.

Here it is:

Go to Yola's Custom Site Tracking Code section. In the 'Footer Code' column (actually placed at the bottom of the 'body'), place this code:

Code:
<script>
    Ecwid.OnPageLoaded.add(function(page){
    var regex = new RegExp("max_(\\d+)_characters");
    var inputs = document.getElementsByTagName("input");
    for (var i = 0; i < inputs.length; i++) {
        var inp = inputs[i];
        if (regex.test(inp.id)) {
            var newLimit = inp.id.match(regex)[1];
            inp.maxLength = newLimit;
    }        
    }
    });
    </script>

    <script>
    var regex = new RegExp("max_(\\d+)_characters");
    function fixMaxLength(container) {
        var inputs = container.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            var inp = inputs[i];
            if (regex.test(inp.id)) {
                var newLimit = inp.id.match(regex)[1];
                inp.maxLength = newLimit;
            }
        }
    };
    </script>
and this into the 'Header Code' column:

Code:
<script>
    document.addEventListener("DOMNodeInserted", function() {
        var popups = document.getElementsByClassName("popupContent");
        for (var i = 0; i < popups.length; i++) {
            fixMaxLength(popups[i]);
        }
    });
    </script>
That's it! You're good to go.
The Following 2 Users Say Thank You to gewgawgiftstore.co.uk For This Useful Post:
Brady McCain1 (06-30-2013), Matt Ecwid (06-07-2013)
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
change max field size, limit inputbox characters

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 10:43 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.