İçeriğe geç
Tüm projeler
Web & Full StackÖzel

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ı

Ç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

  1. 01Yönetim panelinden zahmetsiz yerleştirme için yerel WordPress kısa kodlarını kullanan bileşen odaklı mimari
  2. 02Otonom zamanlama mantığına sahip, sıfır bağımlılıklı saf (vanilla) JavaScript sürükle-kaydır ürün karuselleri
  3. 03Dinamik indirim yüzdesi hesaplayıcıları ve doğrudan WooCommerce API'sinden canlı varyasyon/fiyat çekimi
  4. 04localStorage durum kalıcılığı ile gerçek zamanlı düzen geçişleri (Izgara veya Liste görünümü)
  5. 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.