Код скрипта “Buy Me Coffee” в Svelte

Вопрос или проблема

  type="text/javascript"
  src="https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js"
  data-name="bmc-button"
  data-slug="slug_name"
  data-color="#FFDD00"
  data-emoji="☕"
  data-font="Lato"
  data-text="Купи мне кофе"
  data-outline-color="#000000"
  data-font-color="#000000"
  data-coffee-color="#ffffff"
></script>;

<script lang='ts'>
    import { onMount } from 'svelte';
  
    let sectionsVisible = [false, false, false, false];
  
    function handleScroll() {
      const sections = document.querySelectorAll('section');
      sections.forEach((section, index) => {
        const rect = section.getBoundingClientRect();
        if (rect.top < window.innerHeight * 0.75) {
          sectionsVisible[index] = true;
        }
      });
    }
  
    onMount(() => {
      handleScroll();
      window.addEventListener('scroll', handleScroll);
    });
  </script>

Ответ или решение

Для добавления кнопки Buy Me Coffee в ваше приложение на Svelte и интеграции с уже существующим кодом, вы можете использовать следующий подход. Svelte позволяет легко добавлять сторонние скрипты, но важно убедиться, что скрипт загружается только один раз и в нужный момент.

Шаги для интеграции скрипта Buy Me Coffee в Svelte

1. Создание нового компонента или обновление существующего:
   В зависимости от ваших нужд, вы можете создать новый Svelte компонент или добавить код в уже существующий. Например, давайте создадим новый компонент BuyMeCoffee.svelte.

<script lang='ts'>
    import { onMount } from 'svelte';

    onMount(() => {
        // Создаем скрипт
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://cdnjs.buymeacoffee.com/1.0.0/button.prod.min.js';
        script.setAttribute('data-name', 'bmc-button');
        script.setAttribute('data-slug', 'slug_name'); // Замените на ваш slug
        script.setAttribute('data-color', '#FFDD00');
        script.setAttribute('data-emoji', '☕');
        script.setAttribute('data-font', 'Lato');
        script.setAttribute('data-text', 'Buy me a coffee');
        script.setAttribute('data-outline-color', '#000000');
        script.setAttribute('data-font-color', '#000000');
        script.setAttribute('data-coffee-color', '#ffffff');

        // Добавляем скрипт в body
        document.body.appendChild(script);

        // Убираем скрипт при удалении компонента
        return () => {
            document.body.removeChild(script);
        };
    });
</script>

<!-- Место для кнопки -->
<div class="bmc-button"></div>

2. Встраивание компонента на страницу:
   Теперь, когда у вас есть компонент с кнопкой Buy Me Coffee, вы можете вставить его в любое место вашего приложения. Например, в основном компоненте вашего приложения, как показано ниже:

<script lang='ts'>
    import BuyMeCoffee from './BuyMeCoffee.svelte';

    // Вставьте ваш существующий код из вопроса здесь
    import { onMount } from 'svelte';

    let sectionsVisible = [false, false, false, false];

    function handleScroll() {
        const sections = document.querySelectorAll('section');
        sections.forEach((section, index) => {
            const rect = section.getBoundingClientRect();
            if (rect.top < window.innerHeight * 0.75) {
                sectionsVisible[index] = true;
            }
        });
    }

    onMount(() => {
        handleScroll();
        window.addEventListener('scroll', handleScroll);
    });
</script>

<!-- Ваш существующий контент -->
<main>
    <section>...</section>
    <section>...</section>

    <!-- Вставка кнопки Buy Me Coffee -->
    <BuyMeCoffee />
</main>

Примечания

• Место для кнопки: Вы можете перемещать компонент BuyMeCoffee в любое место вашего основного шаблона. Это позволит настроить расположение кнопки в соответствии с вашими предпочтениями.

• Стилизация: Вы можете изменить CSS, чтобы лучше интегрировать кнопку в ваш интерфейс.

• Сохранение состояния: Убедитесь, что при необходимости вы сохраняете состояние вашего приложения, когда пользователи взаимодействуют с кнопкой Buy Me Coffee.

Заключение

С помощью предложенного решения вы сможете успешно интегрировать кнопку Buy Me Coffee в ваше Svelte приложение, сохранив при этом функциональность вашей существующей логики. Убедитесь, что в коде корректно указан slug вашего профиля, чтобы кнопка работала правильно.