improve rendering
This commit is contained in:
11
ibanpro.php
11
ibanpro.php
@@ -277,6 +277,12 @@ class IbanPro extends PaymentModule
|
|||||||
// 5. If 'qrencode' is not found, assign the placeholder.
|
// 5. If 'qrencode' is not found, assign the placeholder.
|
||||||
$qr = $this->context->smarty->fetch($this->local_path . 'views/templates/front/emptyQR.svg');
|
$qr = $this->context->smarty->fetch($this->local_path . 'views/templates/front/emptyQR.svg');
|
||||||
}
|
}
|
||||||
|
if ($order->payment == $this->paymentMethodName) {
|
||||||
|
$this->context->smarty->assign([
|
||||||
|
'paymentMethodName' => 'ibanpro',
|
||||||
|
|
||||||
|
]);
|
||||||
|
}
|
||||||
$this->context->smarty->assign([
|
$this->context->smarty->assign([
|
||||||
'reciever_name' => Configuration::get('IBANTRANSFER_RECEIVER_NAME'),
|
'reciever_name' => Configuration::get('IBANTRANSFER_RECEIVER_NAME'),
|
||||||
'iban' => Configuration::get('IBANTRANSFER_IBAN'),
|
'iban' => Configuration::get('IBANTRANSFER_IBAN'),
|
||||||
@@ -303,10 +309,10 @@ class IbanPro extends PaymentModule
|
|||||||
mb_convert_encoding('2', 'ASCII'),
|
mb_convert_encoding('2', 'ASCII'),
|
||||||
mb_convert_encoding('UCT', 'ASCII'),
|
mb_convert_encoding('UCT', 'ASCII'),
|
||||||
'',
|
'',
|
||||||
mb_convert_encoding($this->reciever_name, 'windows-1251'),
|
mb_convert_encoding(Configuration::get('IBANTRANSFER_RECEIVER_NAME'), 'windows-1251'),
|
||||||
mb_convert_encoding(Configuration::get('IBANTRANSFER_IBAN'), 'ASCII'),
|
mb_convert_encoding(Configuration::get('IBANTRANSFER_IBAN'), 'ASCII'),
|
||||||
mb_convert_encoding($ibanSUM, 'ASCII'),
|
mb_convert_encoding($ibanSUM, 'ASCII'),
|
||||||
mb_convert_encoding($this->reciever_code, 'windows-1251'),
|
mb_convert_encoding(Configuration::get('IBANTRANSFER_RECEIVER_CODE'), 'windows-1251'),
|
||||||
'',
|
'',
|
||||||
'',
|
'',
|
||||||
mb_convert_encoding($description, 'windows-1251'),
|
mb_convert_encoding($description, 'windows-1251'),
|
||||||
@@ -338,6 +344,7 @@ class IbanPro extends PaymentModule
|
|||||||
public function hookPaymentOptions($params)
|
public function hookPaymentOptions($params)
|
||||||
{
|
{
|
||||||
|
|
||||||
|
|
||||||
if (!$this->active) {
|
if (!$this->active) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,15 @@
|
|||||||
<div class="order-confirmation__details card bg-light border-1 mb-3" id="wire-payment-details">
|
<div class="order-confirmation__details card bg-light border-1 mb-3 " id="iban-payment">
|
||||||
|
|
||||||
<div class="card shadow-sm">
|
<div class="card shadow-sm accordion-item">
|
||||||
<div class="card-header bg-light d-flex align-items-center">
|
<div class="card-header bg-light d-flex align-items-center">
|
||||||
<i class="material-icons me-2">account_balance</i>
|
<i class="material-icons me-2">account_balance</i>
|
||||||
<h5 class="mb-0">Реквізити для оплати замовлення</h5>
|
<h5 class="mb-0"> <button class="btn accordion-button icon-link" type="button" data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#iban-payment-details" aria-expanded="true" aria-controls="iban-payment-details">
|
||||||
|
Реквізити для оплати замовлення переказом IBAN <i class="material-icons me-2">unfold_more</i>
|
||||||
|
</button></h5>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body accordion-collapse collapse {if $paymentMethodName == 'ibanpro'} show {/if}}"
|
||||||
|
id="iban-payment-details">
|
||||||
|
|
||||||
<!-- ============== DYNAMIC CONTENT AREA ============== -->
|
<!-- ============== DYNAMIC CONTENT AREA ============== -->
|
||||||
<!-- This area will be populated by JavaScript based on device -->
|
<!-- This area will be populated by JavaScript based on device -->
|
||||||
@@ -60,7 +64,7 @@
|
|||||||
|
|
||||||
<!-- Separator & Manual Details -->
|
<!-- Separator & Manual Details -->
|
||||||
<div class="d-flex justify-content-center align-items-center py-2 border-bottom">
|
<div class="d-flex justify-content-center align-items-center py-2 border-bottom">
|
||||||
{* <div class="d-flex align-items-center">
|
{* <div class="d-flex align-items-center">
|
||||||
<button id="copy-nbulink" class="d-none">{$NBULink}</button>
|
<button id="copy-nbulink" class="d-none">{$NBULink}</button>
|
||||||
<a class="btn btn-sm btn-outline-secondary me-2" href="{$NBULink}" target="_blank" title="Копіювати">
|
<a class="btn btn-sm btn-outline-secondary me-2" href="{$NBULink}" target="_blank" title="Копіювати">
|
||||||
Посилання НБУ <i class="material-icons">open_in_new</i>
|
Посилання НБУ <i class="material-icons">open_in_new</i>
|
||||||
@@ -140,33 +144,33 @@
|
|||||||
{* --- CSS and JavaScript --- *}
|
{* --- CSS and JavaScript --- *}
|
||||||
<style>
|
<style>
|
||||||
{literal}
|
{literal}
|
||||||
.copy-btn {
|
.copy-btn {
|
||||||
padding: 0.25rem 0.5rem;
|
padding: 0.25rem 0.5rem;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
border: 1px solid #ccc;
|
border: 1px solid #ccc;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-btn .material-icons-outlined {
|
.copy-btn .material-icons-outlined {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.font-monospace {
|
.font-monospace {
|
||||||
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-logo {
|
.bank-logo {
|
||||||
height: 24px;
|
height: 24px;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bank-btn {
|
.bank-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items-center;
|
align-items-center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
padding: 0.75rem;
|
padding: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
{/literal}
|
{/literal}
|
||||||
</style>
|
</style>
|
||||||
@@ -185,139 +189,139 @@
|
|||||||
<!-- Step 2: Main JavaScript logic -->
|
<!-- Step 2: Main JavaScript logic -->
|
||||||
<script>
|
<script>
|
||||||
{literal}
|
{literal}
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
// The `paymentDetails` object is now available here.
|
// The `paymentDetails` object is now available here.
|
||||||
|
|
||||||
// --- OS Detection ---
|
// --- OS Detection ---
|
||||||
function getMobileOS() {
|
function getMobileOS() {
|
||||||
const ua = navigator.userAgent;
|
const ua = navigator.userAgent;
|
||||||
if (/android/i.test(ua)) { return "Android"; }
|
if (/android/i.test(ua)) { return "Android"; }
|
||||||
if (/iPad|iPhone|iPod/.test(ua)) { return "iOS"; }
|
if (/iPad|iPhone|iPod/.test(ua)) { return "iOS"; }
|
||||||
return "Desktop";
|
return "Desktop";
|
||||||
}
|
|
||||||
const userOS = getMobileOS();
|
|
||||||
|
|
||||||
// --- Bank Configuration ---
|
|
||||||
const banks = [{
|
|
||||||
name: "Mono",
|
|
||||||
logo: `<svg class="bank-logo" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="256" cy="256" r="256" fill="black"></circle><path d="M256.001 120.477C182.285 120.477 123.719 179.043 123.719 252.759C123.719 326.475 182.285 385.041 256.001 385.041C329.717 385.041 388.283 326.475 388.283 252.759C388.283 179.043 329.717 120.477 256.001 120.477ZM281.425 291.637C281.425 311.237 266.331 326.331 246.731 326.331H214.243V179.187H246.731C266.331 179.187 281.425 194.281 281.425 213.881V291.637Z" fill="white"></path></svg>`,
|
|
||||||
packageAndroid: "com.ftband.mono",
|
|
||||||
packageIOS: "mono",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Приват24",
|
|
||||||
logo: `<svg class="bank-logo" viewBox="0 0 512 512" fill="#84C634" xmlns="http://www.w3.org/2000/svg"><path d="M473.61,250.68c-12.4-58-47.3-107.1-97.5-139.7c-50.2-32.5-111-40.8-168.3-24.8c-57.3,16-105.4,55.5-135.5,110.1 C42.11,251.08,42,328.68,72.21,383.48c30.2,54.7,88.3,94.2,154.5,103.1c66.2,8.9,132.3-14.7,181.1-61.9 C456.61,429.38,485.91,308.68,473.61,250.68z M256.01,411.78c-85.8,0-155.4-69.6-155.4-155.4s69.6-155.4,155.4-155.4 s155.4,69.6,155.4,155.4C411.31,342.18,341.81,411.78,256.01,411.78z"></path><path d="M256,128.98c-70.1,0-127,56.9-127,127s56.9,127,127,127s127-56.9,127-127S326.1,128.98,256,128.98z M316.4,269.88 c-10,0-17.7-7.6-17.7-17.6v-25.2c0-9.9,7.8-17.6,17.7-17.6h25.4v60.3h-25.4V269.88z M213.3,209.58c9.9,0,17.6,7.8,17.6,17.6v50.3 c0,9.9-7.8,17.6-17.6,17.6h-37.4v-85.5h37.4V209.58z" fill="#FFF"></path></svg>`,
|
|
||||||
packageAndroid: "ua.privatbank.ap24",
|
|
||||||
packageIOS: "https://www.privat24.ua/rd/send_qr/",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Пумб",
|
|
||||||
logo: `<svg class="bank-logo" viewBox="0 0 100 100" fill="#E6443A" xmlns="http://www.w3.org/2000/svg"><path d="M50 0a50 50 0 100 100A50 50 0 0050 0zm0 88a38 38 0 110-76 38 38 0 010 76z" fill="#fff"/><path d="M50 20a30 30 0 100 60 30 30 0 000-60zm-7 42h-6V38h19a12 12 0 110 24h-13z" fill="#fff"/></svg>`,
|
|
||||||
packageAndroid: "com.fuib.android.spot.online",
|
|
||||||
packageIOS: "pumb-online.app",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Sense Bank",
|
|
||||||
logo: `<svg class="bank-logo" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100" fill="#262626"/><path d="M149.33 162.3L100 7.7 50.67 162.3H149.33zM100 37.9L129.8 141.7H70.2L100 37.9z" fill="#fff"/></svg>`,
|
|
||||||
packageAndroid: "ua.alfabank.mobile.android",
|
|
||||||
packageIOS: "ua.alfabank.mobile.ios",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Ukrsibbank",
|
|
||||||
logo: `<svg class="bank-logo" viewBox="0 0 200 200" fill="#1C5B41" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h200v200H0z"/><path d="M100 30L30 100l70 70 70-70-70-70zm0 12l58 58-58 58-58-58 58-58z" fill="#fff"/></svg>`,
|
|
||||||
packageAndroid: "com.ukrsibbank.uso.android",
|
|
||||||
packageIOS: "com.ukrsibbank.ukrsibonline.new",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Креді Агріколь",
|
|
||||||
logo: `<svg class="bank-logo" viewBox="0 0 100 100" fill="#007A33" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 50V0h10v10H10v30h30V10H20V0h20v10h10v30h30V10H60V0h20v10h10v30h10V0h10v50h-10v40H60V50H40v40H10V50H0zm90 40V50h-10v30H60v10h30zm-80 0V50H0v40h30V80H20V60h10v20H10z" fill="#fff"/></svg>`,
|
|
||||||
packageAndroid: "ua.creditagricole.mobile.app",
|
|
||||||
packageIOS: "ua.creditagricole.mobile.app",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "ОТП БАНК",
|
|
||||||
logo: `<svg class="bank-logo" viewBox="0 0 100 100" fill="#4CAF50" xmlns="http://www.w3.org/2000/svg"><path d="M50 0a50 50 0 100 100A50 50 0 0050 0zm0 88a38 38 0 110-76 38 38 0 010 76z" fill="#fff"/><path d="M69 31h-7l-12 24-12-24h-7l19 38 19-38z" fill="#4CAF50"/></svg>`,
|
|
||||||
packageAndroid: "ua.otpbank.android",
|
|
||||||
packageIOS: "otpbankua",
|
|
||||||
}
|
}
|
||||||
];
|
const userOS = getMobileOS();
|
||||||
|
|
||||||
// --- Deep Link Generation ---
|
// --- Bank Configuration ---
|
||||||
function constructBankUrl(bank, baseNbuLink, os) {
|
const banks = [{
|
||||||
if (os === 'iOS') {
|
name: "Mono",
|
||||||
// Privat24 on iOS has a special redirector URL structure
|
logo: `<svg class="bank-logo" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="256" cy="256" r="256" fill="black"></circle><path d="M256.001 120.477C182.285 120.477 123.719 179.043 123.719 252.759C123.719 326.475 182.285 385.041 256.001 385.041C329.717 385.041 388.283 326.475 388.283 252.759C388.283 179.043 329.717 120.477 256.001 120.477ZM281.425 291.637C281.425 311.237 266.331 326.331 246.731 326.331H214.243V179.187H246.731C266.331 179.187 281.425 194.281 281.425 213.881V291.637Z" fill="white"></path></svg>`,
|
||||||
if (bank.name === 'Приват24') {
|
packageAndroid: "com.ftband.mono",
|
||||||
return bank.packageIOS + encodeURIComponent(baseNbuLink);
|
packageIOS: "mono",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Приват24",
|
||||||
|
logo: `<svg class="bank-logo" viewBox="0 0 512 512" fill="#84C634" xmlns="http://www.w3.org/2000/svg"><path d="M473.61,250.68c-12.4-58-47.3-107.1-97.5-139.7c-50.2-32.5-111-40.8-168.3-24.8c-57.3,16-105.4,55.5-135.5,110.1 C42.11,251.08,42,328.68,72.21,383.48c30.2,54.7,88.3,94.2,154.5,103.1c66.2,8.9,132.3-14.7,181.1-61.9 C456.61,429.38,485.91,308.68,473.61,250.68z M256.01,411.78c-85.8,0-155.4-69.6-155.4-155.4s69.6-155.4,155.4-155.4 s155.4,69.6,155.4,155.4C411.31,342.18,341.81,411.78,256.01,411.78z"></path><path d="M256,128.98c-70.1,0-127,56.9-127,127s56.9,127,127,127s127-56.9,127-127S326.1,128.98,256,128.98z M316.4,269.88 c-10,0-17.7-7.6-17.7-17.6v-25.2c0-9.9,7.8-17.6,17.7-17.6h25.4v60.3h-25.4V269.88z M213.3,209.58c9.9,0,17.6,7.8,17.6,17.6v50.3 c0,9.9-7.8,17.6-17.6,17.6h-37.4v-85.5h37.4V209.58z" fill="#FFF"></path></svg>`,
|
||||||
|
packageAndroid: "ua.privatbank.ap24",
|
||||||
|
packageIOS: "https://www.privat24.ua/rd/send_qr/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Пумб",
|
||||||
|
logo: `<svg class="bank-logo" viewBox="0 0 100 100" fill="#E6443A" xmlns="http://www.w3.org/2000/svg"><path d="M50 0a50 50 0 100 100A50 50 0 0050 0zm0 88a38 38 0 110-76 38 38 0 010 76z" fill="#fff"/><path d="M50 20a30 30 0 100 60 30 30 0 000-60zm-7 42h-6V38h19a12 12 0 110 24h-13z" fill="#fff"/></svg>`,
|
||||||
|
packageAndroid: "com.fuib.android.spot.online",
|
||||||
|
packageIOS: "pumb-online.app",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Sense Bank",
|
||||||
|
logo: `<svg class="bank-logo" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100" fill="#262626"/><path d="M149.33 162.3L100 7.7 50.67 162.3H149.33zM100 37.9L129.8 141.7H70.2L100 37.9z" fill="#fff"/></svg>`,
|
||||||
|
packageAndroid: "ua.alfabank.mobile.android",
|
||||||
|
packageIOS: "ua.alfabank.mobile.ios",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Ukrsibbank",
|
||||||
|
logo: `<svg class="bank-logo" viewBox="0 0 200 200" fill="#1C5B41" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h200v200H0z"/><path d="M100 30L30 100l70 70 70-70-70-70zm0 12l58 58-58 58-58-58 58-58z" fill="#fff"/></svg>`,
|
||||||
|
packageAndroid: "com.ukrsibbank.uso.android",
|
||||||
|
packageIOS: "com.ukrsibbank.ukrsibonline.new",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Креді Агріколь",
|
||||||
|
logo: `<svg class="bank-logo" viewBox="0 0 100 100" fill="#007A33" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0 50V0h10v10H10v30h30V10H20V0h20v10h10v30h30V10H60V0h20v10h10v30h10V0h10v50h-10v40H60V50H40v40H10V50H0zm90 40V50h-10v30H60v10h30zm-80 0V50H0v40h30V80H20V60h10v20H10z" fill="#fff"/></svg>`,
|
||||||
|
packageAndroid: "ua.creditagricole.mobile.app",
|
||||||
|
packageIOS: "ua.creditagricole.mobile.app",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ОТП БАНК",
|
||||||
|
logo: `<svg class="bank-logo" viewBox="0 0 100 100" fill="#4CAF50" xmlns="http://www.w3.org/2000/svg"><path d="M50 0a50 50 0 100 100A50 50 0 0050 0zm0 88a38 38 0 110-76 38 38 0 010 76z" fill="#fff"/><path d="M69 31h-7l-12 24-12-24h-7l19 38 19-38z" fill="#4CAF50"/></svg>`,
|
||||||
|
packageAndroid: "ua.otpbank.android",
|
||||||
|
packageIOS: "otpbankua",
|
||||||
}
|
}
|
||||||
// Standard iOS custom scheme structure
|
];
|
||||||
return baseNbuLink.replace("https://", bank.packageIOS + "://");
|
|
||||||
|
// --- Deep Link Generation ---
|
||||||
|
function constructBankUrl(bank, baseNbuLink, os) {
|
||||||
|
if (os === 'iOS') {
|
||||||
|
// Privat24 on iOS has a special redirector URL structure
|
||||||
|
if (bank.name === 'Приват24') {
|
||||||
|
return bank.packageIOS + encodeURIComponent(baseNbuLink);
|
||||||
|
}
|
||||||
|
// Standard iOS custom scheme structure
|
||||||
|
return baseNbuLink.replace("https://", bank.packageIOS + "://");
|
||||||
|
}
|
||||||
|
if (os === 'Android') {
|
||||||
|
// Standard Android Intent structure
|
||||||
|
return baseNbuLink.replace("https://", "intent://") + `#Intent;scheme=https;package=${bank.packageAndroid};end`;
|
||||||
|
}
|
||||||
|
return baseNbuLink; // Fallback for desktop
|
||||||
}
|
}
|
||||||
if (os === 'Android') {
|
|
||||||
// Standard Android Intent structure
|
|
||||||
return baseNbuLink.replace("https://", "intent://") + `#Intent;scheme=https;package=${bank.packageAndroid};end`;
|
|
||||||
}
|
|
||||||
return baseNbuLink; // Fallback for desktop
|
|
||||||
}
|
|
||||||
|
|
||||||
// --- Render UI ---
|
// --- Render UI ---
|
||||||
// First, construct the standard NBU payment link. This is the base for all deep links.
|
// First, construct the standard NBU payment link. This is the base for all deep links.
|
||||||
const nbuBaseUrl = "https://bank.gov.ua/ua/iban-qr";
|
const nbuBaseUrl = "https://bank.gov.ua/ua/iban-qr";
|
||||||
const nbuParams = new URLSearchParams({
|
const nbuParams = new URLSearchParams({
|
||||||
iban: paymentDetails.iban,
|
iban: paymentDetails.iban,
|
||||||
amount: paymentDetails.amount, // NBU uses base units, e.g., 1500.00
|
amount: paymentDetails.amount, // NBU uses base units, e.g., 1500.00
|
||||||
purpose: paymentDetails.description,
|
purpose: paymentDetails.description,
|
||||||
});
|
});
|
||||||
const nbuLink = `${nbuBaseUrl}?${nbuParams.toString()}`;
|
const nbuLink = `${nbuBaseUrl}?${nbuParams.toString()}`;
|
||||||
|
|
||||||
// Get containers
|
// Get containers
|
||||||
const mobileLinksContainer = document.getElementById('mobile-bank-links-container');
|
const mobileLinksContainer = document.getElementById('mobile-bank-links-container');
|
||||||
const desktopLinksContainer = document.getElementById('desktop-bank-links-container');
|
const desktopLinksContainer = document.getElementById('desktop-bank-links-container');
|
||||||
|
|
||||||
if (userOS === "iOS" || userOS === "Android") {
|
if (userOS === "iOS" || userOS === "Android") {
|
||||||
let mobileHtml = '';
|
let mobileHtml = '';
|
||||||
banks.forEach(bank => {
|
banks.forEach(bank => {
|
||||||
const bankUrl = constructBankUrl(bank, nbuLink, userOS);
|
const bankUrl = constructBankUrl(bank, nbuLink, userOS);
|
||||||
mobileHtml += `
|
mobileHtml += `
|
||||||
<a href="${bankUrl}" class="btn btn-outline-primary bank-btn" role="button">
|
<a href="${bankUrl}" class="btn btn-outline-primary bank-btn" role="button">
|
||||||
${bank.logo}
|
${bank.logo}
|
||||||
<span>${bank.name}</span>
|
<span>${bank.name}</span>
|
||||||
</a>
|
</a>
|
||||||
`;
|
`;
|
||||||
});
|
});
|
||||||
mobileLinksContainer.innerHTML = mobileHtml;
|
mobileLinksContainer.innerHTML = mobileHtml;
|
||||||
} else { // Desktop
|
} else { // Desktop
|
||||||
let desktopHtml = '<ul class="list-group list-group-flush">';
|
let desktopHtml = '<ul class="list-group list-group-flush">';
|
||||||
banks.forEach(bank => {
|
banks.forEach(bank => {
|
||||||
desktopHtml += `
|
desktopHtml += `
|
||||||
<li class="list-group-item d-flex align-items-center">
|
<li class="list-group-item d-flex align-items-center">
|
||||||
${bank.logo}
|
${bank.logo}
|
||||||
<span>${bank.name}</span>
|
<span>${bank.name}</span>
|
||||||
</li>
|
</li>
|
||||||
`;
|
`;
|
||||||
});
|
});
|
||||||
desktopHtml += '</ul>';
|
desktopHtml += '</ul>';
|
||||||
// desktopLinksContainer.innerHTML = desktopHtml;
|
// desktopLinksContainer.innerHTML = desktopHtml;
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Copy-to-Clipboard functionality ---
|
// --- Copy-to-Clipboard functionality ---
|
||||||
const copyButtons = document.querySelectorAll('.copy-btn');
|
const copyButtons = document.querySelectorAll('.copy-btn');
|
||||||
copyButtons.forEach(button => {
|
copyButtons.forEach(button => {
|
||||||
button.addEventListener('click', () => {
|
button.addEventListener('click', () => {
|
||||||
const targetId = button.getAttribute('data-copy-target');
|
const targetId = button.getAttribute('data-copy-target');
|
||||||
const textToCopy = document.getElementById(targetId).innerText;
|
const textToCopy = document.getElementById(targetId).innerText;
|
||||||
navigator.clipboard.writeText(textToCopy).then(() => {
|
navigator.clipboard.writeText(textToCopy).then(() => {
|
||||||
const originalIcon = button.innerHTML;
|
const originalIcon = button.innerHTML;
|
||||||
button.innerHTML = '<i class="material-icons">check</i>';
|
button.innerHTML = '<i class="material-icons">check</i>';
|
||||||
button.classList.add('btn-success');
|
button.classList.add('btn-success');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
button.innerHTML = originalIcon;
|
button.innerHTML = originalIcon;
|
||||||
button.classList.remove('btn-success');
|
button.classList.remove('btn-success');
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.error('Failed to copy: ', err);
|
console.error('Failed to copy: ', err);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
|
||||||
{/literal}
|
{/literal}
|
||||||
</script>
|
</script>
|
||||||
Reference in New Issue
Block a user