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

[sibulba]

.

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

• 

[sibulba]

ап

[Alexey11]

Если выставлять так блоки с текстом, то только абсолютным позиционированием.
То-есть сначала вставляем картинку в данный блок, потом пишем все тексты и позиционируем их по пикселям относительно цифр.

Для начала установите данную картинку. для этого найдите данный блок кода:

{% IF index_page %}
<div id="secondblock">
<div class="container" id="secondblock_page">
<p id="secondblock_text">Как мы работаем:</p>
</div>
</div>
{% ENDIF %}

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

{% IF index_page %}
<div id="secondblock">
<div class="container" id="secondblock_page">
<p id="secondblock_text">Как мы работаем:</p>


<img src="{ASSETS_IMAGES_PATH}hww_article.png?9413" width="600" style="
display: block;
margin: 0 auto;
">

</div>
</div>
{% ENDIF %}

[sibulba]

.

[Vaccina]

у вас кнопки с цифрами вставлены одной картинкой, для начала необходимо увеличить блок у нее:

#secondblock_page {
	height: 100px;
	width: 940px;
}

замените на:

#secondblock_page {
	height: 120px;
	width: 940px;
}

далее увеличим общее поле для текста:

#secondblock {
	background-color: #0099CC;
	height: 120px;
	width: auto;
}

замените на:

#secondblock {
	background-color: #0099CC;
	height: 160px;
	width: auto;
}

далее в HTML после:

<div id="secondblock_page" class="container">
		<img width="950" style="display: block; padding-top: 10px; margin: 0 auto;" src="hww_article.png">
</div>

вставьте:

<div class="secondblock_page_txt">
<span>Выбираете товар</span>
<span>Оставляете заказ</span>
<span>Менеджер подтверждает заказ</span>
<span>Доставка заказа</span>
</div>

далее пишем стили для него:

.secondblock_page_txt {
	margin: 0 auto;
	width: 950px;	  /* Размер должен быть равен размеру картинки */
}
.secondblock_page_txt span {
	color: #FFFFFF;
	display: inline-block;
	height: 35px;
	overflow: hidden;
	padding: 0 20px;
	text-align: center;
	width: 150px;
}

[sibulba]

.

[sibulba]

.

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

• 

[Сake]

Из вашего текста сообщения не совсем понятно что именно у вас не получатся. Стилизация или функционирование формы? Сама по себе форма реализуется по типу обратного звонка http://forum.storela..._60#entry100503

[sibulba]

.

[sibulba]

Ап

[Сake]

Цитата

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

Email адрес является обязательным и изменить его на номер телефона не получиться, так как на сервере происходит проверка данного поля. В данном случае можно просто скрыть поле задав ему стиль display:none или атрибут type="text" заменить на type="hidden", а значение в атрибуте value задать произвольное - корректное. В форме обратной связи (он же образный звонок и т.д) можно добавить дополнительное поле вида

<input id="feedback_phone" type="text"  name="form[phone]"  value="{FORM_PHONE}" maxlength="255" class="required phone input-text"/>

Цитата

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

В данном случае необходим обработчик javascript - события отправки формы. Обработчик может выглядеть следующим образом

$(function() {
  $('.callback').submit(function() {
	$.post($(this).attr('action'), $(this).serializeArray(), function() {
	 $('.callback-success').show();
	});
	return(false);
  });
});

в данном случае callback это класс формы (тега <form class="callback">), а класс callback-success это класс поля сообщения отображаемого после отправки формы (<span class="callback-success" style="display: none;">).

[sibulba]

.

[Сake]

В вашем шаблоне "HTML" код формы выглядит следующим образом

<form method="post" action="{FEEDBACK_URL}" class="feedbackForm" enctype="multipart/form-data">
				{% IFNOT FORM_SEND_OK %}
				  <div class="fieldset">
								<input type="hidden" name="hash" value="{HASH}" />
								<input type="hidden" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" value="Подписка" />
								<span class="insert-antispam"></span>
								<ul class="form-list">
								  <li class="fields">
									<div class="customer-name">
									  <div class="field name-firstname">
										<div class="input-box">
										  <input type="text" id="feedback_name" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]" value="{FORM_FEEDBACK_NAME}" maxlength="50" class="light required" placeholder="Ваше Имя" />
										</div>
									  <div class="field name-lastname">
										<div class="input-box">
										  <input type="text" id="feedback_email" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]" value="{FORM_FEEDBACK_EMAIL}" maxlength="255" class="required email light" placeholder="Ваш e-mail" />
										</div>
									  <div class="field name-lastname">
										 <div class="input-box">
										  <input id="feedback_phone" type="text" name="form[phone]" value="{FORM_PHONE}" maxlength="255" class="required phone input-text" placeholder="Ваш телефон" />																</div>
										 </div>
									  </div>
								  </li>
								</ul>
				  </div>
				{% ENDIF %}
				<div class="buttons-set">
				  <input type="submit" title="Сделать заказ" class="exclusive" value="СДЕЛАТЬ ЗАКАЗ" />
				  </p>
				</div>
  </form>

вам необходимо заменить данный код формы на код

<form method="post" action="{FEEDBACK_URL}" class="feedbackForm callback" enctype="multipart/form-data">
	<div class="callback-success" style="display: none;"></div>
	<div class="fieldset">
  <input type="hidden" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_EMAIL}]" value="null@null.nl" />
		<input type="hidden" name="hash" value="{HASH}" />
		<input type="hidden" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_MESSAGE}]" value="Подписка" />
		<span class="insert-antispam"></span>
		<ul class="form-list">
			<li class="fields">
				<div class="field name-firstname">
					<div class="input-box">
						<input type="text" id="feedback_name" name="form[{ANTISPAM_FORM_FIELD_NAME_FEEDBACK_NAME}]" value="{FORM_FEEDBACK_NAME}" maxlength="50" class="light required" placeholder="Ваше Имя" />
					</div>
	</div>
				<div class="field name-lastname">
					<div class="input-box">
						<input id="feedback_phone" type="text" name="form[phone]" value="{FORM_PHONE}" maxlength="255" class="required phone input-text" placeholder="Ваш телефон" />															   
	 </div>
				</div>
			</li>
		</ul>
	</div>
	<div class="buttons-set">
		<input type="submit" title="Сделать заказ" class="exclusive" value="СДЕЛАТЬ ЗАКАЗ" />		   
	</div>
</form>

После замены кода можно будет уже добавить необходимые стили и код javascript.

[sibulba]

.

[Alexey11]

sibulba (26 Март 2014 - 09:31) писал:

и еще
подскажите в какие блоки нужно прописывать стили? форма большая не могу разобраться

Чтобы быстро найти стили, которые нужно изменить можно воспользоваться "Просмотром кода элемента" браузера Crome:

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

• 

[Wader]

Всем привет. Хочу непного видоизменить изображения header_page.png и header_page_without_logo.png (находятся в сайт - редактирование шаблонов - изображения). Подскажите как это правильно сделать. =)

[Alexey11]

Wader (26 Март 2014 - 16:44) писал:

Всем привет. Хочу непного видоизменить изображения header_page.png и header_page_without_logo.png (находятся в сайт - редактирование шаблонов - изображения). Подскажите как это правильно сделать. =)

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

[sibulba]

.

[Сake]

sibulba (26 Март 2014 - 09:31) писал:

правки внес. все равно не отправляется)
что нужно поправить в main js ?

Найдите в вашем файле main.js следующий код

$(function() {
  if($('.insert-antispam').length) {
				 $.get('/feedback', function(html) {
				   $(html).find('#inject-antispam').children().appendTo($('.insert-antispam'));
				 });
  }
$('.exclusive.submit-form').click(function(){
   var form = $(this).closest('form');
   $.post(form.attr('action'), form.serializeArray(), function() {
								 $('.submit-form').html('<h5 class="msg">Спасибо за заказ!</h5>');
				});
				return(false);
});
});

и замените его на

$(function() {
  if($('.insert-antispam').length) {
		$.get('/feedback', function(html) {
				$(html).find('#inject-antispam').children().appendTo($('.insert-antispam'));
				$('#feedback_name').attr('name', $(html).find('#feedback_name').attr('name'));
				$('#feedback_email').attr('name', $(html).find('#feedback_email').attr('name'));
				$('#feedback_message').attr('name', $(html).find('#feedback_message').attr('name'));
				var hidden = /ElementById\("(.*)"\).*ibute\(.*, "(.*)"\)/.exec(html);
				$('#'+hidden[1]).val(hidden[2]);
		});
  }
$('.exclusive.submit-form').click(function(){
   var form = $(this).closest('form');
   $.post(form.attr('action'), form.serializeArray(), function() {
								 $('.submit-form').html('<h5 class="msg">Спасибо за заказ!</h5>');
				});
				return(false);
});
});

[sibulba]

супер работает. сообщение приходит как нужно НО при нажатии на кнопку происходит перекидывание на страницу feedback
как этого избежать и оставить клиента на главной странице?

за что отвечает эта строка?
    <div class="callback-success" style="display: none;"></div>