вы можете воспользоваться услугами веб-студии filandor и Заказать Сайт Визитку. Студия работает много лет и предоставляет комплексные услуги.

В этом руководстве я хотел бы воспроизвести функциональность краудфандинга с помощью плагинов Crocoblock, таких как JetEngine, JetFormBuilder, JetThemeCore, JetPopup, JetTabs и бесплатную версию Elementor.

Оглавление

Постановка цели

Основной задачей было создание сайта для сбора денег на различные благотворительные проекты с подробной информацией о проектах, статистикой и отчетами о собранных средствах.

Проверьте демо-сайт.

Теперь приступим к подробной инструкции.

Структура сайта

Для начала создадим структуру. Для краудфандинговой платформы нам потребуется:

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

Логика использования краудфандинга

Прежде чем копировать краудфандинговую платформу, нам нужно понять общую логику.

  1. На нашей домашней странице будет отображаться сетка со всеми проектами.
  2. Затем пользователи могут перейти на каждую страницу проекта и сделать пожертвование.
  3. Мы отобразим форму пожертвования во всплывающем окне на отдельной странице проекта.
  4. Затем пользователи вводят сумму, которую они хотят пожертвовать.
  5. После этого пользователи перенаправляются в PayPal для совершения платежа.
  6. новый Пожертвования Элемент CCT будет добавлен в базу данных в случае успешной оплаты.
  7. Таким образом, все данные о пожертвованиях будут использоваться для подсчета статистики и отображения людей, которые пожертвовали на конкретный проект.

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

Пользовательский тип публикации Проекты

Поскольку настраиваемый тип сообщений — самая известная функция JetEngine, я не буду останавливаться на этом надолго. За Проекты метаполя, я добавлю:

  • Итого — желаемая общая сумма по проекту, которую нам нужно собрать.
  • Краткое описание — краткий обзор проекта, отображаемый в сетке списка на главной странице.
  • Описание — полное описание проекта, отображаемое на каждой отдельной странице проекта.

Пользовательский тип контента Пожертвования

Основная цель этого CCT — хранить информацию обо всех пожертвованиях и собирать статистику проекта (сколько людей пожертвовали, собранные деньги, процент от необходимой суммы).

Поля, которые нам нужны в этом CCT, следующие:

  • Количество – сумма пожертвований;
поле пользовательского содержимого сумма
  • Проект – проект по сбору пожертвований;
поле пользовательского типа контента проекта
  • Показать на странице проекта – поле «Выбор», чтобы выбрать, показывать или нет пожертвование в списке статистики;
поле выбора cct
  • Имя – имя пользователя, которое будет отображаться в списке пожертвований.
имя пользовательского поля типа контента

Форма WordPress

Чтобы создать форму WordPress, мы будем использовать JetFormBuilder. Наша форма должна решать две задачи:

  • оплата пожертвования через PayPal;
  • сохранение информации о каждом пожертвовании в CCT.

Итак, нам понадобятся следующие поля формы:

  • project_id – Скрытое поле, в котором будет храниться ID проекта, на который было пожертвовано. Таким образом, форма будет использоваться на одной странице проекта. В качестве значения поля мы будем использовать «Идентификатор текущей записи».
скрытое поле формы
  • Количество – Текстовое поле для отображения суммы пожертвования.
  • Показывать свое имя в списке пожертвований? – Поле выбора, где пользователи могут выбрать, показывать или нет их имена.
показать поле выбора имени вашего пожертвования
  • Имя — Текстовое поле для указания имени пользователя.
поле формы имени пользователя

ПРИМЕЧАНИЕ:

Имя пользователя должно отображаться только в том случае, если пользователь выбрал отображение своего имени в списке пожертвований на предыдущем шаге. Для этого нам нужно обернуть Имя поле в условном блоке и настройте его, как показано ниже.

блок условного поля имени

После создания формы пожертвования нам нужно настроить шлюз PayPal.

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

Для этого добавьте действие после отправки Insert/Update > Custom Content Type Item. Затем нажмите кнопку «Редактировать и сопоставьте поля формы с полями CCT.

настраиваемые типы содержимого действия отправки формы

Важный:

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

успешное условие оплаты

Одна страница проекта

Следующим шагом будет сбор всей информации о проекте на одной странице. Для этого мы создадим один шаблон с помощью JetThemeCore и попробуем новый эксперимент Elementor — Флексбокс-контейнер.

  • Мы создадим блок с избранным изображением и статистикой проекта, используя контейнер flexbox.
флексбокс-контейнер

Я хочу, чтобы показанное изображение было контейнером Фон слева от сетки:

используется в качестве фонового изображения
  • Название проекта будет отображаться через виджет «Динамическое поле».
отображение заголовка через динамическое поле

Я не хочу визуально перегружать страницу формой пожертвования. Я помещу его во всплывающее окно с помощью JetPopup. Таким образом, после нажатия кнопки «Пожертвовать появится наше всплывающее окно с формой.

Мы добавим вкладки в нижней части основной информации о проекте с помощью плагина JetTabs: Описание, Список пожертвований и Статистика.

Статистика проекта

Самая интересная и сложная часть — это статистика проекта: сумма пожертвований, общая сумма, процент собранных пожертвований.

Во-первых, давайте разберемся, что мы называем статистикой:

  • Сумма пожертвований количество элементов CCT пожертвований, которые содержат точное идентификатор проекта в поле ID проекта.
  • Всего собранных средств представляют собой сумму всех полей «Сумма» всех элементов CCT «Пожертвования», которые содержат точный идентификатор проекта.
  • Процент собранных пожертвований это сумма всех средств, деленная на Общий значение метаполя для текущего проекта и умноженное на 100.

Все эти данные мы можем получить с помощью SQL-запросов. Мы будем использовать динамический тег Dynamic Functions, который позволяет отображать различные данные, рассчитанные динамически, в том числе данные из SQL-запросов.

Создать SQL-запрос

Далее мы создадим SQL-запрос с Query Builder, который будет брать информацию из базы данных:

  • Тип запроса: SQL, а не пользовательский тип контента (хотя мы получаем данные из CCT), потому что нам нужно еще больше обработать цифры.
тип запроса sql
  • Из таблицы: jet_cct_donations. В этой таблице хранится информация о пожертвованиях CCT (вы можете проверить название таблицы в настройках CCT).
выбрать данные из таблицы cct
  • Где (пункты запроса): нам нужно ограничить выбор только постами из нужного проекта. Чтобы получить идентификатор проекта, мы будем использовать Идентификатор объекта макросы.
предложения запроса
  • Тогда нам нужно Групповые результаты по идентификатору проекта, чтобы затем использовать параметр «Вычисляемые столбцы».
групповые результаты

Настройка параметра вычисляемых столбцов

После того, как мы все настроим, мы, наконец, можем использовать параметр «Вычисляемые столбцы». Он добавит в SQL-запрос столбцы, в которых хранятся необходимые результаты вычислений.

ПРИМЕЧАНИЕ:

Обычные столбцы в таблице результатов запроса содержат статические данные из базы данных.

Вычисляемые столбцы позволяет добавлять в результаты запроса новые столбцы, содержащие динамические данные. Такие динамические данные могут быть рассчитаны на основе данных из других столбцов результатов SQL-запроса. Лучше всего работает в сочетании с Группа по вариант. Подробнее здесь.

Например, мы группируем все элементы по Идентификатор проекта и отображать только элементы с определенным идентификатором проекта. Это означает, что мы можем подсчитать количество, сумму и максимальное/минимальное значение среди всех элементов CCT с одним и тем же идентификатором проекта.

Поэтому, чтобы получить все суммы пожертвований для каждого проекта, мы добавим новый Вычисляемый столбец на основе столбца _Я БЫ и используйте функцию СЧИТАТЬ чтобы узнать количество всех элементов CCT, которые соответствуют нашему запросу.

вычисляемый идентификатор столбца с функцией подсчета

Чтобы подсчитать сумму всех пожертвований, мы добавим Вычисляемый столбец на основе Количество столбец из таблицы и используйте функцию СУММА. Вот как мы узнаем сумму всех Количество полей во всех элементах CCT в рамках одного проекта.

рассчитанная сумма столбца с функцией суммы

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

определить пользовательский столбец с помощью функции

В нашем случае СУММ(%1$s) получает общее количество всех элементов CCT, соответствующих запросу.

Далее это значение следует разделить на значение Общий метаполе для текущего проекта. Тем не менее, мы будем использовать current_meta макрос для получения определенного значения: %current_meta|всего%.

Наконец, нам нужно отобразить всю информацию с помощью динамического тега:

сумма пожертвования с использованием динамического счетчика тегов _id
сумма проектов
отображать проценты через динамический тег

Таблица пожертвований

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

В этом случае Тип запроса было бы Пользовательский запрос типа контента пожертвования CCT. Не забудьте задать необходимые условия в Где (пункты запроса).

тип запроса настраиваемый тип контента

Нам нужно получить пожертвования от конкретного проекта со значением «Да» в Показать на странице проекта поле и отображать все вклады пользователей, которые решили показывать свои имена в списке пожертвований.

настроить параметры запроса типа контента

После создания запроса покажем все данные в таблице с помощью модуля Dynamic Table Builder.

модуль построителя динамических таблиц jetengine

Затем выберите ранее созданный «Список пожертвований». в Запрос данных поле.

запрос данных

Установите необходимые столбцы и добавьте таблицу на одну страницу.

столбцы таблицы

Наконец, мы можем добавить информацию о проекте в сетку списка на главной странице.

Подводя итог: тестирование

Не стесняйтесь протестировать платформу и проверить, как работает функционал.