Перейти к содержимому


Корзина В Мобильной Версии

Автор Timur850, 03 февр. 2017 19:16

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 7

#1 Timur850

Timur850

    Новичок

  • Пользователи
  • Pip
  • 1 сообщений

Отправлено 03 Февраль 2017 - 19:16

Добрый вечер.  Помогите.в мобильной версии,товар-количество-цена отображаеться вертикально.хочеться в одну строку как в теме <Бистро>

Фото корзины в ^лазури^ и в ^бистро^

Прикрепленные изображения

  • IMG_1093.PNG
  • IMG_1094.PNG

#2 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 03 Февраль 2017 - 19:24

+ тоже интересно (когда много позиций тема бистро актуальней)

#3 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 15 Февраль 2017 - 14:44

Просмотр сообщенияTimur850 (03 Февраль 2017 - 19:16) писал:

Добрый вечер.  Помогите.в мобильной версии,товар-количество-цена отображаеться вертикально.хочеться в одну строку как в теме <Бистро>

Фото корзины в ^лазури^ и в ^бистро^
Здравствуйте. Простите за долгое ожидание ответа.
Точно так же сделать, к сожалению, не получиться, так как придется изменять стили самого шаблона, которые так же применяются на других страницах. Пример того как получиться прикрепила.
Для этого Вам необходимо в шаблоне Корзина найти блок
{% FOR cart_items %}
		 <tr class="items" data-id="{cart_items.GOODS_MOD_ID}">
		 <td width="30" class="closetd"><a data-href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" onclick="ajaxdelete($(this))" class="btn-remove"></a></td>
		 <td class="image"><a href="{cart_items.GOODS_URL}"><img class="goods-image-icon" src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png?design=eclipse{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}"></a></td>
		 <td class="name">
			 <a href="{cart_items.GOODS_URL}">{cart_items.GOODS_NAME}</a>
			 <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара -->
			 {% IF cart_items.GOODS_MOD_ART_NUMBER %}<div class="art">Артикул: <span>{cart_items.GOODS_MOD_ART_NUMBER}</span></div>{% ENDIF %}
			 {% IFNOT cart_items.distinctive_properties_empty %}<div class="properties">({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</div>{% ENDIF %}
		 </td>
		 <td width="150" class="cart-price">
			 <span class="title">Цена:</span>
			 <span class="price">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span>
		 </td>
		 <td width="100" class="cart-qty">
			 <span class="title">Кол-во:</span>
			 <input name="form[quantity][{cart_items.GOODS_MOD_ID}]" value="{cart_items.ORDER_LINE_QUANTITY}" title="Количество, {cart_items.GOODS_MOD_MEASURE_NAME}" class="inputText cartqty" type="number" maxlength="5" min="1" onkeypress="return keyPress(this, event);" onpaste="return false;" />
		 </td>
		 <td width="150" class="cart-price">
			 <span class="title">Сумма:</span>
			 <span class="ajaxtotal price">{cart_items.ORDER_LINE_PRICE_NOW | money_format}</span>		
		 </td>
		 </tr>
	 {% ENDFOR %}
и замените его на 
{% FOR cart_items %}
		 <tr class="items" data-id="{cart_items.GOODS_MOD_ID}">
		 <td width="5%" class="closetd"><a data-href="{cart_items.ORDER_LINE_DELETE_URL}" title="Удалить позицию" onclick="ajaxdelete($(this))" class="btn-remove"></a></td>
		 <td class="image" width="10%"><a href="{cart_items.GOODS_URL}"><img class="goods-image-icon" src="{% IF cart_items.GOODS_IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-icon.png?design=eclipse{% ELSE %}{cart_items.GOODS_IMAGE_ICON}{% ENDIF %}"></a></td>
		 <td class="name" width="50%">
			 <a href="{cart_items.GOODS_URL}">{cart_items.GOODS_NAME}</a>
			 <!-- Если у товара есть отличительные свойства для модификации товара, допишем их к названию товара -->
			 {% IF cart_items.GOODS_MOD_ART_NUMBER %}<div class="art">Артикул: <span>{cart_items.GOODS_MOD_ART_NUMBER}</span></div>{% ENDIF %}
			 {% IFNOT cart_items.distinctive_properties_empty %}<div class="properties">({% FOR distinctive_properties %}{cart_items.distinctive_properties.NAME}: {cart_items.distinctive_properties.VALUE}{% IFNOT cart_items.distinctive_properties.last %}, {% ENDIF %}{% ENDFOR %})</div>{% ENDIF %}
		 </td>
		 <td width="20%" class="cart-price">
			 <span class="title">Цена:</span>
			 <span class="price">{cart_items.GOODS_MOD_PRICE_NOW | money_format}</span>
		 </td>
		 <td width="15%" class="cart-qty">
			 <span class="title">Кол-во:</span>
			 <input name="form[quantity][{cart_items.GOODS_MOD_ID}]" value="{cart_items.ORDER_LINE_QUANTITY}" title="Количество, {cart_items.GOODS_MOD_MEASURE_NAME}" class="inputText cartqty" type="number" maxlength="5" min="1" onkeypress="return keyPress(this, event);" onpaste="return false;" />
		 </td>
		 <td width="150" class="cart-price">
			 <span class="title">Сумма:</span>
			 <span class="ajaxtotal price">{cart_items.ORDER_LINE_PRICE_NOW | money_format}</span>		
		 </td>
		 </tr>
	 {% ENDFOR %}
Далее в файле main.css найдите строку 
@media all and (max-width: 767px) {
и после нее найдите блок
.cartTable thead {display: none;}
.cartTable tbody tr {display: block;margin-bottom: 30px;}
.cartTable tbody tr > td {display: block;width: 100%;margin-bottom: 1px;}
.cartTable tbody .inputText {width: 70px;}
.cartTable tbody .price.old-price {display: none;}
.cartTable tbody tr .title {float: left;display: inline-block;}
.cartTable tbody tr .cart-qty .title {line-height: 40px;}
.cartTable tbody tr.discounttr {margin-bottom: 1px;}
.cartTable tbody tr.discounttr td {background-color: #efefec;text-align: right;}
.cartTable tbody tr.discounttr .disc-name .num {display: inline-block;}
.cartTable tbody tr.discounttr td.hide {display: none;}
.cartTable tfoot tr {display: block;float: left;width: 100%;margin-bottom: 1px;}
.cartTable tfoot tr > td {display: block;float: left;width: 100%;}
.cartTable tfoot td.text-right > span:first-child {margin-right: 15px;float: left;}
.cartTable tfoot td.hide {display: none;}
.cartTable tfoot td.text-right span.TotalSum {display: inline-block;}
.cartTable .buttons .button {display: block;float: none !important;margin: 0 auto 10px;}
и замените его на 
.cartTable thead {display: none;}
.cartTable tbody tr {display: block;/*margin-bottom: 30px;*/}
.cartTable tbody tr > td {/*display: block;width: 100%;*/margin-bottom: 1px;padding: 0px 5px 10px;}
.cartTable tbody .inputText {width: 70px;}
.cartTable tbody .price.old-price {display: none;}
.cartTable tbody tr .title {float: left;display: inline-block;}
.cartTable tbody tr .cart-qty .title {line-height: 14px;}
.cartTable tbody tr.discounttr {margin-bottom: 1px;}
.cartTable tbody tr.discounttr td {background-color: #efefec;text-align: right;}
.cartTable tbody tr.discounttr .disc-name .num {display: inline-block;}
.cartTable tbody tr.discounttr td.hide {display: none;}
.cartTable tfoot tr {display: block;float: left;width: 100%;margin-bottom: 1px;}
.cartTable tfoot tr > td {display: block;float: left;width: 100%;}
.cartTable tfoot td.text-right > span:first-child {margin-right: 15px;float: left;}
.cartTable tfoot td.hide {display: none;}
.cartTable tfoot td.text-right span.TotalSum {display: inline-block;}
.cartTable .buttons .button {display: block;float: none !important;margin: 0 auto 10px;}
.cartTable .goods-image-icon {
width: 30px !important;
}
.cartTable tbody td.name a {
display: block;
font-size: 11px;
line-height: 1.3;
margin-bottom: 10px;
}
.cartTable tbody td.name div {
font-size: 8px;
margin-bottom: 3px;
}
.cartTable input.inputText {
padding: 0 0 0 10px;
height: auto;
width: 30px;
}
.cart-info{padding:0;}
.cartTable tbody tr > td:nth-child(6){display: none;}

Прикрепленные изображения

  • Screenshot_147.jpg

#4 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 16 Февраль 2017 - 00:09

а для шаблона рассвет можно также, выше код пробовал, у меня с ним несколько проблем:
1. пропала кнопка удалить товар.
2. картинки можно растянуть по ширине выделенной ей ячейки.
3. убрать чередование цвета
4. при изменение количества выдает ошибку.

заранее спасибо :)

#5 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 21 Февраль 2017 - 14:58

Просмотр сообщения57P (16 Февраль 2017 - 00:09) писал:

а для шаблона рассвет можно также, выше код пробовал, у меня с ним несколько проблем:
1. пропала кнопка удалить товар.
2. картинки можно растянуть по ширине выделенной ей ячейки.
3. убрать чередование цвета
4. при изменение количества выдает ошибку.

заранее спасибо :)

Инструкция описанная выше не подходит для шаблона Рассвет. Чтобы получить такой же результат на Вашем шаблоне Вам необходимо в файле main.css найти строку
@media all and (max-width: 767px) {
чуть ниже нее блок
.cartTable thead {display: none;}
.cartTable tbody tr {display: block;margin-bottom: 30px;}
.cartTable tbody tr > td {display: block;width: 100%;margin-bottom: 1px;}
.cartTable tbody .inputText {width: 70px;}
.cartTable tbody .price.old-price {display: none;}
.cartTable tbody tr .title {float: left;display: inline-block;}
.cartTable tbody tr .cart-qty .title {line-height: 40px;}
.cartTable tbody tr.discounttr {margin-bottom: 1px;}
.cartTable tbody tr.discounttr td {background-color: #efefec;text-align: right;}
.cartTable tbody tr.discounttr .disc-name .num {display: inline-block;}
.cartTable tbody tr.discounttr td.hide {display: none;}
.cartTable tfoot tr {display: block;float: left;width: 100%;margin-bottom: 1px;}
.cartTable tfoot tr > td {display: block;float: left;width: 100%;}
.cartTable tfoot td.text-right > span:first-child {margin-right: 15px;float: left;}
.cartTable tfoot td.hide {display: none;}
.cartTable tfoot td.text-right span.TotalSum {display: inline-block;}
.cartTable .buttons .left {float: none !important;}
.cartTable .buttons .button {display: block;float: none !important;margin: 0 auto 10px;width: 100%;}
и заменить его на 
.cartTable thead {display: none;}
.cartTable tbody tr {display: block;/*margin-bottom: 30px;*/}
.cartTable tbody tr > td {/*display: block;width: 100%;*/margin-bottom: 1px;padding: 0px 5px 10px;}
.cartTable tbody .inputText {width: 70px;}
.cartTable tbody .price.old-price {display: none;}
.cartTable tbody tr .title {float: left;display: inline-block;}
.cartTable tbody tr .cart-qty .title {line-height: 14px;}
.cartTable tbody tr.discounttr {margin-bottom: 1px;}
.cartTable tbody tr.discounttr td {background-color: #efefec;text-align: right;}
.cartTable tbody tr.discounttr .disc-name .num {display: inline-block;}
.cartTable tbody tr.discounttr td.hide {display: none;}
.cartTable tfoot tr {display: block;float: left;width: 100%;margin-bottom: 1px;}
.cartTable tfoot tr > td {display: block;float: left;width: 100%;}
.cartTable tfoot td.text-right > span:first-child {margin-right: 15px;float: left;}
.cartTable tfoot td.hide {display: none;}
.cartTable tfoot td.text-right span.TotalSum {display: inline-block;}
.cartTable .buttons .button {display: block;float: none !important;margin: 0 auto 10px;}
.cartTable .goods-image-other {
width: 30px !important;
}
.cartTable tbody td.name a {
display: block;
font-size: 11px;
line-height: 1.3;
margin-bottom: 10px;
}
.cartTable tbody td.name div {
font-size: 8px;
margin-bottom: 3px;
}
.cartTable input.inputText {
padding: 0 0 0 10px;
height: auto;
width: 30px;
}
.cart-info{padding:0;}
.cartTable tbody tr > td:nth-child(6){display: none;}

#6 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 21 Февраль 2017 - 18:38

спасибо, а можно еще:
1. убрать чередование цвета, в мобильной версии заливка заезжает за таблицу, и смотрится аляписто
2. а еще можно убрать слово рублей из табличной части или поставить символ ₽, оставить только в итого?

#7 Stasya

Stasya

    Активный участник

  • Модератоpы
  • 4 007 сообщений

Отправлено 27 Февраль 2017 - 16:47

Просмотр сообщения57P (21 Февраль 2017 - 18:38) писал:

спасибо, а можно еще:
1. убрать чередование цвета, в мобильной версии заливка заезжает за таблицу, и смотрится аляписто
2. а еще можно убрать слово рублей из табличной части или поставить символ ₽, оставить только в итого?
Здравствуйте.
1) В файле main.css найдите блок 
.cartTable tbody tr.items:nth-child(2n) {
background-color: #efefec;
}
и замените его на 
.cartTable tbody tr.items:nth-child(2n) {
/* background-color: #efefec; */
}

2) В том же файле найдите блок
.cartTable tbody tr > td:nth-child(6){display: none;}
}
@media all and (max-width: 641px) {
и замените его на 
.cartTable tbody tr .price:after {
	content: "\f158";
}
.cartTable tbody tr .price span + span {
	display: none;
}
.cartTable tbody tr > td:nth-child(6){display: none;}
}
@media all and (max-width: 641px) {

#8 57P

57P

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 331 сообщений

Отправлено 27 Февраль 2017 - 22:30

спасибо :)
Обратно в Изменение общей стилистики


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Лазурь
  5. → Изменение общей стилистики
  6. Privacy Policy