FiluetShip Widget

npm

npm install @filuet/widget

Published assets:

• @filuet/widget → dist/widget.iife.js
• @filuet/widget/widget.js → same bundle
• @filuet/widget/widget.css → styles
• @filuet/widget/images/* → icons

CDN example (jsDelivr):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@filuet/[email protected]/dist/widget.css" />
<script src="https://cdn.jsdelivr.net/npm/@filuet/[email protected]/dist/widget.iife.js"></script>

Build and publish from this directory:

npm run build
npm publish --access public

Подключение

Вариант через Docker (nginx):

• В .env задайте:
  • WIDGET_GOOGLE_MAPS_API_KEY
  • WIDGET_API_BASE_URL (например http://localhost:8080)
  • WIDGET_COMPANY_ID
  • WIDGET_PROVIDER_CODES (JSON массив, например ["OMNIVA","DPD"])

Контейнер генерирует widget-config.js из widget-config.template.js.

Инициализация

<link rel="stylesheet" href="/widget.css" />
<div id="filuetship-widget"></div>
<script src="/widget-config.js"></script>
<script src="/widget.js"></script>
<script>
  window.FiluetShipWidget.init({
    container: "#filuetship-widget",
    apiBaseUrl: "https://api.example.com",
    companyId: "<company_id>",
    googleMapsApiKey: "<key>",
    locale: "ru",
    mock: false,
    providerCodes: ["OMNIVA", "DPD"],
    environment: "TEST",
  });
</script>

Режимы

• mock: true — заглушки тарифов и ПВЗ.
• mock: false — реальный API:
  • POST /v1/rates
  • POST /v1/calculations/{id}/confirm
  • GET /v1/pickup-points?provider_code=...