Оплата любой суммы (настройка донатов)

Порой возникает необходимость предложить ученикам возможность оплаты любой суммы или попросту настроить донат — форму для приема взносов на Геткурс. Напрямую платформа не дает купить продукт за произвольную цену, но путем несложных настроек можно организовать этот функционал.

Настройка приема донатов на Геткурс

1. Создаем продукт с предложением стоимостью 1 рубль.

2. Добавим в настройках свое отображение в форме для предложения

3. Создаем форму/виджет оформления заказа, где в предложении выставляем следующие параметры:

4. У нас получается готовая форма, где клиент может вписать свою сумму.

По факту, вписывается не сумма, а количество. Но так как у нас стоимость предложения равна 1 рублю, то вписанное количество будет равно стоимости в рублях.

На этом можно и закончить, но мы с вами еще чуток «колданем» и уберем лишнее после поля ввода суммы. Заходим в настройки стиля блока с формой:

И добавляем css-код:

.form-position-price span {
	display: none;
}

.form-position-price:after {
  content:" руб.";
}

.offer-count-input {
	width: 90px; /* ширина поля ввода */
}

Вот такая теперь аккуратненькая форма у нас получилась:

Дополнение. Кнопки с предустановленными суммами.

Добавлю сюда еще одну вариацию в дополнение к обычной форме с донатами — возможность выбора суммы клиентом через клик по соответствующей кнопке. Выглядит это так:

Для начала необходимо создать дополнительное поле по заказам с типом «выбор». Здесь и будут предустановленные суммы.

Далее в нашей форме добавляем это поле и присваиваем ему класс «sum».

И остается вставить коды. Первый css — в настройки стилей блока, где уже ранее добавляли код для формы. Второй код — js — уже отдельным блоком ниже, под формой.

/* Стилизация доп поля с выбором суммы */

.sum .field-content .field-label,
.form-position-checker input {
   display: none;
}

.sum .field-input-block div {
  display: flex !important;
  justify-content: center !important;
 
}

.sum .field-input-block label {
    cursor: pointer;
	min-height: 20px;
	width: 100%;
    padding: 15px auto;
    margin-right: 0.5%;
    margin-left: 0.5%;
    margin-bottom: 15px;
    border: 2px #ebb7b7 solid; /* ширина и цвет границы кнопки с суммой */
    text-align: center;
    background-color: #fff; /* цвет кнопки с суммой */
    color: #000; /* цвет шрифта кнопки с суммой */
    transition: all 0.2s ease;
    border-radius: 20px;
}

.sum .field-input-block label input {
  display:none;
} 

.sum .field-input-block label.bordered {
   background-color: #ff6600;  /* цвет выбранной кнопки */
   color: #fff; /* цвет шрифта выбранной кнопки */
}

$(document).ready(function(){
 setTimeout(function() {
   $('.field-input-block label').click(function() {
      var text = parseInt($('.sum input[type="radio"]:checked').closest('label').text());
   $('.field-input-block label').removeClass('bordered');
   $(this).addClass('bordered');
   $(function(){
      $(".offer-count-input").val(text);
   });
});
}, 50);
});