2

Is there a way to limit the characters that can be entered in Magento Admin Panel while adding a new product? Please see the image below to understand the issue clearly. Also, provide a hint (doesn't have to exactly be like below, could be a js alert or anything) as long as it limits the user to enter furthermore characters?

enter image description here

2

I would use prototype.js for this, since you already have access to the library in the back end.

An alternative:

Something like this would work, just get the script added in the admin product pages and point to the field you're wanting to count:

/* Counter Script
 * Requires Prototype Library
 * By: <stuff@milkfarmproductions.com>
 * http://milkfarmproductions.com
 * This work is licensed under the Creative Commons Attribution-Share Alike 3.0
 * http://creativecommons.org/licenses/by-sa/3.0/us/
 *
 * Requirements:
 * - A 'texter' input field, the field to be counted
 * - A 'counter' input field with class equal to 'countClass' variable, the field to contain the count
 * - Set id of 'counter' to <TEXTER_ID> + '_count'
 * - Set initial value of 'counter' input field to maximum allowable characters (integer) of 'texter'
 *
 * Recommendations:
 * - Set 'counter' input field to disabled
 *
 * Note:
 * - This script can handle multiple 'texter/counter' pairs on the same page
 * - 'truncate' variable controls whether or not 'texter' is truncated if 'max' is exceeded
 */

var countClass = 'text-count';
var truncate = false;

var Counter = Class.create({

    initialize: function(text_id, count_id, truncate) {
        if(!$(text_id)) throw("Attempted to initalize counter with text id: " + text_id + " which was not found.");
        if(!$(count_id)) throw("Attempted to initalize counter with count id: " + count_id + " which was not found.");
        this.texter = $(text_id);
        this.counter = $(count_id);
        this.max = this.counter.value;
        this.truncate = truncate;
        this.updateCounter();
        var keyHandler = this.keyHandler.bindAsEventListener(this);
        this.texter.observe('keyup', keyHandler);
        this.texter.observe('keydown', keyHandler);
    },

    updateCounter: function(el) {
      this.counter.value = this.max - this.texter.value.length;
    },

    truncateTexter: function(el) {
      this.texter.value = this.texter.value.substring(0, this.max);
    },

    keyHandler: function(e) {
      if (this.truncate && this.texter.value.length > this.max) {
        this.truncateTexter();
      } else {
        this.updateCounter();
      }
    }

});

document.observe("dom:loaded", function(){
  count_els = $$('input.' + countClass);
  for (var i = 0; i < count_els.length; i++) {
    var count_id = count_els[i].id;
    var text_id = count_id.replace(/_count$/, '');
    new Counter(text_id, count_id, truncate);
  }
})

Normally you would add it via a Layout handler

<adminhtml_catalog_product_edit>
    <reference name="head">
        <action method="addJs"><script>your_js_file.js</script></action>
    </reference>
</adminhtml_catalog_product_edit>
  • 1
    Hey Boomer, thanks for your answer. +1 for this. Look below. You put same answer twice. Remove the below one :) – Rajeev K Tomy Sep 22 '15 at 1:43
  • 1
    @B00MER This looks very promising. But, I have a question - Where exactly would I put the script and how :( – Navik Goswami Sep 22 '15 at 21:12
  • @NavikGoswami see addition to answer. – B00MER Sep 23 '15 at 2:47
1

You can try creating a custom extension using below code.

app/code/local/Custom/CharacterCount/etc/config.xml

<?xml version="1.0" encoding="UTF-8"?>

<config>
    <modules>
        <Custom_CharacterCount>
            <version>1.0.0</version>
        </Custom_CharacterCount>
    </modules>
    <global>
    <models>
            <characterCount>
                <class>Custom_CharacterCount_Model</class>
                <resourceModel>characterCount_mysql4</resourceModel>
            </characterCount>
            <characterCount_mysql4>
                <class>Custom_CharacterCount_Model_Mysql4</class>
            </characterCount_mysql4>
        </models>
        <resources>
            <characterCount_setup>
                <setup>
                    <module>Custom_CharacterCount</module>
            <class>Mage_Catalog_Model_Resource_Setup</class>
                </setup>
        <connection>
                    <use>core_setup</use>
                </connection>
            </characterCount_setup>
        <characterCount_write>
                <connection>
                    <use>core_write</use>
                </connection>
            </characterCount_write>
            <characterCount_read>
                <connection>
                    <use>core_read</use>
                </connection>
            </characterCount_read>
        </resources>
    </global>
    <adminhtml>
        <layout>
        <updates>
            <characterCount>
                <file>characterCount.xml</file>
            </characterCount>
        </updates>
        </layout>
    </adminhtml>
</config>

app/code/local/Custom/CharacterCount/sql/characterCount_setup/mysql4-install-1.0.0.php

<?php
$installer = $this;
$installer->startSetup();

$this->updateAttribute(
    Mage_Catalog_Model_Product::ENTITY,
    'name',
    array(
        'frontend_class' => 'validate-length maximum-length-80'
    )
);

$installer->endSetup();

app/code/local/Custom/CharacterCount/Model/Mysql4/CharacterCount.php

<?php

class Custom_CharacterCount_Model_Mysql4_CharacterCount extends Mage_Core_Model_Mysql4_Abstract {

}

app/design/adminhtml/default/default/layout/characterCount.xml

<?xml version="1.0"?>
<layout>
    <adminhtml_catalog_product_edit>
        <reference name="head">
        <action method="addJs"><script>characterCount.js</script></action>
        </reference>
    </adminhtml_catalog_product_edit>
    <adminhtml_catalog_product_new>
        <reference name="head">
        <action method="addJs"><script>characterCount.js</script></action>
        </reference>
    </adminhtml_catalog_product_new>
</layout>

js/characterCount.js

Event.observe(window, 'load', function() {

    Element.insert( $('name'), { 
        'after': "<div id='name_counter'>Character Left: <span id='name_counter_num'>"+(80-$('name').getValue().length)+"</span></div>"
    });

    Event.observe('name', 'keyup', function(event) {  
        $counter = 80-$('name').getValue().length;
        $("name_counter_num").update($counter);
    });

    $("name_counter").setStyle({ color: 'red' });

    document.getElementById("name").setAttribute("maxlength", "80");
    document.getElementById("name").setAttribute("length", "80");

});

app/etc/modules/Custom_CharacterCount.xml

<?xml version="1.0"?>

<config>
    <modules>
        <Custom_CharacterCount>
            <active>true</active>
            <codePool>local</codePool>
        </Custom_CharacterCount>
    </modules>
</config>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.