widget-crm-form

CRM forms

Build

# submodule
git submodule init
git submodule update
bash ./npm.sh i
# run
npm run serve
npm run dev
npm run build
#lint
npm run lint
npm run lint:js
npm run list:style
npm run lintfix

webpack plugin

npm i -D path fs-extra widget-crm-form

// webpack.config.js
const path = require('path');
const fs = require('fs-extra');
const CrmCopyPlugin = require('widget-crm-form');
module.exports = {
	plugins: [
		new CrmCopyPlugin(fs, {
			widget: path.resolve(__dirname, 'widget'),
			src:    path.resolve(__dirname, 'node_modules/widget-crm-form/dist'),
			dest:   path.resolve(__dirname, 'widget/app')
		})
	]
}

html

Ініціалізація на сайті

js module

import timestamp from 'widget-crm-form/dist/timestamp';

/**
* @param {string} u шлях до віджета
* @param {boolean} f при відсутності шрифт Roboto - true
* @param {object} d document
* @param {object} w window
* @param {number|string} t Time Stamp
*/
!window.WidgetApp && (function(u, f, d, w, t) {
	var s=d.createElement('script');
	s.async=true;
	s.src=u+'crm-form.js?t='+t;
	// s.src=u+'crm-form-back-office.js?t='+t; для back-office
	d.head.appendChild(s);
	w.onload=function(){f&&w.WidgetApp.addFonts();};
}(`/widget/app/${timestamp}/`, false, document, window, (Date.now() / 180000 | 0)));

php

<?php
require($_SERVER["DOCUMENT_ROOT"] . "/widget/app/widget-timestamp.php");
?>

<!-- додається на сайт одноразово -->
<script>
	/**
	* @param {string} u шлях до віджета
	* @param {boolean} f при відсутності шрифт Roboto - true
	* @param {object} d document
	* @param {object} w window
	* @param {number|string} t Time Stamp
	*/
	!window.WidgetApp && (function(u, f, d, w, t) {
		var s=d.createElement('script');
		s.async=true;
		s.src=u+'crm-form.js?t='+t;
		// s.src=u+'crm-form-back-office.js?t='+t; для back-office
		d.head.appendChild(s);
		w.onload=function(){f&&w.WidgetApp.addFonts();};
	}('/widget/app/<?php echo $widget_timestamp; ?>/',true,document,window,(Date.now()/180000|0)));
</script>

javascript API

/**
* @description Виклик форми в попапі
* @param {number} id - ідентифікатор форми
* @param {any} saved - збережені дані по полях
* @example window.WidgetApp.crmFormsPopup(561);
* @example window.WidgetApp.crmFormsPopup(561, { 'answerList[44]': { disabled: true, value: 'sdfsdfsdf' } });
*/
window.WidgetApp.crmFormsPopup(id: number, saved?: any)

/**
* @description Виклик форм в попапі (селект)
* @param {{ id: number; name: string; }[]} items - масив елементів селекту, name - назва селекту для відображення
* @example window.WidgetApp.crmFormsPopupSelect([{"id": 560, "name": "Написати в відділ Сервіс"},{"id": 561, "name": "Написати нам повідомлення"},{"id": 562, "name": "Задати питання"}]);
*/
window.WidgetApp.crmFormsPopupSelect(items: { id: number; name: string; }[]);

/**
* @description Виклик форми в розмітці
* @param {HTMLElement} el HTMLElement
* @param {number} id ідентифікатор форми
* @example window.WidgetApp.crmFormsStatic(document.querySelector('.block'), 561);
* @example window.WidgetApp.crmFormsStatic(561, { 'answerList[44]': { disabled: true, value: 'sdfsdfsdf' } });
*/
window.WidgetApp.crmFormsStatic(el: HTMLElement, id: number, saved?: any); 

/**
* @description Компонент карт
* @param {HTMLElement} el HTMLElement
* @param {any} params параметри запиту
* @param {boolean} filters відображення фільтрів
* @param {boolean} parcerLockerSelect відображення фільтрів
* @example window.WidgetApp.addresses(document.querySelector('.block'), { lang: 'ua', info: 'contacts', true, false});
*/
window.WidgetApp.addresses(el: HTMLElement, params, filters: boolean, parcerLockerSelect?: boolean); 

/**
* @description додавання шрифта Roboto
* @example window.WidgetApp.addFonts();
*/
window.WidgetApp.addFonts();

HTMLElement

Форма в попапі

<!-- data-form-id (required) - ідентифікатор форми -->
<button data-form-id='560'>Написати в відділ Сервіс</button>
<button data-form-id='561'>Написати нам повідомлення</button>
<button data-form-id='562'>Задати питання</button>
<button data-form-id='562' data-form-saved='{ "answerList[44]": { "disabled": true, "value": "sdfsdfsdf" }}'>Задати питання</button>

Селект форм в попапі

<!-- data-form-items (required) - Масив з назвами і ідентифікаторами форм -->
<button data-form-items='[{"id": 560, "name": "Написати в відділ Сервіс"},{"id": 561, "name": "Написати нам повідомлення"},{"id": 562, "name": "Задати питання"}]'>Тематика звернення</button>

Форма в розмітці

<!-- data-form-id (required) - ідентифікатор форми -->
<!-- data-type - тип відображення -->
<div data-form-id='560' data-type='static'></div>
<div data-form-id='560' data-type='static' data-form-saved='{ "answerList[44]": { "disabled": true, "value": "sdfsdfsdf" }}'></div>

Відгуки - картка товару

<!-- data-reviews (required) - ідентифікатор форми -->
<!-- data-page - сторінка (product) -->
<div data-reviews='855757' data-page='product'></div>

Форма керування воблерами

<!-- data-wobblers (required) -->
<div data-wobblers></div>

B2B addresses APP

<?php
require($_SERVER["DOCUMENT_ROOT"] . "/widget/app/widget-timestamp.php");
?>
<script>
	/**
	* @param {string} u шлях до віджета
	* @param {object} d document
	* @param {object} w window
	* @param {number|string} t Time Stamp
	*/
	(function(u, d, w, t) {
		var s=d.createElement('script');
		s.async=true;
		s.src=u+'nuxt-addresses.js?t='+t;
		d.head.appendChild(s);
	}('/widget/app/<?php echo $widget_timestamp; ?>/',document,window,(Date.now()/180000|0)));
</script>

<!-- data-addresses (required) -->
<div data-addresses></div>

© 2024