Система пожертвований для сайта на Тильде

На главной странице проекта, находим вкладку «Товары»

Далее справа нажимаем на кнопку «Добавить»

Указываем название цели (товара), которое будет видеть посетитель сайта, и нажимаем на кнопку «Добавить»

Открываем созданный товар, устанавливаем базовую цену пожертвования

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

После этого у товара появится изображение

Далее, в «Разделы каталога» укажите раздел которому принадлежит товар, этот раздел «Цели»

Далее скопируйте в самом низу «Внешний код товара», «Product ID»

Теперь вверху нажмите на кнопку «Сохранить и закрыть»

Теперь переходим в административную панель, управления целями

Чтобы создать цель «Сбор на реставрацию Паникадила» нужно в форме «Создание целей» заполнить нужные поля (смотрите изображение ниже):

1 — Здесь указываем понятное для нас название, оно во внешней части нигде не отображается

2 — При необходимости указываем описание

3 — Здесь пишем нужную сумму для сбора, своего рода цель которую надо достичь, в денежном эквиваленте

4 — Здесь указываем скопированный ранее «Внешний код товара» из карточки товара в Тильде

5 — Если у цели сбора нет финальной суммы, то нужно поставить галочку «Бесконечная цель»

6 — После того как заполнены нужные поля, нажмите на кнопку «Создать / Обновить цель»

После создания, цель появится в списке

И теперь, при необходимости вы можете её изменить, кнопка «Изменить» цифра 2 на картинке, удалить — цифра 3, просмотреть список пожертвований только по данной цели, кнопка «Подробнее» — цифра 1

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

1 — Здесь указываем понятное для нас название, оно во внешней части нигде не отображается

2 — Здесь указываем скопированный ранее «Внешний код товара» из карточки товара в Тильде

3 — Так как это цель без достижения итоговой суммы, то нужно поставить галочку «Бесконечная цель»

4 — После того как заполнены нужные поля, нажмите на кнопку «Создать / Обновить цель»

После создания, цель появится в списке

Вы увидите, что в в качестве суммы цели, стоит символ бесконечности

При необходимости вы можете её изменить, кнопка «Изменить», удалить — крестик, просмотреть список пожертвований только по данной цели, кнопка «Подробнее»

В проекте созданы готовые шаблоны страниц. Перейдите в папку «Шаблоны»

Далее наведите курсор мыши на «Шаблоны блоков для страницы ЦЕЛИ» и справа нажмите на кнопку «Настройки»

Далее перейдите во вкладку «Действия» и нажмите на «Дублировать страницу»

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

Для начала пролистайте вниз, до вот этого блока

Здесь своего рода параметры, по которому код будет понимать, что это перед ним конкретная цель.

Наведите на блок курсором, и нажмите на появившуюся кнопку «Контент»

Нужно скорректировать переменные productID и idcelSbor

productID — сюда вписывается ранее скопированный id товара (см скрин ниже)

idcelSbor — сюда вписывается ранее скопированный внешний код товара (см скрин ниже)

После того как внесли правки, нажмите на «Сохранить и закрыть»

Идем дальше, опускаемся на странице до истории пожертвований и находим вот такой блок

Наводим на него курсор и нажимаем на кнопку «Контент». Далее надо скорректировать при желании 3 параметра:

C текущими настройками по умолчанию (SHOW_PHONE = false, SHOW_AMOUNT = true, SHOW_EMAIl=false), таблица выглядит вот так:

Если вам нужно показать столбце с номер телефона, то просто в переменно SHOW_PHONE поставьте значение true, тогда таблица будет выглядеть вот так:

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

Следующим шагом пролистываем вверх до вот этого блока

Здесь ничего корректировать не надо, этот блок отвечает за индикатор достижения цели на странице. Работает автоматически

Следующим шагом, покажу как создавать ссылки для кнопок на пожертвование. В шаблоне создал пару кнопок, которые можете удалить, главное понять принцип работы кнопки. Вот примеры кнопок:

Кнопка в стандартном блоке

Кнопка внутри зероблок

Кнопка отдельным стандартным блоком

Неважно какая у вас будет кнопка, главное это формат ссылки. Каждой кнопке присвоил ссылку вида #id:972861935352

Здесь пишется сначала #id затем ставится : затем идет product id товара в тильде, который копировали при создании цели.

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

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

Еще один нюанс, к примеру наша страница будет иметь ссылку вида https://t-v-sobor.ru/restavration-panikadila тогда если вы разместите на внешних ресурсах (телеграм, вк, другие сайты и так далее) ссылку вида https://t-v-sobor.ru/restavration-panikadila#id:972861935352 то при переходе по этой ссылке, в корзину автоматически добавится данная цель

Но после добавления в корзину в ссылке удалится данная приписка #id:972861935352 это сделано для того, чтобы не было проблем с повторным добавлением, если пользователь обновит страницу, когда в корзине уже есть данный товар \ цель

По остальным блокам на странице можно удалять и менять так как нужно, основные что нужны и как их корректировать и надо ли вообще корректировать, указал выше.

После того как создадите страницу как нужно, необходимо нажать на кнопку «Настройки»

Нужно на вкладке «Главное» указать 1 — название страницы, 2 — описание, 3 — задать url адрес

Далее перейти во вкладку «SEO»

И на это вкладке убедиться, что сняты галочки 1 и 2. Если они сняты то нажать на кнопку «Сохранить изменения»

Затем нажать на кнопку «Опубликовать»

После чего вы получите публичную ссылку на данную страницу цели

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

Далее перейдите во вкладку «Дополнительно»

Далее пролистайте вниз, до раздела «Папка» и нажмите на стрелочку

И укажите параметр «Не задана»

Далее пролистайте вниз и нажмите на кнопку «Сохранить изменения»

На этом процедура создания страницу для цели пожертвования окончена.

Перейдите в папку «Шаблоны»

Далее перейдите сразу в саму страницу «Шаблон списки пожертвований (Слайдер)

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

1 вариант на базе самой Тильды, он начинается с этого блока

и заканчивается блоком с этим кодом

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

Принцип создания новых слайдов внутри первого слайдера такой:

Заходим внутрь самого слайдера, для этого нажмите на кнопку «Редактировать блок»

Вы увидите стандартный интерфейс для редактирования внутри зероблок

Чтобы добавить новый слайд, нажмите на стрелочку — 1, далее правой кнопкой на группе «карточка» — 2, далее на кнопку «Duplicate» — 3

У вас появится в списке новый элемент, он автоматически добавится в конец слайдера и автоматически получит отступы от предыдущего слайда

Далее меняем картинку, текст названия, текст описания и самое важное, нажимаем на html блок, далее как появится кнопка «Edit code» — цифра 2, нажимаем на неё

Далее, в качестве переменной data-product-tilda-id, в кавычках указываем ранее скопированный внешний код нашего товара, цели

Напомню, внешний код товара смотреть в карточке товара каталога тильды, скрин параметра здесь

Сохраняете изменения. Если в самом зероблоке все остальные исправлены, то тогда сохраняете общие изменения.

2 вариант на базе внешней библиотеке SWIPER.JS он начинается с этого блока

И заканчивается на последнем слайде

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

Копируем себе на нужную страницу основной блок с кодом и к примеру один первый слайд. Чтобы добавить новый слайд, достаточно дублировать самый последний слайд. Чтобы это сделать, наведите курсор на зероблок, нажмите на кнопку «Дублировать»

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

Далее вставляем внешний код товара \ цели в переменную data-product-tilda-id

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

После того как вы выбрали себе тип слайдера и скопировали себе на страницу, то нужно в шаблоне прокрутить ниже до блока кода с индикатором

Скопируйте себе на нужную страницу данный блок, он необходим для отрисовки индикаторов внутри карточек слайдера. Тип слайдера неважен.

После этого на вашей странице, индикаторы и слайдер начнут работать.

На этом, создание списка для отображения целей пожертвований, можно считать завершенным.

Находясь на странице управления, нажмите на кнопку «Изменить»

После чего форма заполнится данными для правки цели

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

После чего, увидите что цель в списке изменилась

Похожим методом можно менять обратно, с цели — конкретная сумма достижения, на бесконечную.

Чтобы посмотреть все пожертвования по конкретной цели, нажмите на кнопку «Подробнее» для нужной цели

У вас появится список всех пожертвований только для данной цели

Если в управлении в самом низу нажать на кнопку «История всех пожертвований» то у вас появится список всех пожертвований без привязки к конкретной цели

Пример ниже:

Также вы можете экспортировать данный список в Excel через CSV файл, для этого нажмите на кнопку «Экспортировать в CSV»

Далее открыть сам Excel, и перейти на вкладку «Данные», далее выбрать «Из текстового/CSV-файла»

Выбрать на компьютере скаченный CSV-файл. Далее Выбрать формат кодирования 65001:Юникод (UTF-8) и нажать на кнопку «Загрузить»

После чего у вас появится вот такая табличка, с которой можно работать

Часто встречается ситуация, когда нужно внести пожертвования в систему от тех людей, которые внесли её не через сайт или другим образом.

Для этого копируем внешний код (ID) цели пожертвования, затем нажимаем на кнопку «Ручное пожертвование»

Далее если известны все данные заполняем поля с 1 по 5 и нажимаем кнопку «Отправить»

Если данные не известны, то заполняем только поля с 1 по 3 и нажимаем на кнопку «Отправить»

После чего цель обновится, с учетом добавленной суммы вручную.

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

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

Находясь на главной сайта внутри Тильды, нажмите на «Товары»

Далее среди товаров \ целей, переключите индикатор напротив цели, чтобы он стал серым. Это значит что данный товар \ цель больше нельзя оформить через корзину

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

История всех пожертвований сохраняется в том случае, если данная цель существует в списке целей на странице управления