Opencart — Выставляем Опции Товара В Ряд — Горизонтально

Тема в разделе "Шаблоны, дизайн и оформление магазина", создана пользователем admin, 17 июн 2016.

  1. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.141
    Симпатии:
    62.365
    Репутация:
    154
    Сегодня мы рассмотрим расположении опций — расположим опции в ряд — горизонтально.

    По умолчанию Opencart предоставляет опции вот в таком виде:

    vertical_options.jpg



    Мы же добьемся следующего — горизонтального расположения опций:

    horisontal_options.jpg

    Код взят с OpenCart версии 1.5.3.1, но в данном случае версия не столь важна, главное понять принцип и использовать его при надобности.

    Изображения опций находятся в таблице, так что ее мы и будем немного изменять. Открываем файлcatalog\view\theme\default\template\product\product.tpl и находим div с классом «option» (приблизительно 119 строка).

    а). Внутри находим таблицу и ее строке (tr) придадим собственный класс (строка 126). Теперь вместо

    Код:
    <tr>
    будет

    Код:
    <tr class="tr_my_options">
    б). Также придадим класс для label, который отвечает за вывод названия опции (строка 129).


    Было

    Код:
    <td><label for="option-value-<?phpecho$option_value['product_option_value_id'];?>"><?phpecho$option_value['name'];?>
    стало

    Код:
    <td><label class="name_my_options"for="option-value-<?phpecho$option_value['product_option_value_id'];?>"><?phpecho$option_value['name'];?>
    Что дало нам появление этих двух новых классов? Теперь мы можем задать этим элементам свои стили и отпозиционировать их как посчитаем нужным.

    Если не вникать в строки кода и не изменять их по отдельности, можете заменить код (строки 126-134)

    Код:
    <tr>
    <td style="width: 1px;"><input type="radio"name="option[<?phpecho$option['product_option_id'];?>]"value="<?phpecho$option_value['product_option_value_id'];?>"id="option-value-<?phpecho$option_value['product_option_value_id'];?>"/></td>
    <td><label for="option-value-<?phpecho$option_value['product_option_value_id'];?>"><img src="<?phpecho$option_value['image'];?>"alt="<?phpecho$option_value['name'].($option_value['price']?' '.$option_value['price_prefix'].$option_value['price']:'');?>"/></label></td>
    <td><label for="option-value-<?phpecho$option_value['product_option_value_id'];?>"><?phpecho$option_value['name'];?>
    <?phpif($option_value['price']){?>
    (<?phpecho$option_value['price_prefix'];?><?phpecho$option_value['price'];?>)
    <?php}?>
    </label></td>
    </tr>
    На этот код:

    Код:
    <tr class="tr_my_options">
    <td style="width: 1px;"><input type="radio"name="option[<?phpecho$option['product_option_id'];?>]"value="<?phpecho$option_value['product_option_value_id'];?>"id="option-value-<?phpecho$option_value['product_option_value_id'];?>"/></td>
    <td><label for="option-value-<?phpecho$option_value['product_option_value_id'];?>"><img src="<?phpecho$option_value['image'];?>"alt="<?phpecho$option_value['name'].($option_value['price']?' '.$option_value['price_prefix'].$option_value['price']:'');?>"/></label></td>
    <td><label class="name_my_options"for="option-value-<?phpecho$option_value['product_option_value_id'];?>"><?phpecho$option_value['name'];?>
    <?phpif($option_value['price']){?>
    (<?phpecho$option_value['price_prefix'];?><?phpecho$option_value['price'];?>)
    <?php}?>
    </label></td>
    </tr>
    в). Итак, сохраняем внесенные изменения и переходим к catalog\view\theme\default\stylesheet\stylesheet.css. Добавим стиль нашим новым классам. Не буду подробно останавливаться на каждом пункте — для кого css знаком, код будет простым и понятным, кто же с ним не знаком, то и смысла нет вдаваться в подробности.

    Код, добавленный мною, который привел к горизонтальному расположению опций, как на втором скриншоте, имеет следующий вид:

    Код:
    .tr_my_options {
    position:relative;
    float:left;
    width:100px;
    margin-right:10px;
    margin-bottom:35px;
    }
    .name_my_options {
    position:absolute;
    top:60px;
    left:3px;
    right:10px;
    text-align:center;
    }
    Вот таким несложным способом мы изменили расположение опций: теперь вместо того, чтобы выстраиваться столбцом, опции расположились рядами. Если потребуется присвоить опциям более длинные названия, уменьшить или увеличить отступы, то придется всего лишь немного подправить стили, никаких манипуляций с файлами темы не потребуется.
     
  2. Offline

    ukrtop Пользователь

    Сообщения:
    25
    Симпатии:
    421
    Репутация:
    10
    Может кто подскажет как в ряд вывести опции списка (select) в ряд?
     
  3. TopicStarter Overlay
    Offline

    admin Команда форума Администратор

    Сообщения:
    2.141
    Симпатии:
    62.365
    Репутация:
    154
    Код:
    <table>
        <tr>
            <td>Некий текст</td>
            <td>
                <select>
                    <option value="0">Одно значение</option>
                    <option value="1">Другое значение</option>
                    <option value="2">Ещё значение</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Ещё какой-то текст</td>
            <td>
                <select>
                    <option value="0">Новое значение</option>
                    <option value="1">Опять значение</option>
                </select>
            </td>
        </tr>
    </table>
     
  4. Offline

    Rivskoy Пользователь

    Сообщения:
    18
    Симпатии:
    136
    Репутация:
    1
    <?phpecho$option_value
    <?php echo $option_value форум сожрал пробелы?
     
  5. Offline

    qqwwqqwww Пользователь

    Сообщения:
    6
    Симпатии:
    8
    Репутация:
    0
    Решение выше больше подходит для версий opencart 1.x, для версии 2.х мне подошло такое решение:

    В product.tpl
    Заменить (для опции Переключатель)

    ''class="radio"''

    на

    ''class="radio inline-block"''

    А так же (для опции Флажок)

    ''class="checkbox"''

    на

    ''class="checkbox inline-block"''

    И добавить строчку в stylesheet.css

    '' /* Отображаем опции Переключатель, Изображение и Флажок горизонтально*/
    .inline-block {
    display:inline-block;
    }''
     
    admin нравится это.