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


Изменения В Каталоге


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

#1 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 23 Сентябрь 2016 - 11:50

Здравствуйте!

Нужны следующие изменения в каталоге:

1. Сделать товары по 4 в ряд. Сейчас они пляшут, чередуясь где-то по три товара, где-то по 4.

2. У товаров почему-то разный размер изображения. Сделать одинаковым и чтобы не было белых полей в рамке, как на прикрепленном изображении.

3. На главной странице сделать по пять товаров в строке, и чтобы тоже одинаковые изображения были.

4. Добавить вторую кнопку "Подробнее" рядом или под кнопкой в "В корзину". Как будет удобнее для адаптивности сайта.

5. Кнопку "в Корзину" выделить другим цветом

6. Надо чтобы при наведении на фото в каталоге, показывалось второй фото товара. Воспользовался инструкцией http://forum.storela...едении-на-това/
В каталоге все работает отлично, но на главной не работает. Помогите пожалуйста подправить, что бы на главной работало аналогично.

7. Можно ли сделать чтобы второй в фото отображалось только при наведение на фото в каталоге, а при наведении на кнопки в Корзину и подробнее снова отображалось первое фото.

8. Реально ли сделать эффект разворота карточки при просмотре второго фото? По аналогии с темой нефрит, или как здесь на главной при переключении между категориями карточки красиво разворачиваются.

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

  • 1.jpg


#2 Razon

Razon

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

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

Отправлено 23 Сентябрь 2016 - 12:05

Просмотр сообщенияatrofimov (23 Сентябрь 2016 - 11:50) писал:

Здравствуйте!

Нужны следующие изменения в каталоге:

1. Сделать товары по 4 в ряд. Сейчас они пляшут, чередуясь где-то по три товара, где-то по 4.

2. У товаров почему-то разный размер изображения. Сделать одинаковым и чтобы не было белых полей в рамке, как на прикрепленном изображении.

3. На главной странице сделать по пять товаров в строке, и чтобы тоже одинаковые изображения были.

4. Добавить вторую кнопку "Подробнее" рядом или под кнопкой в "В корзину". Как будет удобнее для адаптивности сайта.

5. Кнопку "в Корзину" выделить другим цветом

6. Надо чтобы при наведении на фото в каталоге, показывалось второй фото товара. Воспользовался инструкцией http://forum.storela...едении-на-това/
В каталоге все работает отлично, но на главной не работает. Помогите пожалуйста подправить, что бы на главной работало аналогично.

7. Можно ли сделать чтобы второй в фото отображалось только при наведение на фото в каталоге, а при наведении на кнопки в Корзину и подробнее снова отображалось первое фото.

8. Реально ли сделать эффект разворота карточки при просмотре второго фото? По аналогии с темой нефрит, или как здесь на главной при переключении между категориями карточки красиво разворачиваются.

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

#3 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 23 Сентябрь 2016 - 14:11

Приношу извинения, что забыл указать номер аккаунта.

SL-395059

#4 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 23 Сентябрь 2016 - 14:48

И за одно убрать рейтинг товара

#5 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 23 Сентябрь 2016 - 16:24

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

#6 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 23 Сентябрь 2016 - 17:42

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

#7 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 23 Сентябрь 2016 - 19:07

Просмотр сообщенияatrofimov (23 Сентябрь 2016 - 11:50) писал:

Здравствуйте!

Нужны следующие изменения в каталоге:

1. Сделать товары по 4 в ряд. Сейчас они пляшут, чередуясь где-то по три товара, где-то по 4.

2. У товаров почему-то разный размер изображения. Сделать одинаковым и чтобы не было белых полей в рамке, как на прикрепленном изображении.

3. На главной странице сделать по пять товаров в строке, и чтобы тоже одинаковые изображения были.

4. Добавить вторую кнопку "Подробнее" рядом или под кнопкой в "В корзину". Как будет удобнее для адаптивности сайта.

5. Кнопку "в Корзину" выделить другим цветом

6. Надо чтобы при наведении на фото в каталоге, показывалось второй фото товара. Воспользовался инструкцией http://forum.storela...едении-на-това/
В каталоге все работает отлично, но на главной не работает. Помогите пожалуйста подправить, что бы на главной работало аналогично.

7. Можно ли сделать чтобы второй в фото отображалось только при наведение на фото в каталоге, а при наведении на кнопки в Корзину и подробнее снова отображалось первое фото.

8. Реально ли сделать эффект разворота карточки при просмотре второго фото? По аналогии с темой нефрит, или как здесь на главной при переключении между категориями карточки красиво разворачиваются.

1) В файле main.css
найдите (429 строка)
.products-grid {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;text-align: center;}
замените на
.products-grid {display: flex;align-items: center;flex-wrap: wrap;text-align: center;}

для
#producttabs .pdt-content .item:nth-child(1), #producttabs .pdt-content .item:nth-child(2), #producttabs .pdt-content .item:nth-child(3), #producttabs .pdt-content .item:nth-child(4), #producttabs .pdt-content .item:nth-child(5), #producttabs .pdt-content .item:nth-child(6), #producttabs .pdt-content .item:nth-child(7), #producttabs .pdt-content .item:nth-child(8) {display: block;}
добавьте
max-width: 248px
4)В редактор шаблонов- товары
найдите
<div class="actions">
				 {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && goods.MAX_REST_VALUE=0 %}
					 <span class="button">Нет в наличии</span>
				 {% ELSE %}
					 <!--a class="add-cart quick button" title="Быстро оформить заказ">В корзину</a-->
					 <a class="add-cart button" title="В корзину">В корзину</a>
				 {% ENDIF %}
				 </div>
замените на
<div class="actions">
<a class="about button" title="Подробнее">[color=#282828][font=helvetica, arial, sans-serif][size=3][background=rgb(247, 247, 247)]Подробнее[/background][/size][/font][/color]</a>
				 {% IF SETTINGS_GOODS_DONT_PUT_TO_CART_MORE_THAN_AVAILABLE && goods.MAX_REST_VALUE=0 %}
					 <span class="button">Нет в наличии</span>
				 {% ELSE %}
					 <!--a class="add-cart quick button" title="Быстро оформить заказ">В корзину</a-->
					 <a class="add-cart button" title="В корзину">В корзину</a>
				 {% ENDIF %}
				 </div>
5) В конце main.css добавьте
.block-cart .cart-title.rhombus {background-color: #000;}
с необходимым значением цвета фона


Чтобы удалить рейтинг товара в конце main.css добавьте
.rating-hover {display: none;}


#8 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 23 Сентябрь 2016 - 20:08

Спасибо за оперативность, все изменения произвел.

1.Товары на главной стали отображаться ровно по 4, хотя последняя строка почему то 5 товаров, и рамки разные, добавилась белая зона вокруг всего фото.
В каталоге товаров они продолжаю плясать то по 3 то по 4 в строке.

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

И эта кнопка должна быть везде и на главной странице и при отображение товаров списком.

5. Почему то другим цветом окрасились не кнопки в Корзину а значок корзины в верхнем меню.

Рейтинг товара при наведении на цену убрал, спасибо!

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

  • 2.jpg
  • 3.jpg


#9 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 23 Сентябрь 2016 - 20:23

Просмотр сообщенияatrofimov (23 Сентябрь 2016 - 20:08) писал:

Спасибо за оперативность, все изменения произвел.

1.Товары на главной стали отображаться ровно по 4, хотя последняя строка почему то 5 товаров, и рамки разные, добавилась белая зона вокруг всего фото.
В каталоге товаров они продолжаю плясать то по 3 то по 4 в строке.

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

И эта кнопка должна быть везде и на главной странице и при отображение товаров списком.

5. Почему то другим цветом окрасились не кнопки в Корзину а значок корзины в верхнем меню.

Рейтинг товара при наведении на цену убрал, спасибо!
Прошу прощения 4й пункт неверен.
нужно удалить следующий элемент

<a class="about button" title="Подробнее">[color=#282828][font=helvetica, arial, sans-serif][size=3][background=rgb(247, 247, 247)]Подробнее[/background][/size][/font][/color]</a>


5) Изменить цвет кнопки "В корзину":
добавить в самом конце файла main.css
.products-grid .item .actions .add-cart {background-color: #000; color: #747474;}
задав цвет фона и цвет шрифта

#10 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 23 Сентябрь 2016 - 22:54

в 4 пункте удалил ненужную строку, все вернулось как было, ведь коды только ей и отличались.
Попробовал вместо неактивной строки
<!--a class="add-cart quick button" title="Быстро оформить заказ">В корзину</a-->
поставить часть строки предложенную Вами
<a class="about button" title="Подробнее">Подробнее</a>
Получилось как должно выглядеть, но кнопка Подробнее не встает, из за того что рамки фото  разные по размеру где-то кнопка стоит сбоку от кнопки в корзину, где-то над ней, но это уже к 1 и 2 вопросам из первого списка. Для начала надо сделать чтобы она заработала и отображалась также на главной странице.
Как видно этот вопрос очень увязан на 1 и 2, от одинаковых размеров товаров в каталоге зависит и одинаковое расположение кнопок. Лучше все таки выглядит когда они рядом, а не над друг другом.

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

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

  • 4.jpg


#11 Vaccina

Vaccina

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

  • Модераторы
  • 24 353 сообщений

Отправлено 24 Сентябрь 2016 - 05:50

В main.css найдите и удалите:
.products-grid .item .actions .add-cart {background-color: #ffa812; color: #747474;}
далее найдите:
.button {display: inline-block;border: 1px solid #dddddd;background-color: #fff;color: #747474;cursor: pointer;margin: 0;overflow: visible;border-radius: 25px;letter-spacing: 0.01em;padding: 9px 13px;height: 34px;line-height: 100%;position: relative;outline: 0;}

после него пропишите:
.button.add-cart {background-color: #ffa812; color: #747474;}


В шаблоне Товары найдите:
{% FOR goods %}
		  <div class="item">

замените на:
{% FOR goods %}
		  <div class="item col-sm-3 col-md-3 col-lg-3 col-sms-6">

далее найдите:
<a class="about button" title="Подробнее">Подробнее</a>

замените на:
<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="about button" title="Подробнее">Подробнее</a>


#12 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 24 Сентябрь 2016 - 20:11

Изменения произвел.
Кнопка подробнее работает, спасибо большое!
Цвет кнопки "В корзину" поменялся, спасибо!

Товары в каталоге не пляшут, отлично. Но они по три товара в строке.
Надо сделать чтобы было по 4 товара в строке, иначе много пустого места справа.
Рамку под фото сделать пошире тогда кнопки "подробно" и "в корзину" будут рядом с друг другом, так лучше все же.
И убрать сверху и снизу белые зоны в рамке,чтобы фото просто охватывала рамка без белых зон.

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

  • 5.jpg


#13 RayLi

RayLi

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

  • Модераторы
  • 2 864 сообщений

Отправлено 24 Сентябрь 2016 - 20:44

Просмотр сообщенияatrofimov (24 Сентябрь 2016 - 20:11) писал:

Изменения произвел.
Кнопка подробнее работает, спасибо большое!
Цвет кнопки "В корзину" поменялся, спасибо!

Товары в каталоге не пляшут, отлично. Но они по три товара в строке.
Надо сделать чтобы было по 4 товара в строке, иначе много пустого места справа.
Рамку под фото сделать пошире тогда кнопки "подробно" и "в корзину" будут рядом с друг другом, так лучше все же.
И убрать сверху и снизу белые зоны в рамке,чтобы фото просто охватывала рамка без белых зон.

Здравствуйте.
На данный момент на вашем сайте интернет-магазина под аккаунтом SL - 163344 установлен иной шаблон, нежели тот, что указан на скриншоте, прикреплённом к вашему сообщению.
Возможно речь идёт о какой-то ином аккаунте вашего интернет-магазина?
Если это так, то просьба прислать нам его номер.
Спасибо.

#14 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 24 Сентябрь 2016 - 21:02

Изменения вносим а аккаунте SL-395059.
Буду для отсутствия путаницы указывать его в каждом ответе, а то действительно неудобно отслеживать(указывал его в одном из ответов)

#15 Danil

Danil

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

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

Отправлено 25 Сентябрь 2016 - 09:29

Просмотр сообщенияatrofimov (24 Сентябрь 2016 - 21:02) писал:

Изменения вносим а аккаунте SL-395059.
Буду для отсутствия путаницы указывать его в каждом ответе, а то действительно неудобно отслеживать(указывал его в одном из ответов)
Здравствуйте.
В main.css найдите код
.products-grid .item .actions .button {text-transform: uppercase;}
и замените на
.products-grid .item .actions .button {text-transform: uppercase;padding: 9px 7px;}
так же найдите
.products-grid .item {display: inline-block;position: relative;margin: 0 10px 20px;text-align: center;}
и замените на
.products-grid .item {display: inline-block;position: relative;margin: 0 0 20px;text-align: center;}
найдите
.products-grid .item .product-hover .product-image {display: block;position: relative;line-height: 260px;}
и замените на
.products-grid .item .product-hover .product-image {display: block;position: relative;line-height: 180px;}


#16 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 26 Сентябрь 2016 - 14:58

Здравствуйте! Изменения в аккаунте SL-395059 произвел. Спасибо большое!
Теперь в каталоге все отображается хорошо. По четыре в ряд, рамки аккуратные и кнопки "Подробнее" и "в Корзину" рядом. Немного съехала адаптивность. На маленьком экране в каталоге по два товара в ряд, все отлично. А на среднем экране, фото вылезают за рамки не много, далее расширяя экран все снова становится на места. Фото прилагаю.

1. Помогите, пожалуйста, подправить адаптивность сайта на промежуточных размерах окна(экрана)
Далее вернусь к первому списку вопросов.

2. Помогите повторить данные изменения на главной странице(кнопки подробно, и в корзину рядом, товары ровными рядами, одинаковые рамки) для новинок и для товаров на главной, только чтобы было по пять товаров в ряду, иначе справа остается пустое место.

3. Помогите реализовать пункты 6,7 и 8 из первого моего сообщения.

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

  • 6.jpg
  • 7.jpg


#17 Mr.Nito

Mr.Nito

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

  • Модераторы
  • 1 364 сообщений

Отправлено 26 Сентябрь 2016 - 17:43

1) В конце файла main.css добавьте
.goods-image-small {max-width: 100;}


2)Для добавления кнопки  Редакторе шаблонов - HTML
найдите (строки 426,567,708)
<!--a class="add-cart quick button" title="Быстро оформить заказ">В корзину</a-->
<a class="add-cart button" title="В корзину">В корзину</a>
между ними добавьте
<a href="{goods.URL_MIN_PRICE_NOW | url_amp}" class="about button" title="Подробнее">Подробнее</a>

Для расположения по 5 элементов на странице
в конце main.css добавьте
#producttabs .pdt-content .item.showThis {width: 230px;}


#18 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 27 Сентябрь 2016 - 00:09

Здравствуйте! Изменения в аккаунте SL-395059 произвел.

1. С адаптивностью ничего не произошло. При уменьшении окна браузера или экрана в каталоге фото товара вылезают за границы рамок.
На главной странице все работает отлично при уменьшении ширины экрана количество товаров в строке меняется плавно с 5 до 2. На среднем размере экрана их 3 или 4 в строке и соответственно фото товара всегда выглядят корректно. Помогите, пожалуйста, в каталоге сделать подобным образом, чтобы при уменьшении ширины на среднем размере экрана товаров в строке стало сначала 3 а потом на узком 2, как сейчас.

2. Кнопка Подробнее на главной добавилась, спасибо большое!
И товары располагаются ровно по 5 в ширины на большом экране так и надо. Только почему то сначала они по 4 товара в ширину, а если нажать на кнопку "показать все", становится как надо- по пять.
Кнопки "показать все" и скрыть не нужны. Необходимо чтобы были сразу показаны все новинки и все товары на главной и их количество было ограничено 45 товарами.

#19 atrofimov

atrofimov

    Продвинутый пользователь

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

Отправлено 27 Сентябрь 2016 - 09:24

Небольшое лополнение ко второму пункту. Кнопки показать все и серыть убирать не надо. Ограничить вывод товаров в краттком виде 25 шт. А при нажатии кнопки показать 50 шт. И там и там чтобы было по 5 товаров в ряд. Сецчас только в расширенном списке.

#20 Razon

Razon

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

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

Отправлено 27 Сентябрь 2016 - 12:31

Просмотр сообщенияatrofimov (27 Сентябрь 2016 - 09:24) писал:

Небольшое лополнение ко второму пункту. Кнопки показать все и серыть убирать не надо. Ограничить вывод товаров в краттком виде 25 шт. А при нажатии кнопки показать 50 шт. И там и там чтобы было по 5 товаров в ряд. Сецчас только в расширенном списке.

Здравствуйте,
1. В файле main.css найдите строку:
.products-grid .item .item-inner {width: 100%;display: inline-block;margin-bottom: 30px;position: relative;border-bottom: 1px solid #dddddd;}

Замените на:
.products-grid .item .item-inner {width: 190px;display: inline-block;margin-bottom: 30px;position: relative;border-bottom: 1px solid #dddddd;}

Найдите:
@media all and (min-width: 768px) {
.container {width: 750px;}
.col-sm-12{width:100%}
.col-sm-11{width:91.66666667%}
.col-sm-10{width:83.33333333%}
.col-sm-9{width:75%}
.col-sm-8{width:66.66666667%}
.col-sm-7{width:58.33333333%}
.col-sm-6{width:50%}
.col-sm-5{width:41.66666667%}
.col-sm-4{width:33.33333333%}
.col-sm-3{width:25%}

Замените на:
@media all and (min-width: 768px) {
.container {width: 750px;}
.col-sm-12{width:100%}
.col-sm-11{width:91.66666667%}
.col-sm-10{width:83.33333333%}
.col-sm-9{width:75%}
.col-sm-8{width:66.66666667%}
.col-sm-7{width:58.33333333%}
.col-sm-6{width:50%}
.col-sm-5{width:41.66666667%}
.col-sm-4{width:33.33333333%}
.col-sm-3{width:29%}

2. Воспользуйтесь инструкцией находящейся здесь,  добавив необходимое кол.во строк(единиц товара).




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

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