Installert search wp p å baatdeler.no

Dette skulle i utgangspunktet være en enkel oppgave: style et søkefelt.

I praksis ble det en ganske klassisk case av:

• UI framework som styrer layout
• plugin som injiserer HTML med JavaScript
• og CSS som “ikke virker” før du treffer riktig nivå

Tidsbruk (realiteten)

• 10 minutter: aktivere plugin og starte indeksering
• 2 timer: feilsøking, overstyringer og hotfixes før det faktisk så riktig ut + denne post på vår hjemmeside

Utgangspunktet

Målet var enkelt og kommersielt riktig:

• Et rent og nøytralt søkefelt
• Sentrert i header
• Litt bredde på desktop
• Live search som matcher feltet visuelt

Det vi fikk var:

• Et smalt søkefelt som ikke fulgte layouten
• Dropdown som levde sitt eget liv
• CSS som ikke ga effekt
• og styling som i perioder brøt funksjonaliteten

Problem 1: Layouten begrenset bredden

Søket ligger i en YOOtheme-header med:

.uk-child-width-auto

Det betyr i praksis:

Elementet får bare så mye plass som innholdet trenger

Så uansett hva vi satte på inputen, ble den begrenset av parent.

Løsning

Vi sluttet å jobbe på input-nivå og flyttet oss opp i strukturen:

.swp-flex--row {
    display: flex;
    justify-content: center;
    width: 100%;
}

Og deretter styrte vi bredden på containeren:

.searchwp-form-input-container {
    max-width: 800px;
    margin: 0 auto;
}

Problem 2: min-width gjorde ingenting

Vi forsøkte:

min-width: 800px;

Ingen effekt.

Hvorfor?

Fordi parent fortsatt var smalere.
CSS lar ikke barn bli bredere enn forelderen.

Løsning

Vi måtte sette bredden høyere opp:

#searchwp-form-3 {
    min-width: 800px;
}

Problem 3: Dropdownen var feil

Selv etter at inputen var riktig, så dropdown slik ut:

• Smal
• Ikke aligned
• Visuelt feil

Årsaken

SearchWP lager denne:

.searchwp-live-search-results

Den:

• er absolutt posisjonert
• får inline styles fra JS
• styres ikke av input-bredden

Problem 4: Vi stylet feil element

Først traff vi:

.searchwp-live-search-results-container

Men det er bare inner wrapper.

Riktig element var:

.searchwp-live-search-results

Endelig løsning

Når vi traff riktig nivå, ble det enkelt:

@media (min-width: 769px) {
    #searchwp-form-3 .searchwp-form-input-container,
    .searchwp-live-search-results,
    .searchwp-live-search-results-container {
        width: 800px !important;
        min-width: 800px !important;
        max-width: 800px !important;
    }
}

Det som faktisk gjorde forskjellen:

• Samme bredde på input og dropdown
• Overstyring av inline styles
• Riktig selector-nivå

Problem 5: Overengineering

Vi var også innom løsninger som:

position: fixed;
left: 50%;
transform: translateX(-50%);

Resultat:

• Dropdown midt på siden
• Feil stacking
• Dårlig UX

Lærdom

Når pluginen håndterer posisjon via JS, lar du den gjøre det.

Resultatet

Til slutt satt vi igjen med:

• Et søkefelt som matcher layouten
• En dropdown som er visuelt konsistent
• En løsning som er stabil

Ikke noe fancy. Bare riktig.

Hva som faktisk var nøkkelen

Dette var ikke et stylingproblem. Det var et strukturproblem.

Det som gjorde forskjellen:

1. Se på faktisk DOM
2. Identifisere hvilket element som styrer layout
3. Forstå hva JS gjør med inline styles
4. Overstyre på riktig nivå

Oppsummert

Dette er en klassisk situasjon hvor:

• Ting ser enkle ut
• Men UI framework + plugin + JS gjør det komplekst

Når du treffer riktig nivå i DOM-en, faller alt på plass.

Det er der tiden går.

Neste steg

Vi har også besluttet å flytte baatdeler.no ut av legacy-temaet som opprinnelig ble bygget av Shopping Norge. Det erstattes av et eget tema fra Feit Fisk basert på Storefront.

Målet er enklere struktur, bedre kontroll på layout og færre konflikter mellom tema, plugin og custom CSS.

Migreringen er planlagt gjennomført i løpet av april.

Stay tuned.