Инструкция по созданию партнерского сайта
Шаг 1.
Подготовка
Подготовка
Перед началом работ надо подготовить:
- Доступ к сайту-донору в Тильде/ Нам будут нужны страницы: Главная, страница ошибки 404 ("страница не найдена) и страница пользовательского соглашения.
- Доступ к аккаунту в Тильде, где будет расположен новый сайт
- Лого партнера (изображение), его контактная информация
- Код партнера ECOPOINT для настройки блоков на новом сайте
Шаг 2.
Создаем новый сайт партнера
Создаем новый сайт партнера
Два варианта:
Акцентирую внимание в месте, где действия отличаются
- Сайт создается на том же аккаунте, где находится сайт-донор
- Сайт создается на другом аккаунте
Акцентирую внимание в месте, где действия отличаются
Рассматриваю на примере ситуации, когда сайт партнера создается на том же аккаунте, что и сайт-донор.
2.1. В меню "Мои сайты" выбрать "Создать новый сайт" и задать имя этого сайта. Это имя - только для внутреннего использования - оно будет показано в списке сайтов. Потом можно поменять.
2.1. В меню "Мои сайты" выбрать "Создать новый сайт" и задать имя этого сайта. Это имя - только для внутреннего использования - оно будет показано в списке сайтов. Потом можно поменять.
2.2. Новый сайт создан, нужно задать ему техническое доменное имя (субдомен на домене tilda.ws). Можно этот пункт опустить, тогда Тильда автоматом назначит нечитаемый адрес типа project494085234552.tilda.ws, но с этим тоже можно жить.
2.3. Пишем какой-то человечески понятний адрес.
2.4. Задать полноценный домен нужно будет позже, после создания сайта.
2.4. Задать полноценный домен нужно будет позже, после создания сайта.
2.5. Шрифт сайта. Заходим в пункт "Шрифты и цвета", выбираем шрифт Montserrat, жмем "Выбрать"
2.5. Сохраняем, закрываем.
2.5. Сохраняем, закрываем.
Шаг 3.
Копируем страницу-донор
Копируем страницу-донор
3.1. Открываем в Тильде сайт-донор, находим там страницу-донор, в нашем случае - главную страницу Эконижний.рф
3.2. Либо открываем страницу и выбираем в ней "Настройки", либо в списке страниц при указании на страницу мышкой выбираем в всплывающем меню пункт "Настройки". Эти действия ведут к одному результату - открываются настройки страницы-донора
3.2. Либо открываем страницу и выбираем в ней "Настройки", либо в списке страниц при указании на страницу мышкой выбираем в всплывающем меню пункт "Настройки". Эти действия ведут к одному результату - открываются настройки страницы-донора
3.3. Выбираем в меню пункт "Действия" (Настройки/Действия)
3.4. Далее "Дублировать страницу"" (Настройки/Действия/Дублировать страницу)
3.5. Страница скопирована. Удобнее сразу перейти к новой скопированной странице.
3.6. Если выбрать "Закрыть", то просто будет возврат к списку страниц сайта, где новая страница будет с префиксом "Copy:"
3.6. Если выбрать "Закрыть", то просто будет возврат к списку страниц сайта, где новая страница будет с префиксом "Copy:"
Шаг 4.
Переносим скопированную страницу на сайт партнера
Переносим скопированную страницу на сайт партнера
Два варианта:
- Перенос на свой сайт (на том же аккаунте, где находится сайт-донор)
- Перенос на другой аккаунт
4.1. В открытой скопированной странице выбираем Настройки/Действия.
4.2. В случае переноса на свой сайт - выбираем пункт "Перенести страницу на другой свой сайт" (красная стрелка)
4.3. В случае переноса на другой аккаунт - выбираем пункт "Передать страницу на другой аккаунт" (синяя стрелка) - тут нужно будет указать email, на которой зарегистрирован аккаунт-приемник.
4.2. В случае переноса на свой сайт - выбираем пункт "Перенести страницу на другой свой сайт" (красная стрелка)
4.3. В случае переноса на другой аккаунт - выбираем пункт "Передать страницу на другой аккаунт" (синяя стрелка) - тут нужно будет указать email, на которой зарегистрирован аккаунт-приемник.
4.4. Мы передаем на другой свой сайт - для этого из списка сайтов выбираем нужный - созданный в п.2. и жмем кнопку "Передать".
4.5. После этого нас перекидывает на сайт-приемник, в список страниц. там только одна наша страница.
4.5. После этого нас перекидывает на сайт-приемник, в список страниц. там только одна наша страница.
Шаг 5.
Исправляем настройки скопированной страницы
Исправляем настройки скопированной страницы
При копировании и переносе кое-что испортилось в настройках, сейчас поправим
5.1. Идем в Настройки новой страницы
5.2. Правим там Заголовок, как минимум убираем "Copy"
5.3. Правим адрес страницы. Можно поставить "main", если это будет главная страница сайта. Но в целом вообще не принципиально.
5.2. Правим там Заголовок, как минимум убираем "Copy"
5.3. Правим адрес страницы. Можно поставить "main", если это будет главная страница сайта. Но в целом вообще не принципиально.
Шаг 6.
Заменяем лого
Заменяем лого
Заменяем лого ЭКО Нижний на лого партнера.
Лого у нас присутствует в 3-х местах:
Лого у нас присутствует в 3-х местах:
- Главное меню для десктопов
- Главное меню для мобильных устройств
- Раскрывающееся главное меню для мобильных
5.1. Находим блок, в котором есть лого на замену.
5.2. Если это Zero-блок, то жмем Редактировать, если это стандартный блок, то жмем "Контент".
5.2. Если это Zero-блок, то жмем Редактировать, если это стандартный блок, то жмем "Контент".
5.3. На примере зеро-блока с главным меню для десктопа: заменяем лого на лого партенера.
Шаг 7.
Заменяем контактную информацию
Заменяем контактную информацию
Заменяем контакты на контакты партнера.
Телефон, адрес, ссылки на соцсети присутствуют в блоках:
Заменяем текст и ссылки в соответствующих блоках.
Обращаю внимание, что номера телефонов являются ссылками вида "tel:79087299110"
Телефон, адрес, ссылки на соцсети присутствуют в блоках:
- Главное меню для десктопов
- Главное меню для мобильных устройств
- Раскрывающееся главное меню для мобильных
- Лид-форма в конце страницы
Заменяем текст и ссылки в соответствующих блоках.
Обращаю внимание, что номера телефонов являются ссылками вида "tel:79087299110"
Шаг 8.
Меняем обложку и цветовую гамму блоков
Меняем обложку и цветовую гамму блоков
Меняем на странице все, что нам нужно.
Как редактировать страницу и вообще любая справочная информация в прекрасно структурированном справочном центре Тильды:
https://help-ru.tilda.cc/
Конкретно по редактированию страниц:
https://help-ru.tilda.cc/page
Как редактировать страницу и вообще любая справочная информация в прекрасно структурированном справочном центре Тильды:
https://help-ru.tilda.cc/
Конкретно по редактированию страниц:
https://help-ru.tilda.cc/page
8.1. На примере зеро-блока с главным меню для десктопа: заменяем цвет фона.
8.2. Важный момент: чтобы изменить цвет пиктограмм ВК и Телеграмм, нужно будет сделать перекрасить соответствующие картинки
8.2. Важный момент: чтобы изменить цвет пиктограмм ВК и Телеграмм, нужно будет сделать перекрасить соответствующие картинки
8.1. На примере зеро-блока "обложки". Меняем фоновое изображение.
и т.д. меняем изображения и цвета элементов, которые нужно поменять.
и т.д. меняем изображения и цвета элементов, которые нужно поменять.
Шаг 9.
Исправляем код слайдеров скопированной страницы
Исправляем код слайдеров скопированной страницы
При копировании и переносе кое-что испортилось в коде слайдеров.
Можно поправить.
ДЛЯ ОБСУЖДЕНИЯ: Есть предложение заменить слайдеры статическим блоком
Можно поправить.
ДЛЯ ОБСУЖДЕНИЯ: Есть предложение заменить слайдеры статическим блоком
9.1. Слайдер "Что можно сделать"
Слайдер обеспечивается кодом, в котором прописаны номера блоков. При копировании страницы номера блоков изменились, а код - нет.
Нужно править номера.
Слайдер состоит из 2-х Зеро-блоков
№1 - со стрелками
№2 - собственно контент, который мы двигаем
Нужно узнать эти номера.
Слайдер обеспечивается кодом, в котором прописаны номера блоков. При копировании страницы номера блоков изменились, а код - нет.
Нужно править номера.
Слайдер состоит из 2-х Зеро-блоков
№1 - со стрелками
№2 - собственно контент, который мы двигаем
Нужно узнать эти номера.
9.2. Заходим в Настройки блока и в самом низу видим номер блока. Копируем его.
9.3. Делаем это и для блока со стрелками и для блока с контентом.
9.4. Ниже в фиолетовом блоке приведен код, нужно скопировать его в простой текстовый редактор, НЕ WORD!
И заменить в нем КОНТЕНТ на номер блока с контентом, а СТРЕЛКИ - на номер блока со стрелками.
Пример:
В коде на странице строка
var ticodescroll176 = $('#КОНТЕНТ');
А должна получится строка
var ticodescroll176 = $('#rec636923176');
Назовем отредактированный код Наш Новый Код.
Для проверки: в коде должно быть три номера блока стрелок и три номера блока контента.
9.3. Делаем это и для блока со стрелками и для блока с контентом.
9.4. Ниже в фиолетовом блоке приведен код, нужно скопировать его в простой текстовый редактор, НЕ WORD!
И заменить в нем КОНТЕНТ на номер блока с контентом, а СТРЕЛКИ - на номер блока со стрелками.
Пример:
В коде на странице строка
var ticodescroll176 = $('#КОНТЕНТ');
А должна получится строка
var ticodescroll176 = $('#rec636923176');
Назовем отредактированный код Наш Новый Код.
Для проверки: в коде должно быть три номера блока стрелок и три номера блока контента.
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<script src='https://cdn.jsdelivr.net/npm/dragscroll@0.0.8/dragscroll.min.js'></script>
<script> var ticodescroll176 = $('#КОНТЕНТ'); ticodescroll176.find('.t396__artboard').addClass('dragscroll'); var ticodearrow176 = $('#СТРЕЛКИ'); ticodearrow176.find('.ti-arrow-left').on('click', function() { $(this).closest('#СТРЕЛКИ').siblings('#КОНТЕНТ').find('.t396__artboard').animate({ scrollLeft: ticodescroll176.find('.t396__artboard').scrollLeft() - 200 }, 500); }); ticodearrow176.find('.ti-arrow-right').on('click', function() { $(this).closest('#СТРЕЛКИ').siblings('#КОНТЕНТ').find('.t396__artboard').animate({ scrollLeft: ticodescroll176.find('.t396__artboard').scrollLeft() + 200 }, 500); }); </script>
<style> .ti-arrow-right, .ti-arrow-left { cursor: pointer; } .dragscroll::-webkit-scrollbar { display: none; } @media (min-width: 320px) { .dragscroll { cursor: -webkit-grab; cursor: grab; transition: all 0.7s ease; } .dragscroll:active { cursor: -webkit-grabbing; cursor: grabbing; } } </style>
<script src='https://cdn.jsdelivr.net/npm/dragscroll@0.0.8/dragscroll.min.js'></script>
<script> var ticodescroll176 = $('#КОНТЕНТ'); ticodescroll176.find('.t396__artboard').addClass('dragscroll'); var ticodearrow176 = $('#СТРЕЛКИ'); ticodearrow176.find('.ti-arrow-left').on('click', function() { $(this).closest('#СТРЕЛКИ').siblings('#КОНТЕНТ').find('.t396__artboard').animate({ scrollLeft: ticodescroll176.find('.t396__artboard').scrollLeft() - 200 }, 500); }); ticodearrow176.find('.ti-arrow-right').on('click', function() { $(this).closest('#СТРЕЛКИ').siblings('#КОНТЕНТ').find('.t396__artboard').animate({ scrollLeft: ticodescroll176.find('.t396__artboard').scrollLeft() + 200 }, 500); }); </script>
<style> .ti-arrow-right, .ti-arrow-left { cursor: pointer; } .dragscroll::-webkit-scrollbar { display: none; } @media (min-width: 320px) { .dragscroll { cursor: -webkit-grab; cursor: grab; transition: all 0.7s ease; } .dragscroll:active { cursor: -webkit-grabbing; cursor: grabbing; } } </style>
9.5. Находим ниже слайдера блок "HTML-код".
9.6. Открываем его для редактирования, удаляем весь код оттуда и вставляем Наш Новый Код
9.7. Повторяем шаги 9.1.-9.6 для слайдера "Что нельзя сдавать"
9.6. Открываем его для редактирования, удаляем весь код оттуда и вставляем Наш Новый Код
9.7. Повторяем шаги 9.1.-9.6 для слайдера "Что нельзя сдавать"
Шаг 10.
Подключение домена
Подключение домена
10.1. Подключаем домен
Важно!
Без выполнения следующего пункта не будут работать партнерские блоки.
10.2. Сообщить партнерский домен сотруднику, отвечающему за серверную часть аппаратов (Эльдар?).
Это нужно для того, чтобы разрешить передачу данных от сервера Экопоинт на сайт.
Важно!
Без выполнения следующего пункта не будут работать партнерские блоки.
10.2. Сообщить партнерский домен сотруднику, отвечающему за серверную часть аппаратов (Эльдар?).
Это нужно для того, чтобы разрешить передачу данных от сервера Экопоинт на сайт.
Шаг 11.
Настраиваем партнерские блоки
Настраиваем партнерские блоки
Настраиваем три "партнерских" блока, которые выводят информацию об аппаратах Экопоинт:
- Блок информации о количестве сданных ресурсов
- Карта аппаратов
- Форма "Узнать баланс"
Работа блоков с динамически выводимой информацией обеспечивается двумя элементами:
1) ZERO-блоком, в котором расположены графические элементы
2) Блок (или несколько блоков T123 "HTML-код"
Если необходимо править визуальную часть, то нужно править ЗЕРО-блок
Если нужно править код партнера или указывать номера блоков/форм - то нужно править HTML-код.
1) ZERO-блоком, в котором расположены графические элементы
2) Блок (или несколько блоков T123 "HTML-код"
Если необходимо править визуальную часть, то нужно править ЗЕРО-блок
Если нужно править код партнера или указывать номера блоков/форм - то нужно править HTML-код.
Шаг 11.1
Блок информации о количестве сданных ресурсов
Блок информации о количестве сданных ресурсов
В данном блоке выводится информация о количестве собранного вторсырья. Цифры меняются при загрузке (перезагрузке) страницы.
Блок с HTML-кодом находится выше Зеро-блока.
Изменить в коде значение параметра PARTNER_ID на свой.
Шаг 11.2
Карта аппаратов
Карта аппаратов
На карте можно найти ближайший ЭкоПункт, уточнить статус его работы, а также узнать, что принимает выбранный аппарат и по каким тарифам.
В данном случае ZERO-блока нет, весь визуал и функционал осуществляется с помощью 4-х блоков с HTML-кодом.
Изменить в коде № 3 значение параметра PARTNER_ID на свой.
Шаг 11.3
Форма "Узнать баланс"
Форма "Узнать баланс"
В данном блоке можно узнать свой баланс (сумма оплаты за сданное вторсырье), введя в форму номер телефона или перейдя в телеграм-бот.
Zero-блок и 2 блока html под ним.
Изменить в коде № 1 значение параметра PARTNER_ID на свой
Дальше может показаться, что немного сложный шаг, но это только кажется. Нам нужно найти идентификатор формы просмотра баланса:
А) Публикуем страницу
Б) На опубликованной странице находим нашу форму, мышкой указываем примерно на слова "Введите номер телефона"
В) Кликаем правой кнопкой, из появившегося меню выбираем "Просмотреть код"
А) Публикуем страницу
Б) На опубликованной странице находим нашу форму, мышкой указываем примерно на слова "Введите номер телефона"
В) Кликаем правой кнопкой, из появившегося меню выбираем "Просмотреть код"
Справа открывается код.
Двигаемся чуть вверх по коду, ищем идентификатор формы: нам нужно искать параметр 'form id="
Находим, копируем то, что в кавычках.
Ниже видео-пример, как это делается.
Двигаемся чуть вверх по коду, ищем идентификатор формы: нам нужно искать параметр 'form id="
Находим, копируем то, что в кавычках.
Ниже видео-пример, как это делается.
Возвращаемся в редактирование страницы, к партнерскому блоку "Узнать баланс".
В коде № 1 изменить значение параметра "form:" на тот, что мы скопировали впредыдущем действии.
В коде № 1 изменить значение параметра "form:" на тот, что мы скопировали впредыдущем действии.
Шаг 12.
Копируем другие нужные страницы с сайта-донора
Копируем другие нужные страницы с сайта-донора
- Пользовательское соглашение
- "Страница не найдена"
Шаг 13.
Делаем необходимые настройки на сайте
Делаем необходимые настройки на сайте
13.1. На сайте партнера "Настройки сайта"
13.2. Назначить главную страницу
13.3. Назначить страницу ошибки 404
13.4. Подключить обработчик форм
13.5. Подключить Яндес Метрику
13.6. Установить favicon
13.7. Подключить домен
13.8 Подключить HTTPS и настроить переадресацию с hhtp и www
13.7. Подключить домен
13.8 Подключить HTTPS и настроить переадресацию с hhtp и www
Шаг 14.
Ну и все, осталось только опубликовать страницы сайта
Ну и все, осталось только опубликовать страницы сайта