Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


chamaerops

Recommended Posts

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

 

Вот и мне кажется, что глупо перепиливать всю карточку товара через @mеdia, тем более что это уже сделано в бутстрапе. Тем более, это куда больший объем работ с куда большей вероятностью наговнокодить  :-D

  • +1 1
Надіслати
Поділитися на інших сайтах


кратко 

<div class="col-xs-12"></div>

 

Больше ничего не придумаете в мобильной верстке, она там везде "строчная" 

Змінено користувачем ArtenPitov
Надіслати
Поділитися на інших сайтах

Ну например блок с кнопкой купить если у вас уходит в самый низ а надо после картинки можно на js переместить
Что то типа такого:
 

var cart = $('.block_cart').html();
$(cart).prepedTo(.image); Содержимое .block_cart переместится к .image

Ну а там почитайте о prependTo, before, after и найдете для себя удобный метод перемещения элементов на jquery

Надіслати
Поділитися на інших сайтах

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

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

 

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

Обернуть во флекс и селфить нужные блоки. Новые браузеры - это все, кроме браузера №8, за последний год не встречал проблем.

 

js-ом использовать append-prepend, там скрипт на несколько строчек, зачем отделые файлы

Надіслати
Поділитися на інших сайтах

Обернуть во флекс и селфить нужные блоки. Новые браузеры - это все, кроме браузера №8, за последний год не встречал проблем.

 

js-ом использовать append-prepend, там скрипт на несколько строчек, зачем отделые файлы

 

bootstrap push pull, как и флекс ограничивает высоту блоков в данном случае, а можно было бы воспользоваться...

Надіслати
Поділитися на інших сайтах


Да почему же отдельные... Там же в product.tpl где начинается $(document).ready(... и писать эти самые пару строчек. Человек который далек от особенностей работы CSS возможно горазно проще будет манипулировать DOM элементами чем лепить горбатого стилями... Да и учтите Opera Mini и UC Browser может flexbox и не схавать... а я много таких знаю, что юзают их

Надіслати
Поділитися на інших сайтах

Тут наверное даже вопрос/ответ должен стоять по другому "Как переверстать карточку товара?" - Грамотно!

1 - Заголовок товара средним шрифтом

2 - Изображение

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

4. Кнопка Купить

5. Краткий текст характеристик

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

Все остальные элементы можно скрыть классом .hide

Не перегружайте страницу ненужными элементами. Если не знаете какие элементы нужные, а какие нет - проведите А/Б тест с установкой целей в Метрике.

И при сравнительном анализе поймете используют люде те элементы или почти нет.. И если нет то их убираете! Все просто)

 

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

Ровно это и оставлено, плюс добавлено поле "Есть/нет в наличии". Ну, и звезды, для микроразметки.

 

А насчет дизайнера.. Скажем так, если б бюджет подразумевал дизайнера/маркетолога, то он бы подразумевал и веб-программиста.  :-D

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

 

Если обобщать - то сейчас делается некий необходимый минимум для запуска ИМ, благо ВСЕ конкуренты в моей нише имеют еще более убогие сайты (лишь у одного из них -адаптивная верстка), чем даже то, что на данном этапе есть у меня. Добрая треть из них вообще торгует на prom.ua (как, собственно и я пока тоже). Но подразумевается, что после выхода на некоторое количество корзин в день, часть оборота выделится на дошлифовку и доведения магазина до ума. Хотя это вообще-то процесс перманентный - 

 

кратко 

<div class="col-xs-12"></div>

 

Больше ничего не придумаете в мобильной верстке, она там везде "строчная" 

Ну это само собой, вопрос - в очередности вывода блоков.

Надіслати
Поділитися на інших сайтах


И вы оттуда же)) пром.уа - я поступил иначе, потерпел месяц-другой и усердно пыхтел над свои магазином, а потом начал на нем продавать, так и не вложив не копейки в пром... Хотя до сих пор заманивают и периодически названивают... Многие ведь торгуют у них, но самому все какие-то подозрения.. отдай 100$ им, потом еще 50$ что бы шаблон можно было допилить... А что дальше неизвестно, обещают трафик, лиды. Но негатива на них почему-то много))

Надіслати
Поділитися на інших сайтах

Ну это само собой, вопрос - в очередности вывода блоков.

 

Все опять просто 

 

1) Шапка + меню (скрытое конечно)

2) Название товара (-/+)

3) Изображение 

4) Цена + опции + купить (или + название ) 

5) Табы 

 

Все должно выводиться в логической последовательности 

 

ЗЫ // Ненавижу мобильную верстку  :ph34r:

Надіслати
Поділитися на інших сайтах

Все опять просто 

 

1) Шапка + меню (скрытое конечно)

2) Название товара (-/+)

3) Изображение 

4) Цена + опции + купить (или + название ) 

5) Табы 

 

Все должно выводиться в логической последовательности 

 

ЗЫ // Ненавижу мобильную верстку  :ph34r:

Да ладно в мобильной верстке нет ничего сложного если вы используете отдельно шаблон для мобилной версии и для обычной)) Тыщу раз об этом писал, но все же к Бутстрапу привязаны вот и никак не разделят. 

Преимущество №1 это супер легкость мобильного шаблона.. И гугл любит ее) На главной странице смотрите в разделе мобильной версии Opencart

Надіслати
Поділитися на інших сайтах

На проме мне не нравится то, что там рядом же = куча конкурентов. Как правило, клиент звонит и начинает разговор с фразы "Я вот тут ваше обьявление увидел". Блин, делаешь подобие сайта (насколько это позволяет пром), а люди видят "обьявление". Ну, процентов 10 клиентов звонит с вопросом "Это магазин "такойто.ком.юа?, мне нужно то-то..."  Ну и почасти СЕО там нехорошо...

Надіслати
Поділитися на інших сайтах


bootstrap push pull, как и флекс ограничивает высоту блоков в данном случае, а можно было бы воспользоваться...

Даже не хочу заводить разговор про ущербность бутстраповской верстки..

Надіслати
Поділитися на інших сайтах

Даже не хочу заводить разговор про ущербность бутстраповской верстки..

Мужик ну ты меня понял ))) 8-)

Надіслати
Поділитися на інших сайтах

Да ладно в мобильной верстке нет ничего сложного если вы используете отдельно шаблон для мобилной версии и для обычной)) Тыщу раз об этом писал, но все же к Бутстрапу привязаны вот и никак не разделят. 

Преимущество №1 это супер легкость мобильного шаблона.. И гугл любит ее) На главной странице смотрите в разделе мобильной версии Opencart

 

адаптивные проекты дешевлве мобильных версий, чаще

 

я за мобильную версию

Надіслати
Поділитися на інших сайтах


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

 

Не не, верстать под них не люблю просто.

Правильно верстать от мобильного к десктопу, а я делаю на оборот. Потом сижу голову ломаю как оно должно быть на мобиле и еще это все "оттестить" нужно.

 

Недавно со скриптом парился, оказывается стандартный браузер на андроидах не хочет отправлять больше 2х параметров через onClick="myFunc(par1, par2, par3)";  :cry:

Надіслати
Поділитися на інших сайтах

Кхм.. вопрос был - как грамотно переверстать.

Встречный вопрос - вы сможете грамотно это реализовать?

Если это вопрос мне - то дублированием блока и пряча/выводя нужный блок в зависимости от разрешения (инструментарий бутстрапа) - то да.

Тема создавалась для того, чтоб выяснить не является ли такой способ совсем уж "костыльным" и чтоб выяснить, какие есть альтернативы. 

 

З.Ы, Рад, что тема нашла отклик у других. Спасибо всем.

Змінено користувачем chamaerops
Надіслати
Поділитися на інших сайтах


Даже не хочу заводить разговор про ущербность бутстраповской верстки..

 

и это хоршо, т.к. разговор скорее стоит вести в другом ключе - рыночные отношения и конкуренция 

Надіслати
Поділитися на інших сайтах


Да ладно в мобильной верстке нет ничего сложного если вы используете отдельно шаблон для мобилной версии и для обычной)) Тыщу раз об этом писал, но все же к Бутстрапу привязаны вот и никак не разделят. 

Преимущество №1 это супер легкость мобильного шаблона.. И гугл любит ее) На главной странице смотрите в разделе мобильной версии Opencart

неее, я для себя открыл мобайл детект  ;)  :-D

и впилил прямо при старте в загрузку, теперь есть такое, if ($this->isMobile) {}

Надіслати
Поділитися на інших сайтах

Если разобраться 1 раз, то ничего там страшного. А верстать так же как и под мобильную) Времени займет на времени примерно столько же +- 2 часа

Надіслати
Поділитися на інших сайтах

Не не, верстать под них не люблю просто.

Правильно верстать от мобильного к десктопу, а я делаю на оборот. Потом сижу голову ломаю как оно должно быть на мобиле и еще это все "оттестить" нужно.

 

Недавно со скриптом парился, оказывается стандартный браузер на андроидах не хочет отправлять больше 2х параметров через onClick="myFunc(par1, par2, par3)";  :cry:

Ну тут обратно же вопрос к заказчику. Я обычно требую дизайн под 480px хотя бы. А если нету, то делаю на свое усмотрение и тогда без вопросом. Правда опыта у меня в верстке уже 6 лет, практически с 98% точностью угадываю, что хочет клиент в мобильной верстке)

Надіслати
Поділитися на інших сайтах

Не не, верстать под них не люблю просто.

Правильно верстать от мобильного к десктопу, а я делаю на оборот. Потом сижу голову ломаю как оно должно быть на мобиле и еще это все "оттестить" нужно.

 

Недавно со скриптом парился, оказывается стандартный браузер на андроидах не хочет отправлять больше 2х параметров через onClick="myFunc(par1, par2, par3)";  :cry:

 

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

Надіслати
Поділитися на інших сайтах


адаптивные проекты дешевлве мобильных версий, чаще

 

я за мобильную версию

На перспективу держу в уме AMP, но там уже точно не сам писать буду  :-D

Надіслати
Поділитися на інших сайтах


Ну тут обратно же вопрос к заказчику. Я обычно требую дизайн под 480px хотя бы. А если нету, то делаю на свое усмотрение и тогда без вопросом. Правда опыта у меня в верстке уже 6 лет, практически с 98% точностью угадываю, что хочет клиент в мобильной верстке)

 

мощно! 98%, я больше люблю согласованные макеты...

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.