Как Лучше Поменять Media Query В Cs-Cart

Разработчикам Общение разработчиков
1

В стандартной сетке CS-Cart секции сохраняют заданные пропорции к ширине экрана до 767 пикселей, а потом складываются в 100% ширины по горизонтали. Как мне лучше это поменять? Например я хочу чтоб до 767 пикселей был один ряд в 4 колонки, до 470 - два ряда по две колонки, а при размере экрана меньше 470 пикселей - 4 ряда по одной колонке. Пока я придумал, что могу переписать queries в своей табличке стилей, сказать что .span4 в таком-то ряду после 767px становится шириной 49%, а после 470 - 100% (с учетом расстояния между колонками конечно). Мне кажется, что это корявовато.

Twilio не хочу, не то, чтобы жму по полтиннику отдать, а просто не нравится как оно это делает.

2

В стандартной сетке CS-Cart секции сохраняют заданные пропорции к ширине экрана до 767 пикселей, а потом складываются в 100% ширины по горизонтали. Как мне лучше это поменять? Например я хочу чтоб до 767 пикселей был один ряд в 4 колонки, до 470 - два ряда по две колонки, а при размере экрана меньше 470 пикселей - 4 ряда по одной колонке. Пока я придумал, что могу переписать queries в своей табличке стилей, сказать что .span4 в таком-то ряду после 767px становится шириной 49%, а после 470 - 100% (с учетом расстояния между колонками конечно). Мне кажется, что это корявовато.

Twilio не хочу, не то, чтобы жму по полтиннику отдать, а просто не нравится как оно это делает.

Пока самый простой вариант это задать пользовательские классы в секциях, и в редакторе дизайна с css прописать для них стили.

И надежно, и в код лезть не надо.

3

Сам хочу чтобы на смартфонах было две колонки с товарами в категориях, как на большинстве сайтов. Я нашел параметр, но, когда загоняю его в my_changes сайт падает =)

@media screen and (max-width: 480px)
.ty-column3 {
width: 100%;
}

вот, если ставишь 50%, то все ок. только текст цены слишком большой, съезжает на другую сторону. его бы тоже уменьшить и все ок.

все это я правлю в хроме, но как говорю, при переносе этих значений в ксс -- сайт ломается.

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

Мистер а_цветков, скажите, как вы сделали в карточке товара мини-картинки сбоку, а не снизу.

Как в новой карточке товара Большая Картинка?

Я смог перетащить из шаблона отображение картинки бренда просто скопировав код. А вот при переносе блока с мини-иконками сайт съезжает.

4

В стандартной сетке CS-Cart секции сохраняют заданные пропорции к ширине экрана до 767 пикселей, а потом складываются в 100% ширины по горизонтали. Как мне лучше это поменять? Например я хочу чтоб до 767 пикселей был один ряд в 4 колонки, до 470 - два ряда по две колонки, а при размере экрана меньше 470 пикселей - 4 ряда по одной колонке. Пока я придумал, что могу переписать queries в своей табличке стилей, сказать что .span4 в таком-то ряду после 767px становится шириной 49%, а после 470 - 100% (с учетом расстояния между колонками конечно). Мне кажется, что это корявовато.

Twilio не хочу, не то, чтобы жму по полтиннику отдать, а просто не нравится как оно это делает.

CSS меняется с помощью модуля, как подключить свой CSS можно посмотреть здесь:

http://www.cs-cart.ru/video?video_id=140893041

В коробке есть модуль-пример rus_theme_style , который меняет кучу стилей.

5

CSS меняется с помощью модуля

Я так и сделал, подключил модуль, в модуле прописал свои MQ... Спасибо :)

вот, если ставишь 50%

На всякий случай замечу, что 50% и 50% не должны влезть в эту сетку. У ей есть еще промежутки между колонками, на круг получается 98 процентов.

6

На всякий случай замечу, что 50% и 50% не должны влезть в эту сетку. У ей есть еще промежутки между колонками, на круг получается 98 процентов.

Промежуток - это пробел между строковыми элементами. Обнулите размер шрифта у контейнера и можете ставить 50%.

.grid-list {
    font-size: 0;

> [class*="ty-column"] {
    font-size: @body_font_size;
}



}

7

Мистер а_цветков, скажите, как вы сделали в карточке товара мини-картинки сбоку, а не снизу.

Как в новой карточке товара Большая Картинка?

Я смог перетащить из шаблона отображение картинки бренда просто скопировав код. А вот при переносе блока с мини-иконками сайт съезжает.

Так просто тут не расскажешь. Попробую объяснить в общих чертах.

В шаблоне используются вложенные колонки. Это когда в одной колонке могут быть еще несколько обернутых в блок с шириной 100%. Метод достаточно распространенный, он, например, используется в bootstrap

Создайте новый файл шаблона товара или используйте хук products:view_main_info, скопируйте содержимое из default_template и разделите его на 2 колонки. Фото - одна, содержимое - другая.

Поместите в первую колонку содержимое файла \templates\views\products\components\product_images.tpl а его подключение удалите.

Колонку с фото (то что из файла product_images.tpl) разбейте еще на 2 колонки. Фото - одна, иконки - другая.

Проставьте везде ширину, чтобы в сумме вложенные колонки имели ширину 100% и задайте для них float: left и box-sizing: border-box. Например, для 2 колонок.

.row {
    margin: 0 -10px;
    .clearfix;

> .span-50 {
    float: left;
    width: 50%;
    box-sizing: border-box;
    padding: 0 10px;
}



}

Как-то так. Главное принцип понять. Можете сделать модулем через products:view_main_info.

Ширину колонок можете через media query регулировать.

А есть еще более продвинутые методы.

8

Спасибо!

Но моего знания css для всего этого, видимо, не достаточно. Я смог только иконмун заменить по видео Даниила и разные размеры с манипуляциями цветов и размеров шрифта сделать.