Меняем текст в блоке продления покупки в тренингах на геткурсе с помощью JS

JS-код:

/*
  * Name: Функция для замены текста в блоке продления покупки в тренингах на геткурсе
  * Version: 1.0
*/



// Объявление функции которая заменяет текст в блоке продления продукта в гк 
function changeTextOnProductBlock(productBlockSelector = '.xdget-productTiming', replaceTextArr = ['Поддержка доступна', "Поддержка", 'Поддержка закончилась']) {

  if (!Array.isArray(replaceTextArr)) return;

  const productInfo = document.querySelector(`${productBlockSelector} .user-product-block`);

  if (!productInfo) return;

  const notAccessEl = productInfo.querySelector("b");

  if (notAccessEl && productInfo.childNodes[0].textContent.trim() == '') {
    notAccessEl.textContent = notAccessEl.textContent.replace('Доступ к тренингу закончился', replaceTextArr[2]);
    return;
  }
  const newTextProduct = productInfo.childNodes[0].textContent
    .replace('Тренинг доступен', replaceTextArr[0])
    .replace("Доступ к тренингу", replaceTextArr[1]);
  productInfo.childNodes[0].textContent = newTextProduct;


}


$(function () {

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


  changeTextOnProductBlock('.product_1', ['Курс доступен', 'Доступ к курсу', 'Доступ к курсу закончился']);

  changeTextOnProductBlock('.product_2', ['Поддержка доступна', 'Поддержка', 'Поддержка закончилась']);

});

*Перед тем как выполнить скрипт блокам были заданы классы, в данном примере это product_1 и product_2

В вызове функции можно написать свои строки текста

changeTextOnProductBlock('.product_3', ['База знаний доступна', 'Доступ к базе знаний', 'Доступ к базе знаний закончился']);

Вариант CSS-стилизации:

/* Блок продления продукта */
.xdget-productTiming {
  margin-bottom: 20px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0 0 0 / 0.15);
  background-color: #7367F0;
  background-image: linear-gradient(225deg, rgba(206, 159, 252, 1) -20%, rgba(115, 103, 240, 1) 90%);
}


.xdget-productTiming .user-product-block>.text-muted {
  margin-top: 2px;
  font-weight: 400;
  color: #ffffff;
}


/* Продлить доступ */
.user-product-block a.dotted-link {
  margin-top: 4px;
  display: inline-block;
  font-weight: 400;
  color: #ffffff;
  border-color: #ffffff;
  transition: all .4s ease;
}

.user-product-block a.dotted-link:hover {
  color: #FAC9B4;
  border-color: #FAC9B4;
  transition: all .4s ease;
}



/* Кнопка "Продлить" */
.xdget-productTiming .user-product-block .prolong-offers button {
  border: 0;
  border-radius: 30px;
  font-size: 16px;
  padding: 8px 60px;
  min-height: 50px;
  background-color: #2b2e43;
  transition: filter .4s ease;
}

.xdget-productTiming .user-product-block .prolong-offers button:hover {
  filter: brightness(120%);
  transition: filter .4s ease;
}

.xdget-productTiming .user-product-block>b {
  color: #FAC9B4 !important;
}

/* </ Блок продления продукта */

Результат:

* Возможность продлить доступ появляется если это предварительно настроено в настройках продукта

Telegram: https://t.me/getcomponent