// Add count down to text input

admin-dev/themes/default/template/controllers/products/input_text_lang.tpl

@@ -25,26 +25,50 @@
 
 {foreach from=$languages item=language}
 	<div class="input-group col-lg-12 translatable-field lang-{$language.id_lang}">
-		<input type="text"
+
-		id="{$input_name}_{$language.id_lang}" 
+			{if isset($maxlength)}
-		{if isset($input_class)}class="{$input_class}"{/if}
+			<span id="{$input_name}_{$language.id_lang}_counter" class="input-group-addon"><span class="text-count-down">{$maxlength}</span></span>
-		name="{$input_name}_{$language.id_lang}"
+			{/if}
-		value="{$input_value[$language.id_lang]|htmlentitiesUTF8|default:''}"
+			<input type="text"
-		onkeyup="if (isArrowKey(event)) return ;updateFriendlyURL();" onblur="updateLinkRewrite();">
+			id="{$input_name}_{$language.id_lang}"
-		<div class="input-group-btn">
+			{if isset($input_class)}class="{$input_class}"{/if}
-			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+			name="{$input_name}_{$language.id_lang}"
-				<img src="{$base_url}/img/l/{$language.id_lang|intval}.jpg" alt="">
+			value="{$input_value[$language.id_lang]|htmlentitiesUTF8|default:''}"
-				{$language.iso_code}
+			onkeyup="if (isArrowKey(event)) return ;updateFriendlyURL();"
-				<span class="caret"></span>
+			onblur="updateLinkRewrite();"
-			</button>
+			{if isset($maxlength)}maxlength="{$maxlength}"{/if}>
-			<ul class="dropdown-menu">
+			<div class="input-group-btn">
-				{foreach from=$languages item=language}
+				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-				<li>
+					<img src="{$base_url}/img/l/{$language.id_lang|intval}.jpg" alt="">
-					<a href="javascript:hideOtherLanguage({$language.id_lang});"><img src="{$base_url}/img/l/{$language.id_lang|intval}.jpg" alt=""> {$language.name}</a>
+					{$language.iso_code}
-				</li>
+					<span class="caret"></span>
-				{/foreach}
+				</button>
-			</ul>
+				<ul class="dropdown-menu">
-		</div>
+					{foreach from=$languages item=language}
+					<li>
+						<a href="javascript:hideOtherLanguage({$language.id_lang});"><img src="{$base_url}/img/l/{$language.id_lang|intval}.jpg" alt=""> {$language.name}</a>
+					</li>
+					{/foreach}
+				</ul>
+			</div>
+
 	</div>
 {/foreach}
+{if isset($maxlength)}
+<script type="text/javascript">
+function countDown($source, $target) {
+	var max = $source.attr("maxlength");
+	$target.html(max-$source.val().length);
 
+	$source.keyup(function(){
+		$target.html(max-$source.val().length);
+	});
+}
+
+$(document).ready(function(){
+{foreach from=$languages item=language}
+	countDown($("#{$input_name}_{$language.id_lang}"), $("#{$input_name}_{$language.id_lang}_counter"));
+{/foreach}
+});
+</script>
+{/if}

admin-dev/themes/default/template/controllers/products/seo.tpl

@@ -41,7 +41,9 @@
 				{include file="controllers/products/input_text_lang.tpl"
 					languages=$languages
 					input_name='meta_title'
-					input_value=$product->meta_title}
+					input_value=$product->meta_title
+					maxlength=70
+				}
 			</div>
 		</div>
 	</div>
@@ -60,6 +62,7 @@
 				languages=$languages
 				input_name='meta_description'
 				input_value=$product->meta_description
+				maxlength=160
 			}
 			</div>
 		</div>

admin-dev/themes/default/template/helpers/form/form.tpl

@@ -104,6 +104,9 @@
 													</script>
 												{/literal}
 											{/if}
+											{if isset($input.maxlength)}
+											<span id="{if isset($input.id)}{$input.id}_{$language.id_lang}{else}{$input.name}_{$language.id_lang}{/if}_counter" class="input-group-addon"><span class="text-count-down">{$input.maxlength}</span></span>
+											{/if}
 											<input type="text"
 												id="{if isset($input.id)}{$input.id}_{$language.id_lang}{else}{$input.name}_{$language.id_lang}{/if}"
 												name="{$input.name}_{$language.id_lang}"
@@ -129,6 +132,24 @@
 											</div>
 										</div>
 									{/foreach}
+									{if isset($input.maxlength)}
+									<script type="text/javascript">
+									function countDown($source, $target) {
+										var max = $source.attr("maxlength");
+										$target.html(max-$source.val().length);
+
+										$source.keyup(function(){
+											$target.html(max-$source.val().length);
+										});
+									}
+
+									$(document).ready(function(){
+									{foreach from=$languages item=language}
+										countDown($("#{if isset($input.id)}{$input.id}_{$language.id_lang}{else}{$input.name}_{$language.id_lang}{/if}"), $("#{if isset($input.id)}{$input.id}_{$language.id_lang}{else}{$input.name}_{$language.id_lang}{/if}_counter"));
+									{/foreach}
+									});
+									</script>
+									{/if}
 									</div>
 									{else}
 										{if $input.type == 'tags'}
@@ -146,6 +167,9 @@
 											{/literal}
 										{/if}
 										{assign var='value_text' value=$fields_value[$input.name]}
+										{if isset($input.maxlength)}
+										<span id="{if isset($input.id)}{$input.id}{else}{$input.name}{/if}_counter" class="input-group-addon"><span class="text-count-down">{$input.maxlength}</span></span>
+										{/if}
 										<input type="text"
 											name="{$input.name}"
 											id="{if isset($input.id)}{$input.id}{else}{$input.name}{/if}"
@@ -171,6 +195,22 @@
 										{/if}
 										</div>
 										{/if}
+										{if isset($input.maxlength)}
+										<script type="text/javascript">
+										function countDown($source, $target) {
+											var max = $source.attr("maxlength");
+											$target.html(max-$source.val().length);
+
+											$source.keyup(function(){
+												$target.html(max-$source.val().length);
+											});
+										}
+
+										$(document).ready(function(){
+											countDown($("#{if isset($input.id)}{$input.id}{else}{$input.name}{/if}"), $("#{if isset($input.id)}{$input.id}{else}{$input.name}{/if}_counter"));
+										});
+										</script>
+										{/if}
 									{/if}
 								{elseif $input.type == 'select'}
 									{if isset($input.options.query) && !$input.options.query && isset($input.empty_message)}
@@ -292,6 +332,7 @@
 
 
 								{elseif $input.type == 'textarea'}
+									{assign var=use_textarea_autosize value=true}
 									{if isset($input.lang) AND $input.lang}
 									{foreach $languages as $language}
 									<div class="row translatable-field lang-{$language.id_lang}"  {if $language.id_lang != $defaultFormLanguage}style="display:none;"{/if}>
@@ -579,8 +620,9 @@
 					nextText: '',
 					dateFormat: 'yy-mm-dd'
 				});
-
+			{if isset($use_textarea_autosize)}
 			$(".textarea-autosize").autosize();
+			{/if}
 		});
 	{block name="script"}{/block}
 	</script>