В редактировании товара добавлены счётчики на длину вводимых полей

- Для добавления счётчика к другим полям можно использовать параметр с указанием длины: data-length="255"
OpenCart-Club · Aug 25, 2022 · 1de8186 · 1de8186
1 parent 4097e4e
commit 1de8186
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 9 deletions.
diff --git a/upload/admin/controller/catalog/product.php b/upload/admin/controller/catalog/product.php
@@ -1067,7 +1067,7 @@ protected function validateForm() {
 			}
 		}
 
-		if ((utf8_strlen($this->request->post['model']) < 1) || (utf8_strlen($this->request->post['model']) > 64)) {
+		if ((utf8_strlen($this->request->post['model']) < 1) || (utf8_strlen($this->request->post['model']) > 255)) {
 			$this->error['model'] = $this->language->get('error_model');
 		}
 

diff --git a/upload/admin/view/template/catalog/product_form.twig b/upload/admin/view/template/catalog/product_form.twig
@@ -50,7 +50,7 @@
                     <div class="form-group required">
                       <label class="col-sm-2 control-label" for="input-name{{ language.language_id }}">{{ entry_name }}</label>
                       <div class="col-sm-10">
-                        <input type="text" name="product_description[{{ language.language_id }}][name]" value="{{ product_description[language.language_id] ? product_description[language.language_id].name }}" placeholder="{{ entry_name }}" id="input-name{{ language.language_id }}" class="form-control"/>
+                        <input type="text" name="product_description[{{ language.language_id }}][name]" value="{{ product_description[language.language_id] ? product_description[language.language_id].name }}" placeholder="{{ entry_name }}" id="input-name{{ language.language_id }}" class="form-control" data-length="255" />
                         {% if error_name[language.language_id] %}
                           <div class="text-danger">{{ error_name[language.language_id] }}</div>
                         {% endif %}
@@ -59,13 +59,13 @@
                     <div class="form-group">
                       <label class="col-sm-2 control-label" for="input-meta-h1-{{ language.language_id }}">{{ entry_meta_h1 }}</label>
                       <div class="col-sm-10">
-                        <input type="text" name="product_description[{{ language.language_id }}][meta_h1]" value="{{ product_description[language.language_id] ? product_description[language.language_id].meta_h1 }}" placeholder="{{ entry_meta_h1 }}" id="input-meta-h1-{{ language.language_id }}" class="form-control" />
+                        <input type="text" name="product_description[{{ language.language_id }}][meta_h1]" value="{{ product_description[language.language_id] ? product_description[language.language_id].meta_h1 }}" placeholder="{{ entry_meta_h1 }}" id="input-meta-h1-{{ language.language_id }}" class="form-control" data-length="255" />
                       </div>
                     </div>
                     <div class="form-group required">
                       <label class="col-sm-2 control-label" for="input-meta-title{{ language.language_id }}">{{ entry_meta_title }}</label>
                       <div class="col-sm-10">
-                        <input type="text" name="product_description[{{ language.language_id }}][meta_title]" value="{{ product_description[language.language_id] ? product_description[language.language_id].meta_title }}" placeholder="{{ entry_meta_title }}" id="input-meta-title{{ language.language_id }}" class="form-control"/>
+                        <input type="text" name="product_description[{{ language.language_id }}][meta_title]" value="{{ product_description[language.language_id] ? product_description[language.language_id].meta_title }}" placeholder="{{ entry_meta_title }}" id="input-meta-title{{ language.language_id }}" class="form-control" data-length="255" />
                         {% if error_meta_title[language.language_id] %}
                           <div class="text-danger">{{ error_meta_title[language.language_id] }}</div>
                         {% endif %}
@@ -80,13 +80,13 @@
                     <div class="form-group">
                       <label class="col-sm-2 control-label" for="input-meta-description{{ language.language_id }}">{{ entry_meta_description }}</label>
                       <div class="col-sm-10">
-                        <textarea name="product_description[{{ language.language_id }}][meta_description]" rows="5" placeholder="{{ entry_meta_description }}" id="input-meta-description{{ language.language_id }}" class="form-control">{{ product_description[language.language_id] ? product_description[language.language_id].meta_description }}</textarea>
+                        <textarea name="product_description[{{ language.language_id }}][meta_description]" rows="5" placeholder="{{ entry_meta_description }}" id="input-meta-description{{ language.language_id }}" class="form-control" data-length="255">{{ product_description[language.language_id] ? product_description[language.language_id].meta_description }}</textarea>
                       </div>
                     </div>
                     <div class="form-group">
                       <label class="col-sm-2 control-label" for="input-meta-keyword{{ language.language_id }}">{{ entry_meta_keyword }}</label>
                       <div class="col-sm-10">
-                        <textarea name="product_description[{{ language.language_id }}][meta_keyword]" rows="5" placeholder="{{ entry_meta_keyword }}" id="input-meta-keyword{{ language.language_id }}" class="form-control">{{ product_description[language.language_id] ? product_description[language.language_id].meta_keyword }}</textarea>
+                        <textarea name="product_description[{{ language.language_id }}][meta_keyword]" rows="5" placeholder="{{ entry_meta_keyword }}" id="input-meta-keyword{{ language.language_id }}" class="form-control" data-length="255">{{ product_description[language.language_id] ? product_description[language.language_id].meta_keyword }}</textarea>
                       </div>
                     </div>
                     <div class="form-group">
@@ -102,7 +102,7 @@
               <div class="form-group required">
                 <label class="col-sm-2 control-label" for="input-model">{{ entry_model }}</label>
                 <div class="col-sm-10">
-                  <input type="text" name="model" value="{{ model }}" placeholder="{{ entry_model }}" id="input-model" class="form-control"/>
+                  <input type="text" name="model" value="{{ model }}" placeholder="{{ entry_model }}" id="input-model" class="form-control" data-length="255" />
                   {% if error_model %}
                     <div class="text-danger">{{ error_model }}</div>
                   {% endif %}</div>

diff --git a/upload/admin/view/template/common/footer.twig b/upload/admin/view/template/common/footer.twig
@@ -22,8 +22,39 @@ $('#button-developer, #header-developer').on('click', function() {
 		error: function(xhr, ajaxOptions, thrownError) {
 			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
 		}
-	});	
-});	
+	});
+});
+
+$(document).ready(function(){
+	$('.form-group input[type="text"][data-length], .form-group textarea[data-length]').each(function(){
+		let $input = $(this), len = $input.data('length'), $group = $input.closest('.form-group');
+		
+		if (len < 1) {
+			return;
+		}
+		
+		$input.wrap('<div class="input-group"></div>').after('<span class="input-group-addon">' + $input.val().length + ' / ' + len + '</span>');
+		
+		if ($input.val().length > len) {
+			$group.addClass('has-error');
+		}
+		
+		(function($input, $group, len){
+			let $value = $input.next();
+			
+			$input.on('input',function(){
+				$value.html($input.val().length + ' / ' + len);
+				
+				if ($input.val().length > len || ($input.val().length == 0 && $group.hasClass('required'))) {
+					$group.addClass('has-error');
+				} else {
+					$group.removeClass('has-error');
+				}
+			});
+		})($input, $group, len);
+	});
+});
+
 </script> 
 {% endif %}
 </body></html>