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


Скрипт Кнопки "купить За 1 Клик"

Автор AlexP_RUS, 23 июля 2013 16:21

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

#21 AlexP_RUS

AlexP_RUS

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

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

Отправлено 08 Август 2013 - 18:44

Всё ок, всё работает.
Теперь подскажите как сделать стиль окошка как тут http://www.video-reg...skaya-proshivka или как тут http://www.car-dvr.r...a_plus_new.html  (второй вариант предпочтительней).

И ещё хотелось бы чтобы при отправки заказа выскакивало сообщение типа "Спасибо за заявку, мы перезвоним Вам в самое ближайшее время.", а то сейчас переходит на страницу /feedback, чего совсем не нужно.

#22 Vaccina

Vaccina

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

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

Отправлено 09 Август 2013 - 01:59

Попробуйте следующее - найдите кнопку

<input type="button" class="button_med" value="Заказать" onclick="$(this).closest('form').find('#feedback_name').val($(this).closest('form').find('#feedback_name').val() + ' ' + $(this).closest('form').find('.form_product_name').text());$(this).closest('form').hide();$(this).closest('form').before('<center>Подождите, идет отправка формы...</center>');$(this).closest('form').submit();"/>

и замените её на
<input type="button" class="button_med" value="Заказать" onclick="$(this).closest('form').find('#feedback_name').val($(this).closest('form').find('#feedback_name').val() + ' ' + $(this).closest('form').find('.form_product_name').text());$(this).closest('form').hide();$(this).closest('form').before('<center class="sends">Подождите, идет отправка формы...</center>');$.post($(this).closest('form').attr('action'), $(this).closest('form').serializeArray(), $.proxy(function() {$('.sends').remove();$(this).closest('form').before('<center class="sends">Спасибо за заявку, мы перезвоним Вам в самое ближайшее время.</center>');setTimeout(function() {$('.nyroModalClose').trigger('click');}, 3000)}, this));"/>

далее найдите

var content = $('.iframe_block_order').html();
$.fn.nyroModalManual({
width: width,
height: height,
content: content,
minWidth: width,
minHeight: height,	  
gallery: null
});
return(false);

и замените на
var content = $('.iframe_block_order').html();
$.fn.nyroModalManual({
width: width,
height: height,
content: content,
minWidth: width,
minHeight: height,	  
gallery: null,
wrap: {
	div: '<div class="wrapper block_order"></div>',
	ajax: '<div class="wrapper block_order"></div>',
	form: '<div class="wrapper block_order"></div>',
	formData: '<div class="wrapper block_order"></div>',
	manual: '<div class="wrapper block_order"></div>'
  }
});
return(false);

после можно будет задавать стили окну через селектор .wrapper.block_order

#23 AlexP_RUS

AlexP_RUS

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

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

Отправлено 09 Август 2013 - 19:12

Жестко.., одни ошибки повылазили. Жду следующих действий.

#24 Vaccina

Vaccina

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

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

Отправлено 09 Август 2013 - 23:36

Попробуйте:
<input type="button" class="button_med" value="Заказать" onclick="$(this).closest('form').find('#feedback_name').val($(this).closest('form').find('#feedback_name').val() + ' ' + $(this).closest('form').find('.form_product_name').text());$(this).closest('form').hide();$(this).closest('form').before('<center class="sends">Подождите, идет отправка формы...</center>');$.post($(this).closest('form').attr('action'), $(this).closest('form').serializeArray(), $.proxy(function() {$('.sends').remove();$(this).closest('form').before('<center class="sends">Спасибо за заявку, мы перезвоним Вам в самое ближайшее время.</center>');setTimeout(function() {$('.nyroModalClose').trigger('click');}, 3000)}, this));"/>
заменить на:
<input type="button" class="button_med" value="Заказать" onclick="$(this).closest('form').find('#feedback_name').val($(this).closest('form').find('#feedback_name').val() + ' ' + $(this).closest('form').find('.form_product_name').text());$(this).closest('form').hide();$(this).closest('form').before('<center class='sends'>Подождите, идет отправка формы...</center>');$.post($(this).closest('form').attr('action'), $(this).closest('form').serializeArray(), $.proxy(function() {$('.sends').remove();$(this).closest('form').before('<center class='sends'>Спасибо за заявку, мы перезвоним Вам в самое ближайшее время.</center>');setTimeout(function() {$('.nyroModalClose').trigger('click');}, 3000)}, this));"/>

Проблема была в двойных кавычках.

#25 AlexP_RUS

AlexP_RUS

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

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

Отправлено 10 Август 2013 - 09:21

Теперь при нажатии "заказать" выскакивает 1JS Ошибка.

#26 AlexP_RUS

AlexP_RUS

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

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

Отправлено 11 Август 2013 - 16:45

Ну я же эту не доделку не могу долго на сайте держать. Можно пож-та по оперативнее, а то уже трафик пошел.

#27 Сake

Сake

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

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

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

Замените код кнопки 

<input type="button" class="button_med" value="Заказать" onclick="$(this).closest('form').find('#feedback_name').val($(this).closest('form').find('#feedback_name').val() + ' ' + $(this).closest('form').find('.form_product_name').text());$(this).closest('form').hide();$(this).closest('form').before('<center class='sends'>Подождите, идет отправка формы...</center>');$.post($(this).closest('form').attr('action'), $(this).closest('form').serializeArray(), $.proxy(function() {$('.sends').remove();$(this).closest('form').before('<center class='sends'>Спасибо за заявку, мы перезвоним Вам в самое ближайшее время.</center>');setTimeout(function() {$('.nyroModalClose').trigger('click');}, 3000)}, this));"/>

на следующий код

<input type="button" class="button_med" value="Заказать" onclick="$(this).closest('form').find('#feedback_name').val($(this).closest('form').find('#feedback_name').val() + ' ' + $(this).closest('form').find('.form_product_name').text());$(this).closest('form').hide();$(this).closest('form').before('<center class=sends>Подождите, идет отправка формы...</center>');$.post($(this).closest('form').attr('action'), $(this).closest('form').serializeArray(), $.proxy(function() {$('.sends').remove();$(this).closest('form').before('<center class=sends>Спасибо за заявку, мы перезвоним Вам в самое ближайшее время.</center>');setTimeout(function() {$('.nyroModalClose').trigger('click');}, 3000)}, this));"/>

#28 AlexP_RUS

AlexP_RUS

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

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

Отправлено 13 Август 2013 - 19:59

Заменил, всё заработало. Только вот если поля не заполнены и при этом нажать на кнопку "заказать", то сообщение всё равно отправляется. Это надо исправить.

Скажите какие стили и куда нужно добавить, чтобы было также как на этих сайтах?
http://www.video-reg...skaya-proshivka

http://www.car-dvr.r...delta_plus_new/ (хотелось бы реализовать этот вариант, если можно)

#29 Vaccina

Vaccina

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

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

Отправлено 15 Август 2013 - 02:53

Найдите код полей

<input id="feedback_name" style="width: 320px; margin: 10px;" name="form[feedback_name]" value="Имя" maxlength="50" minlength="3" class="input required" />
<input id="feedback_message" style="width: 320px; margin: 10px;" name="form[feedback_message]" class="required" value="Телефон" minlength="5" />
<input id="feedback_еmail" style="width: 320px; margin: 10px;" name="form[feedback_email]" value="Адрес email" maxlength="255" minlength="5" class="input" />

и замените их на

<input id="feedback_name" style="width: 320px; margin: 10px;" name="form[feedback_name]" value="Имя" maxlength="50" required="required" minlength="3" class="input required" />
<input id="feedback_message" style="width: 320px; margin: 10px;" name="form[feedback_message]" class="required" required="required" value="Телефон" minlength="5" />
<input id="feedback_еmail" style="width: 320px; margin: 10px;" name="form[feedback_email]" value="Адрес email" required="required" maxlength="255" minlength="5" type="email" class="input" />

Цитата

(хотелось бы реализовать этот вариант, если можно)

В данном случае вы хотите чтобы поверх формы отображалась информация товара? В виде изображения, названия и цены. Все остальные элементы остаются без изменений, верно?

#30 AlexP_RUS

AlexP_RUS

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

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

Отправлено 15 Август 2013 - 19:04

Цитата

Заменил, всё заработало. Только вот если поля не заполнены и при этом нажать на кнопку "заказать", то сообщение всё равно отправляется. Это надо исправить.
Эта проблема осталась.

Цитата

В данном случае вы хотите чтобы поверх формы отображалась информация товара? В виде изображения, названия и цены. Все остальные элементы остаются без изменений, верно?
Нет, мне хотелось бы полностью копию того всплывающего окна сделать, и структуру и кнопку "купить" и дизайн самого окна. Единственное что Адрес email можно убрать совсем.

#31 Vaccina

Vaccina

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

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

Отправлено 16 Август 2013 - 02:45

Цитата

Единственное что Адрес email можно убрать совсем.

Поле email является обязательным для отправки сообщения.

Цитата

Эта проблема осталась

Замените код

<input type="button" class="button_med" value="Заказать" onclick="$(this).closest('form')

на следующий

<input type="button" class="button_med" value="Заказать" onclick="$('#nyroModalContent .feedbackForm').validate();if(!$('#nyroModalContent .feedbackForm').valid())return(false);$(this).closest('form')

далее найдите

<input id="feedback_name" style="width: 320px; margin: 10px;" name="form[feedback_name]" value="Имя" maxlength="50" required="required" minlength="3" class="input required" />
<input id="feedback_message" style="width: 320px; margin: 10px;" name="form[feedback_message]" class="required" required="required" value="Телефон" minlength="5" />
<input id="feedback_еmail" style="width: 320px; margin: 10px;" name="form[feedback_email]" value="Адрес email" required="required" maxlength="255" minlength="5" type="email" class="input" />

и замените на

<input id="feedback_name" style="width: 320px; margin: 10px;" name="form[feedback_name]" placeholder="Имя" maxlength="50" required="required" minlength="3" class="input required" />
<input id="feedback_message" style="width: 320px; margin: 10px;" name="form[feedback_message]" class="required" required="required" placeholder="Телефон" minlength="5" />
<input id="feedback_еmail" style="width: 320px; margin: 10px;" name="form[feedback_email]" placeholder="Адрес email" required="required" maxlength="255" minlength="5" type="email" class="input required email" />

Цитата

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

Добавьте в ваш файл стилей main.css

#nyroModalWrapper .block_order #closeBut {
   display: none;
}
#nyroModalWrapper {
   border: 4px double #777777 !important;
}
#nyroModalWrapper .block_order .feedbackForm {
   padding: 0 40px;
}
#nyroModalWrapper .block_order h3 {
	color: #000000;
	font-size: 17px;
	line-height: 33px;
	margin: 0 0 15px;
	text-align: left;
}
#nyroModalWrapper .block_order .prd-table table,
#nyroModalWrapper .block_order .prd-table td,
#nyroModalWrapper .block_order .prd-table tr {
	border: 1px solid #CCCCCC;
	margin: 0;
	padding: 10px;
	text-align: center;
	vertical-align: middle;
}
#nyroModalWrapper .block_order .prd-block > tr:not(.prd-table) td {
	padding: 0;
margin: 0;
}
#nyroModalWrapper .block_order .button_med {
	background: #FFDB00;
	height: 30px;
	width: 300px;
}

далее в шаблоне найдите

		<div class="iframe_click">
		<input type="hidden" name="hash" value="{HASH}" />
			{% IF FORM_SEND_OK %}
				<h3 class="green">Спасибо за Ваше сообщение! В скором времени мы свяжемся с Вами.</h3>
				<a href="http://{NET_DOMAIN}/">Перейти на главную</a>
			{% ELSE %}
				<input id="feedback_name" style="width: 320px; margin: 10px;" name="form[feedback_name]" placeholder="Имя" maxlength="50" required="required" minlength="3" class="input required" />
				<input id="feedback_message" style="width: 320px; margin: 10px;" name="form[feedback_message]" class="required" required="required" placeholder="Телефон" minlength="5" />
				<input id="feedback_еmail" style="width: 320px; margin: 10px;" name="form[feedback_email]" placeholder="Адрес email" required="required" maxlength="255" minlength="5" type="email" class="input required email" />

и замените на

<div class="section-caption c-orange"><h3>Быстрая покупка без регистрации!</h3></div>
		<div class="iframe_click">
		<input type="hidden" name="hash" value="{HASH}" />
			{% IF FORM_SEND_OK %}
				<h3 class="green">Спасибо за Ваше сообщение! В скором времени мы свяжемся с Вами.</h3>
				<a href="http://{NET_DOMAIN}/">Перейти на главную</a>
			{% ELSE %}
	   <table class="prd-block">
		<tr class="prd-table">
		 <td colspan="2">
		  <table>
		   <tr>
			<td class="form_product_img"></td>
		 <td class="form_product_name"></td>
		 <td class="form_product_price"></td>
		</tr>
	   </table>
	  </td>
	 </tr>
	 <tr>
		 <td>Ваше имя*:</td>
	  <td><input id="feedback_name" style="width: 150px; margin: 10px;" name="form[feedback_name]" placeholder="Имя" maxlength="50" required="required" minlength="3" class="input required" /></td>
	 </tr>
	 <tr>
		 <td>Ваш телефон*:</td>
	  <td><input id="feedback_message" style="width: 150px; margin: 10px;" name="form[feedback_message]" class="required" required="required" placeholder="Телефон" minlength="5" /></td>
	 </tr>
	 <tr>
		 <td>Ваш email*:</td>
	  <td><input id="feedback_еmail" style="width: 150px; margin: 10px;" name="form[feedback_email]" placeholder="Адрес email" required="required" maxlength="255" minlength="5" type="email" class="input required email" /></td>
	 </tr>
	</table>

далее найдите

$('.form_product_name').text('{GOODS_NAME}');

и замените на

$('.form_product_name').text('{GOODS_NAME}');
$('.form_product_img').html($('.goodsDataMainImagesIcon:eq(0)'));
$('.form_product_price').html($('.goodsDataMainModificationPriceNow'));

#32 AlexP_RUS

AlexP_RUS

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

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

Отправлено 17 Август 2013 - 16:28

Отлично, почти то что надо. Только в окошке всё растянулось, цена почему-то 3 раза повторяется.

#33 Vaccina

Vaccina

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

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

Отправлено 20 Август 2013 - 05:21

Замените строку

$('.form_product_price').html($('.goodsDataMainModificationPriceNow'));

на

$('.form_product_price').html($('.goodsDataMainModificationDataBlock .goodsDataMainModificationPriceNow:first'));

#34 AlexP_RUS

AlexP_RUS

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

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

Отправлено 20 Август 2013 - 09:31

Когда нажимаешь на кнопку "купить в 1 клик" то цена у товара исчезает. Это можно увидеть когда закроете окошко.

Также, окошко можно сделать чуть больше и чтобы оно разворачивалось в полную как в примере, а не как сейчас с прокручиванием. Как я понимаю, для этого надо ужать информацию показываемую в окошке.
Сделать следующее: убрать двойное обрамление показываемого товара, подтянуть друг к другу имя, телефон и емэйл, уменьшить огромную цену товара и дать больше пространства для названия товара. Убрать сверху название товара, т.к. оно уже есть в ячейке товара.
В общем, всё как в примере http://www.car-dvr.r...delta_plus_new/

#35 Сake

Сake

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

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

Отправлено 21 Август 2013 - 03:01

Попробуйте заменить строку

$('.form_product_price').html($('.goodsDataMainModificationDataBlock .goodsDataMainModificationPriceNow:first'));

на

$('.form_product_price').html($('.goodsDataMainModificationDataBlock .goodsDataMainModificationPriceNow:first').clone());

Для измеения размера окна - найдите

var content = $('.iframe_block_order').html();
$.fn.nyroModalManual({
width: width,
height: height,
content: content,
minWidth: width,
minHeight: height,
gallery: null,
wrap: {
div: '<div class="wrapper block_order"></div>',
ajax: '<div class="wrapper block_order"></div>',
form: '<div class="wrapper block_order"></div>',
formData: '<div class="wrapper block_order"></div>',
manual: '<div class="wrapper block_order"></div>'
}
});
return(false);

и задайте необходимый размер в соответствующих опциях width(имя опции): width(значение опции), Например

var content = $('.iframe_block_order').html();
$.fn.nyroModalManual({
width: '600px',
height: height,
content: content,
minWidth: '400px',
minHeight: height,
gallery: null,
wrap: {
div: '<div class="wrapper block_order"></div>',
ajax: '<div class="wrapper block_order"></div>',
form: '<div class="wrapper block_order"></div>',
formData: '<div class="wrapper block_order"></div>',
manual: '<div class="wrapper block_order"></div>'
}
});
return(false);

далее стиль


#nyroModalWrapper .block_order .prd-table table, #nyroModalWrapper .block_order .prd-table td, #nyroModalWrapper .block_order .prd-table tr {
border: 1px solid #CCCCCC;
margin: 0;
padding: 10px;
text-align: center;
vertical-align: middle;
}

замените на


#nyroModalWrapper .block_order .prd-table table, #nyroModalWrapper .block_order .prd-table table td, #nyroModalWrapper .block_order .prd-table tr {
border: 1px solid #CCCCCC;
margin: 0;
padding: 10px;
text-align: center;
vertical-align: middle;
}

далее найдите и удалите в шаблоне

<div class="section-caption c-orange"><strong>Быстрый заказ<br /><span class="form_product_name"></span></strong></div>

далее в файл стилей добавьте

#nyroModalWrapper .block_order .prd-block > tbody > tr:not(.prd-table) td {
padding: 0;
}
#nyroModalWrapper .form_product_price .goodsDataMainModificationPriceNow {
font-size: 12px;
}

#36 AlexP_RUS

AlexP_RUS

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

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

Отправлено 21 Август 2013 - 19:57

Теперь проблемы следующие:
Когда нажимаешь на кнопку "купить в 1 клик" то теперь исчезает первая мини-картинка под главным изображением.

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

Так же надо подтянуть друг к другу имя, телефон и емэйл, как в примере.
Спасибо.

#37 Vaccina

Vaccina

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

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

Отправлено 22 Август 2013 - 02:29

Найдите строку

$('.form_product_img').html($('.goodsDataMainImagesIcon:eq(0)'));

и замените её на

$('.form_product_img').html($('.goodsDataMainImagesIcon:eq(0)').clone());

Цитата

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

Попробуйте вместо передачи строки вида '500px' устанавливать целое значение вида 500

Далее в файл стилей main.css добавьте

.prd-table input {
	margin: 2px 10px !important;
}

#38 AlexP_RUS

AlexP_RUS

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

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

Отправлено 22 Август 2013 - 15:38

Целые числа помогли, размер регулируется, спасибо.

В Firefox подогнал размер окна, смотрится нормально, но в хроме и опере справа всё равно стоит прокрутка по вертикали, хотя там прокручивать то и нечего. Как её убрать?

Так же надо подтянуть друг к другу имя, телефон и емэйл, как в примере - 3й раз пишу, не хотите подтягивать чтоли?)

#39 Vaccina

Vaccina

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

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

Отправлено 23 Август 2013 - 02:50

Цитата

Так же надо подтянуть друг к другу имя, телефон и емэйл, как в примере - 3й раз пишу, не хотите подтягивать чтоли?)

Немного ошиблась с селектором. Замените

.prd-table input {
		margin: 2px 10px !important;
}

на

.prd-block input {
		margin: 4px 10px !important;
}

Цитата

В Firefox подогнал размер окна, смотрится нормально, но в хроме и опере справа всё равно стоит прокрутка по вертикали, хотя там прокручивать то и нечего. Как её убрать?

Добавьте в файл стилей

.block_order div#nyroModalContent {
   overflow: visible !important;
}

#40 AlexP_RUS

AlexP_RUS

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

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

Отправлено 23 Август 2013 - 19:30

Теперь при добавлении .clone()); в код 
$('.form_product_img').html($('.goodsDataMainImagesIcon:eq(0)').clone());
картинка исчезать перестала, но теперь она стала наоборот добавляться и дублировать главное изображение при увеличении. Теперь их два при увеличении.

Так же хотелось бы всё же как-то убрать отправку емэйла, т.к. это как раз только тормозит покупателя оформить заказ.
Раз вы говорите, что он по-любому должен отправляться, то может можно как-то сделать так, чтобы емэйл (любой случайный, допустим мой) отправлялся автоматом сам при нажатии кнопки, т.е. создать некое правило в коде на автоматическую отправку емэйла и прописать его там. Мой емэйл будет всегда отправляться при нажатии на кнопку заказать, при этом само поле "Ваш email" будет отсутствовать во всплывающем окне.
Можно так реализовать?
Ну или как-то по другому, но эта строка с мылом ой как не желательна.
Спасибо.
Обратно в Оформление заказа


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

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

  1. Форум владельцев интернет-магазинов
  2. → Вопросы работы сервиса StoreLand
  3. → Дизайн
  4. → Шаблон Мокко
  5. → Оформление заказа
  6. Privacy Policy