Показ опцій в списку товарів Opencart 3

В стандартній версії Opencart 3 в категоріях (списку товарів) у самій картці товарів відсутня можливість показу додаткових опцій товару без заходу в саму картку товару. При внесенні деяких змін інформативність сайту без додаткових кліків відразу зросте, користувачі матимуть можливість набагато швидше ознайомлюватись із доступною інформацією про товар відразу із категорії.

Такі правки в файлах можна зробити самостійно, без особливих труднощів. Для цього, в файлі 

catalog/controller/product/category.php

шукаємо

$data['products'][] = array(

та замінюємо на:

 $options = array();
foreach ($this->model_catalog_product->getProductOptions($result['product_id']) as $option) {
    if($option['required']){
        $product_option_value_data = array();
        foreach ($option['product_option_value'] as $option_value) {
            if (!$option_value['subtract'] || ($option_value['quantity'] > 0)) {
                $product_option_value_data[] = array(
                    'product_option_value_id' => $option_value['product_option_value_id'],
                    'option_value_id'         => $option_value['option_value_id'],
                    'name'                    => $option_value['name'],
                    'image'                   => $this->model_tool_image->resize($option_value['image'], 50, 50),
                    'price_prefix'            => $option_value['price_prefix']
                );
            }
        }
        $options[] = array(
            'product_option_id'    => $option['product_option_id'],
            'product_option_value' => $product_option_value_data,
            'option_id'            => $option['option_id'],
            'name'                 => $option['name'],
            'type'                 => $option['type'],
            'value'                => $option['value'],
            'required'             => $option['required']
        );
    }
}
$data['products'][] = array(
'options' => $options,

після цого  в файлі 

catalog/view/theme/default/template/product/category.twig

шукаємо 

{% if product.rating %}

і після цього додаємо

 {% if product.options %}
<hr>
<h3>{{ text_option }}</h3>
{% for option in product.options %}
{% if option.type == 'select' %}
<div class="form-group{% if option.required %} required {% endif %}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
  <select name="option[{{ option.product_option_id }}]" id="input-option{{ option.product_option_id }}" class="form-control">
    <option value="">{{ text_select }}</option>
    {% for option_value in option.product_option_value %}
    <option value="{{ option_value.product_option_value_id }}">{{ option_value.name }}
    {% if option_value.price %}
    ({{ option_value.price_prefix }}{{ option_value.price }})
    {% endif %} </option>
    {% endfor %}
  </select>
</div>
{% endif %}
{% if option.type == 'radio' %}
<div class="form-group{% if option.required %} required {% endif %}">
  <label class="control-label">{{ option.name }}</label>
  <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
    <div class="radio">
      <label>
        <input type="radio" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
        {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}                  
        {{ option_value.name }}
        {% if option_value.price %}
        ({{ option_value.price_prefix }}{{ option_value.price }})
        {% endif %} </label>
    </div>
    {% endfor %} </div>
</div>
{% endif %}
{% if option.type == 'checkbox' %}
<div class="form-group{% if option.required %} required {% endif %}">
  <label class="control-label">{{ option.name }}</label>
  <div id="input-option{{ option.product_option_id }}"> {% for option_value in option.product_option_value %}
    <div class="checkbox">
      <label>
        <input type="checkbox" name="option[{{ option.product_option_id }}][]" value="{{ option_value.product_option_value_id }}" />
        {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail" /> {% endif %}
        {{ option_value.name }}
        {% if option_value.price %}
        ({{ option_value.price_prefix }}{{ option_value.price }})
        {% endif %} </label>
    </div>
    {% endfor %} </div>
</div>
{% endif %}
{% if option.type == 'text' %}
<div class="form-group{% if option.required %} required {% endif %}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ 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" />
</div>
{% endif %}
{% if option.type == 'textarea' %}
<div class="form-group{% if option.required %} required {% endif %}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ 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>
</div>
{% endif %}
{% if option.type == 'file' %}
<div class="form-group{% if option.required %} required {% endif %}">
  <label class="control-label">{{ option.name }}</label>
  <button type="button" id="button-upload{{ option.product_option_id }}" data-loading-text="{{ text_loading }}" class="btn btn-default btn-block"><i class="fa fa-upload"></i> {{ button_upload }}</button>
  <input type="hidden" name="option[{{ option.product_option_id }}]" value="" id="input-option{{ option.product_option_id }}" />
</div>
{% endif %}
{% if option.type == 'date' %}
<div class="form-group{% if option.required %} required {% endif %}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
  <div class="input-group date">
    <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD" id="input-option{{ option.product_option_id }}" class="form-control" />
    <span class="input-group-btn">
    <button class="btn btn-default" type="button"><i class="fa fa-calendar"></i></button>
    </span></div>
</div>
{% endif %}
{% if option.type == 'datetime' %}
<div class="form-group{% if option.required %} required {% endif %}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
  <div class="input-group datetime">
    <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="YYYY-MM-DD HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
    <span class="input-group-btn">
    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
    </span></div>
</div>
{% endif %}
{% if option.type == 'time' %}
<div class="form-group{% if option.required %} required {% endif %}">
  <label class="control-label" for="input-option{{ option.product_option_id }}">{{ option.name }}</label>
  <div class="input-group time">
    <input type="text" name="option[{{ option.product_option_id }}]" value="{{ option.value }}" data-date-format="HH:mm" id="input-option{{ option.product_option_id }}" class="form-control" />
    <span class="input-group-btn">
    <button type="button" class="btn btn-default"><i class="fa fa-calendar"></i></button>
    </span></div>
</div>
{% endif %}
{% endfor %}
{% endif %}

Зберігаємо зміни і насолоджуємось результатом. 

Дані правки для дефолтного шаблону, на всіх інших роботоздатність по такій схемі не гарантована.

Кому лінь робити правки в коді може придбати  модифікатор на нашому сайті.