bsign-customization-full
v0.0.41
Published
Віджет конструктора табличок, який можна вбудувати на будь-яку сторінку через `mountConstructorWidget(...)`.
Downloads
1,367
Readme
bsign-customization-full
Віджет конструктора табличок, який можна вбудувати на будь-яку сторінку через mountConstructorWidget(...).
Віджет рендериться в Shadow DOM, тому зовнішні стилі сторінки не конфліктують з його UI. Для картинок, шрифтів і шаблонів потрібно передати assetBaseUrl з посиланням на папку dist/.
Швидкий старт
- Збери проєкт через
npm run buildабо опублікуй готовий вмістdist/. - Додай контейнер на сторінку.
- Підключи
sign-constructor.iife.js. - Виклич
mountConstructorWidget(...)і передайassetBaseUrl.
Приклад підключення через CDN
У прикладі використано
@latest. Для продакшену краще зафіксувати конкретну версію пакета.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bsign Widget Example</title>
</head>
<body>
<div id="bsign-widget"></div>
<script src="https://cdn.jsdelivr.net/npm/bsign-customization-full@latest/dist/sign-constructor.iife.js"></script>
<script>
AppDemo2.mountConstructorWidget("#bsign-widget", {
assetBaseUrl: "https://cdn.jsdelivr.net/npm/bsign-customization-full@latest/dist/",
templateId: "wave",
previewAppUrl: "https://preview.example.com/",
openButton: {
label: "Open constructor",
className: "bsign-open-button",
buttonProps: {
"aria-label": "Open sign constructor"
}
},
widgetCss: `
.bsign-open-button {
border: 1px solid #1c1d1d;
border-radius: 10px;
padding: 10px 16px;
font-weight: 600;
background: #ffffff;
cursor: pointer;
}
.bsign-open-button:hover {
background: #f5f5f5;
}
`
});
</script>
</body>
</html>Приклад для Vite / React
import { useEffect } from "react";
import { mountConstructorWidget } from "bsign-customization-full/dist/sign-constructor.es.js";
export function BsignWidgetExample() {
useEffect(() => {
mountConstructorWidget("#bsign-widget", {
assetBaseUrl: "https://cdn.jsdelivr.net/npm/bsign-customization-full@latest/dist/",
templateId: "modern",
previewAppUrl: "https://preview.example.com/",
openButton: {
label: "Customize sign",
className: "bsign-open-button",
},
widgetCss: `
.bsign-open-button {
padding: 12px 18px;
border: 0;
border-radius: 999px;
background: #111111;
color: #ffffff;
cursor: pointer;
}
`,
});
}, []);
return <div id="bsign-widget" />;
}API
mountConstructorWidget(target, props)
target
- CSS-селектор, наприклад
"#bsign-widget", абоHTMLElement.
props
assetBaseUrl: string— обов'язковий URL до папкиdist/, з якої підтягуютьсяtemplates,colors,fontsта інші assets.templateId?: string— стартовий шаблон. Доступні значення:modern,wave. За замовчуванням використовуєтьсяmodern.productId?: number— Shopify variant ID, який додається до кошика.previewAppUrl?: string— URL статичного Bsign preview-app. Конфігурація таблички передається в URL fragment і генерується при відкритті посилання.openButton?: { label?, className?, style?, buttonProps? }— налаштування кнопки відкриття віджета.widgetCss?: string | string[]— додаткові стилі, які інжектяться всерединуShadow DOM. Зручно для кастомізації кнопки та локальних перевизначень.
Практичні нотатки
assetBaseUrlмає вказувати саме на папку, де лежать файли збірки та статичні ресурси віджета.- Зовнішній CSS сторінки не стилізує внутрішній UI віджета, тому для кастомізації використовуй
widgetCssабоopenButton.style. - Якщо передати невідомий
templateId, віджет автоматично повернеться до дефолтного шаблону. - Мінімальний робочий приклад також є у test/preview.html.
Розробка
npm install
npm run dev
npm run build