Сообщений в теме: 47

[matveyeff]

Vaccina (02 Апрель 2015 - 01:03) писал:

4.Уточните пожалуйста, всплывающее окно должно появляться при клике на иконку\картинку или на весь баннер иконки с текстом?

Добрый день.

Насколько я понял, активных полей с возможностью клика - два (http://joxi.ru/brR8bBEIkQkJ21). Желательно сделать всплывающее окно и на иконку и на заголовок, если это технически не сложно.

Проблемы под номером 2 и 3 - исправил, спасибо Вам огромное.

Но с пунктом 1 как-то не заладилось. Изменение кода никак не повлияло на размер или количество товаров (http://joxi.ru/n2Yz4lRIpjOoA6).

[Ирина345]

matveyeff (02 Апрель 2015 - 13:33) писал:

Добрый день.

Насколько я понял, активных полей с возможностью клика - два (http://joxi.ru/brR8bBEIkQkJ21). Желательно сделать всплывающее окно и на иконку и на заголовок, если это технически не сложно.

Проблемы под номером 2 и 3 - исправил, спасибо Вам огромное.

Но с пунктом 1 как-то не заладилось. Изменение кода никак не повлияло на размер или количество товаров (http://joxi.ru/n2Yz4lRIpjOoA6).

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

[matveyeff]

Ирина345 (02 Апрель 2015 - 14:56) писал:

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

Добрый день.

Необходимо реализовать. Так как я не совсем понимаю, что в данном случае является блоком, попытаюсь объяснить проще. Хочется, чтобы при нажатии на иконку и заголовок - всплывало окно со статьей. Три иконки - три всплывающих статьи

[Vaccina]

В шаблоне HTML найдите:

<div class="banner-top">
				<ul>
				  <li class="li-1 col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="banner-top-img" href="#"><img src="{ASSETS_IMAGES_PATH}ico1-banner-top2.jpg?design=orange" alt=""></a>
					<div class="li1-content"><a href="#">Бесплатная доставка!</a>
					  <p>Доставка по городу и области Бесплатна!</p>
					</div>
				  </li>
				  <li class="li-2 col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="banner-top-img" href="#"><img src="{ASSETS_IMAGES_PATH}ico2-banner-top2.jpg?design=orange" alt=""></a>
					<div class="li2-content"><a href="#">30 дней Гарантии</a>
					  <p>Вы можете вернуть товар в течении 30 дней после получения заказа</p>
					</div>
				  </li>
				  <li class="li-3 col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="banner-top-img" href="#"><img src="{ASSETS_IMAGES_PATH}ico3-banner-top2.jpg?design=orange" alt=""></a>
					<div class="li3-content"><a href="#">Прием заказов 24/7</a>
					  <p>Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</p>
					</div>
				  </li>
				</ul>
			  </div>

замените на:

<div class="modals" style="display:none;">
<div>
текст для первого блока
</div>
<div>
текст для второго блока
</div>
<div>
текст для третьего блока
</div>
</div>
<div class="banner-top">
				<ul>
				  <li rel="1" class="li-1 col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="banner-top-img" href="#"><img src="{ASSETS_IMAGES_PATH}ico1-banner-top2.jpg?design=orange" alt=""></a>
					<div class="li1-content"><a href="#">Бесплатная доставка!</a>
					  <p>Доставка по городу и области Бесплатна!</p>
					</div>
				  </li>
				  <li rel="2" class="li-2 col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="banner-top-img" href="#"><img src="{ASSETS_IMAGES_PATH}ico2-banner-top2.jpg?design=orange" alt=""></a>
					<div class="li2-content"><a href="#">30 дней Гарантии</a>
					  <p>Вы можете вернуть товар в течении 30 дней после получения заказа</p>
					</div>
				  </li>
				  <li rel="3" class="li-3 col-lg-4 col-md-4 col-sm-4 col-xs-12"><a class="banner-top-img" href="#"><img src="{ASSETS_IMAGES_PATH}ico3-banner-top2.jpg?design=orange" alt=""></a>
					<div class="li3-content"><a href="#">Прием заказов 24/7</a>
					  <p>Оформите заказ в интернет-магазине "{SETTINGS_STORE_NAME}" Прямо сейчас!</p>
					</div>
				  </li>
				</ul>
			  </div>
<script>
$(document).ready(function() {
$(".banner-top ul > li").click(function(){
$.fancybox({
maxWidth : 300,
maxHeight : 330,
fitToView : false,
width : '70%',
height : '70%',
content: $('.modals > div:eq(' + (parseInt($(this).attr('rel')) - 1)
						 + ')').clone(true).addClass('formback'),
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
});
</script>

[matveyeff]

Vaccina (03 Апрель 2015 - 01:35) писал:

В шаблоне HTML найдите:[CODE]

Разобрался, большое спасибо. А как, все-таки, быть с пунктом 1, не подскажете? Изменение кода эффекта не дало.

[Vaccina]

В main.css найдите и удалите:

.yt-tab-listing .respl01-4 .respl-item {
  width: 25%;
}

[matveyeff]

Vaccina (04 Апрель 2015 - 00:58) писал:

В main.css найдите и удалите:

.yt-tab-listing .respl01-4 .respl-item {
width: 25%;
}

Никак не реагирует

[Danil]

matveyeff (04 Апрель 2015 - 09:04) писал:

Никак не реагирует

В шаблоне html найдите код (встречается 3 раза)

<div class="respl-item item">

и замените на (замените 3 кода)

<div class="item col-lg-4 col-md-4 col-sm-6 col-ss-6 col-xs-12">

[matveyeff]

Danil (04 Апрель 2015 - 09:32) писал:

В шаблоне html найдите код (встречается 3 раза)

<div class="respl-item item">

и замените на (замените 3 кода)

<div class="item col-lg-4 col-md-4 col-sm-6 col-ss-6 col-xs-12">

Спасибо, Данил, теперь в строке три товара, как и требовалось.

[matveyeff]

В посте №20 Vaccina давала рекомендации насчет неправильного масштабирования фото товаров в браузере firefox:

Vaccina (02 Апрель 2015 - 01:03) писал:

2. Попробуйте следующее, в main.css найдите:

.products-grid .item-inner .product-image {
border: 1px solid rgba(247, 146, 66, 0.7);
display: table-cell;
height: 270px;
vertical-align: middle;
width: 270px;
}

замените на:

.products-grid .item-inner .product-image {
border: 1px solid rgba(247, 146, 66, 0.7);
display: block;
height: 200px;
vertical-align: middle;
width: auto;
}

Получилось из этого следующее: http://joxi.ru/krD9yb1s5Zpymp

Как видно из скриншота, если у фото какого-то товара соотношение длины и ширины не 1:1, то фото съезжает. В фаерфоксе, кстати масштабируемость стала нормальной, но съезжает аналогично, как и на скрине.

При дефолтных значениях кода - в хроме все ровно и красиво, но с фаерфоксом беда - http://joxi.ru/1A596MQspNq0AE

Подскажете что-нибудь? Хотелось бы дефолтного поля товаров, (при height: 200 смотрится похуже, чем квадрат 1:1) но что придумать с фаерфоксом?

[Ирина345]

matveyeff (04 Апрель 2015 - 10:18) писал:

В посте №20 Vaccina давала рекомендации насчет неправильного масштабирования фото товаров в браузере firefox:



Получилось из этого следующее: http://joxi.ru/krD9yb1s5Zpymp

Как видно из скриншота, если у фото какого-то товара соотношение длины и ширины не 1:1, то фото съезжает. В фаерфоксе, кстати масштабируемость стала нормальной, но съезжает аналогично, как и на скрине.

При дефолтных значениях кода - в хроме все ровно и красиво, но с фаерфоксом беда - http://joxi.ru/1A596MQspNq0AE

Подскажете что-нибудь? Хотелось бы дефолтного поля товаров, (при height: 200 смотрится похуже, чем квадрат 1:1) но что придумать с фаерфоксом?

Здравствуйте, не совсем понимаю что именно вам необходимо, так как в обоих браузерах отображается корректно и одинаково.

[matveyeff]

Ирина345 (04 Апрель 2015 - 11:59) писал:

Здравствуйте, не совсем понимаю что именно вам необходимо, так как в обоих браузерах отображается корректно и одинаково.

Добрый день. На данный момент код в main.css имеет вид:

border: 1px solid rgba(247, 146, 66, 0.7);
display: block;
height: 200px;
vertical-align: middle;
width: auto;
}

При этом коде фото товаров в обоих браузерах отображаются корректно, но не совсем. А именно:

1. http://joxi.ru/krD9yb1s5Zpymp - Фото съезжают, оставляя пустое место.
2. Все-таки хочется, чтобы высота и ширина были равными, а не 200х270. 270х270 смотрится лаконично на сайте, и он меня вполне устраивает.

При дефолтном коде:

border: 1px solid rgba(247, 146, 66, 0.7);
display: table-cell;
height: 270px;
vertical-align: middle;
width: 270px;
}

Меня все устраивает, но появляется проблема с фаерфоксом - http://joxi.ru/1A596MQspNq0AE

PS. Установил дефолтный код, для наглядности.

[Ирина345]

matveyeff (04 Апрель 2015 - 12:21) писал:

Добрый день. На данный момент код в main.css имеет вид:

border: 1px solid rgba(247, 146, 66, 0.7);
display: block;
height: 200px;
vertical-align: middle;
width: auto;
}

При этом коде фото товаров в обоих браузерах отображаются корректно, но не совсем. А именно:

1. http://joxi.ru/krD9yb1s5Zpymp - Фото съезжают, оставляя пустое место.
2. Все-таки хочется, чтобы высота и ширина были равными, а не 200х270. 270х270 смотрится лаконично на сайте, и он меня вполне устраивает.

При дефолтном коде:

border: 1px solid rgba(247, 146, 66, 0.7);
display: table-cell;
height: 270px;
vertical-align: middle;
width: 270px;
}

Меня все устраивает, но появляется проблема с фаерфоксом - http://joxi.ru/1A596MQspNq0AE

PS. Установил дефолтный код, для наглядности.

Произведите изменения из инструкции выше,
далее в main.css  найдите

.products-grid .product-image img {display:block;margin:0 auto;max-width: 100%;min-height:130px;}

замените на

.products-grid .product-image img {display:block;margin:0 auto;max-width: 100%;height:200px;}

[matveyeff]

Ирина345 (04 Апрель 2015 - 14:03) писал:

Произведите изменения из инструкции выше,
далее в main.css  найдите

.products-grid .product-image img {display:block;margin:0 auto;max-width: 100%;min-height:130px;}

замените на

.products-grid .product-image img {display:block;margin:0 auto;max-width: 100%;height:200px;}

Что получилось на данный момент - http://joxi.ru/D2PBplVuX6eNr3

Но мне не хотелось бы использовать высоту 200, а хотелось бы 270 - http://joxi.ru/E2pk86Wiexo1mY

Но при 270 фото не центрируется по высоте поля (пустые места отметил стрелками). Как бы так сделать, чтобы фото по высоте отцентровалось? (сверху и снизу были равные пустые места, а не как сейчас большая пустота снизу)

[Ирина345]

matveyeff (04 Апрель 2015 - 14:50) писал:

Что получилось на данный момент - http://joxi.ru/D2PBplVuX6eNr3

Но мне не хотелось бы использовать высоту 200, а хотелось бы 270 - http://joxi.ru/E2pk86Wiexo1mY

Но при 270 фото не центрируется по высоте поля (пустые места отметил стрелками). Как бы так сделать, чтобы фото по высоте отцентровалось? (сверху и снизу были равные пустые места, а не как сейчас большая пустота снизу)

Произведите изменения из #20 сообщения, под пунктом 2

[matveyeff]

Ирина345 (04 Апрель 2015 - 15:57) писал:

Произведите изменения из #20 сообщения, под пунктом 2

В сообщении #20, под пунктом 2 предлагается уменьшить высоту поля с 270 до 200. Мне этот вариант не совсем подходит, мне нужно оставить высоту 270. Или это сделать нереально?

[Vaccina]

В шаблоне HTML найдите примерно следующий код(3 блока кода схожих должно быть):

<a class="rspl-image" href="{index_page_goods.URL_MIN_PRICE_NOW | url_amp}" title="{index_page_goods.NAME}">
									  <img src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=orange{% ELSE %}{index_page_goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{index_page_goods.NAME}">
									</a>

оберните их в <div></div>, пример:

<div class="table">
<a class="rspl-image" href="{index_page_goods.URL_MIN_PRICE_NOW | url_amp}" title="{index_page_goods.NAME}">
									  <img src="{% IF index_page_goods.IMAGE_EMPTY %}{ASSETS_IMAGES_PATH}no-photo-small.png?design=orange{% ELSE %}{index_page_goods.IMAGE_MEDIUM}{% ENDIF %}" class="goods-image-small" alt="{index_page_goods.NAME}">
									</a>

</div>

Скорее всего подобное изменение необходимо будет произвести в шаблоне Товары, Поиск

Далее в main.css найдите:

.products-grid .product-image img {
  display: block;
  height: 200px;
  margin: 0 auto;
  max-width: 100%;
}

замените на:

.product-image .table {
  display: table;
  height: 200px;
  margin: 0 auto;
  vertical-align: middle;
}
.rspl-image {
  display: table-cell;
  height: 200px;
  vertical-align: middle;
}
.products-grid .product-image img {
  display: block;
  height: 150px;
  margin: 0 auto;
}

[matveyeff]

Vaccina (07 Апрель 2015 - 00:55) писал:

В шаблоне HTML найдите примерно следующий код

Большое Вам спасибо! Теперь получилось и проблема решена

[Rap-61]

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

Спасибо!
SL-323330

[Danil]

Rap-61 (19 Апрель 2015 - 12:40) писал:

перенес каталог влево, теперь нужно подправить внешний вид
1. установить блоки по одной линии
2. выровнять блоки по высоте
3. либо растянуть кнопки на ширину товаров на главной (предпочтительно), либо выровнять товары по ширине кнопок (в крайнем случае)
Screenshot_1.png
Спасибо!
SL-323330

Здравствуйте.
В конец main.css добавьте

.respl-items-container .product-image {
  height: 165px;
}
.respl-items-container .respl-item.item {
  height: 250px;
}

Так же найдите

.yt-tab-listing {
  padding: 10px;
  overflow: hidden;
}

и замените на

.yt-tab-listing {
  padding: 0px 10px 10px;
  overflow: hidden;
}