Spoiler olarak gönderdim, AI tam olarak hangi kaynak dosyasını düzenlemesi gerektiğini ve kodların içeriğini bilmediği için çok net bir çıktı üretebildi mi bilmiyorum ama belki işinize yarar. Dediğim gibi Cursor kullanmak çok basit hatta bunu direkt insanla konuşur gibi yapıyorsunuz bence bir denemenizde yarar var. Umarım kod işinize yarar.

<script>
(() => {
"use strict";

const CONFIG = {
// Ürün detayda nereye eklenecek? (Sizdeki selector'u aynen koydum)
targetSelector: "#30 > div > div > div.grid.grid-cols-1.sm:grid-cols-1.md:grid-cols-2.lg:grid-cols-3.xl:grid-cols-3 > div.product-detail-page-detail-box.relative.col-span-2.sm:col-span-2.md:col-span-2.px-4.lg:col-span-1.xl:col-span-1 > div.flex.flex-1.product-detail-page-buy-box.mt-4.mb-2.flex-col > div",

widgetId: "bp-social-proof",
styleId: "bp-social-proof-styles",

// 2 saniyede bir mesaj değişsin
rotateEveryMs: 2000,

// Mesaj tanımları (MANUEL aralıkları buradan veriyorsunuz)
messages: [
{
key: "cart",
icon: "cart",
template: (n) => `Son 24 saatte <span class="bp-count">${n}</span> kişi sepete ekledi`,
min: 6,
max: 42,
// her dönüşte sayıyı küçük oynatmak isterseniz:
stepDownMax: 2,
stepUpMax: 3
},
{
key: "fav",
icon: "heart",
template: (n) => `Son 3 günde <span class="bp-count">${n}</span> kişi favoriledi`,
min: 15,
max: 160,
stepDownMax: 4,
stepUpMax: 6
},
{
key: "buy",
icon: "bag",
template: (n) => `Son 1 günde <span class="bp-count">${n}</span> kişi satın aldı`,
min: 2,
max: 28,
stepDownMax: 1,
stepUpMax: 2
}
]
};

/* ---------- RNG + util (seed'li) ---------- */
const hashStr = (s) => {
let h = 2166136261 >>> 0;
for (let i = 0; i < s.length; i++) {
h ^= s.charCodeAt(i);
h = Math.imul(h, 16777619);
}
return h >>> 0;
};

const makeRNG = (seed) => {
let x = (seed || 123456789) >>> 0;
return () => {
x ^= x << 13; x >>>= 0;
x ^= x >> 17; x >>>= 0;
x ^= x << 5; x >>>= 0;
return (x >>> 0) / 0xFFFFFFFF;
};
};

const between = (rng, min, max) =>
Math.floor(rng() * (max - min + 1)) + min;

const clamp = (n, min, max) => Math.max(min, Math.min(max, n));

/* ---------- Ürün bazlı seed ---------- */
const productKey = (() => {
const og = document.querySelector('meta[property="og:title"]');
const title = (og?.getAttribute("content") || document.title || "").trim();
return `${location.origin}${location.pathname}|${title}`;
})();

const seed = hashStr(productKey);
const rng = makeRNG(seed);

const storeKeyBase = `bp_sp_${seed}_`;

const getStored = (k, fallback) => {
const v = sessionStorage.getItem(storeKeyBase + k);
const n = v ? parseInt(v, 10) : NaN;
return Number.isFinite(n) ? n : fallback;
};

const setStored = (k, n) => {
sessionStorage.setItem(storeKeyBase + k, String(n));
};

/* ---------- Stil ---------- */
const ensureStyles = () => {
if (document.getElementById(CONFIG.styleId)) return;

const style = document.createElement("style");
style.id = CONFIG.styleId;
style.textContent = `
#${CONFIG.widgetId}{
width:100% !important;
box-sizing:border-box;
margin-top:14px;
}
#${CONFIG.widgetId} .bp-box{
display:flex;
align-items:center;
gap:10px;
padding:10px 14px;
background:#f8f8f8;
border-radius:12px;
font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
font-size:15px;
font-weight:600;
width:100%;
}
#${CONFIG.widgetId} .bp-icon{
width:20px;height:20px;min-width:20px;
color:#ff5252;
}
#${CONFIG.widgetId} .bp-text{
line-height:1.2;
}
#${CONFIG.widgetId} .bp-count{
color:#ff5252;
font-weight:800;
}
@media(max-width:480px){
#${CONFIG.widgetId} .bp-box{font-size:14px;padding:8px 12px;}
}
`;
document.head.appendChild(style);
};

/* ---------- Iconlar ---------- */
const ICONS = {
cart: `
<svg class="bp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2Zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2ZM7.2 14h9.9c.75 0 1.41-.41 1.75-1.03L21 6H6.21L5.27 4H2v2h2l3.6 7.59-1.35 2.44C5.52 17.37 6.48 19 8 19h12v-2H8l1.2-3Z"/>
</svg>`,
heart: `
<svg class="bp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 21s-7-4.35-9.33-8.28C.9 9.6 2.14 6.9 4.6 5.86 6.35 5.12 8.3 5.6 9.6 6.9L12 9.3l2.4-2.4c1.3-1.3 3.25-1.78 5-1.04 2.46 1.04 3.7 3.74 1.93 6.86C19 16.65 12 21 12 21z"/>
</svg>`,
bag: `
<svg class="bp-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M6 7V6a6 6 0 0 1 12 0v1h3v15H3V7h3Zm2 0h8V6a4 4 0 0 0-8 0v1Zm-2 4h2v2H6v-2Zm10 0h2v2h-2v-2Z"/>
</svg>`
};

/* ---------- Widget ---------- */
const buildWidget = () => {
const wrap = document.createElement("div");
wrap.id = CONFIG.widgetId;
wrap.innerHTML = `<div class="bp-box">
<span class="bp-ico"></span>
<span class="bp-text"></span>
</div>`;
return wrap;
};

const renderMessage = (msgIndex) => {
const widget = document.getElementById(CONFIG.widgetId);
if (!widget) return;

const msg = CONFIG.messages[msgIndex];
const iconEl = widget.querySelector(".bp-ico");
const textEl = widget.querySelector(".bp-text");

// sayı üret / dalgalandır
const initial = between(rng, msg.min, msg.max);
const current = getStored(msg.key, initial);

// her gösterimde küçük step up/down (isterseniz)
const dirUp = rng() > 0.45;
const step = dirUp
? between(rng, 0, msg.stepUpMax ?? 0)
: -between(rng, 0, msg.stepDownMax ?? 0);

const nextVal = clamp(current + step, msg.min, msg.max);
setStored(msg.key, nextVal);

iconEl.innerHTML = ICONS[msg.icon] || ICONS.cart;
textEl.innerHTML = msg.template(nextVal);
};

const placeWidget = (target) => {
let widget = document.getElementById(CONFIG.widgetId);
if (!widget) widget = buildWidget();
if (target.nextElementSibling !== widget) {
target.insertAdjacentElement("afterend", widget);
}
};

/* ---------- Başlat / Döndür ---------- */
let rotateTimer = null;
let currentIndex = 0;

const startRotate = () => {
if (rotateTimer) return;

renderMessage(currentIndex);
rotateTimer = setInterval(() => {
currentIndex = (currentIndex + 1) % CONFIG.messages.length;
renderMessage(currentIndex);
}, CONFIG.rotateEveryMs);
};

const mount = () => {
ensureStyles();

const tryMount = () => {
const target = document.querySelector(CONFIG.targetSelector);
if (!target) return false;

placeWidget(target);
startRotate();
return true;
};

if (tryMount()) return;

// hedef geç yüklenirse yakala
const poll = setInterval(() => {
if (tryMount()) clearInterval(poll);
}, 300);

const mo = new MutationObserver(() => tryMount());
mo.observe(document.documentElement || document.body, { childList: true, subtree: true });
};

if (document.readyState === "complete" || document.readyState === "interactive") {
mount();
} else {
document.addEventListener("DOMContentLoaded", mount, { once: true });
window.addEventListener("load", mount, { once: true });
}
})();
</script>