affiliate Modeal
This commit is contained in:
Oliver
96
public/affiliateModal.js
Normal file
96
public/affiliateModal.js
Normal file
@@ -0,0 +1,96 @@
|
||||
// --- Create Affiliate Modal ---
|
||||
function createAffiliateModal() {
|
||||
const modal = document.createElement("div");
|
||||
modal.id = "affiliateBuilder";
|
||||
Object.assign(modal.style, {
|
||||
position: "fixed",
|
||||
top: "0",
|
||||
left: "0",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.6)",
|
||||
display: "none",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
zIndex: "1000"
|
||||
});
|
||||
|
||||
modal.innerHTML = `
|
||||
<div style="background: #fff; padding: 40px 30px; border-radius: 16px; max-width: 500px; width: 90%; position: relative; font-family: 'Arial', sans-serif; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
|
||||
<span id="closeAffiliateModal" style="position: absolute; top: 15px; right: 20px; cursor: pointer; font-weight: bold; font-size: 24px; color: #555;">×</span>
|
||||
<h2 style="margin-bottom: 15px; font-size: 24px; color: #333;">Affiliate Builder</h2>
|
||||
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label style="display:block; margin-bottom:5px; color:#555;">Your affiliate code:</label>
|
||||
<input type="text" id="affiliateCode" placeholder="Enter code" style="width:100%; padding:12px 15px; border:1px solid #ccc; border-radius:8px;">
|
||||
</div>
|
||||
<div style="margin-bottom: 15px;">
|
||||
<label style="display:block; margin-bottom:5px; color:#555;">Your affiliate campaign:</label>
|
||||
<input type="text" id="affiliateCampaign" placeholder="Enter campaign" style="width:100%; padding:12px 15px; border:1px solid #ccc; border-radius:8px;">
|
||||
</div>
|
||||
|
||||
<div style="display:flex; gap:10px; align-items:center; margin-bottom: 15px;">
|
||||
<input type="text" id="affiliateLink" readonly style="flex:1; padding:12px 15px; border:1px solid #ccc; border-radius:8px; background:#f9f9f9;">
|
||||
<button id="copyAffiliateLink" style="padding:12px 20px; background:#007BFF; color:#fff; border:none; border-radius:8px; cursor:pointer;">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
// Close modal
|
||||
document.getElementById("closeAffiliateModal").onclick = () => modal.style.display = "none";
|
||||
modal.onclick = e => { if (e.target === modal) modal.style.display = "none"; };
|
||||
|
||||
// Build link when inputs change
|
||||
const codeInput = document.getElementById("affiliateCode");
|
||||
const campaignInput = document.getElementById("affiliateCampaign");
|
||||
const linkInput = document.getElementById("affiliateLink");
|
||||
[codeInput, campaignInput].forEach(input => {
|
||||
input.addEventListener("input", () => {
|
||||
const code = codeInput.value.trim() || "affiliate";
|
||||
const campaign = campaignInput.value.trim() || "default";
|
||||
linkInput.value = `https://ODOO4projects.com?utm_source=${encodeURIComponent(code)}&utm_campaign=${encodeURIComponent(campaign)}`;
|
||||
});
|
||||
});
|
||||
|
||||
// Copy to clipboard
|
||||
document.getElementById("copyAffiliateLink").addEventListener("click", () => {
|
||||
linkInput.select();
|
||||
document.execCommand("copy");
|
||||
alert("Affiliate link copied!");
|
||||
});
|
||||
|
||||
return modal;
|
||||
}
|
||||
|
||||
// --- Open Affiliate Modal ---
|
||||
function openAffiliateModal() {
|
||||
const modal = document.getElementById("affiliateBuilder");
|
||||
modal.style.display = "flex";
|
||||
// Reset fields
|
||||
document.getElementById("affiliateCode").value = "";
|
||||
document.getElementById("affiliateCampaign").value = "";
|
||||
document.getElementById("affiliateLink").value = "";
|
||||
}
|
||||
|
||||
// --- Attach Affiliate Builder Buttons ---
|
||||
function attachAffiliateButtons() {
|
||||
const buttons = Array.from(document.querySelectorAll("button, a"));
|
||||
buttons.forEach(btn => {
|
||||
const text = btn.textContent.trim();
|
||||
if (text === "Start Selling") {
|
||||
btn.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
openAffiliateModal();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// --- Initialize Affiliate Builder ---
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
createAffiliateModal();
|
||||
attachAffiliateButtons();
|
||||
});
|
||||
|
||||
1
public/affiliateModal.min.js
vendored
Normal file
1
public/affiliateModal.min.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
function createAffiliateModal(){const e=document.createElement("div");e.id="affiliateBuilder",Object.assign(e.style,{position:"fixed",top:"0",left:"0",width:"100%",height:"100%",backgroundColor:"rgba(0,0,0,0.6)",display:"none",justifyContent:"center",alignItems:"center",zIndex:"1000"}),e.innerHTML='\n <div style="background: #fff; padding: 40px 30px; border-radius: 16px; max-width: 500px; width: 90%; position: relative; font-family: \'Arial\', sans-serif; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">\n <span id="closeAffiliateModal" style="position: absolute; top: 15px; right: 20px; cursor: pointer; font-weight: bold; font-size: 24px; color: #555;">×</span>\n <h2 style="margin-bottom: 15px; font-size: 24px; color: #333;">Affiliate Builder</h2>\n \n <div style="margin-bottom: 15px;">\n <label style="display:block; margin-bottom:5px; color:#555;">Your affiliate code:</label>\n <input type="text" id="affiliateCode" placeholder="Enter code" style="width:100%; padding:12px 15px; border:1px solid #ccc; border-radius:8px;">\n </div>\n <div style="margin-bottom: 15px;">\n <label style="display:block; margin-bottom:5px; color:#555;">Your affiliate campaign:</label>\n <input type="text" id="affiliateCampaign" placeholder="Enter campaign" style="width:100%; padding:12px 15px; border:1px solid #ccc; border-radius:8px;">\n </div>\n\n <div style="display:flex; gap:10px; align-items:center; margin-bottom: 15px;">\n <input type="text" id="affiliateLink" readonly style="flex:1; padding:12px 15px; border:1px solid #ccc; border-radius:8px; background:#f9f9f9;">\n <button id="copyAffiliateLink" style="padding:12px 20px; background:#007BFF; color:#fff; border:none; border-radius:8px; cursor:pointer;">Copy</button>\n </div>\n </div>\n ',document.body.appendChild(e),document.getElementById("closeAffiliateModal").onclick=()=>e.style.display="none",e.onclick=t=>{t.target===e&&(e.style.display="none")};const t=document.getElementById("affiliateCode"),i=document.getElementById("affiliateCampaign"),n=document.getElementById("affiliateLink");return[t,i].forEach(e=>{e.addEventListener("input",()=>{const e=t.value.trim()||"affiliate",o=i.value.trim()||"default";n.value=`https://ODOO4projects.com?utm_source=${encodeURIComponent(e)}&utm_campaign=${encodeURIComponent(o)}`})}),document.getElementById("copyAffiliateLink").addEventListener("click",()=>{n.select(),document.execCommand("copy"),alert("Affiliate link copied!")}),e}function openAffiliateModal(){document.getElementById("affiliateBuilder").style.display="flex",document.getElementById("affiliateCode").value="",document.getElementById("affiliateCampaign").value="",document.getElementById("affiliateLink").value=""}function attachAffiliateButtons(){Array.from(document.querySelectorAll("button, a")).forEach(e=>{"Start Selling"===e.textContent.trim()&&e.addEventListener("click",e=>{e.preventDefault(),openAffiliateModal()})})}document.addEventListener("DOMContentLoaded",()=>{createAffiliateModal(),attachAffiliateButtons()});
|
||||
@@ -4,3 +4,4 @@ npm install -g terser
|
||||
terser buyModal.js -o buyModal.min.js -c -m
|
||||
terser tryModal.js -o tryModal.min.js -c -m
|
||||
terser setCookie.js -o setCookie.min.js -c -m
|
||||
terser affiliateModal.js -o affiliateModal.min.js -c -m
|
||||
|
||||
Reference in New Issue
Block a user