EdZa

1.99.6 vamshop4 - отображение корзины в формате сотового

Recommended Posts

EdZa

image.png

При работе с сотового корзина выходит за пределы экрана.

Будут исправления ?

image.png

Share this post


Link to post
Share on other sites
support
20 минут назад, EdZa сказал:

image.png

При работе с сотового корзина выходит за пределы экрана.

Будут исправления ?

image.png

В будущих версиях - возможно.

Но таблица со всеми товарами всё равно в 360 пикселей не влезет нормально.

Хоть адаптивная таблица будет, хоть неадаптивная.

Share this post


Link to post
Share on other sites
support

Пример страницы корзина есть в http://demo2.vamshop.ru

Там сттаница сделана адаптивной таблицей.

и всё равно не влезет ничего толком в 360 пикселей.

Share this post


Link to post
Share on other sites
EdZa

как минимум добавить

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

<div class="table-responsive">
</div>

Тогда хоть экран корежить не будет, а прокрутка появится.

Share this post


Link to post
Share on other sites
support
41 минуту назад, EdZa сказал:

как минимум добавить

Across every breakpoint, use .table-responsive for horizontally scrolling tables.

<div class="table-responsive">
</div>

Тогда хоть экран корежить не будет, а прокрутка появится.

Хорошо, посмотрим.

Но на таких маленьких экранах таблицу широкую нормально не покажешь.

Прокрутка - это тоже, так себе, удовольствие, когда у тебя 360px в ширину.

Share this post


Link to post
Share on other sites
support
В 09.07.2019 в 14:39, EdZa сказал:

image.png

При работе с сотового корзина выходит за пределы экрана.

Будут исправления ?

image.png

Сделал адаптивную таблицу + не показывает некоторые колонки на маленьких экранах.

Сейчас выглядит неплохо.

Вот исправленный файл /templates/vamshop4/module/order_details.html

Вот как выглядит, скрины.

 

Screenshot from 2019-11-24 21-30-20.png

Screenshot from 2019-11-24 21-30-25.png

order_details.html

Share this post


Link to post
Share on other sites
KoVaLsKy

да зачем table-responsive, когда можно на col-* сверстать. Заменить td на div и все.

Share this post


Link to post
Share on other sites
support
3 минуты назад, KoVaLsKy сказал:

да зачем table-responsive, когда можно на col-* сверстать. Заменить td на div и все.

Лично моё imho, что таблица должна оставаться таблицей.

Страница корзины больше на таблицу похоже, заголовки, колонки, строки.

Хотя, по большому счёту, не принципиально, понятно, что можно и адаптивными css классами bootstrap сделать.

Share this post


Link to post
Share on other sites
Роман_DD
В 26.11.2019 в 17:01, KoVaLsKy сказал:

да зачем table-responsive, когда можно на col-* сверстать. Заменить td на div и все.

ВОТ! А таблица не нужна там совсем уже давно.

Share this post


Link to post
Share on other sites
support
15 минут назад, Роман_DD сказал:

ВОТ! А таблица не нужна там совсем уже давно.

Дело не в таблице, а в ширине экрана. Слишком мало места по горизонтали на смартфонах.

Вот посмотрите пример на https://vamhost.ru

Там максимально всё убрано и нет таблиц.

Но всё равно не влазит, 950 сумма всё равно чуть вылазит.

А ещё и атрибуты будут, то тем более не влезет.

Screenshot from 2019-12-06 15-25-11.png

В общем, я постараюсь как-то впихнуть всё ровно, но это не так просто.

 

Share this post


Link to post
Share on other sites
Роман_DD
17 минут назад, support сказал:

Дело не в таблице, а в ширине экрана. Слишком мало места по горизонтали на смартфонах.

Вот посмотрите пример на https://vamhost.ru

Там максимально всё убрано и нет таблиц.

Но всё равно не влазит, 950 сумма всё равно чуть вылазит.

А ещё и атрибуты будут, то тем более не влезет.

Screenshot from 2019-12-06 15-25-11.png

В общем, я постараюсь как-то впихнуть всё ровно, но это не так просто.

 

На вскидку - слово Количество не нужно, все и так давно знаю что это количество.

Картинку большой и НАД количеством а не сбоку.

Цену отдельной строкой

Опции отдельной строкой. 

Ну не строкой, а колонкой скажем ил дивом который будет вниз под другой уползать. placement: float-left и что то там про flex.

Я не особо шарю, но вы попробуйте не в браузере, а в программе stylizer там демка есть, в ней все намного намного проще и очевиднее чем в режиме разработчика ковыряться...

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

ВБОК ЮЗЕР ЛИСТАТЬ НЕ ХОЧЕТ И НЕ ДОЛЖЕН! На телефоне информация вертикально доллжна быть. К тому же улучшаются ПОВЕДЕНЧЕСКИЕ ФАКТОРЫ  для ПС ЯНДЕКС. (время на странице, скрол!)

Все остальное отлично, но от таблицы придется избавиться  :)) Я понимаю, это такое легаси, которое жалко бросать, сколько времени убито на доведение таблицы до идеала, но всему приходит конец и таблицам в том числе :)

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

 

Share this post


Link to post
Share on other sites
support

Ну насчёт бесконечного скролла вниз - это конечно спорный очень момент.

Все слайдеры, тот же интаграм вбок листается и не вниз.

Так что прям стремиться к рокрутке вниз тоже не нужно, imho

Вот например в vamshop4 шаблон на главной странице слайдера сделаы, они ж вбок листают.

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

А так сразу понятно, вот новинки, полистал слайдер вбок, вот отзывы, полистал слайдер вбок.

Ну это моё мнение, лично мне так удобнее.

В шаблоне vamshop1 сделано именно прокруткой вниз, а не слайдером, и на мой вкус, не очень, когда просто вниз и вниз листаешь и не видишь, что это ты крутишь, сдкидки, новинки, или что-то ещё.

 

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

 

Share this post


Link to post
Share on other sites
Роман_DD

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

 

Но да, слайдеры для главной больше годятся, но опять же , это мы элементы листаем однородные. в корзине это никак не применить. Вся инфорация должна умещаться на одном экране, ну и не забываем, что соотношение сторон у мобильника сейчас 16/9 или окло того... по вертикали почти в 2 раза больше места. 

Вообще по умолчанию там если вы обратите внимание, то padding одчень большой, что в листинге на мобиле, что в корзине, получается теряется место горизонтальное из-за отступов.

Share this post


Link to post
Share on other sites
support
1 час назад, Роман_DD сказал:

Вообще по умолчанию там если вы обратите внимание, то padding одчень большой, что в листинге на мобиле, что в корзине, получается теряется место горизонтальное из-за отступов.

Буду вносить правки.

Думаю, что всё реально, можно всё сделать и без прокрутки.

 

Share this post


Link to post
Share on other sites
support

Что-то нормально корзина не получается, что б и на компе и на мобилке нормально выглядело, если убрать всё лишнее, что б влазило на мобилку, тогда на компе слишком много места пустого.

Сейчас попробую корзину сделать плитками, как товар внутри категории например тут - http://demo.vamshop.ru/smartphones.html

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

Сейчас покажу, залью на demo.vamshop.ru

И выглядит нормально, без прокруток, на мобилках, и на компах.

7 часов назад, Роман_DD сказал:

Вообще по умолчанию там если вы обратите внимание, то padding одчень большой, что в листинге на мобиле, что в корзине, получается теряется место горизонтальное из-за отступов.

 

Share this post


Link to post
Share on other sites
support
9 часов назад, Роман_DD сказал:

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

 

Вот как получилось.

Влазит и на компе и на смартфоне.

http://demo.vamshop.ru

Можно "в-живую" посмотреть.

Screenshot from 2019-12-07 00-44-03.png

Screenshot from 2019-12-07 00-44-12.png

 

 

Прицепил два файлы.

Исправленный /templates/vamshop4/module/order_details.html

и новый файл /templates/vamshop4/components/item/item-cart.html

order_details.html

 

item-cart.html

Share this post


Link to post
Share on other sites
support
В 09.07.2019 в 14:39, EdZa сказал:

 

При работе с сотового корзина выходит за пределы экрана.

Будут исправления ?

 

Вот посмотрите демку http://demo.vamshop.ru

Как сейчас выглядит корзина.

По идее, сейчас уж точно нормально на любых устройствах.

Share this post


Link to post
Share on other sites
ZM

А когда основной архив на сайте для скачивания измените? И будет ли там растянутый шаблон?

Share this post


Link to post
Share on other sites
support
3 минуты назад, ZM сказал:

А когда основной архив на сайте для скачивания измените? И будет ли там растянутый шаблон?

Обновил.

Share this post


Link to post
Share on other sites
ZM

Спасибо

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now