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


Переделать Форму Быстрого Заказа


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

#1 alpha-me

alpha-me

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

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

Отправлено 17 Апрель 2018 - 00:29

SL-103567
Доброго времени суток!
Помогите пожалуйста:
1) переделать форму быстрого заказа с такой  Сейчас такая.jpg на такую Переделать форму быстрого заказа.jpg
2) и сделать так, чтобы после нажатия "отправить" появлялось: "Ваш заказ отправлен, ожидайте звонка менеджера".

#2 Vaccina

Vaccina

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

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

Отправлено 17 Апрель 2018 - 02:39

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

Зайдите в раздел Сайт - Редактор шаблонов - Обратный звонок - найдите:
<div class="box">
  <div class="content">

замените на:
<div class="callback_block box">
  <div class="content">

далее найдите:
<div class="buttons">
		<div class="left">
		  <p class="back-link"><a href="{INDEX_PAGE_URL}">Перейти на главную</a></p>
		</div>
		<div class="right">
		  {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
		</div>
	  </div>
      
замените на:
<div class="buttons">
		<div class="left">
		  <p class="back-link"><a class="buy_button" href="{INDEX_PAGE_URL}">Перейти на главную</a></p>
		</div>
		<div class="right">
		  {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="buy_button button">Отправить</button>{% ENDIF %}
		</div>
	  </div>

далее зайдите в style.css - найдите:
/* Нумерация страниц в каталоге и на страницах списков новостей */
.pagination, .pagination-news {margin: 15px 0;position: relative;display: block;text-align: center;}
.pagination:after, .pagination-news:after {content: "";display: block;clear: both;}
.pagination a, .pagination-news a {padding: 7px 12px;font-size: 14px;color: #666;border: solid 1px #ddd;display: inline-block;margin-left: -4px;}
.pagination b, .pagination-news b {padding: 4px 12px 5px;font-size: 14px;color: #000;border: solid 1px #ddd;display: inline-block;margin-left: -4px;font-weight: bold;}
.pagination a:hover, .pagination-news a:hover, .pagination b:hover, .pagination-news b:hover{background: #ddd;text-decoration: none;}
/* END Нумерация страниц в каталоге и на страницах списков новостей */

после него пропишите:
.callback_block h1{background: #D11717;color: #fff;text-align: center;}
.callback_block .buttons .left a{display: block;}

далее зайдите в шаблон Товар - найдите:
		  <script>
$(document).ready(function () {
  $('#callback').fancybox({
		maxWidth: 300,
		maxHeight: 330,
		fitToView: false,
		width: '70%',
		height: '70%',
		autoSize: false,
		closeClick: false,
		openEffect: 'none',
		closeEffect: 'none'
  });
  $('#callback').click(function () {
		setTimeout(function () {
		  var item_name = $('.prod_info_name h1').text();
		  $('#callback_comment').text(item_name);
		}, 1000);
  });
});
</script>


замените на:
<script>
$(document).ready(function () {
  $('#callback').fancybox({
	maxWidth: 300,
	maxHeight: 330,
	fitToView: false,
	width: '70%',
	height: '70%',
	autoSize: false,
	closeClick: false,
	openEffect: 'none',
	closeEffect: 'none',
	afterShow: function (code) {
	  var callbackForm = $(this.skin).find('.callbackForm');
	  callbackForm.submit(function () {
		$.post($(this).attr('action'), $(this).serializeArray(), function () {
		  callbackForm.html('Благодарим за обращение. Наш менеджер в скором времени свяжется с вами!');
		  setTimeout(function () {
			$('.fancybox-close').trigger('click');
		  }, 2000);
		});
		return (false);
	  });
	}
  });
  $('#callback').click(function () {
	setTimeout(function () {
	  var item_name = $('.prod_info_name h1').text();
	  $('#callback_comment').text(item_name);
	}, 1000);
  });
});
</script>


#3 alpha-me

alpha-me

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

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

Отправлено 17 Апрель 2018 - 12:20

Просмотр сообщенияVaccina (17 Апрель 2018 - 02:39) писал:

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

Зайдите в раздел Сайт - Редактор шаблонов - Обратный звонок - найдите:
<div class="box">
<div class="content">

замените на:
<div class="callback_block box">
<div class="content">

далее найдите:
<div class="buttons">
	 <div class="left">
		 <p class="back-link"><a href="{INDEX_PAGE_URL}">Перейти на главную</a></p>
	 </div>
	 <div class="right">
		 {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="button">Отправить</button>{% ENDIF %}
	 </div>
	 </div>
  
замените на:
<div class="buttons">
	 <div class="left">
		 <p class="back-link"><a class="buy_button" href="{INDEX_PAGE_URL}">Перейти на главную</a></p>
	 </div>
	 <div class="right">
		 {% IFNOT FORM_SEND_OK %}<button type="submit" title="Отправить" class="buy_button button">Отправить</button>{% ENDIF %}
	 </div>
	 </div>

далее зайдите в style.css - найдите:
/* Нумерация страниц в каталоге и на страницах списков новостей */
.pagination, .pagination-news {margin: 15px 0;position: relative;display: block;text-align: center;}
.pagination:after, .pagination-news:after {content: "";display: block;clear: both;}
.pagination a, .pagination-news a {padding: 7px 12px;font-size: 14px;color: #666;border: solid 1px #ddd;display: inline-block;margin-left: -4px;}
.pagination b, .pagination-news b {padding: 4px 12px 5px;font-size: 14px;color: #000;border: solid 1px #ddd;display: inline-block;margin-left: -4px;font-weight: bold;}
.pagination a:hover, .pagination-news a:hover, .pagination b:hover, .pagination-news b:hover{background: #ddd;text-decoration: none;}
/* END Нумерация страниц в каталоге и на страницах списков новостей */

после него пропишите:
.callback_block h1{background: #D11717;color: #fff;text-align: center;}
.callback_block .buttons .left a{display: block;}

далее зайдите в шаблон Товар - найдите:
		 <script>
$(document).ready(function () {
$('#callback').fancybox({
	 maxWidth: 300,
	 maxHeight: 330,
	 fitToView: false,
	 width: '70%',
	 height: '70%',
	 autoSize: false,
	 closeClick: false,
	 openEffect: 'none',
	 closeEffect: 'none'
});
$('#callback').click(function () {
	 setTimeout(function () {
		 var item_name = $('.prod_info_name h1').text();
		 $('#callback_comment').text(item_name);
	 }, 1000);
});
});
</script>


замените на:
<script>
$(document).ready(function () {
$('#callback').fancybox({
maxWidth: 300,
maxHeight: 330,
fitToView: false,
width: '70%',
height: '70%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none',
afterShow: function (code) {
	 var callbackForm = $(this.skin).find('.callbackForm');
	 callbackForm.submit(function () {
	 $.post($(this).attr('action'), $(this).serializeArray(), function () {
		 callbackForm.html('Благодарим за обращение. Наш менеджер в скором времени свяжется с вами!');
		 setTimeout(function () {
		 $('.fancybox-close').trigger('click');
		 }, 2000);
	 });
	 return (false);
	 });
}
});
$('#callback').click(function () {
setTimeout(function () {
	 var item_name = $('.prod_info_name h1').text();
	 $('#callback_comment').text(item_name);
}, 1000);
});
});
</script>

Спасибо! Уже лучше.
Можно еще сделать так, чтобы кнопки вернуться на главную и купить были одного размера и стояли на одной линии?

#4 alpha-me

alpha-me

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

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

Отправлено 18 Апрель 2018 - 17:40

Доброго времени суток!
Можно еще сделать так, чтобы кнопки вернуться на главную и купить были одного размера и стояли на одной линии?

#5 Ирина345

Ирина345

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

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

Отправлено 19 Апрель 2018 - 15:56

Просмотр сообщенияalpha-me (18 Апрель 2018 - 17:40) писал:

Доброго времени суток!
Можно еще сделать так, чтобы кнопки вернуться на главную и купить были одного размера и стояли на одной линии?
Здравствуйте, добавьте в конец файла style.css код
.callbackForm .right .buy_button.button {
	padding: 10px 46px;
	margin-top: 5px;
}


#6 alpha-me

alpha-me

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

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

Отправлено 20 Апрель 2018 - 21:07

Просмотр сообщенияИрина345 (19 Апрель 2018 - 15:56) писал:

Здравствуйте, добавьте в конец файла style.css код
.callbackForm .right .buy_button.button {
padding: 10px 46px;
margin-top: 5px;
}

Спасибо! Получилось.




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

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