Настройка виджета (По желанию, не обязательно)
Данный код нужно вставить в HTML-блок (T123 блок) на любой странице, лучше всего - header, чтобы виджет появлялся везде под кнопкой купить
<script src="https://pay.yandex.ru/sdk/v1/pay.js"></script>
<script>
// Version 1.4
const MID = '!!!ВСТАВИТЬ_СЮДА_МЕРЧАНТ_ID!!!'; // Merchant ID (идентификатор клиента из настроек Яндекс Пэй)
const METHODS = ['SPLIT', 'CARD']; // ['SPLIT', 'CARD'] - для отображения кешбэк + сплит, ['SPLIT'] - для отображения только сплит
const BNPL_BADGES = true; // true - показать бейджи сплита, false - скрыть бейджи сплита
const CASHBACK_BADGE = true; // true - показать бейджи кешбэка, false - скрыть бейджи кешбэка
const THEME = 'light'; // dark - темная тема оформления, light - светлая тема оформления
function addBadges(){
let productsNodes = [];
productsNodes = document.querySelectorAll('.t-store__card');
if (productsNodes.length == 0){
productsNodes = document.querySelectorAll('.t776__col');
}
productsNodes.forEach((product, index) => {
if (product.querySelector('.splitochek-badge') === null){
let badgeWrapper = document.createElement("div");
let splitochekBadge = `splitochek-badge-${index}`;
badgeWrapper.id = splitochekBadge;
badgeWrapper.classList = 'splitochek-badge';
let priceWrapper = null;
priceWrapper = product.querySelector('.js-store-price-wrapper');
if (priceWrapper === null){
priceWrapper = product.querySelector('.t776__btn-wrapper');
}
priceWrapper.appendChild(badgeWrapper);
let priceNode = null;
priceNode = product.querySelector('.js-product-price');
if (priceNode === null){
priceNode = product.querySelector('.t776__btn_second td');
}
let price = priceNode.textContent.replace(/\s/g, '').match(/\d+/g);
if (BNPL_BADGES){
YaPay.mountBadge(document.querySelector(`#${splitochekBadge}`),
{
type: 'bnpl',
theme: THEME,
amount: price[0],
size: 's', // размер бейджика (s, m, l)
variant: 'simple', // simple - простой вариант бейджа, detailed - детальный вариант бейджа
color: 'grey', // цветовое оформление (primary, green, grey, transparent)
align: 'center', // выравнивание информации (left, center, right)
merchantId: MID
});
}
if (CASHBACK_BADGE){
YaPay.mountBadge(document.querySelector(`#${splitochekBadge}`),
{
type: 'cashback',
theme: THEME,
amount: price[0], // передаем цену для расчета
size: 's', // размер бейджика (s, m, l)
variant: 'default', // default - вариант бейджа по умолчанию, compact - компактный вариант бейджа
color: 'primary', // цветовое оформление (primary, grey, transparent)
align: 'center', // выравнивание информации (left, center, right)
merchantId: MID
});
}
}
});
}
document.addEventListener('tStoreRendered', addBadges);
document.addEventListener('DOMContentLoaded', addBadges);
function addWidget(selector, popupWidget = false){
const YaPay = window.YaPay;
let activeSession = null;
let priceNode = null;
priceNode = document.querySelector(`${selector} .js-product-price`);
if (priceNode === null){
priceNode = document.querySelector(`${selector} .t706__cartwin-prodamount-wrap .t706__cartwin-prodamount-price`);
}
if (priceNode === null){
priceNode = document.querySelector(`${selector} .t706__sidebar-prodamount .t706__cartwin-prodamount-price`);
}
if (priceNode === null){
priceNode = document.querySelector(`${selector} .t1025__price-wrapper .t1025__price-value`);
}
let amount = priceNode.textContent.replace(/\s/g, '').match(/\d+/g);
const paymentData = {
env: YaPay.PaymentEnv,
version: 4,
currencyCode: YaPay.CurrencyCode.Rub,
merchantId: MID,
totalAmount: amount[0],
availablePaymentMethods: METHODS
};
function onPayButtonClick(){}
YaPay.createSession(paymentData, {
onPayButtonClick: onPayButtonClick
})
.then(function(paymentSession){
activeSession = paymentSession;
paymentSession.mountWidget(document.querySelector(`${selector} .splitochek-widget`), {
//какой тип виджеты выводим?
widgetType: YaPay.WidgetType.BnplPreview,
//widgetTheme: YaPay.WidgetTheme.Light,
//padding: YaPay.WidgetPaddingType.None,
//borderRadius: 5
});
if (popupWidget){
document.addEventListener('popupHidden', function(){
paymentSession.unmountWidget(document.querySelector(`${selector} .splitochek-widget`),{});
});
}
})
.catch(function(err){
console.error(err);
});
let observer = new MutationObserver(mutationRecords => {
let amountContent = null;
try {
amountContent = mutationRecords[0].addedNodes[0].textContent;
if (!amountContent){
amountContent = mutationRecords[0].addedNodes[0].innerText;
}
} catch (err) {
console.log(err);
}
let newAmount = amountContent.replace(/\s/g, '');
activeSession.update(async function(){
return {
totalAmount: newAmount,
};
});
});
observer.observe(priceNode.parentNode, {
childList: true, subtree: true
});
}
document.addEventListener('DOMContentLoaded', function(){
let widgetSnippetWrapper = document.createElement('div');
widgetSnippetWrapper.classList = 'splitochek-widget';
let snippetWrapper = null;
snippetWrapper = document.querySelector('.t-store__product-snippet .js-store-price-wrapper');
if (snippetWrapper === null){
snippetWrapper = document.querySelector('.t744 .js-store-price-wrapper');
if (snippetWrapper !== null){
snippetWrapper.appendChild(widgetSnippetWrapper);
addWidget('.t744');
}
} else {
snippetWrapper.appendChild(widgetSnippetWrapper);
addWidget('.t-store__product-snippet');
}
let widgetCheckoutWrapper = document.createElement('div');
widgetCheckoutWrapper.classList = 'splitochek-widget';
let checkoutWrapper = document.querySelector('.t706__cartwin-content .t706__cartwin-prodamount-wrap');
if (checkoutWrapper !== null){
checkoutWrapper.appendChild(widgetCheckoutWrapper);
}
});
document.addEventListener('tStoreRendered', function(){
let widgetPopupWrapper = document.createElement('div');
widgetPopupWrapper.classList = 'splitochek-widget';
let popupWrapper = document.querySelector('.t-store__product-popup .js-store-price-wrapper');
if (popupWrapper !== null){
popupWrapper.appendChild(widgetPopupWrapper);
}
let widgetPopupProdWrapper = document.createElement('div');
widgetPopupProdWrapper.classList = 'splitochek-widget';
let popupProdWrapper = document.querySelector('.t-store__product-popup .t1025__price-wrapper');
if (popupProdWrapper !== null){
popupWrapper.appendChild(widgetPopupProdWrapper);
}
let widgetCartWrapper = document.createElement('div');
widgetCartWrapper.classList = 'splitochek-widget';
let cartPageWrapper = document.querySelector('.t706__cartpage-content .t706__cartpage-info-wrapper');
if (cartPageWrapper !== null){
cartPageWrapper.appendChild(widgetCartWrapper);
}
let widgetSidebarWrapper = document.createElement('div');
widgetSidebarWrapper.classList = 'splitochek-widget';
let cartSidebarWrapper = document.querySelector('.t706__sidebar-content .t706__sidebar-prodamount-wrap');
if (cartSidebarWrapper !== null){
cartSidebarWrapper.appendChild(widgetSidebarWrapper);
}
let widgetCheckoutWrapper = document.createElement('div');
widgetCheckoutWrapper.classList = 'splitochek-widget';
let checkoutWrapper = document.querySelector('.t706__cartwin-content .t706__cartwin-prodamount-wrap');
if (checkoutWrapper !== null){
checkoutWrapper.appendChild(widgetCheckoutWrapper);
}
});
document.addEventListener('popupShowed', function(){
setTimeout(function(){
let popupNode = document.querySelector('.t-body_popupshowed');
let cartPageNode = document.querySelector('.t706__body_cartpageshowed');
let cartSidebarNode = document.querySelector('.t706__body_cartsidebarshowed');
let checkoutNode = document.querySelector('.t706__body_cartwinshowed');
if (popupNode !== null){
addWidget('.t-store__product-popup', true);
}
if (cartPageNode !== null){
addWidget('.t706__cartpage-content', true);
}
if (cartSidebarNode !== null){
addWidget('.t706__sidebar-content', true);
}
if (checkoutNode !== null){
addWidget('.t706__cartwin-content', true);
}
}, 200);
});
</script>
<style>
.splitochek-badge {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.splitochek-badge yandex-pay-badge {
margin-top: 0.75rem;
}
.splitochek-widget .ya-pay-widget {
margin-top: 20px!important;
margin-bottom: 0!important;
}
.t706__sidebar-prodamount-wrap {
padding-top: 20px!important;
padding-bottom: 20px!important;
}
.t706__cartpage-info-wrapper .splitochek-widget .ya-pay-widget {
margin-top: -30px!important;
margin-bottom: 20px!important;
}
.t706__cartpage-totals {
padding-top: 20px!important;
}
</style>
Last modified: 30 декабря 2024