Примеры интеграций с виджетом ипотеки в каталоге

В настройках каталога в Домопланере в разделе "Интеграции" есть поле для встраивания виджета ипотечного калькулятора.

В этом руководстве примеры таких интеграций: как они выглядят и что нужно вставить в указанное выше поле.

сделка.рф

Первым шагом вам нужно получить код для встраивания виджета от сделка.рф.

Код, который нужно вставить в поле, выглядит примерно так (он большой и весь нужен)

<script type="text/javascript">
(() => {
// prevent duplication
if (typeof SDELKA_IPO_CALC_IFRAME_SCRIPT !== 'undefined')
return;
SDELKA_IPO_CALC_IFRAME_SCRIPT = true
/** @param {string} urlString */
const isPopup = urlString => new URL(urlString).hash === '#0';
const getIframes = () => ;
/** @param {string} urlString */
const findIframe = urlString => {
const url = new URL(urlString);
const iframes = getIframes().filter(iframe => {
const iframeUrl = new URL(iframe.src);
return url.host === iframeUrl.host && url.pathname === iframeUrl.pathname && iframeUrl.hash === url.hash;
});
if (iframes.length > 1) {
throw new Error(
'У вас на странице несколько iframe виджета с одинаковым URL! Предложение: установите им в конец URL "#1", "#2" и т.п.'
);
}
return iframes.at(0);
};

/**
*
* @param {string} className
*/
const getNumberFromPage = className => {
/** @type {HTMLElement | undefined} */
const element = [...document.getElementsByClassName(className)].at(0);
const text = element?.textContent;
const value = text
? Number.parseFloat(
[...(text.matchAll(/([\d.,])/g) || [])]
.map(v => v[0])
.join('')
.replaceAll(',', '.')
)
: Number.NaN;
return value;
};

/**
* @param {object} params
* @param {{ method: string; data: { url: string } }} params.event
*/
const onLoaded = ({ event }) => {
const { url: urlString } = event.data;

const iframeWindow = findIframe(urlString)?.contentWindow;
if (!iframeWindow)
return;

/** говорит виджету, на какой странице сейчас пользователь. Нужно для формы. */
const tellWhereIAm = () => {
iframeWindow.postMessage({ method: 'SdelkaIpoCalc.setWhereIAm', data: { url: location.href }, to: 'iframe' }, '*');
};
/** Вытягивание цены со страницы */
const setPriceFromPage = () => {
const price = getNumberFromPage('sdelka-ipo-calc-price');
if (!Number.isNaN(price))
iframeWindow.postMessage({ method: 'SdelkaIpoCalc.setPrice', data: { price }, to: 'iframe' }, '*');
};
/** Вытягивание площади со страницы */
const setAreaFromPage = () => {
const area = getNumberFromPage('sdelka-ipo-calc-area');
if (!Number.isNaN(area))
iframeWindow.postMessage({ method: 'SdelkaIpoCalc.setArea', data: { area }, to: 'iframe' }, '*');
};
/** Вытягивание названий проектов со страницы, через запятую */
const setProjectsFromPage = () => {
/** @type {HTMLElement | undefined} */
const projectsElement = [...document.getElementsByClassName('sdelka-ipo-calc-projects')].at(0);
const text = projectsElement?.textContent;
const projects
= (text
&& text
.split(',')
.map(p => p.trim())
.filter(p => !!p))
|| [];
iframeWindow.postMessage({ method: 'SdelkaIpoCalc.setProjects', data: { projects }, to: 'iframe' }, '*');
};
const setRegionsFromPage = () => {
/** @type {HTMLElement | undefined} */
const regionsElement = [...document.getElementsByClassName('sdelka-ipo-calc-regions')].at(0);
const text = regionsElement?.textContent;
const regions
= (text
&& text
.split(',')
.map(p => p.trim().toLowerCase())
.filter(p => !!p && p !== 'все'))
|| [];
iframeWindow.postMessage({ method: 'SdelkaIpoCalc.setRegions', data: { regions }, to: 'iframe' }, '*');
};

/** Здесь можно что-то отключить, если вам мешает */
tellWhereIAm();
setPriceFromPage();
setAreaFromPage();
setProjectsFromPage();
setRegionsFromPage();
};

const mobileDefaultHeight = 966;
const desktopDefaultHeight = 900;
/**
* @param {object} params
* @param {{ method: string; data: { url: string; contentHeight: number; mobile: boolean } }} params.event
*/
const onMobileModeChanged = ({ event }) => {
const { contentHeight, mobile, url: urlString } = event.data;
if (isPopup(urlString))
return;
const iframe = findIframe(urlString);

/** @summary автоматическое изменение высоты для мобилки / десктопа */
const setMaxHeight = () => {
if (!iframe)
return;

const height = contentHeight || (mobile ? mobileDefaultHeight : desktopDefaultHeight);
iframe.style.height = `${height}px`;
};
setMaxHeight();
};

/**
* @param {object} params
* @param {{ method: string; data: object }} params.event
*/
const forwardToIframes = ({ event }) => {
getIframes().forEach(iframe => iframe.contentWindow.postMessage(event, '*'));
};

addEventListener('message', ({ data: msg, ...rest }) => {
if (typeof msg !== 'object')
return;
const { method } = msg;

if (method === 'SdelkaIpoCalc.onMobileModeChanged')
return onMobileModeChanged({ event: msg, ...rest });
if (method === 'SdelkaIpoCalc.onFrameLoaded')
return onLoaded({ event: msg, ...rest });
forwardToIframes({ event: msg, ...rest });
});

})();
</script>

<iframe name="sdelkaWidgetIpoCalcIframe" src="https://xn--d1aqf.xn--80ahdue7a.xn--p1ai/widget/ipo-calc/XXXXXXXxXXXXXXXXXXXX" style="width: 100%"></iframe>

Этот код автоматически определяет стоимость помещения, которое просматривает клиент.

Интеграция выглядит так:

ДВИЖ

Первым шагом вам нужно получить код для встраивания виджета от ДВИЖа.

Код, который нужно вставить в поле , выглядит примерно так:

<iframe src="https://ХХХХХХ.lk.dvizh.io/g/?module=calculator&companyId=46641fa7-8bb1-43be-935a-0c682be9396a&housingComplexes=ХХХХ-ХХХХ-ХХХХ-ХХХХ-ХХХХ&portalStyleUuid=ХХХХ-ХХХХ-ХХХХ-ХХХХ-ХХХХ&isWidget=true&is_header=no&cost={PRICE}&initials_price={PRICE*20%}&loan_period=30&mortgage_type=FAMILY&listed_mortgage_types=FAMILY,IT,STANDARD,MILITARY" frameborder="0" style="width: 100%; height: 600px; border: none;"></iframe>

Обратите внимание на переменные "cost={PRICE}" и "initials_price={PRICE*20%}". В коде, который вам передадут, в них будут указаны какие-то конкретные цифры. С этими базовыми цифрами калькулятор всегда будет открывать одинаковые данные для расчета, переданные в калькуляторе.

Если в cost вместо значения написать {PRICE} (как в примере выше), то тогда при открытии квартиры мы будем передавать в виджет ипотеки сразу же стоимость объекта, который смотрит клиент.

Второй параметр initials_price – это размер первого взноса в рублях. Мы подготовили формулу автоматического расчета первого взноса. Возможные значения:

{PRICE*20%} – значит подставить 20% от стоимости квартиры.
{PRICE-6000000} – значит подставить стоимость квартиры МИНУС 6 млн 

Два важных замечания:
1. Число в формулах выше может быть только целое. Например, "15". А вот "14.5" не подходит. И обязательно пишите без пробелов!
2. Менять этот взнос для каждой квартиры невозможно. Он является приблизительным для клиента, ведь клиент может его править, и устанавливается на весь проект.

Пример виджета ДВИЖ в каталоге Домопланера: