Maxend WooCommerce Vitrini: Özel PHP ve Tailwind Oluşturucu
Tamamen PHP ile yazılmış modüler, yüksek performanslı bir WooCommerce arayüz oluşturucu. Hantal sayfa oluşturucularını atlayarak, donanım hızlandırmalı ürün kaydırıcılarını (slider), kategori ızgaralarını ve özel düzenleri dinamik olarak oluşturmak için yerel WordPress kısa kodlarını (shortcodes) ve Tailwind CSS'i kullanır.
Teknoloji yığını
- Diller
- Çatılar & kütüphaneler
Performans & metrikler
- Ağır görsel sayfa oluşturuculara olan ihtiyacı ortadan kaldırarak ortalama DOM derinliğini %60'tan fazla azaltır
- Hantal slider kütüphanelerini, bir kilobayttan daha küçük boyuttaki saf JavaScript pointer ve sürükleme gözlemcisiyle (drag observer) değiştirir
- Vektörize edilmiş taksonomi sorguları (taxonomy queries), devasa ürün ızgaralarını yüklerken N+1 veritabanı darboğazlarını önler
Neden geliştirdim?
Ticari sayfa oluşturucular (Elementor veya WPBakery gibi) DOM'u aşırı derecede şişirir ve WooCommerce vitrinlerinin performansını ciddi şekilde boğar. Yönetim kolaylığından ödün vermeden 'MAXEND' markası için yıldırım hızında, özel bir alışveriş deneyimi oluşturmam gerekiyordu. Bu eklentiyi, özel bir render motoru olarak işlev görmesi için tasarladım: Doğrudan WooCommerce veritabanına kancalanır, ürün meta verilerini (fiyatlar, varyasyonlar, indirim mantığı) çıkarır ve arayüzü Tailwind sınıflarıyla çizer. Müşteriye, sadece WordPress kısa kodu yapıştırarak headless (başsız) bir mimarinin hızını ve esnekliğini sunar.
Mimari & kararlar
Temel mimari, yeniden kullanılabilir UI bileşenleri olarak işlev gören parametrelendirilmiş PHP fonksiyonları dizisidir (örneğin maxend_get_product_slider, maxend_get_banner). Bu fonksiyonlar dinamik argümanlar (kategori slug'ları, gösterim sınırları, sıralama türleri) alır, özelleştirilmiş taksonomi filtreleriyle WP_Query üzerinden veritabanıyla etkileşime girer ve temizlenmiş HTML üretir. Maksimum performansı garanti etmek için ürün slider'ı; sürükle-kaydır (drag-to-scroll), ızgaraya yaslanma (snap-mandatory) ve otonom kaydırma davranışları için Swiper.js gibi ağır harici kütüphanelere olan ihtiyacı tamamen ortadan kaldıran özel bir saf (vanilla) JavaScript motoru içerir. Dinamik sepet URL'leri, ürün varyasyonları ve canlı fiyat hesaplamaları için WooCommerce metotları sisteme derinlemesine entegre edilmiştir.
Temel özellikler
- 01Yönetim panelinden zahmetsiz yerleştirme için yerel WordPress kısa kodlarını kullanan bileşen odaklı mimari
- 02Otonom zamanlama mantığına sahip, sıfır bağımlılıklı saf (vanilla) JavaScript sürükle-kaydır ürün karuselleri
- 03Dinamik indirim yüzdesi hesaplayıcıları ve doğrudan WooCommerce API'sinden canlı varyasyon/fiyat çekimi
- 04
localStoragedurum kalıcılığı ile gerçek zamanlı düzen geçişleri (Izgara veya Liste görünümü) - 05Modüler lüks afiş (banner) enjeksiyonu ve programatik SVG ikonografi render işlemleri
Teknik değerlendirme
Bu proje, React veya Vue gibi frontend JS framework'lerine bel bağlamadan kurumsal düzeyde e-ticaret arayüzlerinin nasıl inşa edilebileceğini göstermektedir. Mantığı (logic) PHP ile kesinlikle sunucu tarafında tutarak ve anında CSS boyaması için Tailwind'i kullanarak, vitrin eşsiz bir TTFB (İlk Bayta Kadar Geçen Süre) elde eder. Slider'lar için yazılan özel JavaScript, yerel tarayıcı API'lerinin ağır üçüncü parti bağımlılıklarının yerini kolayca alabileceğini ve pürüzsüz (buttery-smooth) bir alışveriş deneyimi sunabileceğini kanıtlamaktadır.
Benzer projeler
Web & Full Stack
WordPress DOM Override ve Tailwind v4 Enjektörü
Çalışma zamanında (runtime) yerel Gutenberg düzen kısıtlamalarını temizleyen, CSS özgüllüğünü (specificity) sıfırlayan ve Tailwind v4 motorunu frontend, admin paneli ve blok düzenleyiciye enjekte eden agresif bir WordPress mimari geçersiz kılma (override) katmanı.
- PHP
- JavaScript
- CSS
- +5
Web & Full Stack
Mavi Bahçem: Decoupled Next.js & PHP CMS Mimarisi
Kesin bir biçimde ayrıştırılmış (decoupled) mimari kullanan, yüksek düzeyde optimize edilmiş ve statik olarak üretilen bir web platformu. Altyapı maliyetlerini en aza indirirken performansı en üst düzeye çıkarmak için özel bir Next.js arayüzünü, güvenli ve hafif bir PHP/MySQL arka ucu ile eşleştirir.
- TypeScript
- PHP
- SQL
- +7
Web & Full Stack
MAN-AR Canada: B2B Kurumsal Tedarik Platformu
Kanada merkezli bir B2B endüstriyel tedarik firması için geliştirilmiş yüksek performanslı, çok dilli kurumsal platform. Next.js ile tasarlanmış, Tailwind CSS v4 ile optimize edilmiş ve güvenli bir PHP iletişim köprüsü ile desteklenmiştir.
- TypeScript
- PHP
- Next.js 15
- +5
Benzer bir ihtiyacınız mı var?
Bu tür bir sistemi sizin için de kurabilirim.
Projenizi birkaç cümleyle anlatın; doğru yaklaşımı ve tahmini kapsamı birlikte belirleyelim.