Vælg2

Feltet Vælg2 tilføjer en søgbar dropdown til en brugerdefineret widget, der er bygget med Master Addons Widget Builder. Redaktører skriver for at filtrere listen, og med Vis flere slået til kan de vælge flere muligheder på én gang. Brug den til lange valgmuligheder eller til valg af tag-stil, hvor et svar ikke er nok.

Select2 er et Pro-felt. Det gratis plugin indeholder en begrænset Widget Builder, og det fulde sæt felter leveres med Master Addons Pro.

Hvad Select2-feltet gør #

• Det tilføjer en dropdown med et søgefelt til din widgets panel i Elementor.
• Med Vis flere fra vælger editoren én mulighed, og din skabelon får denne indstillings nøgle.
• Med Vis flere på vælger editoren et vilkårligt antal muligheder, vist som flytbare tags, og din skabelon får en liste over nøgler, som du udskriver med en {% for %} loop.
• Hver mulighed har en nøgle og en etiket. Redaktører ser etiketterne, og din HTML modtager altid nøglerne.

Hvis du ikke har bygget en widget endnu, så læs Widget Builder oversigt først. For en kort enkeltvalgsliste uden søgning, sletten Vælg felt er enklere.

Før du starter #

• WordPress med Elementor installeret og aktiv.
• Master Addons til Elementor og Master Addons Pro, begge aktive. Den installationsvejledning covers opsætning.
• En widget, der er åben i Widget Builder. Eksemplet i denne vejledning er en “Porteføljekort”-widget med et Tekstfelt til projekttitlen og to Select2-felter: Projekttype (et valg) og Projektmærker (flere valg).

Sådan tilføjes et Select2-felt #

1. Gå til Master Addons > Widget Builder og åbn din widget.
2. På Content tab, tilføj en sektion, hvis der ikke er en endnu.
3. Type select i feltsøgefeltet til venstre. Vælg og Vælg2 kom op.
4. Drag Vælg2 ind i sektionen. Dens indstillinger åbnes i venstre sidebjælke.

Et nyt Select2-felt starter med Vis flere slået til og tre eksempelindstillinger (value-1 til value-3). Udskift dem med dine egne, før du skriver skabelonen.

Vælg2 feltindstillinger forklaret #

Her er feltet Projekttype, sat op til et enkelt valg:

• Label er teksten ud for kontrolelementet i Elementor, for eksempel “Projekttype”.
• Name er feltets unikke id (kun bogstaver, tal og understregninger). Det er også det token, du bruger i skabelonen, så project_type bliver {{project_type}}.
• Description vises under kontrolelementet i Elementor. Brug det til et kort hint som f.eks. “Vælg én kategori.”
• Vis flere? skifter mellem ét valg (Nej) og mange valg (Ja). Dette ændrer, hvad din skabelon modtager, så beslut dig, før du skriver HTML.
• Options er listen over valg. Den venstre boks er den nøgle, din skabelon får (branding, web). Den højre boks er etiketten editors se (Branding, Web Design). Brug plus ikonet for at tilføje en række og det røde kryds for at fjerne en.
• Standardværdi er det, der er valgt, når widgetten først føjes til en side. I enkelttilstand er det en normal dropdown. Hvis du lader den være tom, vælges den første indstilling.

Project Tags bruger de samme muligheder med Vis flere slået til. Boksen Standardværdi bliver en tagvælger, så du kan forudvælge mere end én mulighed. Lad den være tom, og den første mulighed er forudvalgt.

Hvis listen Standardværdi stadig viser de gamle eksempelindstillinger, efter du har redigeret Indstillinger, skal du klikke på Gem indstillinger og åbne feltet igen.

Under Standardværdi finder du de almindelige indstillinger, der deles af de fleste felter: Vis etiket, etiketblok, responsiv kontrol, dynamisk support, frontend tilgængelig, separator, Betingelser og Kontrolklasser. Label Block er værd at slå til for et flere felt, da kontrollen så får den fulde panelbredde for sine tags.

Brug Select2-værdier i din skabelon #

Hvordan du udskriver værdien afhænger af Vis flere.

Enkelttilstand: udskriv nøglen #

En enkelt Select2 fungerer som ethvert andet token. {{project_type}} udskriver den valgte tast, så du kan bruge den som tekst eller bygge en CSS-klasse ud fra den:

<article class="portfolio-card type-{{project_type}}">
  <span class="card-type">{{project_type}}</span>

Med Branding valgt, gengiver det type-branding og branding. Du kan også sammenligne det: {% if project_type == 'web' %}...{% endif %}.

Multipel tilstand: sløjfe over tasterne #

Et multipelt Select2 holder en liste, og {{project_tags}} på sine egne udskrifter ingenting. Sløjf over det i stedet:

<ul class="card-tags">
  {% for tag in project_tags %}
    <li class="card-tag">{{ tag }}</li>
  {% endfor %}
</ul>

Sløjfen kører én gang for hver valgt mulighed, i den rækkefølge redaktøren valgte dem. Inde i det, {{ tag }} er én nøgle, og filtre som f.eks {{ tag|upper }} arbejde også. Den Kvistsyntaksguide viser alt, hvad skabelonmotoren understøtter.

Panelet Dokumentation ved siden af kodeeditoren viser et token for hvert felt. Kopiering {{project_tags}} derfra er fint for enkelte felter, men et flere felt har stadig brug for løkken.

Klik Gem indstillinger når skabelonen er færdig.

Brug Select2-kontrolelementet i Elementor #

Føj widgetten til en side, eller genindlæs editoren, hvis siden allerede var åben. Begge Select2-objekter vises på fanen Content med deres standardindstillinger allerede valgt.

I det multiple kontrolelement skal du klikke på plusknappen eller det tomme mellemrum efter mærkerne og begynde at skrive. Listen indsnævres, mens du skriver, og Enter tilføjer den fremhævede indstilling. Hvert mærke har et lille kryds, der fjerner det.

Det enkelte kontrolelement åbner en dropdown med sit eget søgefelt. Vælg en indstilling, eller brug krydset ud for den aktuelle værdi for at rydde den.

Lærredet opdateres med det samme. Læg mærke til, at panelet viser etiketter (Web Design, Social Media), mens kortet udskriver taster (web, social):

Hvis du har brug for etiketteksten på siden, skal du enten gøre tasten læsbar nok til at blive vist, eller tilknytte den i skabelonen:

{% for tag in project_tags %}
  <li class="card-tag">{% if tag == 'social' %}Social Media{% else %}{{ tag }}{% endif %}</li>
{% endfor %}

Almindelige brugstilfælde #

• Tags eller tjenester på portefølje, casestudie og teamkort.
• En kategori- eller stilvælger, der tilføjer en CSS-klasse, som f.eks type-web.
• Lange lister som lande, brancher eller ikonsæt, hvor søgning gemmer rulning.
• Funktionslister på pris- eller produktkort, sløjfet i listeelementer.

Tips til at arbejde med feltet Select2 #

• Beslut dig for Vis flere først. Hvis du skifter det senere, betyder det, at du ændrer {{field}} til en løkke, eller omvendt.
• Skriv taster med små bogstaver uden mellemrum (social, web). De ender i klassenavne og sammenligninger.
• Omdøb ikke nøgler, efter at widgetten er i brug. Sider, der allerede har gemt den gamle nøgle, matcher ikke den nye.
• Style outputtet med nøglen, for eksempel .type-web .card-type { ... }.
• For en håndfuld ikonknapper i stedet for en dropdown, brug Vælg felt.

Ofte stillede spørgsmål #

Indpakning #

Tilføj feltet Vælg2, indstil dine nøgler og etiketter, og vælg mellem ét valg og mange, før du skriver HTML. Udskriv en enkelt værdi med {{field_name}} og sløjfe over en multipel med {% for %}. For at gentage grupper af felter i stedet for en liste over valg, se på Repeaterfelt, og kontrollere prissætning for hvad hver plan indeholder.