Давным давно, в одной очень далёкой галактике, я захотел выпить чаю с печеньками. Люблю это дело)
Но в тот раз ничего не вышло, поскольку
- заварка кончилась,
- печеньки съедены еще на прошлой неделе, а новых не завезли,
- денег нет,
но вы держитесь там.
Не долго думая — соорудил форму для приема доната.
Соорудить соорудил, а с коллегами-блоггерами не поделился. Если честно, даже в голову не пришло, что кому-нибудь тоже может понадобиться.
Вот! Делюсь! Пользуйтесь)
Формируем задачу
- У нас есть сайт на WordPress.
- Есть желание легко и быстро добавлять форму сбора доната в любое удобное место поста.
- Форма должна вписываться в дизайн и иметь адаптивную вёрстку.
Достаточно? Тогда приступим!
Способ 1: Простой, но… неудобный
1. Заходим на сайт Яндекс.Денег и идем в раздел «Формы и кнопки для вашего сайта» https://money.yandex.ru/quickpay/
В момент, когда вы читаете этот пост, могла измениться ссылка и название, но не суть. Так что найти нужную страницу особого труда не составит. Я в это верю)
2. Выбираем «Кастом» для разработчиков. Листаем чуть ниже и видим код (картинки кликабельны).
3. Копируем этот код, вставляем в пост (в режиме «Текст»), меняем в нём всё что надо поменять (номер кошелька и т.д.).
4. ?????????
5. PROFIT!
Как видите, всё предельно просто и понятно: зашел, скопировал, вставил, поправил, готово. Но во-первых, выглядеть такая форма будет как после бомбёжки, а во-вторых, заниматься подобным копипастом каждый раз не удобно и не профессионально. Поэтому переходим к следующему способу.
Способ 2: Очень сложный, но безумно удобный
Как видно из кода предыдущего примера, мы имеем банальнейшую html-форму с кучей скрытых полей, где посетитель сайта может выбрать только способ оплаты и нажать кнопку. Всё.
Хорошая новость в том, что раз это обычный HTML, то мы вольны переделать всё так, как душа пожелает (сохранив при этом имена, но не значения полей).
Приступим!
Если есть сомнения в своих силах — обратитесь к специалисту. Имеются противопоказания.
1. Для начала создадим шоткод, например tea. Его мы будем вписывать в пост в квадратных скобках, вместо всей той кучи кода, которая нам предлалась в способе 1.
Согласитесь, вписать открывающую квадратную скобку, три буквы и закрывающую квадратную скобку в нужное место поста и получить там формочку, это удобно и не нужно запоминать ничего лишнего.
У себя я добавил шоткод через собственный плагин, но вам, для простоты, рекомендую вставить его в конец файла function.php темы оформления вашего сайта на WordPress.
Привожу готовый код для вставки в function.php
function code_tea($atts, $content=""){
return '<div class="tea2">
<div class="teaconteiner">
<div class="row">
<div class="text col-lg-4 col-md-4 col-sm-4 col-xs-12"><i class="fa fa-thumbs-up" aria-hidden="true"></i> Помогло? Зашли Админу на чай.</div>
<form method="POST" action="https://money.yandex.ru/quickpay/confirm.xml">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input type="hidden" name="receiver" value="41001478987584">
<input type="hidden" name="formcomment" value="Доктору Лексиуму на чай">
<input type="hidden" name="short-dest" value="Доктору Лексиуму на чай с печеньками">
<input type="hidden" name="label" value="1">
<input type="hidden" name="quickpay-form" value="donate">
<input type="hidden" name="targets" value="Админу на чай на чай с печеньками">
<input class="sum" type="text" name="sum" value="100" data-type="number">
<input type="hidden" name="comment" value=""> <i class="fa fa-rub" aria-hidden="true"></i>
<input type="hidden" name="need-fio" value="false">
<input type="hidden" name="need-email" value="false">
<input type="hidden" name="need-phone" value="false">
<input type="hidden" name="need-address" value="false">
<label><input type="radio" name="paymentType" value="PC">Яндекс.Деньгами</label>
<label><input type="radio" name="paymentType" value="AC">С карты</label>
<label><input type="radio" name="paymentType" value="MC">С мобильного</label>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
<input class="submit" type="submit" value="Заслать">
</div>
</form>
</div>
</div>
</div>
';
}
add_shortcode("tea", "code_tea");
Что там нужно поменять?
Во-первых, поле receiver. Сюда (в значение value) нужно вписать номер СВОЕГО яндекс-кошелька. Иначе деньги уйдут знатокам (т.е. мне).
Во-вторых, меняем value в полях formcomment, short-dest, targets по аналогии. Они нужны, чтобы понимать, откуда вообще пришли деньги.
В-третьих, поле sum. Здесь в value указываем желательную сумму доната. Поскольку это поле я сделал видимым, пользователь может вписать сумму сам. Хоть рубль, хоть миллион. Однако, Яндекс не примет платёж более 15000 руб.
Шоткод создан!
2. Настраиваем стили. Если не знаете как управляться с CSS — просто добавьте это в конец файла style.css в теме вашего сайта.
.tea2{
display:block;
margin:20px 0;
padding:0 20px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
vertical-align:middle;
font-size:14px;
background-color:#222;
color:#fff;
}
.tea2 input{color:#111;}
.tea2 .teaconteiner{}
.tea2 .teaconteiner .row div{padding-top:10px;padding-bottom:10px;}
.tea2 input.submit{
background-color:#ff7;
border:none;
font-size:18px;
padding:0 34px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.tea2 label{margin:0 5px;}
.tea2 label input{margin:0 3px 0 0;}
.tea2 input.sum{width:50px;text-align:center;margin:0 5px 0 0;}
.tea2 .text{font-size:18px;line-height:28px;}
.tea2 .text i{margin:0 10px 0 0;font-size:24px;}
3. Если к теме сайта не подключен bootstrap, то его нужно подключить. Делается это либо в файле темы header.php хардкодом, либо в том же function.php
Впрочем, можно и без бутстрапа. Просто будет больше возни со стилями.
У меня к сайту еще и FontAwesome подключен, чтобы использовать его удобные векторные значки. Один из них имеется в форме оплаты. Но это так, к слову.
Готово.
Вот что получилось у меня.
Данную форму можно использовать для даната, но она не годится для продаж, поскольку не выдаёт покупателю кассовый чек.
Напишите комментарий