Özel engine'da özel css ve bazı div'leri engelleme
Merhabalar,
Alışveriş siteme özel bilgi kutuları eklemiştim.
Her şey yolunda. Şöyle sıkıntım var.
http://sitem/search?q=ayakkabı&engine=1
'engine=' 'de bilgi kutuları çıksın. Ancak
diğer elbise butonuna tıklandığında 'engine=2' olarak geçiyor
http://sitem/search?q=ayakkabı&engine=2
Engine 2'de bilgi kutuların çalışmasını istemiyorum.
Ayrıca engine2'ye özel css nasıl yapabilirim ?
Hem bilgi kutuların engellemek hemde engine 2'ye özel css yapmak.
<?php if (has_items($t['engines'])) : ?>
<div class="alisveris-butonlari">
<div class="ortala navigasyon">
<ul class="navlar">
<?php foreach ($t['engines'] as $tab) : ?>
<li class="buton-item">
<a class="buton-link buton2-link <?php echo $t->get("{$tab['engine_id']}_active"); ?>"
href="<?php echo e_attr(url_for('site.search')); ?>?q=<?php echo e_attr($t['search_query']); ?>&engine=<?php echo e_attr($tab['engine_id']); ?>">
<?php echo e(__($tab['engine_name'], _T)); ?>
Bu sistemde çalışıyor.
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (11)
engine=2 parametresine özel css çağırmak
http://sitem.com/search?q=ayakkabı&engine=1
şeklinde istek yapıldı diyelim.
istek yapılan sayfadaki parametreleri şu şekilde alabiliyorsunuz:
$engine = isset($_GET["engine"]) ? $_GET["engine"] : null;
Böylece eğer engine parametresi gelmişse değerini aldınız. Gelmediyse null aldınız.
CSS'i çağırdığınız yerde şöyle bir php kodu kullanabilirsiniz:
<?php if($engine && $engine=="2") { ?>
<link rel="stylesheet" href="engine.css" />
<?php } ?>
Böylece eğer engine parametresi geldiyse ve değeri de 2 ise belli bir css dosyasını çağırmış olursunuz.
Eğer engine parametresinin varlığını sunucu taraflı değil istemci taraflı belirlemek ve stil dosyasını ona göre çağırmak istiyorsanız şöyle bir kod yardımcı olabilir:
// url'den parametreleri alan bir fonksiyon oluşturuyoruz.
function getUrlParameters() {
// url'deki parametre kısmını alıyoruz. Diyelim ki url şu: http://sitem/search?q=ayakkabı&engine=2
let parameters = window.location.search; // Şu string'i elde ettik: "?q=ayakkabı&engine=2"
// "?" karakterinden kurtuluyoruz:
parameters = parameters.replace("?",""); // Şu string'i elde ettik: "q=ayakkabı&engine=2"
// Eğer elimizde bi'şey kalmamışsa hiç parametre yok demektir.
if(parameters=='') return {}; // Eğer herhangi bir değer elde etmediysek fonksiyonumuz boş obje dönecek.
// Elimizde kalan kısmı "&" karakterlerinden parçalıyoruz:
parameters = parameters.split("&"); // Şu diziyi elde ettik: ["q=ayakkabı","engine=2"]
// Fonksiyonumuzun döneceği objeyi boş halde oluşturuyoruz:
const obj = {};
// Sonra parameterelerimizi tek tek dönüyoruz:
for(let i=0; i < parameters.length; i++) {
// Şu an baktığımız parametre hangisiyse onu "=" karakterinden parçalıyoruz.
const parameterParts = parameters[i].split("="); // Mesela i=0 için şunu elde ettik: ["q","ayakkabı"]
const key = parameterParts[0];
const value = parameterParts[1];
// Bazen url'lerde aynı key'den 2 tane olabilir. Yani q=ayakkabı&engine=2&size=24&size=25&size=26 gibi olabilir.
// Bu durumda size key'ine birkaç değer atanmak istenmiş diyebiliriz.
// Haliyle bizim her bir key'imizin birkaç değeri olabileceği için değerleri dizi olarak tutmalıyız.
// Eğer şu an baktığımız key daha önce hiç oluşturulmamışsa boş dizi olarak oluşturalım.
if(!obj[key]) obj[key] = [];
// Şimdi bu key'in değeri olan diziye değerimizi push edelim.
obj[key].push(value); // Objemize şunu eklemiş olduk: { "q": ["ayakkabı"] }
}
// Döngü tamamlanınca obj değeri şöyle oldu: { "q":["ayakkabı"], "engine":["2"] }
// Artık fonksiyonumuz sonucu döndürebilir:
return obj;
}
Artık elimizde url'deki parametreleri alıp object haline getirebileceğimiz bir fonksiyonumuz var.
Bu fonksiyon ile parametreleri alalım ve engine değeri varsa ve değeri de 2 ise head tag'ına <link />
ekleyelim.
// Url'deki parametreleri object haline çevirerek alalım:
const urlParameters = getUrlParameters();
// Eğer parametrelerde "engine" diye bir key varsa ve bu key "2" değerini içeriyorsa işlemimizi yapacağız.
// Burada includes("2") dememizin nedeni, bir dizi içinde arama yapacak olmamız.
// Yani mesela şu istekte de bu if bloğu çalışır: "http://sitem/search?q=ayakkabı&engine=1&engine=2&engine=3"
if(urlParameters.engine && urlParameters.engine.includes("2")) {
// <link /> elementimizi javascript ile oluştuyoruz:
const link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = 'assets/css/engine2.css';
// Oluşturduğumuz elementimizi DOM'a ekliyoruz:
document.head.appendChild(link);
}
bence şu şekilde birşey yapabilirsin.
Body class="engine"
css de ise
.engine a{
display : none;
}
gibi engellemek istediklerine .engine içerisine yazarsın bu css kısmı diğeri ise
var url_string = window.location.href; //http://sitem/search?q=ayakkabı&amp;engine=1
var url = new URL(url_string);
var engine = url.searchParams.get("engine");
if(engine === "2") {
document.body.classList.add('engine');
}
diyebilirsin en basit ve kesin çözüm
Yazdığın özel css kodlarını bir css dosyası olarak oluştur. Sonra ister php ile ister js ile (js ile yapmak istersen sayfa onload olduğunda çalışacak bir fonksiyon ile) sayfanın o anki url adresini al. Sonrasında url adresinin sonunda istediğin şey var mı diye bak. Jsde split, phpde explode kullanarak istediğin kısmı alabilirsin. If else yapısı ile, varsa js xmlhttprequest ile ya da direkt style css tagi ekleyerek, phpde ise direkt echo ile ekrana css urlsini içeren style css tagini basarak halledersin.