15.12.2017, 17:38. Показов 2350. Ответов 0
Здравствуйте. Есть сайт на Modx revo, на нём есть раздел с каталогом товаров.
После нажатия на кнопку заказать, всплывает модальное окно с простейшей формой. Форма работает, письма приходят. Но! Письма приходят с ссылкой на страницу самого каталога, а мне требуется сделать так, чтобы на почту приходило письмо с меткой того товара, на который оформился заказ.
Я знаю что можно добавить в атрибут ссылки селектор для отслеживания и изменить js и css, но к сожалению не знаю как именно и что нужно сделать.
Вот сам код:
Страница каталога catalog.html
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
| <div class="container">
<div class="services-grids w3ls-4">
<div class="col-md-4 services-grid">
<a href="korpus-dlya-giroskutera-6.5.html" class="mask">
<img src="/assets/templates/images/products/01.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Корпус для гироскутера 6.5"</h4>
<p>2600 руб.
<br><br>
<a href="[[*uri]]#modal-1" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="col-md-4 services-grid">
<a href="korpus-dlya-giroskutera-8-transformer.html" class="mask">
<img src="/assets/templates/images/products/02.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Корпус для гироскутера 8" Transformer</h4>
<p>2600 руб.</p>
<a href="[[*uri]]#modal-2" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="col-md-4 services-grid">
<a href="korpus-dlya-giroskutera-10.html" class="mask">
<img src="/assets/templates/images/products/03.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Корпус для гироскутера 10"</h4>
<p>2600 руб.</p>
<a href="[[*uri]]#modal-3" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="services-grids w3ls-4">
<div class="col-md-4 services-grid">
<a href="svetodiodnyij-komplekt.html" class="mask">
<img src="/assets/templates/images/products/04.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Светодиодный комплект</h4>
<p>1100 руб.</p>
<a href="[[*uri]]#modal-4" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="col-md-4 services-grid">
<a href="czentralnaya-plata-upravleniya.html" class="mask">
<img src="/assets/templates/images/products/05.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Центральная плата управления</h4>
<p>3100 руб.</p>
<a href="[[*uri]]#modal-5" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="col-md-4 services-grid">
<a href="knopka-vklyucheniya-i-gnezdo-zaryadnogo-ustrojstva-(komplekt).html" class="mask">
<img src="/assets/templates/images/products/06.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Кнопка включения и гнездо зарядного устройства (комплект) </h4>
<p>1100 руб.</p>
<a href="[[*uri]]#modal-6" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="services-grids w3ls-4">
<div class="col-md-4 services-grid">
<a href="akkumulyator-samsung-36-v-4400-mach.html" class="mask">
<img src="/assets/templates/images/products/07.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Аккумулятор Samsung 36 В 4400 мАч</h4>
<p>4100 руб.</p>
<a href="[[*uri]]#modal-7" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="col-md-4 services-grid">
<a href="zaryadnoe-ustrojstvo.html" class="mask">
<img src="/assets/templates/images/products/08.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Зарядное устройство</h4>
<p>1100 руб.</p>
<a href="[[*uri]]#modal-8" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="col-md-4 services-grid">
<a href="bokovaya-plata.html" class="mask">
<img src="/assets/templates/images/products/09.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Боковая плата </h4>
<p>1100 руб.</p>
<a href="[[*uri]]#modal-9" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="services-grids w3ls-4">
<div class="col-md-4 services-grid">
<a href="muzyikalnyij-bluetooth-modul-dlya-mini-sigveya.html" class="mask">
<img src="/assets/templates/images/products/010.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Музыкальный Bluetooth модуль для мини-сигвея</h4>
<p>1100 руб.</p>
<a href="[[*uri]]#modal-10" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="col-md-4 services-grid">
<a href="karkas-siluminovyij-dlya-giroskuterov-kupit-v-moskve.html" class="mask">
<img src="/assets/templates/images/products/011.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Каркас силуминовый для гироскутеров купить в Москве</h4>
<p>3100 руб.</p>
<a href="[[*uri]]#modal-11" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="col-md-4 services-grid">
<a href="shina-dlya-giroskutera-diametr-10-dyujmov.html" class="mask">
<img src="/assets/templates/images/products/012.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Шина для гироскутера Диаметр: 10 дюймов </h4>
<p>1100 руб.</p>
<a href="[[*uri]]#modal-12" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="clearfix"></div>
</div>
<div class="services-grids w3ls-4">
<div class="col-md-4 services-grid">
<a href="kamera-dlya-giroskutera-10.html" class="mask">
<img src="/assets/templates/images/products/013.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Камера для гироскутера 10"</h4>
<p>1100 руб.</p>
<a href="[[*uri]]#modal-13" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="col-md-4 services-grid">
<a href="klapana-rezinovaya-platforma.html" class="mask">
<img src="/assets/templates/images/products/014.jpg" class="img-responsive zoom-img" alt="">
</a>
<h4>Клапана / резиновая платформа</h4>
<p>600 руб.</p>
<a href="[[*uri]]#modal-14" class="modalzakaz"><span class="label label-success">Купить</span></a></p>
</div>
<div class="clearfix"></div>
</div>
</div> |
|
AjaxForm
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <div id="modal_form">
<h3>Оформить заказ!</h3>
<div class="comment"> </div>
<a class="exit"></a>
[[!AjaxForm?
&form=`cupit.AjaxForm`
&snippet=`FormIt`
&hooks=`FormItSaveForm,email`
&emailSubject=`Заказ с сайта`
&emailTo=`мояпочта@inbox.ru`
&emailFrom=`no-reply@mysite.com`
&emailTpl=`tpl.cupit`
&validate=`name:minLength=^2^,phone:required`
&validationErrorMessage=`В форме содержатся ошибки!`
&successMessage=`Сообщение успешно отправлено`
]]
</div>
<div id="overlay"></div> |
|
Чанк формы cupit.AjaxForm
| HTML5 |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <form action="" method="post" class="ajax_form af_example" id="modal-1">
<div class="form-group">
<label class="control-label" for="af_name">[[%af_label_name]]</label>
<div class="controls">
<input type="text" id="af_name" name="name" value="[[+fi.name]]" placeholder="Укажите ваше имя" class="form-control"/>
<span class="error_name">[[+fi.error.name]]</span>
</div>
</div>
<div class="form-group">
<label class="control-label" for="af_name">Телефон</label>
<div class="controls">
<input type="text" id="af_phone" name="phone" value="[[+fi.phone]]" placeholder="Укажите номер телефона" class="form-control"/>
<span class="error_phone">[[+fi.error.phone]]</span>
</div>
</div>
<input type="hidden" name="title" value="[[*pagetitle]]"/>
<input type="hidden" name="link" value="[[*uri]]"/>
<div class="form-group">
<div class="controls">
<button type="submit" class="btn btn-homeform">Заказать</button>
</div>
</div>
[[+fi.success:is=`1`:then=`
<div class="alert alert-success">[[+fi.successMessage]]</div>
`]]
[[+fi.validation_error:is=`1`:then=`
<div class="alert alert-danger">[[+fi.validation_error_message]]</div>
`]]
</form> |
|
Чанк tpl.cupit шаблон письма
| HTML5 |
1
2
3
4
| <h3>Заказ с сайта</h3>
<p>От кого: [[+name]]</p>
<p>Телефон: [[+phone]]</p>
<p>Заявка со страницы <a href="http://мойсайт.ru/[[+link]]">[[+title]]</a></p> |
|
modal.js
| JavaScript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| $(function() { // вся мaгия пoсле зaгрузки стрaницы
$('.modalzakaz').click( function(event){ // лoвим клик пo ссылки с class="modalzakaz"
event.preventDefault(); // выключaем стaндaртную рoль элементa
$('#overlay').fadeIn(400, // снaчaлa плaвнo пoкaзывaем темную пoдлoжку
function(){ // пoсле выпoлнения предъидущей aнимaции
$('#modal_form')
.css('display', 'block') // убирaем у мoдaльнoгo oкнa display: none;
.animate({opacity: 1, top: '50%'}, 200); // плaвнo прибaвляем прoзрaчнoсть oднoвременнo сo съезжaнием вниз
});
});
/* Зaкрытие мoдaльнoгo oкнa, тут делaем тo же сaмoе нo в oбрaтнoм пoрядке */
$('.exit, #overlay').click( function(){ // лoвим клик пo крестику или пoдлoжке
$('#modal_form')
.animate({opacity: 0, top: '45%'}, 200, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
function(){ // пoсле aнимaции
$(this).css('display', 'none'); // делaем ему display: none;
$('#overlay').fadeOut(400); // скрывaем пoдлoжку
}
);
});
$(document).on('af_complete', function(event, response) {
if (response.success) { //Если форма заполнена и нет ошибок
$('#modal_form')
.animate({opacity: 0, top: '45%'}, 500, // плaвнo меняем прoзрaчнoсть нa 0 и oднoвременнo двигaем oкнo вверх
function(){ // пoсле aнимaции
$(this).css('display', 'none'); // делaем ему display: none;
$('#overlay').fadeOut(400); // скрывaем пoдлoжку
});
}
});
}); |
|
modal.css
| CSS |
1
2
3
4
5
6
7
8
9
10
11
12
13
| /*Модальное окно*/
#modal_form{width:450px;padding:19px 20px;border:5px solid #868c89;background-color:#FFF;height:330px;background:#fff;position:fixed;top:45%;left:50%;margin-top:-165px;margin-left:-225px;display:none;opacity:0;z-index:5;}
#overlay{z-index:3;position:fixed;background-color:#000;opacity:0.8;-moz-opacity:0.8;filter:alpha(opacity=80);width:100%;height:100%;top:0;left:0;cursor:pointer;display:none;}
#modal_form input[type="text"]{background-color:#fff;border:1px solid #DFDFDF;border-radius:6px;color:#555;display:block;font-size:1em;height:35px;padding:5px;margin-bottom:17px;width:95%;float:left;}
#modal_form input[type="text"].error{border:1px solid red;}
#modal_form h3{text-align:center;font-size:2em;text-transform:uppercase;color:#000; margin: 0;}
#modal_form .comment{color:#272727;padding-bottom:15px;font-size:14px;text-align:center;padding-top:10px;}
.exit{background:#d0d0d0;display:block !important;border-radius:50%;right:-30px;top:-20px;position:absolute;opacity:1;WIDTH:33PX;HEIGHT:33px;line-height:30px;font-size:36px;border:2px solid #3e5368;-webkit-transition:background 0.2s linear;-moz-transition:background 0.2s linear;-o-transition:background 0.2s linear;transition:background 0.2s linear;}
.exit:after{display:block;font-size:23px;content:"x";padding-left:9px;line-height:24px;cursor:pointer;text-decoration:none;font-weight:bold;color:#000000;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;transition:all 0.2s linear;}
.exit:hover{background:#EAEAEA;text-decoration:none;}
#modal_form .button{display:block;background-color:#ffd400;border:1px solid #ccc;border-radius:3px;color:#000;cursor:pointer;font-size:17px;font-weight:bold;height:40px;margin:10px 0;padding:2px 16px;width:210px;margin:0 auto;-webkit-transition:all 0.12s ease-in;-o-transition:all 0.12s ease-in;-moz-transition:all 0.12s ease-in;transition:all 0.12s ease-in;}
#modal_form .button:hover{background-color:#44C8F5;border:1px solid #44C8F5;color:#fff;}
#modal_form .error{border:1px solid red;} |
|
(
