Web & Full Stack
Özel

Maxend WooCommerce Vitrini: Özel PHP ve Tailwind Oluşturucu

PHPJavaScriptHTMLWordPressWooCommerceTailwind CSS v4WP_QueryVanilla JSShortcode API

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ı

PHPJavaScriptHTMLWordPressWooCommerceTailwind CSS v4WP_QueryVanilla JSShortcode API

Sistem Metrikleri

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

Bunu Neden İnşa Ettim?

"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

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