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


Всплывющее Окно После Оформления Заказа


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

#1 Mamba

Mamba

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

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

Отправлено 11 Апрель 2016 - 16:54

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

#2 Юля123

Юля123

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

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

Отправлено 11 Апрель 2016 - 17:21

Просмотр сообщенияMamba (11 Апрель 2016 - 16:54) писал:

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

Здравствуйте, инструкция по добавлению всплывающего окна: http://forum.storela...-делюсь-с-вами/


В вашем случае, добавляете в конце main.css код:

/*Всплывающее окно*/
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #fff;
width: 500px; /*Ширина окна*/
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Закругленные углы--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#popup h1{
font:28px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: red;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h2{
font:24px Monotype Corsiva, Arial;
color: #1985b4;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h3{
font:18px Monotype Corsiva, Arial;
color: #1985b4;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
/* кнопка закрытия */
.close {
background-color: rgba(0, 0, 0, 0.8) !important;
border: 2px solid #ccc;
height: 24px;
line-height: 24px !important;
position: absolute !important;
right: -24px;
cursor: pointer !important;
font-family: Times !important;
font-weight: bold !important;
text-align: center !important;
text-decoration: none !important;
color: rgba(255, 255, 255, 0.9) !important;
font-size: 14px !important;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9) !important;
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8) !important;
}

при желании можно подкорректировать этот код, далее в шаблон Просмотр заказа добавьте код:


Далее в шаблоне "Просмотр заказа" после кода:

<h2 class="legend">Данные заказа</h2>

добавьте код:
<div id="parent_popup">
<div id="popup">
<h3>Спасибо за заказ! Наши операторы свяжутся с вами в течении суток.</h3>
</div>
</div>
<script type="text/javascript">// <![CDATA[
var delay_popup = 500; /*время задержки примерно  полсекунды*/
setTimeout("document.getElementById('parent_popup').style.display='block'", delay_popup);
// ]]></script>


#3 Mamba

Mamba

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

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

Отправлено 11 Апрель 2016 - 17:42

появилась просто надпись на странице оформления заказа что " спасибо за заказ....." которую там плохо видно, а самого всплывающего окна нету? можно уточнить main.css у меня нету, есть либо main.js либо style.css ? куда вставлять код и верный ли он?
И когда заказ уже оформлен ,на этой странице есть кнопка"повторить заказ" она как то не уместна, ее можно изменить например на "распечатать заказ" или например,что бы люди оставляли свое мнение по сайту что им понравилась или наоборот нет, например кнопка "мне понравился сайт " и рядом пятибальная шкала для выбора от 1 до 5???

#4 Юля123

Юля123

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

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

Отправлено 11 Апрель 2016 - 17:44

Просмотр сообщенияMamba (11 Апрель 2016 - 17:42) писал:

появилась просто надпись на странице оформления заказа что " спасибо за заказ....." которую там плохо видно, а самого всплывающего окна нету? можно уточнить main.css у меня нету, есть либо main.js либо style.css ? куда вставлять код и верный ли он?

Извините, в вашем случае файл style.css

#5 Юля123

Юля123

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

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

Отправлено 11 Апрель 2016 - 17:54

Просмотр сообщенияMamba (11 Апрель 2016 - 17:42) писал:

появилась просто надпись на странице оформления заказа что " спасибо за заказ....." которую там плохо видно, а самого всплывающего окна нету? можно уточнить main.css у меня нету, есть либо main.js либо style.css ? куда вставлять код и верный ли он?


В style.css так же найдите код:

.conta {
	 position: relative;
	 width: 100%;
	 max-width: 1280px;
	 margin-bottom: 10px;
	 z-index: 30;
	 margin-top: -10px;
}
.toggleMenu {display: none;background: #666;padding: 10px 15px;color: #fff;}
.nav {list-style: none;*zoom: 1;background:#000;z-index:30;position: relative;}

и замените на код:

.conta {
	 position: relative;
	 width: 100%;
	 max-width: 1280px;
	 margin-bottom: 10px;
	 margin-top: -10px;
}
.toggleMenu {display: none;background: #666;padding: 10px 15px;color: #fff;}
.nav {list-style: none;*zoom: 1;background:#000;position: relative;}

В шаблоне просмотр заказа код:

<h3>Спасибо за заказ! Наши операторы свяжутся с вами в течении суток для подтверждения заказа.</h3>

замените на код:

<h2>Спасибо за заказ! Наши операторы свяжутся с вами в течении суток для подтверждения заказа.</h2>

стиль текста и сам текст можно изменить, только опишите предварительно, как он должен выглядеть

#6 Mamba

Mamba

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

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

Отправлено 11 Апрель 2016 - 18:45

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

И когда заказ уже оформлен ,на этой странице есть кнопка"повторить заказ" она как то не уместна, ее можно изменить например на "распечатать заказ" или например,что бы люди оставляли свое мнение по сайту что им понравилась или наоборот нет, например кнопка "мне понравился сайт " и рядом пятибальная шкала для выбора от 1 до 5???

#7 Mamba

Mamba

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

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

Отправлено 12 Апрель 2016 - 00:12

И еще вопрос. Когда человек оформляет заказ и указывает там свою почту, ему на эту почту приходит сообщение с карточкой заказа и позиции своего заказа. Но я не пойму зачем эти позиции кликабельны, то есть на них можно нажать и человек попадает в личный кабинет этого сайта,где может сделать все что угодно, как то не понятно и не доработано, как это можно исправить?12.JPG

#8 Vaccina

Vaccina

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

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

Отправлено 12 Апрель 2016 - 06:30

Сайт - Редактор шаблонов - Другие шаблоны - Письмо покупателю о заказе - найдите:
<td>{% IF order_lines.GOODS_URL %}<a href="{order_lines.GOODS_URL}">{% ENDIF %}{order_lines.NAME}{% IF order_lines.GOODS_URL %}</a>{% ENDIF %}</td>
	 

замените на:
<td>{order_lines.NAME}</td>
	 


#9 Mamba

Mamba

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

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

Отправлено 12 Апрель 2016 - 11:06

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

#10 Юля123

Юля123

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

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

Отправлено 12 Апрель 2016 - 12:51

Просмотр сообщенияMamba (11 Апрель 2016 - 18:45) писал:

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

И когда заказ уже оформлен ,на этой странице есть кнопка"повторить заказ" она как то не уместна, ее можно изменить например на "распечатать заказ" или например,что бы люди оставляли свое мнение по сайту что им понравилась или наоборот нет, например кнопка "мне понравился сайт " и рядом пятибальная шкала для выбора от 1 до 5???

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

Цитата

то окно увеличить раза в 2

окно нужно увеличить по высоте? Если да, тогда в style.css найдите код:


width: 500px; /*Ширина окна*/

после этого кода добавьте код:

height: 100px; /*Высота окна*/



при желании можно увеличить значение 100.


Цитата

текст чуть побольше

В style.css найдите код:

#popup h1{
font:28px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: red;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h2{
font:24px Monotype Corsiva, Arial;
color: #1985b4;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}
#popup h3{
font:18px Monotype Corsiva, Arial;
color: #1985b4;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

и замените на код:

#popup span{
font:24px Monotype Corsiva, Arial;
font-weight: bold;
text-align: center;
color: #1985b4;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

в шаблоне Просмотр заказа найдите код:

<h2>Спасибо за заказ! Наши операторы свяжутся с вами в течении суток для подтверждения заказа.</h2>

и замените на код:

<span>Спасибо за заказ! Наши операторы свяжутся с вами в течении суток для подтверждения заказа.</span>
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup').style.display='none';">X</a>

Цитата

переместить на середину экрана

Там же найдите код:

#popup {
background: #fff;
width: 500px; /*Ширина окна*/
margin: 10% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Закругленные углы--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

и замените на код:

#popup {
background: #fff;
width: 500px; /*Ширина окна*/
margin: 20% auto;
padding: 5px 20px 13px 20px;
border: 10px solid #ddd;
position: relative;
/*--CSS3 CSS3 Тени для Блока--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Закругленные углы--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}


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

в style.css найдите код:
/* кнопка закрытия */
.close {
background-color: rgba(0, 0, 0, 0.8) !important;
border: 2px solid #ccc;
height: 24px;
line-height: 24px !important;
position: absolute !important;
right: -24px;
cursor: pointer !important;
font-family: Times !important;
font-weight: bold !important;
text-align: center !important;
text-decoration: none !important;
color: rgba(255, 255, 255, 0.9) !important;
font-size: 14px !important;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9) !important;
top: -24px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200, 0.8) !important;
}

и замените на код:

/* кнопка закрытия */
.close {
background-color: #000 !important;
border: 2px solid #ccc;
height: 24px;
line-height: 24px !important;
position: absolute !important;
right: -24px;
cursor: pointer !important;
font-family: Times !important;
font-weight: bold !important;
text-align: center !important;
text-decoration: none !important;
color: #FFF !important;
font-size: 14px !important;
text-shadow: 0 -1px rgba(0, 0, 0, 0.9) !important;
top: 62px;
width: 24px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background-color: rgba(0, 122, 200) !important;
}


Цитата

И когда заказ уже оформлен ,на этой странице есть кнопка"повторить заказ" она как то не уместна, ее можно изменить например на "распечатать заказ" или например,что бы люди оставляли свое мнение по сайту что им понравилась или наоборот нет, например кнопка "мне понравился сайт " и рядом пятибальная шкала для выбора от 1 до 5???


Эту кнопку можно просто убрать. Для этого в шаблоне Просмотр заказа найдите и удалите код:

<form action="{USER_ORDER_REPEAT_URL}/{ORDER_TOKEN}" method="GET"><button style="float: right;" type="submit" title="Повторить заказ" class="submit" onclick="return confirm('Вы действительно хотите в точности повторить выбранный заказ?')">Повторить заказ</button></form>



Цитата

И как на той же почте убрать ссылку на "наблюдать вы можете за заказом и адрес

Сайт - Редактор шаблонов - Другие шаблоны - Письмо покупателю о заказе - найдите и удалите:

Наблюдать за этим заказом Вы можете {% IF HAS_PRIVATE_OFFICE %}в личном кабинете, а также {% ENDIF %}по адресу:<br />
<a href="{ORDER_LINK}">{ORDER_LINK}</a>


#11 Mamba

Mamba

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

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

Отправлено 12 Апрель 2016 - 13:29

спасибо ,а как убрать задний черный фон?авпыа.JPG

#12 RedHead

RedHead

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

  • Модераторы
  • 1 052 сообщений

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

Просмотр сообщенияMamba (12 Апрель 2016 - 13:29) писал:

спасибо ,а как убрать задний черный фон?Прикрепленный файл авпыа.JPG

Здравствуйте. В редакторе шаблонов, в шаблоне main.css найдите строки:

/*Всплывающее окно*/
#parent_popup {
background-color: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 99999;
top:50%;
right: 0;
bottom: 0;
left: 0;
}

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

/*Всплывающее окно*/
#parent_popup {
display: none;
position: fixed;
z-index: 99999;
top:50%;
right: 0;
bottom: 0;
left: 0;
}





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

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