HSBC test (id-id)
unknown
plain_text
2 years ago
25 kB
5
Indexable
(function () {
if (!document.querySelector(".eg-test-activated"))
try {
var debug = 0;
var variation_name = "";
var path = "id-id";
var testData = {
heroCardsData: [{
"href": 'https://www.business.hsbc.co.id/' + path + '/solutions/open-account',
"src": 'https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/remote-working.jpg?h=982&iar=0&w=1010&hash=7F1883B5E12CE3E3B5B740A4CA912847',
"title": 'Pembiayaan Berkelanjutan',
"para": 'Business Banking selalu siap memberikan layanan dan dukungan yang luas untuk mengembangkan bisnis Anda lebih jauh'
},
{
"href": 'https://www.business.hsbc.co.id/' + path + '/solutions/our-digital-solutions',
"src": "https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/digital-solutions.jpg?h=982&iar=0&w=1010&hash=41723D9503FAB5DE18317BFD2696681E",
"title": 'Business Banking HSBC',
"para": 'Selangkah lebih maju bersama kami'
},
{
"href": 'https://www.business.hsbc.co.id/' + path + '/solutions/hsbcnet',
"src": 'https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/graphs.jpg?h=982&iar=0&w=1010&hash=197F53E840AB85D4A8D0DB498CC42B0E',
"title": 'HSBCnet',
"para": 'Melakukan semua transaksi dalam satu platform akan mempermudah kinerja sehingga Anda dapat lebih fokus pada kemajuan bisnis'
}
],
tilesContent: [
{
"title": "Forfaiting",
"linkText": "Lebih lanjut",
"link": 'https://www.business.hsbc.co.id/' + path + '/solutions/forfaiting',
"para": "Melindungi dan membiayai perdagangan setelah pengapalan dengan layanan forfaiting yang dapat membiayai sekaligus mengelola risiko",
"img": "https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/landscapes-cargo-ship.jpg?h=982&iar=0&w=1010&hash=06AD0C9E10F82FA349499774A3133C5A"
},
{
"title": "Pembiayaan perdagangan",
"linkText": "Lebih lanjut",
"link": 'https://www.business.hsbc.co.id/' + path + '/solutions/hsbc-trade-finance',
"para": "Manfaatkan jaringan internasional HSBC untuk melakukan bisnis di seluruh dunia",
"img": "https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/bank-sme-mme.jpg?h=982&iar=0&w=1010&hash=09D13B2CBFB2B8B8870625C394016B1F"
},
{
"title": "HSBC Evolve",
"linkText": "Lebih lanjut",
"link": 'https://www.business.hsbc.co.id/' + path + '/solutions/hsbc-evolve',
"para": "Cara lebih cerdas dalam melakukan trading. Proses jual beli mata uang asing yang sepenuhnya terintegrasi dan dapat disesuaikan dengan kebutuhan Anda , dari sebelum hingga setelah proses trading.",
"img": "https://www.business.hsbc.co.id/-/jssmedia/media/indonesia/images/solutions/building-shadows.jpg?h=982&iar=0&w=1010&hash=998370B2D422E72CDBC0E789D8CD117B"
}
],
heroHeadingText: "Explore our range of Business Banking solutions",
copyObject: {
'id-id': {
"TabTitle": "Useful Links",
"TabListItem1": "Internet Banking",
"TabListItem2": "Tetap terhubung dengan Kami",
"TabListItem3": "Pusat Pengunduhan",
"TabListItem4": "Regulasi : infomasi penting",
"InternetBankingTitle": "Masuk ke Internet Banking Bisnis",
"InternetBankingDropDownItem1": "HSBCnet",
"InternetBankingDropDownItem2": "HSBC SmartServe",
"InternetBankingDropDownBtn": "Masuk",
"InternetBankingFooterText": "Belum memiliki akun? Daftar untuk internet banking <span class='eg_inline'>bisnis sekarang</span>",
"InternetBankingFooterTextLink": "/solutions/hsbcnet",
"InternetBankingImg": "/-/jssmedia/media/illustrations/hsbc-illustrations.jpg?h=720&iar=0&w=1280&hash=4E3E64B31417E96F93738379AF48A402",
"GetContactTitle": "Tetap terhubung dengan Kami",
"GetContactSubTitle": "Jika Anda nasabah baru maupun eksisting, kami selalu siap membantu. Hubungi kami dengan pertanyaan Anda hari ini.",
"GetContactCtaText": "Hubungi kami",
"GetContactCtaTextLink": "/id-id/contact-us",
"GetContactImg": "/-/jssmedia/media/illustrations/hsbc_future-skills_illustration_personal-skills.jpg?h=1080&iar=0&w=1920&hash=6C0F91971D05C7BA64162FAF531B24A9",
"DownloadCentreTitle": "Kunjungi Pusat Pengunduhan Kami",
"DownloadCentreSubTitle": "Unduh formulir terkait transaksi dan PDF informasi penting dari Pusat Unduhan kami.",
"DownloadCentreCtaText": "Lebih lanjut",
"DownloadCentreCtaTextLink": "/id-id/download-center",
"DownloadCentreImg": "/-/jssmedia/media/illustrations/hsbc-dart-omni-collect-tab-image-v2.jpg?h=720&iar=0&w=1280&hash=AF361E169F38EE757289A9151A4425CD",
"RegulationTitle": "Baca mengenai informasi penting",
"RegulationSubTitle": "Cari tahu lebih lanjut mengenai jadwal jam operasional operasional bank saat hari libur, regulasi baru dan yang lainnya.",
"RegulationCtaText": "Lebih lanjut",
"RegulationCtaTextLink": "/id-id/regulations/important-information",
"RegulationImg": "/-/jssmedia/media/illustrations/hsbc-dart-omni-collect-tab-image-v2.jpg?h=720&iar=0&w=1280&hash=AF361E169F38EE757289A9151A4425CD",
}
},
svgIcon: `<svg font-size="m" class="SvgIcon" size="28" focusable="false" viewBox="0 0 18 18" color="#333" aria-hidden="true" role="presentation" data-testid="ProductsAndServicesIcon" data-id="Icon" opacity="1" fill="000"><path fill="none" d="M0 0h18v18H0z" opacity=".25"></path><path d="M14.2 0H6v5.8h1.2V1.2H13V5h3.8v7.8h-.6V14H18V3.8L14.2 0zm0 3.8V1.697L16.303 3.8H14.2zM13.5 7h-12C.675 7 0 7.675 0 8.5v8c0 .825.675 1.5 1.5 1.5h12c.825 0 1.5-.675 1.5-1.5v-8c0-.825-.675-1.5-1.5-1.5zm.3 9.5c0 .163-.137.3-.3.3h-12c-.163 0-.3-.137-.3-.3v-5.3h12.6v5.3zm0-6.5H1.2V8.5c0-.163.137-.3.3-.3h12c.163 0 .3.137.3.3V10zM12 12.8H9V14h3v-1.2z"></path></svg>`,
arrowIcon: `<svg font-size="m" class="SvgIcon" focusable="false" viewBox="0 0 18 18" color="#333" aria-hidden="true" role="presentation" data-testid="ChevronUpIcon" data-id="Icon" opacity="1" fill="#333"><path d="M1 13.804l8-7.998 8 7.998v-1.696l-8-8-8 8z"></path><path fill="none" d="M0 0h18v18H0z"></path></svg>`
}
function waitForElement(selector, trigger, delayInterval, delayTimeout) {
var interval = setInterval(function () {
if (
document &&
document.querySelector(selector) &&
document.querySelectorAll(selector).length > 0
) {
clearInterval(interval);
trigger();
}
}, delayInterval);
setTimeout(function () {
clearInterval(interval);
}, delayTimeout);
}
function live(selector, event, callback, context) {
function addEvent(el, type, handler) {
if (el.attachEvent) el.attachEvent("on" + type, handler);
else el.addEventListener(type, handler);
}
this.Element &&
(function (ElementPrototype) {
ElementPrototype.matches =
ElementPrototype.matches ||
ElementPrototype.matchesSelector ||
ElementPrototype.webkitMatchesSelector ||
ElementPrototype.msMatchesSelector ||
function (selector) {
var node = this,
nodes = (node.parentNode || node.document).querySelectorAll(selector),
i = -1;
while (nodes[++i] && nodes[i] != node);
return !!nodes[i];
};
})(Element.prototype);
function live(selector, event, callback, context) {
addEvent(context || document, event, function (e) {
var found,
el = e.target || e.srcElement;
while (el && el.matches && el !== context && !(found = el.matches(selector))) el = el.parentElement;
if (el && found) callback.call(el, e);
});
}
live(selector, event, callback, context);
}
/*
====== HERO CARDS DATA UPDATING - START ======
*/
function initDes() {
document.body.classList.add("eg-test-activated");
const egCard1 = document.querySelector("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(1)");
const egCard2 = document.querySelector("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(2)");
const egCard3 = document.querySelector("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(3)");
const heroHeading = document.querySelector('html body [class^="collections-hero__heading"]');
heroHeading.innerText = testData.heroHeadingText;
if (document.querySelector("html body div[class*='collections-hero__filter--desktop'] div[role='radiogroup'] > button:nth-child(1):disabled")) {
// changing card data
[egCard1, egCard2, egCard3].forEach((card, i) => {
card.querySelector("a[class*='collection-card__link']").href = testData.heroCardsData[i].href;
card.querySelector("img[class*='collection-card__image']").src = testData.heroCardsData[i].src;
if (testData.heroCardsData[i].title !== "") {
let egTitle = card.querySelector("h3[class*='collection-card__title']");
egTitle.childNodes[0].textContent = testData.heroCardsData[i].title;
}
if (testData.heroCardsData[i].para !== "") {
if (card.querySelector("p[class*='collection-card__description']")) {
card.querySelector("p[class*='collection-card__description']").innerHTML = testData.heroCardsData[i].para + "<span style='display:none;' class='eg-card'></span>";
} else {
if (!card.querySelector(".eg-para")) {
card.querySelector("h3[class*='collection-card__title']").insertAdjacentHTML("afterend", `<p class="eg-para">${testData.heroCardsData[i].para}<span style='display:none;' class='eg-card'></span></p>`);
}
}
}
});
}
// removing para if exists
live("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(1) button[class*='collection-card__dismiss-control']", 'click', function () {
if (egCard1.querySelector(".eg-para")) {
egCard1.querySelector(".eg-para").remove();
}
});
live("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(2) button[class*='collection-card__dismiss-control']", 'click', function () {
if (egCard2.querySelector(".eg-para")) {
egCard2.querySelector(".eg-para").remove();
}
});
live("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(3) button[class*='collection-card__dismiss-control']", 'click', function () {
if (egCard3.querySelector(".eg-para")) {
egCard3.querySelector(".eg-para").remove();
}
});
live("html body div[class*='collections-hero__filter--desktop'] div[role='radiogroup'] > button:nth-child(n + 2)", 'click', function () {
document.querySelectorAll(".eg-para").forEach(el => el.remove());
});
// calling init if it is first filter
live("html body div[class*='collections-hero__filter--desktop'] div[role='radiogroup'] > button:nth-child(1)", "click", function () {
waitForElement("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(3) h3[class*='collection-card__title']", initDes, 150, 15000);
});
}
function initMob(cardNum = 0) {
document.body.classList.add("eg-test-activated");
let card;
card = document.querySelector("html body div[class*='collections-hero__cards--mobile'] div[class*='collection-cards__card']:nth-child(1)");
let checked = document.querySelector('html body div[class*="collections-hero__filter--mobile"] div[class*="focus_dropdown"] select option:checked').innerText.trim();
if (checked.indexOf('Select All') != -1) {
// changing card data
card.querySelector("a[class*='collection-card__link']").href = testData.heroCardsData[cardNum].href;
card.querySelector("img[class*='collection-card__image']").src = testData.heroCardsData[cardNum].src;
if (testData.heroCardsData[cardNum].title !== "") {
let egTitle = card.querySelector("h3[class*='collection-card__title']");
egTitle.childNodes[0].textContent = testData.heroCardsData[cardNum].title;
}
if (testData.heroCardsData[cardNum].para !== "") {
if (card.querySelector("p[class*='collection-card__description']")) {
card.querySelector("p[class*='collection-card__description']").innerHTML = testData.heroCardsData[cardNum].para + "<span style='display:none;' class='eg-card'></span>";
} else {
if (!card.querySelector(".eg-para")) {
card.querySelector("h3[class*='collection-card__title']").insertAdjacentHTML("afterend", `<p class="eg-para">${testData.heroCardsData[cardNum].para}<span style='display:none;' class='eg-card'></span></p>`);
}
}
}
}
// removing para if exists
live("html body div[class*='collections-hero__cards--mobile'] div[class*='collection-cards__card']:nth-child(1) button[class*='collection-card__dismiss-control']", 'click', function () {
if (card.querySelector(".eg-para")) {
card.querySelector(".eg-para").remove();
}
});
// cheking for first select option
live('html body div[class*="collections-hero__filter--mobile"] div[class*="focus_dropdown"] select', "click", function () {
let checked = document.querySelector('html body div[class*="collections-hero__filter--mobile"] div[class*="focus_dropdown"] select option:checked').innerText.trim();
let cardpos = parseInt(document.querySelector('div[class*="collections-hero__index-indicator"] > span').innerText);
if ((checked.indexOf('Select All') != -1) &&
(cardpos == 1)) {
initMob();
} else {
document.querySelectorAll(".eg-para").forEach(ele => ele.remove());
}
});
}
function checkCardNumber() {
waitForElement('div[class*="collections-hero__index-indicator"] > span', function () {
const element = document.querySelector('div[class*="collections-hero__index-indicator"] > span');
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
let num = parseInt(mutation.target.textContent.trim()) - 1;
setTimeout(() => {
if (num < 1) {
initMob(0);
}
}, 100);
});
});
const config = { characterData: true, subtree: true };
observer.observe(element, config);
}, 50, 15000);
}
if (window.innerWidth > 767) {
waitForElement("html body div[class*='collections-hero__cards--desktop'] div[class*='collection-cards__card']:nth-child(3) h3[class*='collection-card__title']", initDes, 1000, 15000);
} else if (window.innerWidth < 768) {
waitForElement("html body div[class*='collections-hero__cards--mobile'] div[class*='collection-cards__card']:nth-child(1) h3[class*='collection-card__title']", initMob, 1000, 15000);
checkCardNumber();
}
/*
====== HERO CARDS DATA UPDATING - END ======
*/
/*
===== TILES CONTENT UPDATE =====
*/
function updateTilesContent() {
[...document.querySelectorAll('html body [class^="home__content"] [class^="carousel__item-container"] [class^="carousel__item"]:nth-child(-n+3)')].forEach((card, index) => {
const data = testData.tilesContent[index];
if (card) {
// updating title
const titleEl = card.querySelector('[class^="category-card__title"]');
titleEl.innerText = data.title;
// updating link
const linkEl = card.querySelector('a[class^="category-card"]');
linkEl.setAttribute("href", data.link);
card.querySelector('[class^="category-card__cta"]').childNodes[0].textContent = data.linkText;
// updating hover para
card.addEventListener("mouseover", function () {
const paraEl = this.querySelector('[class^="category-card__description"]');
if (paraEl) paraEl.innerText = data.para;
});
// updating image
const imgEl = card.querySelector('[class^="category-card__background"]');
imgEl.setAttribute("src", data.img);
}
});
}
waitForElement('html body [class^="home__content"] [class^="carousel__item-container"] [class^="carousel__item"]:nth-child(3)', updateTilesContent, 1000, 15000);
/*
===== TILES CONTENT UPDATE =====
*/
/*
===== NEW TABLE ======
*/
var copyObject = testData.copyObject;
function getCopy(language, copyObject) {
if (language in copyObject) {
return copyObject[language];
}
}
var copy = getCopy(path, copyObject);
var eg_useful_links =
`<div class="eg_useful_link">
<div class="eg_tab_container">
<h2 class="eg_title">${copy.TabTitle}</h2>
<div class="eg_dropdown_list">
<div class="eg_dropdown_container">
<button>
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.TabListItem1}</div>
</div>
</span>
<div class="eg_down_icon">
${testData.arrowIcon}
</div>
</button>
<ul class="eg_dropdown_list_box">
<li class="eg_selected" data-id="eg_internet_banking">
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.TabListItem1}</div>
</div>
</span>
</li>
<li data-id="eg_get_contact">
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.TabListItem2}</div>
</div>
</span>
</li>
<li data-id="eg_download_centre">
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.TabListItem3}</div>
</div>
</span>
</li>
<li data-id="eg_regulation">
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.TabListItem4}</div>
</div>
</span>
</li>
</ul>
</div>
</div>
<div class="eg_tab_list">
<button class="eg_selected" data-id="eg_internet_banking">
<div class="eg_icon">
${testData.svgIcon}
</div>
<h3>${copy.TabListItem1}</h3>
</button>
<button data-id="eg_get_contact">
<div class="eg_icon">
${testData.svgIcon}
</div>
<h3>${copy.TabListItem2}</h3>
</button>
<button data-id="eg_download_centre">
<div class="eg_icon">
${testData.svgIcon}
</div>
<h3>${copy.TabListItem3}</h3>
</button>
<button data-id="eg_regulation">
<div class="eg_icon">
${testData.svgIcon}
</div>
<h3>${copy.TabListItem4}</h3>
</button>
</div>
</div>
<div class="eg_tab_content_container">
<div class="eg_tab_panel eg_internet_banking eg_active">
<div class="eg_content_info">
<h3>${copy.InternetBankingTitle}</h3>
<div class="eg_dropdown_list">
<div class="eg_dropdown_container">
<button>
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.InternetBankingDropDownItem1}</div>
</div>
</span>
<div class="eg_down_icon">
${testData.arrowIcon}
</div>
</button>
<ul class="eg_dropdown_list_box">
<li class="eg_selected">
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.InternetBankingDropDownItem1}</div>
</div>
</span>
</li>
<li>
<span>
<div class="eg_dropdown_item">
<div class="eg_dropdown_svg">
${testData.svgIcon}
</div>
<div class="eg_dropdown_label">${copy.InternetBankingDropDownItem2}</div>
</div>
</span>
</li>
</ul>
</div>
<div class="eg_go_btn">
${copy.InternetBankingDropDownBtn}
</div>
</div>
<div class="eg_footer_link">
<a href="${copy.InternetBankingFooterTextLink}">
${copy.InternetBankingFooterText}
<span class="eg_down_icon">${testData.arrowIcon}</span>
</a>
</div>
</div>
<div class="eg_content_image">
<img alt=" " width="1280" height="720" title=" " src="${copy.InternetBankingImg}">
</div>
</div>
<div class="eg_tab_panel eg_get_contact">
<div class="eg_content_info">
<h3>${copy.GetContactTitle}</h3>
<span class="eg_sub_heading">${copy.GetContactSubTitle}</span>
<a class="eg_tab_panel_btn" href="${copy.GetContactCtaTextLink}">
<span>
<span aria-hidden="true">${copy.GetContactCtaText}</span>
</span>
</a>
</div>
<div class="eg_content_image">
<img alt=" " width="1280" height="720" title=" " src="${copy.GetContactImg}">
</div>
</div>
<div class="eg_tab_panel eg_download_centre">
<div class="eg_content_info">
<h3>${copy.DownloadCentreTitle}</h3>
<span class="eg_sub_heading">${copy.DownloadCentreSubTitle}</span>
<a class="eg_tab_panel_btn" href="${copy.DownloadCentreCtaTextLink}">
<span>
<span aria-hidden="true">${copy.DownloadCentreCtaText}</span>
</span>
</a>
</div>
<div class="eg_content_image">
<img alt=" " width="1280" height="720" title=" " src="${copy.DownloadCentreImg}">
</div>
</div>
<div class="eg_tab_panel eg_regulation">
<div class="eg_content_info">
<h3>${copy.RegulationTitle}</h3>
<span class="eg_sub_heading">${copy.RegulationSubTitle}</span>
<a class="eg_tab_panel_btn" href="${copy.RegulationCtaTextLink}">
<span>
<span aria-hidden="true">${copy.RegulationCtaText}</span>
</span>
</a>
</div>
<div class="eg_content_image">
<img alt=" " width="1280" height="720" title=" " src="${copy.RegulationImg}">
</div>
</div>
</div>
</div>`;
function initChangeTable() {
document.querySelector('#main > [class^="resources-and-inspiration"]').insertAdjacentHTML('beforebegin', eg_useful_links);
// toggle between tabs
live('.eg_tab_list button, .eg_tab_container .eg_dropdown_list li', 'click', function () {
var tab_list_btn = document.querySelector('.eg_tab_list button.eg_selected');
var tab_list = document.querySelector('.eg_tab_container .eg_dropdown_list li.eg_selected');
tab_list_btn && tab_list_btn.classList.remove('eg_selected');
tab_list && tab_list.classList.remove('eg_selected');
this.classList.add('eg_selected');
var getDataId = this.getAttribute('data-id');
document.querySelector('.eg_tab_panel.eg_active').classList.remove('eg_active');
document.querySelector('.eg_tab_panel.' + getDataId).classList.add('eg_active');
})
internetBankingEvents();
}
function internetBankingEvents() {
live('.eg_dropdown_list button', 'click', function () {
var get_parent = this.closest('.eg_dropdown_list');
get_parent.classList.toggle('eg_active');
})
live('.eg_dropdown_list .eg_dropdown_list_box li', 'click', function () {
var get_parent = this.closest('.eg_dropdown_list');
var getValue = this.querySelector('.eg_dropdown_label').innerText;
get_parent.querySelector('.eg_selected').classList.remove('eg_selected')
this.classList.add('eg_selected');
get_parent.classList.remove('eg_active');
get_parent.querySelector('.eg_dropdown_label').innerText = getValue;
})
live('.eg_dropdown_list .eg_go_btn', 'click', function () {
var selectedValue = document.querySelector('.eg_tab_content_container .eg_dropdown_container>button .eg_dropdown_label').innerText;
var redirectUrls = {
"HSBCnet": "https://www.secure.hsbcnet.com/",
"HSBC SmartServe": "https://smartserve.hsbc/dbs-auth-ui/auth/#/"
};
if (redirectUrls.hasOwnProperty(selectedValue)) {
window.location.href = redirectUrls[selectedValue];
}
})
}
waitForElement('#main > [class^="resources-and-inspiration"]', initChangeTable, 1000, 15000);
/*
==== NEW TABLE END ===
*/
} catch (e) {
if (debug) console.log(e, "error in Test" + variation_name);
}
})();Editor is loading...