[hello235]

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.

[Maya]

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:

<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:

<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.

[Mark Button]

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!

[gewgawgiftstore.co.uk]

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

[Maya]

Originally Posted by gewgawgiftstore.co.uk

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

[gewgawgiftstore.co.uk]

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!).

<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:

<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!

[gewgawgiftstore.co.uk]

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.

[Eugene Rimmer]

Originally Posted by gewgawgiftstore.co.uk

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.

[gewgawgiftstore.co.uk]

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

[gewgawgiftstore.co.uk]

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:

<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:

<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.