Hosting Price Calculator frontend

Как встроить уже скомпилированный калькулятор

Просто вставить этот код в месте, где должен появится калькулятор:

<!-- в месте где появится калькулятор -->
<div id="hpc-frontend"></div>
<link href="https://calculator.advancedhosting.com/vendor.css" rel="stylesheet">
<link href="https://calculator.advancedhosting.com/app.css" rel="stylesheet">
<script src="https://calculator.advancedhosting.com/loader.js"></script>
<script src="https://calculator.advancedhosting.com/vendor.js"></script>
<script src="https://calculator.advancedhosting.com/app.js"></script>
<script>
   window.addEventListener("DOMContentLoaded", () => {
      // Запуск и настройка калькулятора
      Calculator.init({
         tabs: [], // Пример значений списка вкладок: ["/private-cloud", "/public-cloud",  "/storgae", "dedicated-server", "/dns"]
         apiRoot: "https://hiapi.advancedhosting.com", // адрес бэкэнда
         seller: "reseller", // продавец по умолчанию
         tariffName: "Calculator-AH", // название тарифа
      });
   });
</script>

Альтернативная установка

1. Собрать калькулятор npm run build
2. Положить папку с билдом в веб-рут (название папки может быть любым, на пример hpc-frontend)
3. Модифицируйте страницу где нужно добавить калькулятор таким образом: добавьте ресурсы (стили и скрипты) из папки с билдом, инициализируйте модуль Calculator:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example page for hpc-frontend</title>
   <link href="hpc-frontend/vendor.css" rel="stylesheet">
   <link href="hpc-frontend/app.css" rel="stylesheet">
</head>
<body>
<!-- в месте где появится калькулятор -->
<div id="hpc-frontend"></div>

<script src="hpc-frontend/loader.js"></script>
<script src="hpc-frontend/vendor.js"></script>
<script src="hpc-frontend/app.js"></script>
<script>
    window.addEventListener("DOMContentLoaded", () => {
        // Запуск и настройка калькулятора
        Calculator.init({
            tabs: [], // Пример значений списка вкладок: ["/private-cloud", "/public-cloud",  "/storage", "dedicated-server", "/dns"]
            apiRoot: "https://hiapi.advancedhosting.com", // адрес бэкэнда
            seller: "reseller", // продавец по умолчанию
            tariffName: "Calculator-AH", // название тарифа
        });
    });
</script>
</body>
</html>

PHP example

1. npm run build
2. Исправить пути к файлам ресурсов калькулятора в example/index.html
3. php -S localhost:8080 -t ./example