OpenCart — выставляем опции товара в ряд — горизонтально
В комментариях к статье «OpenCart — как сделать всплывающие изображения в опциях товаров» одним из частых вопросов был вопрос о расположении опций. Так что сегодня мы рассмотрим именно этот момент — расположим опции в ряд — горизонтально.
По умолчанию Opencart предоставляет опции вот в таком виде:
Мы же добьемся следующего — горизонтального расположения опций:
Код взят с OpenCart версии 1.5.3.1, но в данном случае версия не столь важна, главное понять принцип и использовать его при надобности.
Изображения опций находятся в таблице, так что ее мы и будем немного изменять. Открываем файл catalog\view\theme\default\template\product\product.tpl и находим div с классом «option» (приблизительно 119 строка).
а). Внутри находим таблицу и ее строке (tr) придадим собственный класс (строка 126). Теперь вместо
|
1 |
<tr> |
будет
|
1 |
<tr class="tr_my_options"> |
Было
|
1 |
<td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> |
стало
|
1 |
<td><label class="name_my_options" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> |
Что дало нам появление этих двух новых классов? Теперь мы можем задать этим элементам свои стили и отпозиционировать их как посчитаем нужным.
Если не вникать в строки кода и не изменять их по отдельности, можете заменить код (строки 126-134)
|
1 2 3 4 5 6 7 8 9 |
<tr> <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td> <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td> <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> <?php if ($option_value['price']) { ?> (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>) <?php } ?> </label></td> </tr> |
На этот код:
|
1 2 3 4 5 6 7 8 9 |
<tr class="tr_my_options"> <td style="width: 1px;"><input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /></td> <td><label for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" /></label></td> <td><label class="name_my_options" for="option-value-<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?> <?php if ($option_value['price']) { ?> (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>) <?php } ?> </label></td> </tr> |
в). Итак, сохраняем внесенные изменения и переходим к catalog\view\theme\default\stylesheet\stylesheet.css. Добавим стиль нашим новым классам. Не буду подробно останавливаться на каждом пункте — для кого css знаком, код будет простым и понятным, кто же с ним не знаком, то и смысла нет вдаваться в подробности.
Код, добавленный мною, который привел к горизонтальному расположению опций, как на втором скриншоте, имеет следующий вид:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.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; } |
Вот таким несложным способом мы изменили расположение опций: теперь вместо того, чтобы выстраиваться столбцом, опции расположились рядами. Если потребуется присвоить опциям более длинные названия, уменьшить или увеличить отступы, то придется всего лишь немного подправить стили, никаких манипуляций с файлами темы не потребуется.
Спасибо огромнейшее за статью, очень выручили.
И Вам спасибо за отзыв. Удачной правки)
Всё исправил как в статье, но опции как были в столбик, так и остались.. :((
ХЕЕЕЕЛППП…
забыл написать: ocStore 1.5.5.1.1
Вячеслав, с версией 1.5.5.1.1 еще не работала, как-то на четвертой пока еще сижу, соответственно, код свежей версии еще не видела. Может, есть какие-то отличия, которые и не позволяют Вам внести желаемые изменения.
Я на ocStore 1.5.5.1.1 исправил все заработало ищите ошибку
Эхх.. было бы неплохо если бы одним глазком взглянули бы на код.. :)
Вячеслав, не понимаю сути Вашего высказывания — код в статье есть.
jul пишет:
«..код свежей версии еще не видела. Может, есть какие-то отличия..»
Вот про этот код я и говорю
Так версию свежую скачть не проблема, но работать с ней пока не работаю — и на четверке мне хорошо)
Столкнулся со следующей проблемой, после того как сделал все по инструкции согласно данной статье отображение изменилось, все нормально, НО — теперь при выборе опции, когда нажимаешь на нее, она не открывается отдельным окном, то есть нет возможности увидеть развернутое фото товара. Не подскажите в чем может быть беда?
Такой вопрос, а если опций много и нужно вывести горизонтально только одну из них? К примеру у кроссовок есть цвет и размер, а горизонтально мне надо только цвет.
Здесь можно поработать с кодом, и при помощи css придать желаемое только одному элементу.
Jul, поддерживаю Вячеслава в теме нового движка (15511). Будет время, гляньте что там изменилось, потому как Ваши изменения не работают на новом движке.
Ок, обязательно посмотрю, только чуть позже — работы много, не успеваю не то, что писать — на комменты ответить не успеваю.
У меня после всех этих изменений характеристики стали отображаться некорректно а именно в таких-же маленьких колонках. можно ли как-то это поправить?
Иван, суть проблемы непонятна. Что произошло с отображением опций? Дайте ссылку на сайт или на скрины. Какая версия движка?
не могу оставить комментарий почему-то
с ссылкой на выложенные скрины.
Странно, такого раньше не было. Попробуйте разместить не гиперссылку, а обычную (не используйте ни www, ни http).
не получается ссылку никак скинуть
скрины лежат на
picshare
До правки кода
view/3231036
после правки кода
view/3231041/
а как сделать, чтобы в выпадающем списке опций были картинки? а еще лучше. чтобы список тоже был в три-пять рядов)
Здравствуйте.
Огромное спасибо за статью!
Увидел её и решил себе сделать аналогичную вёрстку на 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 (Это нужно для того, чтобы название опции могло ровно центрироваться.
Результат можете посмотреть на скриншоте:
https://s004.radikal.com/i207/1401/21/a3946bcd7a70.jpg
Влас, спасибо за дополнение — на пятерке подобных манипуляций проделывать не приходилось. Единственное, возможно, код частично комментарием не передался (пустые скобки).
Великолепный пост, Вам огромное спасибо. Подписался на Ваш блог, очень ценные материалы.
Благодарю за отзыв! Буду рада видеть Вас на моем блоге.
Здравствуйте, спасибо за статью. Ваш способ помог привести отображение опций с изображениями в нормальный вид.
Вот только одна проблемка все-же имеется, не могу понять в чем дело: в хроме стили работают нормально и текст под изображениями находится, а в IE 11 текст уходит в центр верха страницы и выбирать можно только одну опцию.
Могли бы Вы подсказать, как заставить IE нормально отображать опции в соответствии с прописанными стилями?
Потестировать 11 IE можно на windows 8, коей я не имею, так что подсказать, к сожалению, ничего не могу.
А как теперь сделать css, если изображение атрибута становится 110×110, ведь мы пока не можем таким образом регулировать положение кружочков, в которых покупатель делает выбор атрибута и они наезжают на картинку атрибута. Где их можно подвигать? Все обыскала.
.product-info .options tr дайте margin-right подходящий для Вашего магазина.
На Вашем сайте не нашла расположения опций горизонтально.
Спасибо за урок! Только до сих пор разобраться не могу, почему изменения вступили в силу только для опций с картинками (OpenCart 1.5.4). Остальные остаются списком, хоть убейся. Перекопала весь код, на свой страх и риск везде вместо прописала , не знаю зачем, но ничего вроде больше не поменялось, а опции остальные так и отображаются списком. Буду мудрить дальше.
Спасибо!!! все работает версия 1.5.5.1.2
Благодарю автора за помощь! Версия 1.5.5.1.2 успешно съела внесённые изменения.
А как эти квадратики в размере изменить?
Да можно хоть в stylesheet классу .option-image img прописать размеры и отпозиционировать надписи.
Не получается((( вот код, помогите пожалуйста
ой, как то код криво показывает(
вот скрин yadi.sk/d/CJTGbvZkckyz8
Дайте ссылку на сайт.
Подскажите, пожалуйста, как уменьшить размер квадратиков изображения в опциях к товару?
извиняюсь, разобралась
пыталась изменить размер квадратов в 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;
}
объясните, пожалуйста, что не так делаю
Марина, не зная особенностей шаблона, сложно дать точный ответ на Ваш вопрос. Если сайт на реальном сервере дайте ссылку.
А если теоретически, то стоит дать изображению опций свой класс и уже ему прописать параметры, так как скорее всего в Вашем шаблоне связаны изображения опций и указанный Вами изображения.
сайт чашкаложка.рф/f1325, помогите, пожалуйста , уменьшить эти квадраты
По ссылке вижу уменьшенные изображения опций и присутствующие изображения корзины, сравнений и закладок под опциями. К сожалению, не вижу в чем у Вас проблема.
https://yadi.sk/i/6i6UKOSWcpEnf — тут стандартные
https://yadi.sk/i/rSvPCJLgcpEnm — тут уменьшенные , посмотрите на верхнюю панель, в первом случае знаки корзины отображаются корректно, а во втором нет
Марина, опции на наличие данных изображений не влияют, у Вас неверно прописаны пути к данным изображениям, посмотрите и исправьте stylesheet, строка 262 и 4160.
Подскажите пожалуйста, а как поступать в случае если опции — ФЛАЖОК?
Там нет tr и td
Для этого необходимо опцию типа checkbox взять в новый класс и уже ему в таблице стиле придать нужные стили для расположения в ряд.
спасибо большое за помощь
здравствуйте, попробовал ваш способ, опции встали в ряд, но изображения почему-то стали разного размера, именно у тех у которых длинное название, не силен в css, прошу помочь, стоит не на дефолтном шаблоне!
пример https://businessgrou.pe.hu/dlya-ofisa/nabory-mebeli/rukovoditelskie-kabinety/fokus/komplekt-focus11
Добрый день,
дело в том, что для tr_my_options указана ширина 100%, но при этом Вы не перенесли названия под изображения и движок пытается в эти 100% вместить и название и изображение, и если название он уменьшить никак не может, то изображение сжимает.
Вам надо для label внутри td добавить свой класс и ему придать нужные стили, это все описано в посте, Вы упустили этот момент.
Огромное спасибо на версии 1.5.5.1.2 ocstore роботает отлично вы молодец
Спасибо за статью! А как сделать некоторые опции не обязательными к заполнению, не подскажете?
Помогите,пожалуйста, опции горизонтально стали, но поехали кружочки и ушел текст,который должен быть под картинками.Размеры опций уменьшать не хочу,как сделать,чтоб текст был под картинкой, а кружочки слева от опции?
Здравствуйте! Подскажите, пожалуйста, а есть ли возможность не список опций изображений сделать горизонтально, а просто «переключатель», radio (второй пункт при выборе вида отображения опции товара)? Ковыряла-ковыряла, не смогла сделать.
Как сделать то же самое только для обычного переключателя! «radio» без фото который… где поменять нужно
Болшое спасибо! Все работает на 1.5.6.4. Важно — здес «catalog\view\theme\default\template\product\product.tpl» замените default с име вашу тему. Потом catalog\view\theme\default\stylesheet\stylesheet.css снова замените..
Прошу извините за мой руский. Я не руский гражданин.
Спасибо за отзыв!
Здравствуйте. Я совсем не разбираюсь в css. В файле product.tpl все подробно так расписано, вплоть до № строки. А в стилях? Файле stylesheet.css? Там уже должна быть строка tr? Я ее не нашла. Как понять куда именно вставить этот код? Там более 1600 строк? Спасибо.
Если нет стилей для tr, то в stylesheet.css размещайте стили для строки (tr) с ее классом, в принципе, в любмом месте файла, главное не влазьте в фигурные скобки других элементов.
Но, должна сказать, что если в css совсем не разбираетесь, то Вам будет чоень сложно что-либо настроить, при любом недочете необходимо будет внести правки, а без элементаных знаний этого не сделать.
спасибо
благодарю за помощь.
Здравствуйте Юлия, спасибо за полезные статьи!
Сделал как написано, к сожалению, в версии 1.5.5.1.1 ничего не меняется. Вы бы могли разобраться? за вознаграждение.
Здравствуйте, Вячеслав,
не нашла в Вашем магазине классы для label. То есть Вы добавили класс для tr, но для label не добавили. И в стилях убрали свойства или не добавляли их?
Добрый вечер Юлия! Все классы прописал и в css тоже. В дефолтном шаблоне, в моем шаблоне, ничего не меняется. Если есть идеи, буду благодарен. Ну некрасиво, по ссылке.
Проинспектировала страницу, к сожалению, нет стилей в stylesheet.css. Без них не смогу помочь Вам выставить опции горизонтально. Если внесете все указанные в посте свойства в нужные файлы (product.tpl и stylesheet.css), посмотрю еще раз.
Юлия, спасибо. Проблема была в кэшировании css на сервере, очистил там кэш и все заработало.
Рада, что теперь все в порядке. Ответила на почту.
Здравствуйте! установил по способу выше, но столкнулся с одной проблемой. Сделал опцию Цвет и оставил в ней только картинки, проблема в том что при нажатии на картинку визуально ничего не происходит, а пользователь может даже не понять что он выбрал цвет. помогите пожалуйста, как можно хоть что-то добавить? (рамку, иконку, фон для выбраного товара)
https://alishop.kiev.ua/e-cigarettes/elektronnaya-sigareta-evod-mt3-1100mah.html можете посмотреть тут!
Спасибо за способ!
Здравствуйте, Дмитрий,
Вы убрали инпуты, оставили лишь лейблы, а им свойства не задашь (тот жу active можно было бы использовать, но для label нельзя).
Спасибо большое. Помогли решить мою проблему.
Здравствуйте, подскажите как удалить радио кнопки и при клике на картинку обрамлялся рамкой.
Пожалуйста подскажите как это сделать в версии 2.1.0.2 ? нигде не могу найти как будто никто не работает с новым opencart
Спасибо большое за статью!
Возник следующий вопрос. Возможно ли выставить все опции в ряд (допустим 10 шт.), и они бы работали как на слайдере?
т.е. активных отображалось бы 2-3, а при нажатии на кнопку, они бы просто перелистывались?
Спасибо большое за ответ!
Не знаю какая у Вас версия движка, но для 1.5.х есть модуль, который выводит опции в виде карусели — https://www.opencart.com/index.php?route=extension/extension/info&extension_id=18827&filter_search=carusel
Большое спасибо! Пока еще не установил, но вроде подходит!!!
Здравствуйте!
Подскажите пожалуйста, у меня опенкарт 1.5.6.1 Опции в виде выбора.(выпадающее окно) Можно сделать чтобы опции были как выпадающее окно и просто как надпись? На выбор. Два варианта.
Заранее спасибо.