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/crm-from')
		})
	]
}

html

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

<!-- додається на сайт одноразово -->
<script>
	/**
	* @param {string} u шлях до віджета
	* @param {boolean} f при відсутності шрифт Roboto - true
	* @param {object} d document
	* @param {object} w window
	* @param {number|string} t Time Stamp
	*/
	!window.EpicentrK && (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.EpicentrK.addFonts();};
	})(`{шлях до папки}`,true,document,window,(Date.now()/180000|0));
</script>

php

<?php
require($_SERVER["DOCUMENT_ROOT"] . "/widget/crm-from/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.EpicentrK && (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.EpicentrK.addFonts();};
	})('/widget/crm-form/<?php echo $widget_timestamp; ?>/',true,document,window,(Date.now()/180000|0));
</script>

javascript API

/**
* @description Виклик форми в попапі
* @param {number} id - ідентифікатор форми
* @example window.EpicentrK.crmFormsPopup(561);
*/
window.EpicentrK.crmFormsPopup(id: number)

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

/**
* @description Виклик форми в розмітці
* @param {HTMLElement} el HTMLElement
* @param {number} id ідентифікатор форми
* @example window.EpicentrK.crmFormsStatic(document.querySelector('.block'), 561);
*/
window.EpicentrK.crmFormsStatic(el: HTMLElement, id: number); 

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

HTMLElement

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

<!-- data-form-id (required) - ідентифікатор форми -->
<button data-form-id='560'>Написати в відділ Сервіс</button>
<button data-form-id='561'>Написати нам повідомлення</button>
<button data-form-id='562'>Задати питання</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>

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

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

© 2023