Как грамотно переверстать карточку товара под мобильные устройства

[chamaerops]

Вводные данные: 

ОС 2.1.0.1

Шаблон: дефолтный (точнее копия дефолтного, стилизованного под свой дизайн)

 

На десктопах карточка товара выглядит следующим образом

 

 

Блоки слева сидят в своем DIVe col-sm-N, правый блок в своем DIVe col-sm-M.

 

Как следствие, на мобильных устройствах карточка товара выглядит вот так

 

 

то есть, кнопка "Купить" и прочая важна информация находятся глубоко внизу, а табы с описанием/характеристиками/отзывами - посередине. Это, как мне кажется, очень нехорошо в плане юзабилити.

 

Хочу сделать вот так

 

То есть по порядку:

 

1.Фото

2. Кнопка "Купить" и сопутсвующие поля с информацией

3. Табы (Описание/характеристики/отзывы)

 

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

 

Пока что в голову пришел только такой вариант:

 

Блок содержащий кнопку "корзины" в шаблоне копируется и выводится после блока с фото.

Для десктопов отображается привычная корзина с классом col-sm-M col-md-M col-lg-M hidden-xs (скрываем блок с кнопкой КУПИТЬ на мелких экранах)

 

Второй, аналогичный блок с кнопкой КУПИТЬ, размещаем в шаблоне сразу за блоком с фото и даем ему классы col-xs-12 hidden-sm hidden-md hidden-lg (то есть прячем его на больших экранах, выводим на мелких)

 

Насколько граммотна будет такая реализация? И насколько это сказывается на скорости генерации карточки товара? Возможно, есть более толковый способ?

 

З.Ы. Сорри за микроскопические картинки, думал будут нормального размера.

Змінено 24 серпня 2016 користувачем chamaerops

[pantagruel964]

https://jsfiddle.net/cfqnrund/

[chamaerops]

Очень конструктивно....

[SlideShow]

https://jsfiddle.net/cfqnrund/

 

Что это?

[pantagruel964]

Очень конструктивно....

Такое решение не подходит? Или не разобрались?

[SlideShow]

...

 

Пока что в голову пришел только такой вариант:

 

Блок содержащий кнопку "корзины" в шаблоне копируется и выводится после блока с фото.

Для десктопов отображается привычная корзина с классом col-sm-M col-md-M col-lg-M hidden-xs (скрываем блок с кнопкой КУПИТЬ на мелких экранах)

 

Второй, аналогичный блок с кнопкой КУПИТЬ, размещаем в шаблоне сразу за блоком с фото и даем ему классы col-xs-12 hidden-sm hidden-md hidden-lg (то есть прячем его на больших экранах, выводим на мелких)

 

Насколько граммотна будет такая реализация? И насколько это сказывается на скорости генерации карточки товара? Возможно, есть более толковый способ?

 

З.Ы. Сорри за микроскопические картинки, думал будут нормального размера.

 

я бы тоже так сделал, учитывая ваш bootstrap. К тому же данные с правой колонки с кнопкой "Купить" минимальны и не поедят время загрузки. Есть нюанс - часто на кнопки вешают id для скриптов, смотрите чтобы у вас был класс, т.к. кнопка по-сути будет дублироваться.

[SlideShow]

Такое решение не подходит? Или не разобрались?

 

решение чего? Тему читали?

[chamaerops]

Такое решение не подходит? Или не разобрались?

Ща детальнее смотрю.

По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS  :-D

А так изменен порядок вывода блоков как раз таки....

[chamaerops]

я бы тоже так сделал, учитывая ваш bootstrap. К тому же данные с правой колонки с кнопкой "Купить" минимальны и не поедят время загрузки. Есть нюанс - часто на кнопки вешают id для скриптов, смотрите чтобы у вас был класс, т.к. кнопка по-сути будет дублироваться.

Вы о том, что будет дублироваться ID кнопки? А чем чревато?

[SlideShow]

Ща детальнее смотрю.

По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS   :-D

А так изменен порядок вывода блоков как раз таки....

 

Изменить порядок блоков можно тучей способов, но по вашему посту в шапке я понял что вы хотите "в стиле bootstrap"

[SlideShow]

Вы о том, что будет дублироваться ID кнопки? А чем чревато?

 

карточка товара валидацию не пройдет, это грубая ошибка. Ну и не тру как-то...

[chamaerops]

Изменить порядок блоков можно тучей способов, но по вашему посту в шапке я понял что вы хотите "в стиле bootstrap"

Да, просто потому что моих скудных компетенций в HTML/CSS хватает пока на такой способ - он мне предельно понятен. И нечто подобное я уже сделал в хедере с корзиной и перечнем номеров телефонов (на десктопах - горизонтальный список, на мобильных - выпадающий список при тапе).

Змінено 24 серпня 2016 користувачем chamaerops

[chamaerops]

карточка товара валидацию не пройдет, это грубая ошибка. Ну и не тру как-то...

Ну, переопределить стили через класс вместо ID - дело не хитрое, но если будет продублирована кнопка корзины в которой есть ID (а она там есть), то для дублирующей кнопки нужно уникализировать ID ? Но тогда кнопка "отвяжется" от соответствующих скриптов ведь.

[SlideShow]

Да, просто потому что моих скудных компетенций в HTML/CSS хватает пока на такой способ - он мне предельно понятен. И нечто подобное я уже сделал в футере с корзиной и перечнем номеров телефонов (на десктопах - горизонтальный список, на мобильных - выпадающий список при тапе).

 

Весьма неплохо, т.к. в этой ситуации более красивого решения я не знаю, если учитывать что вы планируете поддерживать code convention bootstrap. В вашей ситуации это наиболее простое и эффективное решение, которое обойдется дешево и не нанесет вреда качеству кода, не повлияет на поисковую выдачу. Более сложные реализации требуют рассмотрение вашего кода, но я бы не стал запариваться, все на уровне, в самом деле, лучше может получиться, но это будет стоить дорого, не думаю что целесообразно.

[SlideShow]

Ну, переопределить стили через класс вместо ID - дело не хитрое, но если будет продублирована кнопка корзины в которой есть ID (а она там есть), то для дублирующей кнопки нужно уникализировать ID ? Но тогда кнопка "отвяжется" от соответствующих скриптов ведь.

 

Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте!

[pantagruel964]

решение чего? Тему читали?

Да хз, локтем клавиатуру зацепил

 

Ща детальнее смотрю.

По первому заходу, мне показалось, что меня ткнули в онлайн-тренажер по СSS  :-D

А так изменен порядок вывода блоков как раз таки....

flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки

[chamaerops]

Скрипт там один должен быть, его легко поправить и найти, id вы же наете, нужно вместо '#your_id' поставить '.your_class', т.е. класс. Вы же делаете бэкапы перед манипуляциями? Попробуйте!

Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение?

[SlideShow]

Да хз, локтем клавиатуру зацепил

 

flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки

 

у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться?

[SlideShow]

Вот оно что.. Скажем так - я думал, что id="button-cart" используется тут двояко - как идентификатор для целей скрипта, и для стилизации через CSS. То есть замена ID на класс, что в скрипте, что в стилях - это корректное решение?

 

да, забыл, для стилизации тоже наверняка используется. По-этому нужно менять его и в скриптах и в стилях, все верно. backup!

[chamaerops]

Да хз, локтем клавиатуру зацепил

 

flexbox и order, в зависимости от условий @media меняете порядок. Это самый простой вариант. Если не так, то меняйте порядок через js, не надо плодить блоки

js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы..

[chamaerops]

да, забыл, для стилизации тоже наверняка используется. По-этому нужно менять его и в скриптах и в стилях, все верно. backup!

скажем так, стилизацию по  ID я уже сам подвязал, но это легко правится..

[SlideShow]

js-познания=0, а вот через @media - я как раз и думал, что более толковый способ где-то там кроется... Спасибо за наводку, буду курить мануалы..

 

попробуйте, но если @media flexbox и order для вас проще чем hidden сделать, тогда уж лучше переверстайте без col от bootstrap карточку, все станет проще. На зачем тогда bootstrap...

 

скажем так, стилизацию по  ID я уже сам подвязал, но это легко правится..

 

$('#button-cart'). меняем на $('.button-cart'). в /catalog/view/theme/default/template/product/product.tpl, вот и все приключение с js

[pantagruel964]

у человека уже установлен bootstrap, оне не с нуля код пишет. Зачем тогда bootstrap пользоваться, чтобы потом flexbox использовать. В этом случае можно без @media легко обойтись. А js зачем, это ж верстка, зачем все по разным файлам распихивать, как потом разбираться?

Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант.

Не понял про js, зачем по разным файлам.

[SlideShow]

Бутстрап не исключает использование флексов и это никак не трогает верстку бутсрапа, изменится только порядок блоков. Это самый безболезненный вариант.

Не понял про js, зачем по разным файлам.

 

Смотрите, у ТС есть левая и правая колонка, левая содержит два блока один под одним. Как не трогая верстку bootstrap воспользоваться flex-блоками?

Замечу что flex-блоки поддерживаются только новыми браузерами, часто это бывает важно и стоит учитывать.

 

Про js вы раньше писали в ключе - можно блоки переместить js-ом, дабы не плодить hidden.

[ocdev_pro]

Тут наверное даже вопрос/ответ должен стоять по другому "Как переверстать карточку товара?" - Грамотно!
1 - Заголовок товара средним шрифтом
2 - Изображение

3. Цена (+- спец предложение)

4. Кнопка Купить
5. Краткий текст характеристик

6. Отзывы возможно

Все остальные элементы можно скрыть классом .hide
Не перегружайте страницу ненужными элементами. Если не знаете какие элементы нужные, а какие нет - проведите А/Б тест с установкой целей в Метрике.
И при сравнительном анализе поймете используют люде те элементы или почти нет.. И если нет то их убираете! Все просто)

 

ИМХО дизайн сайта, мобильной версии должен составлятся дизайнером под четким руководством маркетолога.... А не потому что "Я так вижу" ))