OpenCart — выставляем опции товара в ряд — горизонтально


Вам могут понравиться и эти статьи...

комментарий 81

Если Вы хотите добавить код в свой комментарий, заключите его в теги <pre lang="php"></pre>

  1. Спасибо огромнейшее за статью, очень выручили.

  2. Вячеслав:

    Всё исправил как в статье, но опции как были в столбик, так и остались.. :((
    ХЕЕЕЕЛППП…

  3. Вячеслав:

    забыл написать: ocStore 1.5.5.1.1

    • jul jul:

      Вячеслав, с версией 1.5.5.1.1 еще не работала, как-то на четвертой пока еще сижу, соответственно, код свежей версии еще не видела. Может, есть какие-то отличия, которые и не позволяют Вам внести желаемые изменения.

    • Я на ocStore 1.5.5.1.1 исправил все заработало ищите ошибку

  4. Вячеслав:

    Эхх.. было бы неплохо если бы одним глазком взглянули бы на код.. :)

  5. Александр:

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

  6. Такой вопрос, а если опций много и нужно вывести горизонтально только одну из них? К примеру у кроссовок есть цвет и размер, а горизонтально мне надо только цвет.

  7. Sten:

    Jul, поддерживаю Вячеслава в теме нового движка (15511). Будет время, гляньте что там изменилось, потому как Ваши изменения не работают на новом движке.

    • jul jul:

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

  8. Иван:

    У меня после всех этих изменений характеристики стали отображаться некорректно а именно в таких-же маленьких колонках. можно ли как-то это поправить?

  9. Иван:

    не получается ссылку никак скинуть
    скрины лежат на
    picshare
    До правки кода
    view/3231036
    после правки кода
    view/3231041/

  10. Евгений:

    а как сделать, чтобы в выпадающем списке опций были картинки? а еще лучше. чтобы список тоже был в три-пять рядов)

  11. Здравствуйте.
    Огромное спасибо за статью!
    Увидел её и решил себе сделать аналогичную вёрстку на OcStore 1.5.5.1.1
    Сначала пытался использовать ваш код. Получилось так, что название опции отображалось справа от изображения. Чтобы перенести его ПОД изображение, переформатировал таблицу. Возможно, кому-то пригодится.

    Шаг №0
    Для начала нужно проделать всё то, что описал автор статьи, а уже если не помогло, делать то, что описано ниже.

    Шаг №1
    Убрать закрывающий тэг в строчке:

    <label for="option-value-«><img src="» alt=»» />

    Получится так:

    <label for="option-value-«><img src="» alt=»» />

    Шаг №2
    Убрать открывающий тэг в строчке:

    <label class="l-horizontal" for="option-value-«>

    ()

    Получится так:

    <label class="l-horizontal" for="option-value-«>

    ()

    Шаг №3
    Сейчас нужно немного заменить атрибуты, которые мы прописали в stylesheet.css изначально. Находим строчки:

    .tr_my_options {
    position: relative;
    float: left;
    width: 100px;
    margin-right: 10px;
    margin-bottom: 35px;
    }

    Меняем на:

    .tr_my_options {
    position: relative;
    float: left;
    width: 100px;
    }

    Находим строчки:

    .name_my_options {
    position: absolute;
    top: 60px;
    left: 3px;
    right: 10px;
    text-align: center;
    }

    Меняем на:

    .name_my_options {
    position: relative;
    float: left;
    text-align: center;
    }

    Шаг №4
    Последний штрих. В файле stylesheet.css находим строки

    .product-info .option-image img {
    margin-right: 5px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    }

    Меняем в «margin-right» 5px на 0px (Это нужно для того, чтобы название опции могло ровно центрироваться.

    Результат можете посмотреть на скриншоте:
    http://s004.radikal.ru/i207/1401/21/a3946bcd7a70.jpg

    • jul jul:

      Влас, спасибо за дополнение — на пятерке подобных манипуляций проделывать не приходилось. Единственное, возможно, код частично комментарием не передался (пустые скобки).

  12. Серж:

    Великолепный пост, Вам огромное спасибо. Подписался на Ваш блог, очень ценные материалы.

  13. Ivan:

    Здравствуйте, спасибо за статью. Ваш способ помог привести отображение опций с изображениями в нормальный вид.
    Вот только одна проблемка все-же имеется, не могу понять в чем дело: в хроме стили работают нормально и текст под изображениями находится, а в IE 11 текст уходит в центр верха страницы и выбирать можно только одну опцию.
    Могли бы Вы подсказать, как заставить IE нормально отображать опции в соответствии с прописанными стилями?

  14. Ксения:

    А как теперь сделать css, если изображение атрибута становится 110×110, ведь мы пока не можем таким образом регулировать положение кружочков, в которых покупатель делает выбор атрибута и они наезжают на картинку атрибута. Где их можно подвигать? Все обыскала.

    • jul jul:

      .product-info .options tr дайте margin-right подходящий для Вашего магазина.
      На Вашем сайте не нашла расположения опций горизонтально.

  15. Настисия:

    Спасибо за урок! Только до сих пор разобраться не могу, почему изменения вступили в силу только для опций с картинками (OpenCart 1.5.4). Остальные остаются списком, хоть убейся. Перекопала весь код, на свой страх и риск везде вместо прописала , не знаю зачем, но ничего вроде больше не поменялось, а опции остальные так и отображаются списком. Буду мудрить дальше.

  16. Спасибо!!! все работает версия 1.5.5.1.2

  17. Дмитрий:

    Благодарю автора за помощь! Версия 1.5.5.1.2 успешно съела внесённые изменения.

  18. Дмитрий:

    А как эти квадратики в размере изменить?

  19. Иван:

    Не получается((( вот код, помогите пожалуйста

  20. Иван:

    ой, как то код криво показывает(
    вот скрин yadi.sk/d/CJTGbvZkckyz8

  21. Марина:

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

  22. Марина:

    извиняюсь, разобралась

  23. Марина:

    пыталась изменить размер квадратов в stylesheet вроде квадраты уменьшились, но возникла проблема, усчехают картинки аккаунт, корзина и сравнение . меняла размер в этом месте
    .product-info .option-image {
    margin-top: 3px;
    margin-bottom: 10px;
    }
    .product-info .option-image label {
    display: block;
    width: 100%;
    height: 100%;
    }
    .product-info .option-image img {
    margin-right: 5px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    width: 80px;
    }
    #column-right + #content .product-info .option-image img {
    width: 80px;
    }
    #column-left + #content .product-info .option-image img {
    width: 80px;
    }
    .product-info .option-image .imagename{
    width: 168px;
    }
    #column-left + #column-right + #content .product-info .option-image .imagename {
    width: 100%;
    }
    .product-info .option-image tr {
    display: inline-block;
    }
    .product-info .option-image tr:hover {
    background-color: #fff;
    }
    объясните, пожалуйста, что не так делаю

    • jul jul:

      Марина, не зная особенностей шаблона, сложно дать точный ответ на Ваш вопрос. Если сайт на реальном сервере дайте ссылку.
      А если теоретически, то стоит дать изображению опций свой класс и уже ему прописать параметры, так как скорее всего в Вашем шаблоне связаны изображения опций и указанный Вами изображения.

      • Марина:

        сайт чашкаложка.рф/f1325, помогите, пожалуйста , уменьшить эти квадраты

        • jul jul:

          По ссылке вижу уменьшенные изображения опций и присутствующие изображения корзины, сравнений и закладок под опциями. К сожалению, не вижу в чем у Вас проблема.

          • Марина:

            https://yadi.sk/i/6i6UKOSWcpEnf — тут стандартные
            https://yadi.sk/i/rSvPCJLgcpEnm — тут уменьшенные , посмотрите на верхнюю панель, в первом случае знаки корзины отображаются корректно, а во втором нет

          • jul jul:

            Марина, опции на наличие данных изображений не влияют, у Вас неверно прописаны пути к данным изображениям, посмотрите и исправьте stylesheet, строка 262 и 4160.

  24. Эрик:

    Подскажите пожалуйста, а как поступать в случае если опции — ФЛАЖОК?
    Там нет tr и td

    • jul jul:

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

  25. Марина:

    спасибо большое за помощь

  26. Серж:

    здравствуйте, попробовал ваш способ, опции встали в ряд, но изображения почему-то стали разного размера, именно у тех у которых длинное название, не силен в css, прошу помочь, стоит не на дефолтном шаблоне!
    пример http://businessgrou.pe.hu/dlya-ofisa/nabory-mebeli/rukovoditelskie-kabinety/fokus/komplekt-focus11

    • jul jul:

      Добрый день,
      дело в том, что для tr_my_options указана ширина 100%, но при этом Вы не перенесли названия под изображения и движок пытается в эти 100% вместить и название и изображение, и если название он уменьшить никак не может, то изображение сжимает.
      Вам надо для label внутри td добавить свой класс и ему придать нужные стили, это все описано в посте, Вы упустили этот момент.

  27. Ярослав:

    Огромное спасибо на версии 1.5.5.1.2 ocstore роботает отлично вы молодец

  28. Спасибо за статью! А как сделать некоторые опции не обязательными к заполнению, не подскажете?

  29. Помогите,пожалуйста, опции горизонтально стали, но поехали кружочки и ушел текст,который должен быть под картинками.Размеры опций уменьшать не хочу,как сделать,чтоб текст был под картинкой, а кружочки слева от опции?

  30. Здравствуйте! Подскажите, пожалуйста, а есть ли возможность не список опций изображений сделать горизонтально, а просто «переключатель», radio (второй пункт при выборе вида отображения опции товара)? Ковыряла-ковыряла, не смогла сделать.

  31. Кирилл:

    Как сделать то же самое только для обычного переключателя! «radio» без фото который… где поменять нужно

  32. Божидар:

    Болшое спасибо! Все работает на 1.5.6.4. Важно — здес «catalog\view\theme\default\template\product\product.tpl» замените default с име вашу тему. Потом catalog\view\theme\default\stylesheet\stylesheet.css снова замените..
    Прошу извините за мой руский. Я не руский гражданин.

  33. Елена:

    Здравствуйте. Я совсем не разбираюсь в css. В файле product.tpl все подробно так расписано, вплоть до № строки. А в стилях? Файле stylesheet.css? Там уже должна быть строка tr? Я ее не нашла. Как понять куда именно вставить этот код? Там более 1600 строк? Спасибо.

    • jul jul:

      Если нет стилей для tr, то в stylesheet.css размещайте стили для строки (tr) с ее классом, в принципе, в любмом месте файла, главное не влазьте в фигурные скобки других элементов.
      Но, должна сказать, что если в css совсем не разбираетесь, то Вам будет чоень сложно что-либо настроить, при любом недочете необходимо будет внести правки, а без элементаных знаний этого не сделать.

  34. Olga:

    благодарю за помощь.

  35. Здравствуйте Юлия, спасибо за полезные статьи!
    Сделал как написано, к сожалению, в версии 1.5.5.1.1 ничего не меняется. Вы бы могли разобраться? за вознаграждение.

    • jul jul:

      Здравствуйте, Вячеслав,
      не нашла в Вашем магазине классы для label. То есть Вы добавили класс для tr, но для label не добавили. И в стилях убрали свойства или не добавляли их?

  36. Добрый вечер Юлия! Все классы прописал и в css тоже. В дефолтном шаблоне, в моем шаблоне, ничего не меняется. Если есть идеи, буду благодарен. Ну некрасиво, по ссылке.

    • jul jul:

      Проинспектировала страницу, к сожалению, нет стилей в stylesheet.css. Без них не смогу помочь Вам выставить опции горизонтально. Если внесете все указанные в посте свойства в нужные файлы (product.tpl и stylesheet.css), посмотрю еще раз.

  37. Юлия, спасибо. Проблема была в кэшировании css на сервере, очистил там кэш и все заработало.

  38. Здравствуйте! установил по способу выше, но столкнулся с одной проблемой. Сделал опцию Цвет и оставил в ней только картинки, проблема в том что при нажатии на картинку визуально ничего не происходит, а пользователь может даже не понять что он выбрал цвет. помогите пожалуйста, как можно хоть что-то добавить? (рамку, иконку, фон для выбраного товара)
    http://alishop.kiev.ua/e-cigarettes/elektronnaya-sigareta-evod-mt3-1100mah.html можете посмотреть тут!

    Спасибо за способ!

    • jul jul:

      Здравствуйте, Дмитрий,
      Вы убрали инпуты, оставили лишь лейблы, а им свойства не задашь (тот жу active можно было бы использовать, но для label нельзя).

  39. Саша:

    Спасибо большое. Помогли решить мою проблему.

  40. Rubik:

    Здравствуйте, подскажите как удалить радио кнопки и при клике на картинку обрамлялся рамкой.

  41. Пожалуйста подскажите как это сделать в версии 2.1.0.2 ? нигде не могу найти как будто никто не работает с новым opencart

  42. Роман:

    Спасибо большое за статью!
    Возник следующий вопрос. Возможно ли выставить все опции в ряд (допустим 10 шт.), и они бы работали как на слайдере?
    т.е. активных отображалось бы 2-3, а при нажатии на кнопку, они бы просто перелистывались?

    Спасибо большое за ответ!

  43. Александр:

    Здравствуйте!
    Подскажите пожалуйста, у меня опенкарт 1.5.6.1 Опции в виде выбора.(выпадающее окно) Можно сделать чтобы опции были как выпадающее окно и просто как надпись? На выбор. Два варианта.
    Заранее спасибо.

  44. Согласен, это отличный вариант

  45. Leo:

  46. 1.5.5.1.2 шаблон univer прекрасно вкатило спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *