Impex Trust Bar
Impex is a Global Consumer Appliances Brand
50 Million+
Happy Families
`
// kwikpass icon for mobile - if user is not logged in
const KwikpassNotLoggedIconMobile = ``
// dropdown for desktop (opens on clicking kwikpass icon if user logged in)
const drawerhtmlDesktop = `
`;
// dropdown for mobile (opens on clicking kwikpass icon if user logged in)
const drawerhtmlMobile = `
`;
const kwikpassLoggedInIcon = `
`;
const kwikpassLoggedInIconMobile = `
`;
// It will change based on theme - Desktop
const profileButtonElement = document.querySelector('.account-button.header-actions__action')
const personIconElement = profileButtonElement?.parentElement
const html = `
${KwikpassNotLoggedIcon}
${kwikpassLoggedInIcon}
${drawerhtmlDesktop}
`;
if(!document.getElementsByClassName("header--icon")?.[0]){
// Detect theme
const isOldTheme = document.querySelector('.account-popover') !== null;
const kwipassDesktopNode = document.createElement('div')
// Add theme-specific class
kwipassDesktopNode.className = isOldTheme ? "header--icon kp-old-theme" : "header--icon kp-new-theme"
kwipassDesktopNode.innerHTML = html
// Hide original and insert Kwikpass button (works for both themes)
if(personIconElement && profileButtonElement) {
profileButtonElement.style.display = 'none';
personIconElement.insertBefore(kwipassDesktopNode, profileButtonElement);
}
}
//mobile - Get the second instance of account button
const allAccountButtons = document.querySelectorAll('.account-button.header-actions__action')
const profileButtonElementMbl = allAccountButtons[1] // Second instance (mobile)
const personIconElementMbl = profileButtonElementMbl?.parentElement
const htmlmobile = `
${KwikpassNotLoggedIconMobile}
${kwikpassLoggedInIconMobile}
${drawerhtmlMobile}
`;
if(!document.getElementsByClassName("header--icon--mobile")?.[0]){
// Detect theme
const isOldThemeMobile = document.querySelector('.account-drawer') !== null;
const kwipassMobileNode = document.createElement('div')
// Add theme-specific class
kwipassMobileNode.className = isOldThemeMobile ? "header--icon--mobile kp-old-theme" : "header--icon--mobile kp-new-theme"
kwipassMobileNode.innerHTML = htmlmobile
// Hide original and insert Kwikpass button (works for both themes)
if(personIconElementMbl && profileButtonElementMbl) {
profileButtonElementMbl.style.display = 'none';
personIconElementMbl.insertBefore(kwipassMobileNode, profileButtonElementMbl);
}
}
}
function addLoginButtonForHorizon(){
function updateDOM(isKwikpassLogin = true) {
token = getValueFromCookiesOrLocalStorage(XGokwikCoreToken(window.merchantInfo.environment));
const isLogout = sessionStorage.getItem('isLogout');
const phoneNumber = getValueFromCookiesOrLocalStorage('notify_phone_number');
if ((!token && !isLogout) || (token && !phoneNumber)) {
openIframe('kp_sso_token')
}
const drawerElementMobile = document.getElementById("kwikpass-drawer-mobile")
if(drawerElementMobile){
if(token){
document.getElementById("kp-login-button-header-logo-mobile").style.display = "none"
document.getElementById("loggedin-icons-mobile").style.display = "block"
}else{
document.getElementById("kp-login-button-header-logo-mobile").style.display = "flex"
document.getElementById("loggedin-icons-mobile").style.display = "none"
drawerElementMobile.style.display = "none"
}
}
const drawerElement = document.getElementById("kwikpass-drawer-desktop")
if(drawerElement){
if(token){
document.getElementById("kp-login-button-header-logo").style.display = "none"
document.getElementById("loggedin-icons").style.display = "block"
}else{
document.getElementById("kp-login-button-header-logo").style.display = "flex"
document.getElementById("loggedin-icons").style.display = "none"
drawerElement.style.display = "none"
}
}
// shopify logout
const logoutLink = document.querySelectorAll('a[href*="/account/logout"]');
logoutLink.forEach((element) => {
element.addEventListener("click", (event) => {
event.preventDefault()
handleLogout()
})
});
const logoutElement = document.getElementById('logout-button-desktop')
if(logoutElement) logoutElement.addEventListener('click', handleLogout);
//mobile
const logoutElementMobile = document.getElementById('logout-button-mobile')
if(logoutElementMobile) logoutElementMobile.addEventListener('click', handleLogout);
}
let isElementsWithAccountClickable = true;
// Add a click event listener to the document
document.addEventListener('click', function(event) {
const dropdownButton = document.getElementsByClassName('header--icon') ?. [0]
// Check if the clicked element is the dropdown button or inside the dropdown menu
const isClickInsideDropdown = dropdownButton?.contains(event.target);
// If the click is outside the dropdown, hide the dropdown
const kwikpassLoggedInElement = document.getElementById("icon-kwikpass");
const crossIconElement = document.getElementById("icon-close-kwikpass")
const drawerElement = document.getElementById("kwikpass-drawer-desktop")
if (! isClickInsideDropdown && isDropdownVisible && token) {
drawerElement.style.display = "none";
crossIconElement.style.display = "none";
kwikpassLoggedInElement.style.display = "flex";
isDropdownVisible = ! isDropdownVisible;
}
//mobile
const dropdownButtonMbl = document.getElementsByClassName('header--icon--mobile')?.[0]
// Check if the clicked element is the dropdown button or inside the dropdown menu
const isClickInsideDropdownMbl = dropdownButtonMbl?.contains(event.target);
// If the click is outside the dropdown, hide the dropdown
const kwikpassLoggedInElementMbl = document.getElementById("icon-kwikpass-mobile");
const crossIconElementMbl = document.getElementById("icon-close-kwikpass-mobile")
const drawerElementMbl = document.getElementById("kwikpass-drawer-mobile")
if (! isClickInsideDropdownMbl && isDropdownMobileVisible && token) {
drawerElementMbl.style.display = "none";
crossIconElementMbl.style.display = "none";
kwikpassLoggedInElementMbl.style.display = "flex";
isDropdownMobileVisible = !isDropdownMobileVisible;
}
});
document.addEventListener('DOMContentLoaded', function() {
updateDOM();
});
window.addEventListener('update-dom', function() {
const kwikpassLoggedInElement = document.getElementById("icon-kwikpass");
const crossIconElement = document.getElementById("icon-close-kwikpass")
const drawerElement = document.getElementById("kwikpass-drawer-desktop")
if(drawerElement) drawerElement.style.display = "none";
if(crossIconElement) crossIconElement.style.display="none";
if(kwikpassLoggedInElement) kwikpassLoggedInElement.style.display="flex";
const kwikpassLoggedInElementMbl = document.getElementById("icon-kwikpass-mobile");
const crossIconElementMbl = document.getElementById("icon-close-kwikpass-mobile")
const drawerElementMbl = document.getElementById("kwikpass-drawer-mobile")
if(drawerElementMbl) drawerElementMbl.style.display = "none";
if(crossIconElementMbl) crossIconElementMbl.style.display="none";
if(kwikpassLoggedInElementMbl) kwikpassLoggedInElementMbl.style.display="flex";
updateDOM();
});
addProfileIconInHorizon()
updateDOM();
}
function handleDrawer1() {
const token = getValueFromCookiesOrLocalStorage(XGokwikCoreToken(window.merchantInfo.environment));
if (token) {
const kwikpassLoggedInElement = document.getElementById("icon-kwikpass");
const crossIconElement = document.getElementById("icon-close-kwikpass");
const drawerElement = document.getElementById("kwikpass-drawer-desktop");
// display cross icon and hide icon-kwikpass if isDropdownVisible = true else display icon-kwikpass and hide cross icon
if(isDropdownVisible){
drawerElement.style.display = "none";
crossIconElement.style.display="none";
kwikpassLoggedInElement.style.display="flex";
}else{
drawerElement.style.display = "block";
crossIconElement.style.display="flex";
kwikpassLoggedInElement.style.display="none";
}
isDropdownVisible = !isDropdownVisible;
}
}
function addLoginButton(){
function updateDOM() {
token = getValueFromCookiesOrLocalStorage(XGokwikCoreToken(window.merchantInfo.environment));
const isLogout = sessionStorage.getItem('isLogout');
const phoneNumber = getValueFromCookiesOrLocalStorage('notify_phone_number');
if ((!token && !isLogout) || (token && !phoneNumber)) {
openIframe('kp_sso_token')
}
const drawerElement = document.getElementById("kwikpass-drawer-desktop")
if(drawerElement){
if(token){
document.getElementById("kp-login-button-header-logo").style.display = "none"
document.getElementById("loggedin-icons").style.display = "block"
}else{
document.getElementById("kp-login-button-header-logo").style.display = "flex"
document.getElementById("loggedin-icons").style.display = "none"
drawerElement.style.display = "none"
}
}
// shopify logout
const logoutLink = document.querySelectorAll('a[href*="/account/logout"]');
logoutLink.forEach((element) => {
element.addEventListener("click", (event) => {
event.preventDefault()
handleLogout()
})
});
const logoutElement = document.getElementById('logout-button-desktop')
if(logoutElement) logoutElement.addEventListener('click', handleLogout);
}
const elementsWithAccount = document.querySelectorAll('a[href="/account"]');
elementsWithAccount.forEach((element) => {
element.addEventListener('click', async (e) => {
e.preventDefault();
const customerId = getCustomerId()
token = getValueFromCookiesOrLocalStorage(XGokwikCoreToken(window.merchantInfo.environment));
kpHandleLogin('/account');
});
});
document.addEventListener('DOMContentLoaded', function() {
updateDOM();
});
window.addEventListener('update-dom', function() {
updateDOM();
});
//TODO: update this with a query for the required button
const loader = `
`
/*removing existing profile(person) icon - person icon is not present in this store*/
const profileButtonElement = document.querySelector(ICON_SELECT_QUERY) || document.querySelector(HORIZON_PROFILE_ICON);
// defining css and add it to style tag in head
function appendCss() {
let css = `
.kploader {
display: none;
animation: rotate 1.5s linear infinite;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.kp-disabled-text-color{
cursor: not-allowed;
}
#logout-button-desktop{
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
font-size: 14px;
color: #344054;
font-style: normal;
font-weight: 600;
line-height: 20px;
width: 100%;
border-radius: 8px;
padding: 8px 14px;;
border: 1px solid var(--gray-300, #d0d5dd);
background: var(--base-white, #fff);
box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}
#loggedin-icons{
align-self: center;
display: none;
}
#kwikpass-drawer-desktop{
padding: 16px;
display: none;
right: 0%;
width: 18rem;
position: absolute;
top: 100%;
box-shadow: 0px 0px 32px 0px rgba(16, 24, 40, 0.32);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
z-index: 999;
background:#fff!important;
}
#kwikpass-drawer-desktop > ul{
margin: 0px 0px 10px 0px;
padding: 0;
width: 100%;
}
#kwikpass-drawer-desktop >ul >a{
cursor: pointer;
width: 100%;
display: flex!important;
justify-content: space-between;
align-items: center;
padding: 0;
color: inherit;
margin-left:0!important;
text-decoration: none;
}
#kwikpass-drawer-desktop >ul >a:hover , #kwikpass-drawer-desktop >ul >a:focus {
text-decoration: none;
}
#kwikpass-drawer-desktop >ul >a:focus,#kwikpass-drawer-desktop >ul >a:active {
text-decoration: none;
}
#kwikpass-drawer-desktop >ul >a:focus .kploader {
display: block;
}
#kwikpass-drawer-desktop >ul >a:not(:focus) .kploader {
display: none;
}
#kwikpass-drawer-desktop > ul > a > p {
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 142.857%;
display: inline-flex;
gap: 8px;
align-items: center;
margin: 10px 0 10px 0;
color: #000;
}
.header--icon{
cursor: pointer;
position: relative;
display: inline-flex;
}
path#svgkp-path {
stroke-width: 1;
}
#icon-close-kwikpass{
display: none;
border-radius: 50px;
border: 1px solid;
margin: 0;
padding: 2px;
align-items: center;
justify-content: center;
margin-left:3px;
}
`;
var style = document.createElement('style');
style.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(style);
}
// function call to append css to style tag
appendCss()
// existing user icon to show in the header
// TODO : fetch user icon form backend
const userIcon = `
`;
// kwikpass icon for desktop - if user is not logged in
const KwikpassNotLoggedIcon = ``
// dropdown for desktop (opens on clicking kwikpass icon if user logged in)
const drawerhtmlDesktop = `
`;
const kwikpassLoggedInIcon = `
`;
// It will change based on theme
const personIconElement = document.querySelector(ICON_SELECT_QUERY)?.parentElement || document.querySelector(HORIZON_PROFILE_ICON)?.parentElement
const html = `
${KwikpassNotLoggedIcon}
${kwikpassLoggedInIcon}
${drawerhtmlDesktop}
`;
if(!document.getElementsByClassName("header--icon")?.[0]){
const kwipassDesktopNode = document.createElement('div')
kwipassDesktopNode.className="header--icon"
kwipassDesktopNode.innerHTML = html
personIconElement?.replaceChild(kwipassDesktopNode,profileButtonElement)
}
let timerId=null;
document.getElementById('kp-login-button-header-logo')?.addEventListener('click', () => {
clearTimeout(timerId);
timerId = null;
handleKpAndShopifyLogin();
});
const kwikpassMobileIconElement = document.getElementById('kp-login-button-header-logo-mobile');
if (kwikpassMobileIconElement) {
kwikpassMobileIconElement.addEventListener('click', () => {
clearTimeout(timerId);
timerId = null;
handleKpAndShopifyLogin();
});
}
updateDOM();
}
let isdomReady = false;
document.addEventListener('DOMContentLoaded', function() {
isdomReady = true;
}, { once: true });
function handleManualIntegration(){
if(isdomReady){
handleDOMUpdate();
}else{
document.addEventListener('DOMContentLoaded', function() {
handleDOMUpdate();
});
}
window.addEventListener('update-dom', function() {
handleDOMUpdate();
});
}
function handleNewVersionsOfHorizon(){
const headerEl = document.querySelector("header");
if (headerEl) {
// Create an observer to watch attribute changes
const observer = new MutationObserver((mutationsList) => {
for (const mutation of mutationsList) {
if (
mutation.type === "attributes" &&
mutation.attributeName === "data-hydrated"
) {
const newValue = headerEl.getAttribute("data-hydrated");
if (newValue === "true") {
addProfileIconInHorizon();
const drawerElementMobile = document.getElementById("kwikpass-drawer-mobile")
if(drawerElementMobile){
if(token){
document.getElementById("kp-login-button-header-logo-mobile").style.display = "none"
document.getElementById("loggedin-icons-mobile").style.display = "block"
}else{
document.getElementById("kp-login-button-header-logo-mobile").style.display = "flex"
document.getElementById("loggedin-icons-mobile").style.display = "none"
drawerElementMobile.style.display = "none"
}
}
const drawerElement = document.getElementById("kwikpass-drawer-desktop")
if(drawerElement){
if(token){
document.getElementById("kp-login-button-header-logo").style.display = "none"
document.getElementById("loggedin-icons").style.display = "block"
}else{
document.getElementById("kp-login-button-header-logo").style.display = "flex"
document.getElementById("loggedin-icons").style.display = "none"
drawerElement.style.display = "none"
}
}
const logoutElement = document.getElementById('logout-button-desktop')
if(logoutElement) logoutElement.addEventListener('click', handleLogout);
//mobile
const logoutElementMobile = document.getElementById('logout-button-mobile')
if(logoutElementMobile) logoutElementMobile.addEventListener('click', handleLogout);
// Stop observing once done (optional)
observer.disconnect();
}
}
}
});
observer.observe(headerEl, { attributes: true });
setTimeout(() => {
observer.disconnect();
}, 10000);
}
}
function addScripts(){
var kwikpassCoreFnUrl="https://pdp.gokwik.co/kwikpass/kwikpass-core-functions-min.js"
var kwikpassMerchantV2Url="https://pdp.gokwik.co/kwikpass/plugin/build/kp-merchant-v2.js";
var kwikpassSDKUrl="https://pdp.gokwik.co/kwikpass/plugin/build/kp-shopify-app-sdk.js";
var kpCoreFnScript = document.createElement('script');
kpCoreFnScript.src = kwikpassCoreFnUrl;
kpCoreFnScript.async=false;
kpCoreFnScript.onload = () => {
if(document.querySelector(ICON_SELECT_QUERY)){
addLoginButton();
}else if(document.querySelector(HORIZON_PROFILE_ICON)){
handleNewVersionsOfHorizon();
addLoginButtonForHorizon();
}else{
handleManualIntegration();
}
};
var kpMerchantV2Script = document.createElement('script');
kpMerchantV2Script.src = kwikpassMerchantV2Url;
kpMerchantV2Script.async=false;
var kpMerchantV2SDKScript = document.createElement('script');
kpMerchantV2SDKScript.src = kwikpassSDKUrl;
kpMerchantV2SDKScript.async=false;
document.body.appendChild(kpCoreFnScript);
document.body.appendChild(kpMerchantV2Script);
document.body.appendChild(kpMerchantV2SDKScript);
}
const __kp_mid = "256iiimjb222op";
if(!__kp_mid){
window.merchantInfo = {
...window.merchantInfo,
environment: "production",
type: "merchantInfo",
integrationType: "PLUGIN",
}
var updateThemeMetaFieldGet = 'https://gkx.gokwik.co/kp/api/v1/shopify-app/update-theme-meta-field';
const options = {
method: 'GET',
headers: {accept: 'application/json', shop: window.Shopify.shop }
};
fetch(updateThemeMetaFieldGet, options)
.then(response => response.json())
.then(response => {
var data = response.data;
window.merchantInfo["mid"] = data?.mid;
addScripts();
})
.catch(err => console.error(err));
}else{
window.merchantInfo = {
...window.merchantInfo,
mid: __kp_mid,
environment: "production",
type: "merchantInfo",
integrationType: "PLUGIN",
}
addScripts();
}
