Okul.com.tr — Eğitim Ekosistemi

Mobile profil sayfası CTA ve show-more button pattern'leri

2 dakika okuma süresi

Proje: Okul Platform · Hub: Okul Platform — Conventions

Offer Form CTA Button

Profil sayfasındaki bölümlere eklenen form açma butonları iki stilde gelir:

Filled Pink (primary CTA)

<button type="button" class="button-new fill-pink w-full open-popup <section>-offer-cta"
        data-popup=".popup-school-offer"
        onclick="gaSendEventFormOpen('{{$gaEventCat}}','Click','<Section>','Button','<Label>','{{$school->id}}','{{$school->name}}')">
    <Label>
</button>

Gate: @if($school->showLeadForm()) — DEVLET (sector_id=1) ve hidden_lead_form’u otomatik hariç tutar.

Outline Pink (secondary CTA)

<button type="button" class="discount-offer-cta w-full open-popup"
        data-popup=".popup-school-offer"
        onclick="gaSendEventFormOpen(...)">
    <Label>
</button>

Her bölümün dedicated class’ı _button.scss’de birlikte tanımlı:

.highlights-offer-cta, .map-offer-cta, .campaign-offer-cta,
.qa-offer-cta, .discount-offer-cta, .fees-info-cta {
    height: 54px;
}

Show-More Pattern

Tüm bölümlerde ortak:

{{-- Blade: index-based hiding --}}
<div class="<item-class>" style="{{ $loop->index >= 2 ? 'display:none;' : '' }}">
 
{{-- Button: reveal all on click --}}
<button type="button" class="section-show-more w-full"
        onclick="$$('#<section-id> .<item-class>').show(); $$(this).hide(); gaSendEvent...">
    Daha Fazla Göster
    <img src="{{ asset('assets/images/mobile/profile/angle-down-small.svg') }}">
</button>

.section-show-more — _button.scss’de global tanımlı, F0F0F0 bg, 14px/700, 52px height.

Kritik: Her zaman $loop->index kullan, $key veya $index (collection key) değil.

Events/Achievements — Dinamik Eşik

initListingWithShowMore JS fonksiyonu artık data-items-per-page attribute’unu okuyor:

<div class="profile-section" data-items-per-page="2">

Default 4’e fallback eder — diğer section’lar etkilenmez.

Tüm Buton Text’leri 14px

.page-school-profile scope’unda normalize edildi (_page.scss):

.page-school-profile {
    button, a.button-new, .button-new, .button {
        font-size: 14px;
    }
}

Comments: API 40 → Frontend 20+20

API’den 40 yorum gelir. İlk 20 render’da görünür, kalanı gizlidir. “Daha Fazla Yorum Göster” tıklayınca:

  1. Gizli varsa → inline reveal (AJAX yok), currentPage değişmez
  2. Gizli yoksa → AJAX page=3 (sunucu render’ı page 2 sayılır, data-loaded = 40)

Grafik Görünümü

Backlinkler