Opencart 3 – Own settings fields in the admin panel. Display fields on the site.

0
3718

Sometimes on the site you need to display some additional data that is not in the admin panel. For example, add new phone numbers, add links to social networks, insert store hours in the right place, etc. You can set your own settings for this task. Let’s look at an example of adding our own custom field.

 

In file \admin\view\template\setting\setting.twig

in the right place we create a copy of the fax field, after

<div class="form-group">
<label class="col-sm-2 control-label" for="input-fax">{{ entry_fax }}</label>
<div class="col-sm-10">
  <input type="text" name="config_fax" value="{{ config_fax }}" placeholder="{{ entry_fax }}" id="input-fax" class="form-control" />
</div>
</div>

add own field:

<div class="form-group">
<label class="col-sm-2 control-label" for="input-val01">Новое поле</label>
<div class="col-sm-10">
  <input type="text" name="config_val01" value="{{ config_val01 }}" placeholder="Введите данные" id="input-val01" class="form-control" />
</div>
</div>

where name config_val01 – new variable, where the data will be stored.

Next in file \admin\controller\setting\setting.php

 

after

if (isset($this->request->post['config_fax'])) {
	$data['config_fax'] = $this->request->post['config_fax'];
} else {
	$data['config_fax'] = $this->config->get('config_fax');
}

add

if (isset($this->request->post['config_val01'])) {
	$data['config_val01'] = $this->request->post['config_val01'];
} else {
	$data['config_val01'] = $this->config->get('config_val01');
}

Next, in the mysql database, we make a request:

INSERT INTO `oc_setting` (`setting_id`, `store_id`, `code`, `key`, `value`, `serialized`) VALUES ('20477', '0', 'config', 'config_val01', '77777', '0');

where config_val01 – variable name, 77777 – test data, we’ll change them in the admin panel,

 

20477 – id settings fields in the admin panel, look at phpmyadmin table oc_settings, (1) – click double, sort from larger to smaller, look at the extreme id, as an example, before we added a new record, the extreme id was 20475, therefore, in the request we indicated 20477 (the main thing is that the number was greater than the extreme id, we could indicate both 20476 and 20478, 20479, etc.)

 

 

Go to the admin panel, update the modifiers and see new field:

 

 

This field can already be changed, edited and it is already saved in the database. It remains to display this field on the site.

 

In file \catalog\controller\common\header.php

after

$data['title'] = $this->document->getTitle();

add

$data['val01'] = $this->config->get('config_val01');

Next, in file \catalog\view\theme\your_theme\template\common\header.twig

insert in the right place

{{ val01 }}

if you need to insert a link to a phone number, use this entry so that when you link to the phone, crop characters: -, space, (,), etc.

<a href="tel:{{val01|replace({' ': "", "-" : "", ")" : "", "(" : ""})}} ">{{ val01 }}</a>

 

Update the modificators and see the result on the site.

 


 

In order for the new fields to be placed in a separate tab in the admin panel, do the following:

 

after

<li><a href="#tab-server" data-toggle="tab">{{ tab_server }}</a></li>

add

<li><a href="#tab-set" data-toggle="tab">Настройки</a></li>

further below, after the SERVER tab

<div class="tab-pane" id="tab-server">

...

</div>

insert new fields, I made 3 of them:

<div class="tab-pane" id="tab-set">
  <fieldset>
	<legend>Настройки магазина</legend>
	  <!-------------------------------------------------------------------------------->
	  <div class="form-group">
		<label class="col-sm-2 control-label" for="input-val01">Телефон A1</label>
		<div class="col-sm-10">
		  <input type="text" name="config_val01" value="{{ config_val01 }}" placeholder="Введите номер тел A1" id="input-val01" class="form-control" />
		</div>
	  </div>

	  <div class="form-group">
		<label class="col-sm-2 control-label" for="input-val02">Телефон MTS</label>
		<div class="col-sm-10">
		  <input type="text" name="config_val02" value="{{ config_val02 }}" placeholder="Введите номер тел MTS" id="input-val02" class="form-control" />
		</div>
	  </div>
	  <div class="form-group">
		<label class="col-sm-2 control-label" for="input-val03">E-mail в шапке сайта</label>
		<div class="col-sm-10">
		  <input type="text" name="config_val03" value="{{ config_val03 }}" placeholder="Введите emai для шапки сайта" id="input-val03" class="form-control" />
		</div>
	  </div>
	  <!-------------------------------------------------------------------------------->
  </fieldset>
</div>

We update modifiers and as a result we receive a new tab:

 

 


 

Addition:

 

Field with a text editor (textarea) + Radio buttons to enable / disable field output

 

as in the example above, add the name of the tab

<li><a href="#tab-set" data-toggle="tab">Настройки Магазина</a></li>

Next, after block <div class=”tab-pane” id=”tab-server”> … </div>

 

Paste the code:

<script src="/admin/view/javascript/tinymce.min.js"></script>

<div class="tab-pane" id="tab-set">
  <fieldset>
	<legend>My settings</legend>
	<!-------------------------------------------------------------------------------->
	<div class="form-group">
	  <label class="col-sm-2 control-label" for="input-val01">Warning</label>
	  <div class="col-sm-10">

		<div id="editor">
		  <textarea name="config_val01" rows="10" placeholder="Input text" id="input-val01" class="form-control">{{ config_val01 }}</textarea>
		</div>

	  </div>
	</div>
	<script>
	  tinymce.init({
		selector: '#input-val01'
	  });
	</script>

	<div class="form-group">
	  <label class="col-sm-2 control-label" for="input-val02">Enable warning</label>
	  <div class="col-sm-10">
		<label class="radio-inline"> {% if config_val02 %}
			<input type="radio" name="config_val02" value="1" checked="checked" />
			{{ text_yes }}
		  {% else %}
			<input type="radio" name="config_val02" value="1" />
			{{ text_yes }}
		  {% endif %} </label>
		<label class="radio-inline"> {% if not config_val02 %}
			<input type="radio" name="config_val02" value="0" checked="checked" />
			{{ text_no }}
		  {% else %}
			<input type="radio" name="config_val02" value="0" />
			{{ text_no }}
		  {% endif %} </label>
	  </div>
	</div>

	<!-------------------------------------------------------------------------------->
  </fieldset>
</div>

String <script src=”/admin/view/javascript/tinymce.min.js”></script> connects the text editor tinymce, you can download it at link.

(copy the entire contents of the archive to a folder /admin/view/javascript)

 

Further similarly as in the example above in the file\admin\controller\setting\setting.php insert the code

Next in files \catalog\controller\common\header.php and

\catalog\view\theme\your_theme\template\common\header.twig

 

As a result, we get such a block with settings

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here