Moushe.ru

Подсказки для опций товаров в CMS OpenCart 4.1 (1 часть)

OpenCart

Всем привет, недавно меня попросили сделать на одном сайте подсказки для опций товаров, в принципе полезная вещь для покупателей, а раз полезно — значит делаем. Как обычно используем CMS OpenCart 4.1. Русская сборка.

1. Заходим на ваш хостинг — переходим к работе с базой данных (MySQL) — PhpMyAdmin, нажимаем кнопку SQL и вставляем вот такой запрос:

ALTER TABLE `oc_option_description` ADD `help` VARCHAR(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL AFTER `name`;

Нажимаем кнопку вперёд.

P.S. — Мы создали новое поле в БД для вставки подсказок нашему контент менеджеру — при большом количестве товаров список опций сильно увеличивается, а так как у опций нет групп (как у характеристик), то подсказки будет полезна.

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

ALTER TABLE `oc_option_description` ADD `tooltip` TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NOT NULL AFTER `help`;

Вновь нажимаем кнопку вперёд.

P.S. — Конечно можно было запросы сразу объединить в один, но я показываю для чего нужен каждый запрос. 🙂

2. Откроем файл: ../public_html/admin/view/template/catalog/option_list.twig и после этой строки:

<th><a href="{{ sort_name }}"{% if sort == 'od.name' %} class="{{ order|lower }}"{% endif %}>{{ column_name }}</a></th>

вставим эту:

<th>{{ column_help }}</th>

а после этой строки:

<td>{{ option.name }}</td>

вставим эту:

<td>{{ option.help }}</td>

Подсказка будет отображаться после названия опции, если хотите сделать подсказку после сортировки то просто вставьте наш код после этих строк:

<th class="text-end"><a href="{{ sort_sort_order }}"{% if sort == 'o.sort_order' %} class="{{ order|lower }}"{% endif %}>{{ column_sort_order }}</a></th>
<td class="text-end">{{ option.sort_order }}</td>

3. Откроем файл: ../public_html/admin/view/template/catalog/option_form.twig и после этих строк:

<div class="row mb-3 required">
  <label class="col-sm-2 col-form-label">{{ entry_name }}</label>
  <div class="col-sm-10">
    {% for language in languages %}
      <div class="input-group">
        <div class="input-group-text"><img src="{{ language.image }}" title="{{ language.name }}"/></div>
        <input type="text" name="option_description[{{ language.language_id }}][name]" value="{{ option_description[language.language_id] ? option_description[language.language_id].name }}" placeholder="{{ entry_name }}" id="input-name-{{ language.language_id }}" class="form-control"/>
      </div>
      <div id="error-name-{{ language.language_id }}" class="invalid-feedback"></div>
    {% endfor %}
  </div>
</div>

вставим эти:

<!-- help & tooltip -->          
<div class="row mb-3">
  <label class="col-sm-2 col-form-label">{{ entry_help }}</label>
  <div class="col-sm-10">
    {% for language in languages %}
      <div class="input-group">
        <div class="input-group-text"><img src="{{ language.image }}" title="{{ language.name }}"/></div>
        <input type="text" name="option_description[{{ language.language_id }}][help]" value="{{ option_description[language.language_id] ? option_description[language.language_id].help }}" placeholder="{{ entry_help }}" id="input-name-{{ language.language_id }}" class="form-control"/>
      </div>
      <div id="error-name-{{ language.language_id }}" class="invalid-feedback"></div>
    {% endfor %}
  </div>
</div>
<div class="row mb-3">
  <label class="col-sm-2 col-form-label">{{ entry_tooltip }}</label>
  <div class="col-sm-10">
    {% for language in languages %}
      <div class="input-group">
        <div class="input-group-text"><img src="{{ language.image }}" title="{{ language.name }}"/></div>
        <input type="text" name="option_description[{{ language.language_id }}][tooltip]" value="{{ option_description[language.language_id] ? option_description[language.language_id].tooltip }}" placeholder="{{ entry_tooltip }}" id="input-name-{{ language.language_id }}" class="form-control"/>
      </div>
      <div id="error-name-{{ language.language_id }}" class="invalid-feedback"></div>
    {% endfor %}
  </div>
</div>
<!-- end help & tooltip -->

4. Откроем файл: ../public_html/admin/language/ru-ru/catalog/option.php и после этой строки:

$_['column_sort_order']  = 'Порядок сортировки';

вставим эту:

$_['column_help']        = 'Подсказка';

а после этой строки:

$_['entry_name']         = 'Название опции';

вставим эти:

$_['entry_help']         = 'Подсказка в админке';
$_['entry_tooltip']      = 'Всплывающая подсказка';

P.S. — Можете обозвать эти пункты как угодно, главное чтобы вам было понятно и удобно.

5. Откроем файл: ../public_html/admin/language/en-gb/catalog/option.php и после этой строки:

$_['column_sort_order']  = 'Sort Order';

вставим эту:

$_['column_help']        = 'Help';

а после этой:

$_['entry_name']         = 'Option Name';

вставим эти:

$_['entry_help']         = 'Help Admin-panel';
$_['entry_tooltip']      = 'Tooltip';

P.S. — Перевод можете изменить на свой.

6. Откроем файл: ../public_html/admin/model/catalog/option.php и вместо этих строк:

public function addDescription(int $option_id, int $language_id, array $data): void {
    $this->db->query("INSERT INTO `" . DB_PREFIX . "option_description` SET `option_id` = '" . (int)$option_id . "', `language_id` = '" . (int)$language_id . "', `name` = '" . $this->db->escape($data['name']) . "'");
}

вставим эти:

public function addDescription(int $option_id, int $language_id, array $data): void {
    $this->db->query("INSERT INTO `" . DB_PREFIX . "option_description` SET `option_id` = '" . (int)$option_id . "', `language_id` = '" . (int)$language_id . "', `name` = '" . $this->db->escape($data['name']) . "', `help` = '" . $this->db->escape($data['help']) . "', `tooltip` = '" . $this->db->escape($data['tooltip']) . "'");
}

P.S. — Это необходимо для занесения в базу данных заполненной в админке информации (подсказки для менеджера и всплывающей подсказки для покупателей). Заполняйте в админке нужные опции и проверяйте работу наших новых полей:

Отлично, в админке всё работает как положено, теперь осталось вывести подсказку на витрину нашего магазина.

7. Откроем файл: ../public_html/catalog/view/template/product/product.twig и вместо этой строки:

<label class="form-label">{{ option.name }}</label>

вставим эти:

<label class="form-label">
    {{ option.name }}
    {% if option.tooltip %}
    <span class="option-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ option.tooltip }}"><i class="fa-solid fa-circle-exclamation"></i></span>
    {% endif %}
</label>

вместо этой строки:

<label class="form-label">{{ option.name }}</label>

вставим эти:

<label class="form-label">
    {{ option.name }}
    {% if option.tooltip %}
    <span class="option-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ option.tooltip }}"><i class="fa-solid fa-circle-exclamation"></i></span>
    {% endif %}
</label>

вместо этой строки:

<label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label>

вставим эти:

<label for="input-option-{{ option.product_option_id }}" class="form-label">
    {{ option.name }}
    {% if option.tooltip %}
    <span class="option-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ option.tooltip }}"><i class="fa-solid fa-circle-exclamation"></i></span>
    {% endif %}
</label>

вместо этой строки:

<label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control"/>

вставим эти:

<label for="input-option-{{ option.product_option_id }}" class="form-label">
    {{ option.name }}
    {% if option.tooltip %}
    <span class="option-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ option.tooltip }}"><i class="fa-solid fa-circle-exclamation"></i></span>
    {% endif %}
</label>

вместо этой строки:

<label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label> <textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>

вставим эти:

<label for="input-option-{{ option.product_option_id }}" class="form-label">
    {{ option.name }}
    {% if option.tooltip %}
    <span class="option-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ option.tooltip }}"><i class="fa-solid fa-circle-exclamation"></i></span>
    {% endif %}
</label>
<textarea name="option[{{ option.product_option_id }}]" rows="5" placeholder="{{ option.name }}" id="input-option-{{ option.product_option_id }}" class="form-control">{{ option.value }}</textarea>

вместо этой строки:

<label for="button-upload-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label>

вставим эти:

<label for="button-upload-{{ option.product_option_id }}" class="form-label">
    {{ option.name }}
    {% if option.tooltip %}
    <span class="option-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ option.tooltip }}"><i class="fa-solid fa-circle-exclamation"></i></span>
    {% endif %}
</label>

вместо этой строки:

<label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label>

вставим эти:

<label for="input-option-{{ option.product_option_id }}" class="form-label">
    {{ option.name }}
    {% if option.tooltip %}
    <span class="option-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ option.tooltip }}"><i class="fa-solid fa-circle-exclamation"></i></span>
    {% endif %}
</label>

вместо этой строки:

<label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label>

вставим эти:

<label for="input-option-{{ option.product_option_id }}" class="form-label">
    {{ option.name }}
    {% if option.tooltip %}
    <span class="option-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ option.tooltip }}"><i class="fa-solid fa-circle-exclamation"></i></span>
    {% endif %}
</label>

вместо этой строки:

<label for="input-option-{{ option.product_option_id }}" class="form-label">{{ option.name }}</label>

вставим эти:

<label for="input-option-{{ option.product_option_id }}" class="form-label">
    {{ option.name }}
    {% if option.tooltip %}
    <span class="option-tooltip" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="{{ option.tooltip }}"><i class="fa-solid fa-circle-exclamation"></i></span>
    {% endif %}
</label>

Конечно не все использую опции: текст, текстовая область, файл, дата, время, дата и время, но мы всё равно встроили для них всплывающую подсказку, мало ли вдруг понадобится.

Смотрим результат:

Неплохо, если у всплывающей подсказки в админке заполнен текст — отображается кружок с восклицательным знаком, а при наведении на него курсором мыши появляется подсказка, если же у всплывающей подсказки не заполнен текст то кружок не появляется.

Вместо этой иконки вы можете использовать любую другую или прописать любую картинку — если будут вопросы задавайте, подскажу.

Давайте немного увеличим нашу иконку и перекрасим её в красный цвет?

8. Открываем файл: ../public_html/catalog/view/stylesheet/stylesheet.css и в конец файла вставляем эти строки:

.option-tooltip {
    font-size: 14px;
    color: #ff0000;
}

Демонстрационный сайт: demo.moushe.ru (демо сайт обновляется вместе с выходом новых статей).

На этом всё, встретимся в следующей статье.

теги:
0

Обрати внимание:

Оставить комментарий

Этот сайт защищен reCAPTCHA и применяются Политика конфиденциальности и Условия обслуживания.

Срок проверки reCAPTCHA истек. Перезагрузите страницу.

Навигация