Перейти к содержанию
chamaerops

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

Рекомендуемые сообщения

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

ОС 2.1.0.1

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

 

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

 

post-707590-0-79352000-1472066571_thumb.png

 

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

 

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

 

post-707590-0-55064900-1472066433_thumb.png

 

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

 

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

post-707590-0-27223000-1472066433_thumb.png

 

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

 

1.Фото

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

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

 

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

 

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

 

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

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

 

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

 

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

 

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

Изменено пользователем chamaerops

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

...

 

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

 

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

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

 

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

 

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Изменено пользователем chamaerops

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

 

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

 

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

 

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

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

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

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.