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


Немного Поправить Дизайн

Вкладки

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

#1 Acum56

Acum56

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

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

Отправлено 14 Март 2014 - 08:56

Доброго времени суток, подскажите пожалуйста, как мне поправить дизайн страницы Товара - в соответствии с картинкой:

Нужно кнопки "В Крзину" "Купить сейчас" и "Сравнить товар" расположить под стоимостью "Цена сейчас в 1 ряд"
Хочу давно сделать вкладки на странице товара - Как на картинке и чтобы соответственно данные были в соответствующих вкладках.
Сопутствующие же товары пусть будут на главной странице.
Буду очень признателен за подсказку манипуляций с кодом

Изображение

#2 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 14 Март 2014 - 09:30

Просмотр сообщенияAcum56 (14 Март 2014 - 08:56) писал:

Доброго времени суток, подскажите пожалуйста, как мне поправить дизайн страницы Товара - в соответствии с картинкой:

Нужно кнопки "В Крзину" "Купить сейчас" и "Сравнить товар" расположить под стоимостью "Цена сейчас в 1 ряд"
Хочу давно сделать вкладки на странице товара - Как на картинке и чтобы соответственно данные были в соответствующих вкладках.
Сопутствующие же товары пусть будут на главной странице.
Буду очень признателен за подсказку манипуляций с кодом


Что касается вкладок, нужно менять много кода. Уверены что вкладки нужны?

По кнопкам:
Откройте шаблон main.css, найдите строки:
#content .boxmoney .main .block ul.left {
float: left;
color: #484949;
}

и замените на:

#content .boxmoney .main .block ul.left {
color: #484949;
}

Далее строку
#content .boxmoney .main .block ul.right li {
margin: 5px 0 0 0;
}

замените на
#content .boxmoney .main .block ul.right li {
margin: 5px 0 0 0;
display: inline-block;
}

И строку
#content .boxmoney .main .block ul.right li a.whtblue {
min-width: 104px;
}

на

#content .boxmoney .main .block ul.right li a.whtblue {
min-width: 80px;
}


#3 Acum56

Acum56

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

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

Отправлено 14 Март 2014 - 09:48

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

Еще вопрос не по теме - как поменять слово "Зоны доставки" в оформлении заказа и Быстром заказе на слово "Варианты доставки"
Нужно сделать отображение ЗОН (вариантов доставки с ценами в блоке который в Шаблоне ТОВАР показывает только Варианты доставки - мне нужны еще и зоны - это у меня немного другие виды доставки)
а также как сделать в быстром заказе ети Варианты каждый в свою строку и чтобы все стоимости были равноудаленны друг от друга если смотреть по вертикали.

Премного благодарем Мсье MikDark

#4 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 14 Март 2014 - 09:57

Просмотр сообщенияAcum56 (14 Март 2014 - 09:48) писал:

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

Еще вопрос не по теме - как поменять слово "Зоны доставки" в оформлении заказа и Быстром заказе на слово "Варианты доставки"
Нужно сделать отображение ЗОН (вариантов доставки с ценами в блоке который в Шаблоне ТОВАР показывает только Варианты доставки - мне нужны еще и зоны - это у меня немного другие виды доставки)
а также как сделать в быстром заказе ети Варианты каждый в свою строку и чтобы все стоимости были равноудаленны друг от друга если смотреть по вертикали.

Премного благодарем Мсье MikDark

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

Я не вижу что-то у вас словосочетание: Зоны доставки, желательно скриншот прислать.

#5 Acum56

Acum56

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

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

Отправлено 14 Март 2014 - 10:26

Просмотр сообщенияMikDark (14 Март 2014 - 09:57) писал:

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

Я не вижу что-то у вас словосочетание: Зоны доставки, желательно скриншот прислать.

Форма быстрого заказа
Изображение

Форма обычного оформления заказа 2-ой шаг

Изображение

#6 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 14 Март 2014 - 10:44

Просмотр сообщенияAcum56 (14 Март 2014 - 10:26) писал:

Форма быстрого заказа
Изображение

Форма обычного оформления заказа 2-ой шаг


Заменить надпись можно в шаблоне: Быстрый заказ. Там есть строки:
<label for="quickDeliveryIdMain{order_delivery.ID}" class="zones-header">Зоны доставки</label>

чтобы далее сделать перевод на новую строку нужно в конце этого кода добавить <br>

Какие еще вопросы остались?

#7 Acum56

Acum56

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

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

Отправлено 14 Март 2014 - 11:35

В EI некорректно кнопки отображаются, хотя в Хроме все ОК
Изображение

И еще подскажите как сделать в Блоке шаблона Товар справа (где Варианты доставок чтобы и зоны доставок отображались (1-ый класс ЕМС) - как первая фотка здесь http://forum.storela...йн/#entry126830)

#8 MikDark

MikDark

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

  • Модераторы
  • 6 468 сообщений

Отправлено 14 Март 2014 - 11:41

Попробуйте
#content .boxmoney .main .block ul.right li {
margin: 5px 0 0 0;
display: inline-block;
}

заменить на

#content .boxmoney .main .block ul.right li {
margin: 5px 3px 0 3px;
float: left;
}

По поводу зон еще дополнительно ответим

#9 Acum56

Acum56

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

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

Отправлено 14 Март 2014 - 12:11

C кнопками все ОК - жду ответа по поводу Зон и Вашей рекомендации - о том куда лучще вставить код Гугл переводчика чтобы не образовывалось синего  поля справа на всех страницах. Большое спасибо за отзывчивость

#10 support 2.0

support 2.0

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

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

Отправлено 14 Март 2014 - 20:21

Просмотр сообщенияAcum56 (14 Март 2014 - 12:11) писал:

C кнопками все ОК - жду Вашей рекомендации - о том куда лучще вставить код Гугл переводчика чтобы не образовывалось синего  поля справа на всех страницах. Большое спасибо за отзывчивость
Уточните, пожалуйста, что за код гугл переводчика. Возможно, Вы имели ввиду код гугл аналитики? Идентификатор его нужно поставить в раздел настройки -> основные -> Google Analytics идентификатор для анализа посетителей на сайте

Просмотр сообщенияAcum56 (14 Март 2014 - 09:48) писал:

По кнопкам = все зачетно, спасибо
Еще вопрос не по теме - как поменять слово "Зоны доставки" в оформлении заказа и Быстром заказе на слово "Варианты доставки"
Нужно сделать отображение ЗОН (вариантов доставки с ценами в блоке который в Шаблоне ТОВАР показывает только Варианты доставки - мне нужны еще и зоны - это у меня немного другие виды доставки)
а также как сделать в быстром заказе ети Варианты каждый в свою строку и чтобы все стоимости были равноудаленны друг от друга если смотреть по вертикали.
В шаблоне Оформление заказа найдите фразу Зоны доставки и замените на ту, которую Вам нужно. Тоже самое нужно сделать и в шаблоне Быстрый заказ. По поводу зон я Вас немного не поняла. В настройки -> Доставка Вы можете создать доставку с нужными правилами и зонами. Они будут отображаться как в карточке товаров, так и на странице заказа. Если я Вас не так поняла, напишите, пожалуйста, поподробнее. Также цены у Вас и сейчас равноудалены. Если это не так, укажите пример на Вашем сайте

#11 Acum56

Acum56

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

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

Отправлено 15 Март 2014 - 08:20

Просмотр сообщенияsupport 2.0 (14 Март 2014 - 20:21) писал:

Уточните, пожалуйста, что за код гугл переводчика. Возможно, Вы имели ввиду код гугл аналитики? Идентификатор его нужно поставить в раздел настройки -> основные -> Google Analytics идентификатор для анализа посетителей на сайте В шаблоне Оформление заказа найдите фразу Зоны доставки и замените на ту, которую Вам нужно. Тоже самое нужно сделать и в шаблоне Быстрый заказ. По поводу зон я Вас немного не поняла. В настройки -> Доставка Вы можете создать доставку с нужными правилами и зонами. Они будут отображаться как в карточке товаров, так и на странице заказа. Если я Вас не так поняла, напишите, пожалуйста, поподробнее. Также цены у Вас и сейчас равноудалены. Если это не так, укажите пример на Вашем сайте
Гугл переводчик он же google translate модуль для сайта - позволяет делать перевод страниц сайта посредством гугл переводчика - у меня данный функционал находится в правой верхней части сайта в шапке - там выбитрается язык отображения и страницы автоматом переводятся. - Я просто попросил помочь вставить данный код в Шаблон HTML чтобы он не нарушал целостности отображения (сайт увеличивается по ширине на длинну этого визуального компонента) - данный код переводчика я втавил в шаблон HTML сразу после кода:
<div class="rght">
			<ul style="height:60px;">
			  <li class="title">Контакты для связи:</li>
			  {% IF SETTINGS_STORE_PHONE_NUMBER1 %}<li class="telephone padd">{SETTINGS_STORE_PHONE_COUNTRY_CODE1} {% IF SETTINGS_STORE_PHONE_CITY_CODE1 %}({SETTINGS_STORE_PHONE_CITY_CODE1}){% ENDIF %} {SETTINGS_STORE_PHONE_NUMBER1}</li>{% ENDIF %}
			  {% IF SETTINGS_STORE_SKYPE %}<li class="skype padd">{SETTINGS_STORE_SKYPE}</li>{% ENDIF %}
			</ul>
			{% IF SETTINGS_STORE_WORK_TIME %}
			  <ul>
				<li class="timework padd">Работает {SETTINGS_STORE_WORK_TIME}</li>
			  </ul>
			{% ENDIF %}
		</div>

По зонам доставки - так как в системе стореленда нет автоматического калькулятора Почты России, отправлений 1-ого класса и ЕМС посылок, я использовал Зоны доставки не как Зоны в прямом смысле, а как Варианты отгрузки. Например есть у меня способ доставки "Почтой по России предоплата - обычной посылкой - 351руб" я сделал для этого варианта дополнительно еще через зоны доставки: "Бандеролью 1-ого класса - 700руб" и "EMS посылкой - 1300руб" и аналогично к способу доставки "Почтой по России за наложенный платеж - обычной посылкой - 600руб" есть 1-ый класс и ЕМС только с другими ценами  и хотел бы чтобы они тоже отображались на странице Товара в Блоке вариантов доставки как расширения этих вариантов доставки, дабы покупателю уже сразу было понятно с чем он имеет дело и как мы можем отгружать товар

#12 step2054

step2054

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

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

Отправлено 23 Апрель 2014 - 12:03

Добрый день!
Очень прошу Вас мне помочь. На сринах выделены проблемные зоны. Как сделать так, чтобы блоки в них либо были полностью залиты фоном, либо полностью прозрачные.
Заранее Вам благодарен.

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

  • Скрин1.JPG
  • Скрин2.JPG


#13 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 23 Апрель 2014 - 13:38

Просмотр сообщенияstep2054 (23 Апрель 2014 - 12:03) писал:

Добрый день!
Очень прошу Вас мне помочь. На сринах выделены проблемные зоны. Как сделать так, чтобы блоки в них либо были полностью залиты фоном, либо полностью прозрачные.
Заранее Вам благодарен.

Здравствуйте, что бы полностью сделать прозрачным, Вам нужно в main.css найти код и последовательно
#content .headline { margin:0 10px 10px 10px; background:url({ASSETS_IMAGES_PATH}headline-bg.jpg) top center no-repeat; width:732px; }

#content .headline .main { background:url({ASSETS_IMAGES_PATH}grad-grey.jpg) bottom center repeat-x; padding:10px 12px 13px 12px; border:1px solid #dadada; border-top:0; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }


 #content table.position tr.gray { background:#e9e9e9; }
замените на
#content .headline { margin:0 10px 10px 10px; /*background:url({ASSETS_IMAGES_PATH}headline-bg.jpg) top center no-repeat;*/ width:732px; }

#content .headline .main {/* background:url({ASSETS_IMAGES_PATH}grad-grey.jpg) bottom center repeat-x;*/ padding:10px 12px 13px 12px; border:1px solid #dadada; border-top:0; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }


 #content table.position tr.gray { /*background:#e9e9e9;*/ }


#14 step2054

step2054

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

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

Отправлено 23 Апрель 2014 - 15:20

Просмотр сообщенияИрина345 (23 Апрель 2014 - 13:38) писал:

Здравствуйте, что бы полностью сделать прозрачным, Вам нужно в main.css найти код и последовательно
#content .headline { margin:0 10px 10px 10px; background:url({ASSETS_IMAGES_PATH}headline-bg.jpg) top center no-repeat; width:732px; }

#content .headline .main { background:url({ASSETS_IMAGES_PATH}grad-grey.jpg) bottom center repeat-x; padding:10px 12px 13px 12px; border:1px solid #dadada; border-top:0; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }


 #content table.position tr.gray { background:#e9e9e9; }
замените на
#content .headline { margin:0 10px 10px 10px; /*background:url({ASSETS_IMAGES_PATH}headline-bg.jpg) top center no-repeat;*/ width:732px; }

#content .headline .main {/* background:url({ASSETS_IMAGES_PATH}grad-grey.jpg) bottom center repeat-x;*/ padding:10px 12px 13px 12px; border:1px solid #dadada; border-top:0; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; }


 #content table.position tr.gray { /*background:#e9e9e9;*/ }


Спасибо Вам огромное! Всё получилось! )))

#15 forester

forester

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

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

Отправлено 10 Август 2015 - 15:43

Подскажите пожалуйста, очень часто встречается в шаблоне.

Как допустим, отделить свойства в цсс для цена и цена цифрами.
На картинке более понятно )))

Как сейчас у меня, поменял цвет стоимости, к этому изменилась надпись еще и футере....

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

  • QIP Shot - Screen 103.png


#16 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 12 Август 2015 - 13:01

Просмотр сообщенияforester (10 Август 2015 - 15:43) писал:

Подскажите пожалуйста, очень часто встречается в шаблоне.

Как допустим, отделить свойства в цсс для цена и цена цифрами.
На картинке более понятно )))

Как сейчас у меня, поменял цвет стоимости, к этому изменилась надпись еще и футере....
Здравствуйте, добавьте в конец main.css

/*цвет текста"цена"*/
.goodsDataMainModificationPriceNow {
	color: #ff0000;
}

/*цвет значения цены*/
.goodsDataMainModificationPriceNow span {
	color: #123456;
}

где изменяете значение  color: #ff0000; color: #123456;

#17 domovenok

domovenok

    Пользователь

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

Отправлено 19 Октябрь 2015 - 05:12

Здравствуйте! помогите, пожалуйста, немного поправить вкладки (делала по инструкции http://forum.storela...ческие-вкладки/ )
1. убрать внешнюю границу
2. поменять цвет неактивных кнопок с серого на свой
3. не работают отзывы (что-то в коде напортачила)


уже не актуально



изменения делаю на Аккаунт SL-361602

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

  • ИЗМ..jpg


#18 forester

forester

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

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

Отправлено 29 Октябрь 2015 - 15:08

Подскажите пожалуйста, как реализовать задуманное

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

  • QIP Shot - Screen 00002144.jpg


#19 forester

forester

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

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

Отправлено 02 Ноябрь 2015 - 00:00

Подскажите, есть ли возможность?

#20 Ирина345

Ирина345

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

  • Модераторы
  • 5 709 сообщений

Отправлено 02 Ноябрь 2015 - 15:21

Просмотр сообщенияforester (02 Ноябрь 2015 - 00:00) писал:

Подскажите, есть ли возможность?
Здравствуйте,найдите в шаблоне Товар код
<script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus"></div>
			<div class="available-true" {% IF GOODS_MOD_REST_VALUE=0 %}style="display:none;"{% ENDIF %}>&nbsp;<span>&#8226;&nbsp;На складе</span></div>
						<div class="available-false" {% IF GOODS_MOD_REST_VALUE>0 %}style="display:none;"{% ENDIF %}>&nbsp;<span>&#8226;&nbsp;На заказ</span></div>

после вставьте

<div class="data-vremy"> Ближайшее время доставки - 
<script type="text/javascript">
 var d = new Date();
  var month=new Array("января","февраля","марта","апреля","мая","июня",
 "июля","августа","сентября","октября","ноября","декабря");
  document.write([d.getDate()+1]+ " " + month[d.getMonth()]
 + " " + d.getFullYear() + " г.");
</script> </div>

далее найдите
<script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus"></div>
перенесите после строк

		   {% ELSEIF goods_features.VALUE = Totem %}
		   <img src="http://st.stalker4x4.ru/8/1764/474/totem.png" alt="Защитные кейсы ТОТЕМ" />
		 
		 {% ENDIF %}
  {% ENDFOR %}
</div>
		  </div>
				  
		</div>
	  </div>






Темы с аналогичным тегами Вкладки

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

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