Вывод опций горизонтально

[AndreyN]

Доброго!  С Новым годом!

Прошу подсказать, как сделать вывод опций горизонтально. Есть много статей как это реализовать на версии 2.х, но как сделать это в 3.х найти не могу. Пытался делать правки в файле product.twig.

Благодарю!

 

[Гість smartcoder]

2 часа назад, AndreyN сказал:

product.twig.

Делайте правки в файле product.twig + css вашего шаблона, затем обновляйте модификаторы.

[TeslaFeo]

11 часов назад, AndreyN сказал:

Есть много статей как это реализовать на версии 2.х, но как сделать это в 3.х найти не могу.

html и css везде один и тот же.

Ваш Кэп.

[AndreyN]

Спасибо за ответы. Но..

В статьях по opencart 2.х приведен код, отвечающий за вывод опций , которого в 3-ке просто нет.

И что править в 3.х просто не понятно.

Если кто то знает, можно конкретнее, без общих фраз.

Благодарю.

 

[jaffagold]

Там строчек десять стилей и никаких правок в шаблоне. Или минимальные, если чекбоксы менять. Интересно, что вы за статьи такие читали. Дали бы лучше ссылку на страницу и подробнее описали , что хотите сделать.

[AndreyN]

55 minutes ago, jaffagold said:

Там строчек десять стилей и никаких правок в шаблоне. Или минимальные, если чекбоксы менять. Интересно, что вы за статьи такие читали. Дали бы лучше ссылку на страницу и подробнее описали , что хотите сделать.

 

Вот страничка с товаром, опции пока выводятся вертикально, мне б сделать горизонтальное размещение.

Это таблица нужна или можно без нее?

 

Как сделать на 2.х здесь http://annadvarri.blogspot.com/2014/05/opencart_4217.html

[jaffagold]

Да фигня это с таблицей... так не надо делать.

Дайте ссылку на страницу товара на вашем сайте

[jaffagold]

По вашей ссылке мне картинки не открылись, не знаю, что там...

Вот, например на демо

https://demo.ocstore.com/test

Пропишите в инспекторе кода простые стили

для радиокнопок:

#product .radio{

  display: inline-block;

  border: 1px solid grey;

  padding: 3px;

}

для флажков:

#product .checkbox {

  display: inline-block;

  border: 1px solid grey;

  padding: 3px;

}

По-хорошему, там еще стилизацию чекбоксов можно сделать, ищите- найдете...
 

Змінено 2 січня 2019 користувачем jaffagold

[AndreyN]

Извините, не скопировалась ссылка..

вот страница товара http://delevi.ru/dekorativnaya-kosmetika/gubnaya-pomada-premium-gold/dlya-gub/glam-look-cream-velvet-kremovaya-pomada-s-velvetovym-finishem

[jaffagold]

#product .radio{

  display: inline-block;

  border: 1px solid grey;

  border-radius: 5px;

  padding: 3px;

  width: 140px;

}

#product .radio img {

  display: block;

}

Попробуйте добавить в самый конец stylesheet.css

на самом деле, там еще надо поработать, смотря что вы хотите получить в итоге.

Змінено 2 січня 2019 користувачем jaffagold

[AndreyN]

21 hours ago, jaffagold said:

#product .radio{

  display: inline-block;

  border: 1px solid grey;

  border-radius: 5px;

  padding: 3px;

  width: 140px;

}

#product .radio img {

  display: block;

}

Попробуйте добавить в самый конец stylesheet.css

на самом деле, там еще надо поработать, смотря что вы хотите получить в итоге.

Доброго, спасибо.

Сделал как вы написали.

Получилось вот так: http://delevi.ru/dekorativnaya-kosmetika/gubnaya-pomada-premium-gold/dlya-gub/glam-look-cream-velvet-kremovaya-pomada-s-velvetovym-finishem

Выводится 2 ряда, как то можно увеличить количество рядов. Или может вывод опций вынести ниже описания товара (а не справа, как сейчас)?

[jaffagold]

Попробуйте

#product .radio {

display: inline-block;

border: 1px solid grey;

border-radius: 5px;

padding: 3px;

width: 86px;

height: 110px;

vertical-align: top;

margin-top: -5px;

}

 4 колонки

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

 

И еще, у вас проблема с "Хлебными крошками" на мобильных...
 

Змінено 3 січня 2019 користувачем jaffagold

[jaffagold]

Возможно, вам придется переразметить карточки товаров для некоторых категорий, где много опций.

Сейчас у вас (как и у всех) контент разбит на 2 колонки

<div class="col-sm-8">тут фото и описание </div><div class="col-sm-4">тут название, опции, цена и кнопка Купить </div>

col-sm-8 и col-sm-4 назначают ширину колонок в дробном формате 8/12 и 4/12

Можно правую колонку сделать шире, одновременно сделав уже левую (только одновременно и сумма должна равняться единице 8/12+4/12=6/12+6/12=1)

Например:

<div class="col-sm-6"> </div><div class="col-sm-6"> </div>

Но для этого надо чуть глубже копать

 

Змінено 4 січня 2019 користувачем jaffagold

[HyperLabTeam]

12 часов назад, AndreyN сказал:

Доброго, спасибо.

Сделал как вы написали.

Получилось вот так: http://delevi.ru/dekorativnaya-kosmetika/gubnaya-pomada-premium-gold/dlya-gub/glam-look-cream-velvet-kremovaya-pomada-s-velvetovym-finishem

Выводится 2 ряда, как то можно увеличить количество рядов. Или может вывод опций вынести ниже описания товара (а не справа, как сейчас)?

Можно уменьшить картинку выделив больше пространства под блок с опциями и т.д.
 

[AndreyN]

3 hours ago, jaffagold said:

Возможно, вам придется переразметить карточки товаров для некоторых категорий, где много опций.

Сейчас у вас (как и у всех) контент разбит на 2 колонки

<div class="col-sm-8">тут фото и описание </div><div class="col-sm-4">тут название, опции, цена и кнопка Купить </div>

col-sm-8 и col-sm-4 назначают ширину колонок в дробном формате 8/12 и 4/12

Можно правую колонку сделать шире, одновременно сделав уже левую (только одновременно и сумма должна равняться единице 8/12+4/12=6/12+6/12=1)

Например:

<div class="col-sm-6"> </div><div class="col-sm-6"> </div>

Но для этого надо чуть глубже копать

 

 

3 hours ago, jaffagold said:

 

Доброго. Спасибо за столь развернутый ответ.

Видимо да, придется менять немного карточку товара.

Насчет хлебных крошек, проверю, спасибо.