Skip to main content

Shortcode [dnt_pass_showcase]

[dnt_pass_showcase] afișează prețurile tipurilor de acces la congres, organizate pe categorii de vizitatori (Student MD, Student TD, Medic etc.). Spre deosebire de tab-urile clasice care ascund conținut inactiv, aici toate secțiunile rămân vizibile simultan — bara de navigare derulează pagina la secțiunea selectată, nu comută între stări ascunse.

Tabelul de prețuri pe desktop: bară de navigare lipită sus cu butoanele Student MD, Student TD, Medic; sub ea, trei secțiuni cu carduri galbene și gri vizibile simultan
SEO

Toate cardurile și textele sunt în DOM din momentul încărcării. Nu există display:none. Motoarele de căutare indexează integral conținutul fiecărui tip de acces, indiferent de categoria selectată în navigare.

Cum funcționează​

Desktop​

  • O bară de navigare rămâne lipită sus pe ecran la derulare. Fiecare buton afișează un număr de ordine (01, 02…) extras automat.
  • Click pe un buton derulează lin la categoria corespunzătoare în rândul orizontal.
  • Butonul activ se actualizează automat în funcție de ce secțiune este vizibilă (via IntersectionObserver).
  • Toate grupele formează un singur rând orizontal continuu — cardurile defilează ca o bandă neîntreruptă, cu o linie subțire despărțind categoriile. Fiecare grupă aduce propriile carduri în acea bandă.
  • Vizual există trei stiluri disponibile, selectate prin atributul variant="" (vezi mai jos).

Mobil​

  • Aceeași bară de navigare, cu defilare orizontală dacă nu încap toate butoanele pe ecran.
  • Banda de carduri devine un carusel snap — un card la un moment dat, centrat pe ecran, cu defilare pe mandatory.
  • Butonul activ urmărește derularea și se aduce automat în câmpul vizual al navigării.
Varianta mobilă: bara de navigare cu defilare orizontală și cardurile stivuite pe lățimea completă a ecranului

Structura shortcode-ului​

Componenta folosește trei shortcode-uri imbricate:

[dnt_pass_showcase]                 ← container + bară de navigare

  [dnt_pass_group label="..."]      ← o secțiune = o categorie de public
    [dnt_pass_item tier="..."]      ← un card de tip de acces
    [dnt_pass_item tier="..."]
  [/dnt_pass_group]

  [dnt_pass_group label="..."]
    [dnt_pass_item tier="..."]
  [/dnt_pass_group]

[/dnt_pass_showcase]

Bara de navigare se construiește automat din etichetele label ale grupelor. Nu este nevoie să o definești separat.

Exemple de utilizare​

Configurația standard cu trei tipuri de public — Student MD, Student TD, Medic:

[dnt_pass_showcase]

  [dnt_pass_group label="Student - MD"]
    [dnt_pass_item tier="1" subtitle="Student la Medicină Dentară."]
    [dnt_pass_item tier="2"]
  [/dnt_pass_group]

  [dnt_pass_group label="Student - TD"]
    [dnt_pass_item tier="1" subtitle="Student la Tehnică Dentară."]
    [dnt_pass_item tier="2"]
  [/dnt_pass_group]

  [dnt_pass_group label="Medic"]
    [dnt_pass_item tier="1" subtitle="Medic rezident/specialist/primar."]
    [dnt_pass_item tier="2"]
  [/dnt_pass_group]

[/dnt_pass_showcase]

Atribute [dnt_pass_item]​

[dnt_pass_item] afișează un card pentru un singur tip de acces. Numele, descrierea și prețul sunt extrase automat din WooCommerce.

AtributImplicitDescriere
tierobligatoriuNumărul nivelului de acces (ex. 1, 2). Trebuie să corespundă metadatei dentisity_pass_tier a unui produs WooCommerce publicat.
subtitle""Text afișat sub numele tipului de acces. Folosit pentru a descrie publicul țintă, ex. "Student la Medicină Dentară."
bg_colorTier 1: #ffe97d (galben)
Tier 2: #d1d1e1 (gri)
Tier 3: #d1fae5
Tier 4: #fce7f3		Culoarea de fundal a cardului în format hex. Valorile implicite corespund culorilor deja folosite în blocurile de prețuri de pe pagina principală.
text_color#0f172aCuloarea textului și fundalul butonului CTA. Modifică doar pentru carduri cu fundal închis — setează #ffffff pentru carduri negre sau albastre.
button_text"Înscrie-te"Eticheta butonului CTA. Prețul este afișat deasupra butonului, separat.
button_urlOpțiunea dentisity_registration_page_urlDestinația linkului CTA. Implicit, duce la pagina de înregistrare configurată în Admin → Dentisity → Setări.
description_lines6Numărul de linii vizibile din descriere înainte de butonul „Mai mult". Setează 0 pentru a afișa descrierea integrală fără trunchicare.
Card galben (tier 1) cu numele pasului mare și bold, subtitlu, linie orizontală, primele 6 linii de descriere trunchiate cu gradient, buton Mai mult și buton CTA negru
Același card cu descrierea expandată după click pe Mai mult — butonul devine Mai puțin și lista completă de beneficii este vizibilă

Cum este determinat prețul afișat​

Prețul este afișat deasupra butonului, nu în el. Logica de determinare urmează valurile active:

  1. Dacă există un val activ cu locuri disponibile (dentisity_wave_pricing) — afișează prețul valului curent.
  2. Dacă prețul valului activ este mai mic decât _regular_price, prețul vechi apare tăiat lângă cel nou (ex. ~~350 RON~~ 299 RON).
  3. Dacă toate valurile sunt epuizate sau nu există valuri — afișează _regular_price din WooCommerce.
  4. Dacă nu este configurat niciun preț — zona de preț nu se afișează.

Actualizarea prețului unui val sau a prețului standard din WooCommerce se reflectă imediat pe pagină, fără a fi nevoie să modifici shortcode-ul.

Atribute [dnt_pass_group]​

[dnt_pass_group] definește o secțiune — o categorie de public. Eticheta apare atât în bara de navigare, cât și ca titlu al secțiunii în pagină.

AtributImplicitDescriere
labelobligatoriuNumele categoriei, ex. "Student - MD". Apare în bara de navigare și ca titlu al secțiunii.
idSlugul eticheteiID-ul ancorei HTML (#dnt-group-{id}). Generat automat din label dacă nu este specificat, ex. "Student - MD" → dnt-group-student-md.
heading_tagh2Tag-ul HTML pentru titlul secțiunii. Acceptă: h2, h3, h4, h5, p.
Bara de navigare cu butonul Student - TD subliniat și activ, în timp ce secțiunea Student - TD este vizibilă pe ecran
Ierarhie headings pentru SEO și accesibilitate

Tag-ul implicit pentru titlul grupei este h2. Dacă pagina are deja alte titluri h2 la același nivel de conținut, adaugă heading_tag="h3" la fiecare [dnt_pass_group] pentru a menține o structură corectă de heading-uri — relevantă atât pentru indexarea SEO, cât și pentru cititoarele de ecran.

[dnt_pass_group label="Student - MD" heading_tag="h3"]

Atribute [dnt_pass_showcase]​

[dnt_pass_showcase] este containerul principal. Construiește bara de navigare și înregistrează CSS-ul și JS-ul componentei numai pe paginile unde este prezent.

AtributImplicitDescriere
nav_label"Categorii de acces"Atributul aria-label al elementului <nav>. Descrie scopul barei de navigare pentru cititoarele de ecran.
variant"index"Stilul vizual al componentei. Acceptă: index, bloc, revue.

Variante vizuale​

Varianta se selectează o dată per instanță și afectează fonturile, structura cardului și modul de afișare a culorii de nivel.

VariantăDescriere
index (implicit)Grotesc tehnic (Space Grotesk + Space Mono). Culoarea nivelului apare ca un bloc colorat în zona de sus a cardului; restul cardului este aproape-alb. Prețul este afișat în font monospațiat.
blocÎntreg cardul este colorat în culoarea nivelului. Titlul pasului este mare și cu majuscule. Butonul CTA este o pilulă cu contur.
revueSerif editorial (Newsreader) pentru titlul pasului. Culoarea nivelului marchează marginea stângă a cardului ca o bandă de fundal.
[dnt_pass_showcase variant="bloc"]
  ...
[/dnt_pass_showcase]

Date extrase automat din WooCommerce​

Fiecare [dnt_pass_item] extrage conținut direct din produsul WooCommerce asociat nivelului respectiv. Nu este nevoie să duplici prețuri sau descrieri în shortcode.

Ce afișeazăSursă
Numele pasului (titlul mare al cardului)post_title al produsului
Descrierea (corpul cardului)post_content, cu formatare HTML aplicată
Prețul afișat deasupra butonului CTAPrețul valului activ → _regular_price → _price; dacă val < preț normal, prețul normal apare tăiat
Identificare produsdentisity_pass_tier (număr) și dentisity_is_pass = "yes"

Câmpuri post meta relevante (pentru referință tehnică)​

Meta keyTipRol
dentisity_is_pass"yes"Marchează produsul WooCommerce ca tip de acces la congres
dentisity_pass_tierîntregNivelul tipului de acces; legătura cu atributul tier din shortcode
_regular_pricefloatPrețul de bază din WooCommerce
_pricefloatPrețul curent WooCommerce (fallback)
dentisity_wave_pricingJSONArray de obiecte {quantity, price, sold, label}; primul val cu quantity > 0 este activ

Refolosirea unui tip de acces în mai multe grupe​

Același tier poate apărea în grupe diferite cu subtitluri diferite. Conținutul vine mereu live din WooCommerce — nu există duplicare în baza de date:

[dnt_pass_group label="Student - MD"]
  [dnt_pass_item tier="1" subtitle="Student la Medicină Dentară."]
[/dnt_pass_group]

[dnt_pass_group label="Student - TD"]
  [dnt_pass_item tier="1" subtitle="Student la Tehnică Dentară."]
[/dnt_pass_group]

Ambele carduri afișează același tier="1" (același preț, aceleași beneficii), dar cu subtitluri diferite care contextualizează tipul de public.

Offset pentru header lipit​

Dacă tema site-ului are un header fixat (sticky), bara de navigare a componentei se poate suprapune cu el când se derulează la o secțiune. Corectare din CSS-ul temei sau dintr-un bloc CSS adăugat pe pagina respectivă:

.dnt-showcase {
  --sticky-top: 72px; /* înlocuiește cu înălțimea exactă a header-ului tău */
}

Proprietatea scroll-margin-top a fiecărei secțiuni ia în calcul automat această valoare — derularea la o secțiune aterizează la distanța corectă.

Inserare în Gutenberg​

  1. Deschide pagina unde vrei tabelul de prețuri.
  2. Adaugă un bloc Shortcode.
  3. Introdu shortcode-ul complet: [dnt_pass_showcase] cu grupele și cardurile imbricate.
  4. Salvează sau publică pagina.
Editorul Gutenberg cu un bloc Shortcode conținând codul complet [dnt_pass_showcase] cu trei grupe

CSS-ul și JavaScript-ul componentei sunt înregistrate și încărcate automat numai pe paginile unde shortcode-ul este prezent — nu afectează performanța celorlalte pagini.

Last updated on