// ==UserScript==
// @name Ticimax Varyant Görsel
// @namespace http://tampermonkey.net/
// @version 1.3
// @description Ticimax ürün detay sayfasında renk varyantlarının üzerine ürün görseli ekler
// @match https://www.otsicgiyim.com/*
// @grant none
// @run-at document-idle
// ==/UserScript==
(function () {
"use strict";
function init() {
if (typeof productDetailModel === "undefined") return false;
var data = productDetailModel;
var variants = data.productVariantData || [];
var products = data.products || [];
var productImageMap = {};
products.forEach(function (p) {
if (p.id && p.spotResimThumbYolu) {
productImageMap[p.id] = p.spotResimThumbYolu;
}
});
var renkById = {};
var renkByName = {};
variants.forEach(function (v) {
if (v.ekSecenekTipVaryasyonTuruTanim === "Renk" && !renkByName[v.tanim]) {
var imgUrl = productImageMap[v.urunID] || "";
if (imgUrl) {
renkByName[v.tanim] = imgUrl;
renkById[v.id] = imgUrl;
}
}
});
// CSS stillerini ekle
var style = document.createElement("style");
style.textContent =
"#divUrunEkSecenek .eksecenekLine .size_box.has-varyant-gorsel {" +
" display: inline-flex !important;" +
" flex-direction: column !important;" +
" align-items: center !important;" +
" height: auto !important;" +
" width: auto !important;" +
" min-width: 80px !important;" +
" padding: 6px 10px !important;" +
" vertical-align: top !important;" +
" box-sizing: border-box !important;" +
"}" +
"#divUrunEkSecenek .eksecenekLine .size_box.has-varyant-gorsel.selected {" +
" background: #666 !important;" +
" color: #fff !important;" +
"}" +
"#divUrunEkSecenek .eksecenekLine .size_box.has-varyant-gorsel:hover {" +
" background: #888 !important;" +
" color: #fff !important;" +
" cursor: pointer !important;" +
"}" +
"#divUrunEkSecenek .eksecenekLine .size_box.has-varyant-gorsel .varyant-gorsel {" +
" width: 70px !important;" +
" height: 70px !important;" +
" object-fit: contain !important;" +
" display: block !important;" +
" border-radius: 4px !important;" +
" border: 1px solid #ddd !important;" +
" margin-bottom: 4px !important;" +
" pointer-events: none !important;" +
"}" +
"#divUrunEkSecenek .eksecenekLine .size_box.has-varyant-gorsel .varyant-gorsel-text {" +
" display: block !important;" +
" text-align: center !important;" +
" pointer-events: none !important;" +
" font-size: 12px !important;" +
"}";
document.head.appendChild(style);
var lines = document.querySelectorAll("#divUrunEkSecenek .eksecenekLine");
var processed = false;
lines.forEach(function (line) {
var label = line.querySelector(".left_line");
if (!label || label.textContent.trim() !== "Renk") return;
var sizeBoxes = line.querySelectorAll(".size_box");
sizeBoxes.forEach(function (box) {
if (box.querySelector(".varyant-gorsel")) return;
var variantName = box.textContent.trim();
var rel = box.getAttribute("rel");
var imgUrl = renkByName[variantName] || renkById[parseInt(rel)] || null;
if (!imgUrl) return;
box.classList.add("has-varyant-gorsel");
var imgEl = document.createElement("img");
imgEl.src = imgUrl;
imgEl.alt = variantName;
imgEl.className = "varyant-gorsel";
var textSpan = document.createElement("span");
textSpan.textContent = variantName;
textSpan.className = "varyant-gorsel-text";
box.textContent = "";
box.appendChild(imgEl);
box.appendChild(textSpan);
processed = true;
});
});
return processed;
}
// Varyantlar render olana kadar bekle, bir kez çalıştır
var attempts = 0;
var interval = setInterval(function () {
attempts++;
var el = document.getElementById("divUrunEkSecenek");
var hasBoxes = el && el.querySelectorAll(".size_box").length > 0;
if (hasBoxes) {
clearInterval(interval);
init();
} else if (attempts > 20) {
clearInterval(interval);
}
}, 500);
})();