Opencart 3 — Свои поля настроек в админке. Вывод полей на сайте.

Иногда на сайте нужно вывести некоторые дополнительные данные, которых нет в админ панели. Например, добавить новые номера телефона, добавить ссылки на соц сети, вставить в  нужном месте время работы магазина и т.д. Для этой задачи можно задать свои настройки. Разберем пример по добавлению собственного поля настройки.

 

В файле \admin\view\template\setting\setting.twig

в нужном месте создаем копию поля fax, после

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

вставляем свое поле:

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

где имя config_val01 — новая переменная, в которой будут хранится данные.

Далее в файле \admin\controller\setting\setting.php

 

после

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

вставляем

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

Далее в БД mysql делаем запрос:

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

где config_val01 — имя переменной, 77777 — тестовые данные, их затем изменим в админке,

 

20477 — id поля настроек в админке, смотрим в phpmyadmin таблицу oc_settings, (1) — кликаем 2 раза, сортируем от большего к меньшему, смотрим крайний id, на примере до того, как мы добавили новую запись, крайний id был 20475, поэтому в запросе мы указали 20477 (главное что бы число было больше крайнего id, мы могли бы указать как 20476, так и 20478, 20479 и т.д.)

 

 

Переходим в админку, обновляем модификаторы и видим новое поле:

 

 

Это поле уже можно изменять, редактировать и оно уже сохраняется в БД. Остается вывести это поле на сайте.

 

В файле \catalog\controller\common\header.php

после строки

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

вставляем

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

Далее, в файле \catalog\view\theme\your_theme\template\common\header.twig

в нужном месте вставляем

{{ val01 }}

если нужно вставить ссылку на номер телефона, используйте такую запись, что бы при ссылке на телефон обрезать символы : -, пробел, (, ) и т.д.

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

 

Обновляем модификаторы и видим результат на сайте.

 

---

 

Что бы в админке новые поля были размещены в отдельной вкладке, выполним следующее:

 

после

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

вставляем

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

далее ниже, после блока СЕРВЕР

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

...

</div>

вставляем новые поля, я их сделал 3 штуки:

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

Обновляем модификаторы и в итоге получаем новую вкладку:

 

 

---

 

Дополнение:

 

Поле с текстовым редактором (textarea) + Радио кнопки включения/отключения вывода поля

 

по примеру выше добавляем название вкладки

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

Далее после блока <div class=»tab-pane» id=»tab-server»> … </div>

 

Вставляем код:

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

<div class="tab-pane" id="tab-set">
  <fieldset>
	<legend>Настройки магазина</legend>
	<!-------------------------------------------------------------------------------->
	<div class="form-group">
	  <label class="col-sm-2 control-label" for="input-val01">Предупреждение</label>
	  <div class="col-sm-10">

		<div id="editor">
		  <textarea name="config_val01" rows="10" placeholder="Введите текст предупреждения" 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">Включить предупреждение</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>

Строка <script src=»/admin/view/javascript/tinymce.min.js»></script> подключает текстовый редактор tinymce, его скачать можно по ссылке.

(все содержимое архива скопировать в папку /admin/view/javascript)

 

Далее аналогично как в примере выше в файле \admin\controller\setting\setting.php вставляем код

Затем в файлах \catalog\controller\common\header.php и

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

 

В итоге получится такой блок с настройками