@oasis-catalog/branding-widget v1.1.3
Виджет редактирования нанесения
Работа с нанесениями на товары oasiscatalog из коробки
Установка
- Используйте скрипт с cdn, либо client/index.iife.js
https://unpkg.com/@oasis-catalog/branding-widget@^1/client/index.iife.js
https://unpkg.com/@oasis-catalog/branding-widget@^1/client/style.css- Продвинутый вариант npm i @oasis-catalog/branding-widget
Быстрый старт
<link
rel="stylesheet"
href="https://unpkg.com/@oasis-catalog/branding-widget@^1/client/style.css"
/>
<form method="post">
<div class="js--oasis-branding-widget" data-product-id="1-000081441"></div>
<button type="submit">Отправить</button>
</form>
<script src="https://unpkg.com/@oasis-catalog/branding-widget@^1/client/index.iife.js"></script>Простое использование
Подключите стили и скрипт на вашу страницу, можете воспользоваться cdn или скопировать файлы себе локально. Инициализировать виджет можно 2 способами:
Просто разместите элемент с классом js--oasis-branding-widget на странице, и при помощи дата атрибутов передайте необходимые параметры. Для использования необходимо получить коэффициенты для выбранных товаров. Для получения коэффициентов необходимо сделать GET-запрос одним из способов:
https://api.oasiscatalog.com/v4/branding/coef/1-000070661?key=key... https://api.oasiscatalog.com/v4/branding/coef?id=1-000070661,1-000070662,1-000070663&key=key... https://api.oasiscatalog.com/v4/branding/coef?id[]=1-000070661&id[]=1-000070662&id[]=1-000070663&key=key...Вы также можете передать:
- data-product-id - В таком случае будет произведен запрос к апи oasiscatalog, с данным идентификатором (https://api.oasiscatalog.com/v4/branding/coef?id=productId&format=json).
- data-coef-url - В таком случае запрос будет направлен по указаному url.
data-coef - В таком случае запроса не будет, а будут использованы переданные данные
ВНИМАНИЕ: Не указывайте ваш ключ к api oasiscatalog в параметрах, чтобы не скомпроментировать его.
data-item и data-branding можно не передавать тогда по умолчанию они будут:
data-item={productId: productId, quantity: 1, branding: []}
data-branding={}
Но в таком случае обязательно нужно указать data-product-id
data-form-name Добавит к инпутам в виджете параметр form, для связывания с конкретной формой на сайте
Пример
<head>
<link
rel="stylesheet"
href="https://unpkg.com/@oasis-catalog/branding-widget@^1/client/style.css"
/>
<!-- Или -->
<!-- <link rel="stylesheet" href="client/style.css" /> -->
</head>
<body>
<div class="js--oasis-branding-widget" data-product-id="1-000081441"></div>
<form id="oasis-branding-widget-form" method="post">
<button type="submit">Отправить</button>
</form>
<script src="https://unpkg.com/@oasis-catalog/branding-widget@^1/client/index.iife.js"></script>
<!-- Или -->
<!-- <script src="client/index.iife.js"></script> -->
</body>- Проинициализоровать в скрипте, передав необходимые параметры
<head>
<link rel="stylesheet" href="client/style.css" />
</head>
<body>
<div id="oasis-branding-widget-test"></div>
<script src="client/index.iife.js"></script>
<script type="module">
const item = {
productId: '1-000072263',
quantity: 1,
// Методы нанесения что были заданы продукту
branding: [],
};
const branding = {
'1nn244ja91': {
typeId: '1-000026380',
placeId: '000013225',
logoId: null,
width: null,
height: null,
},
};
OasisBrandigWidget('#oasis-branding-widget-test', {
productId: '1-000072263',
coefUrl: 'http://localhost:3030/coef/1-000072263',
item,
branding,
});
</script>
</body>Продвинутое использование (Требуется vue 3)
Установите @oasis-catalog/oasis-branding-widget. Вам будут доступны следующие компоненты: OasisBrandingWidget, OasisBrandingWidgetTogglers, OasisBrandingWidgetParams А также внешние функции useProvideBrandingWidgetStore, useBrandingWidgetStoreOrThrow подробнее о механизме работы описано здесь
Для полноценной работы потребуются следующие зависимости: vue, @vueuse/core, @floating-ui/vue
<template lang="pug">
.app
oasis-branding-widget-total.mb-5(
v-if="coef"
:coef="coef"
:item="item"
:price="price"
:branding="branding"
:quantity="quantity"
:with-readiness="false"
:visible-rows="['client']"
)
oasis-branding-widget-togglers(
v-if="coef"
:coef="coef"
)
</template>
<script lang="ts">
import {defineComponent} from 'vue';
import {useAsyncState} from '@vueuse/core';
import {
OasisBrandingWidgetTotal,
OasisBrandingWidgetTogglers,
} from '@oasis-catalog/oasis-branding-widget';
import type {CollectionBranding} from '@oasis-catalog/branding-price';
export default defineComponent({
components: {
OasisBrandingWidgetTotal
OasisBrandingWidgetTogglers,
},
setup() {
const {state: coef, isLoading: isLoadingCoef} = useAsyncState(
async () => {
// Нужно указать url для источника данных
let coef = await fetch('fetch-data');
coef = await coef.json();
return coef:
},
undefined,
);
const item = ref({
productId: '1-000072263',
quantity: 1,
branding: ['1nn244ja91'],
});
const branding = ref<Record<string, CollectionBranding>>({
'1nn244ja91': {
typeId: '1-000026380',
placeId: '000013225',
logoId: null,
width: null,
height: null,
},
});
const price = ref({
client: 356.1,
dealer: 249.27,
});
const quantity = 1;
// Данная функция объявит все необходимые для работы данные и функции
useProvideBrandingWidgetStore(
{
coef: coef.value,
item: item,
branding: branding,
},
);
return {
coef,
item,
branding,
price,
quantity,
};
},
});
</script>Типы
type Coef = {
margin: number;
setupMargin: number;
vat?: number | null;
discount?: number;
setupDiscount?: number;
hasOwnProduction?: boolean;
items: CoefItem[];
methods: CoefMethod[];
groups: CoefGroup[];
};
type CollectionItem = {
productId: string;
quantity:
| number
| {
[key: string]: number;
};
branding?: number[] | string[];
multipliers?: {
[key: string]: number;
};
};
type CollectionBranding = {
placeId: string;
typeId: string;
logoId?: number | null;
width?: number | null;
height?: number | null;
};
type PriceProp = {
client: number;
dealer: number;
};
type SelectionOption = {
id: string | number;
text: string;
};
type Params = {
/**
* Идентификатор продукта
* Если не указан coef и item, является обязательным параметром
*/
productId?: string;
/** Url для загрузки коэффициентов по продукту */
coefUrl?: string;
/** Коэффициенты для выбранного товара */
coef?: Coef;
/** Выбранный товар */
item?: CollectionItem;
/** Объект с информацией по нанесениям */
branding?: Record<string, CollectionBranding>;
/** Название формы для нативной обработки данных */
formName?: string;
/** Локализация для форматирования цены */
locale?: string;
/** Отображаемая валюта, влияет на знак валюты */
currency?: string;
};
function OasisBrandigWidget(mountEl: string | HTMLElement, params: Params): Promise<void>;