Ajax-filtrering

Alle Shoporama-butikker har et innebygd /ajax-endepunkt som returnerer produkter i JSON-format. Dette gjør det mulig å bygge dynamisk filtrering, lazy loading og uendelig skrolling uten å laste inn siden på nytt, noe som gir kunden en rask og moderne opplevelse.

Denne artikkelen er først og fremst skrevet for utviklere og de som bygger eller tilpasser sitt eget tema. Hvis du bruker Delaware-temaet, har du allerede ajax-filtrering uten videre og trenger ikke å kalle endepunktet selv.

Slik kaller du endepunktet

Et enkelt anrop som henter produkter fra én eller flere kategorier:

fetch('/ajax?categories=123&limit=24') .then(response => response.json()) .then(products => { products.forEach(p => console.log(p.name, p.price)); });

Som standard returnerer endepunktet en JSON-array med produkter. Hvis du vil inkludere metadata og paginering, legger du til include_meta=1 og include_pagination=1. Da får du et objekt med produkter, meta og paginering i stedet.

Tilgjengelige parametere

Flere av parameterne tar pipe-separerte verdier, slik at du kan filtrere på flere ting samtidig. For eksempel categories=12|34|56.

Eksempel: Kategori, prisklasse og farge

Hent røde produkter mellom 100 og 500 kr. fra to kategorier, sortert etter stigende pris:

const params = new URLSearchParams({ categories: '12|34', price_range: '100|500', attribute_tags: 'red', sort: 'price', sort_order: 'asc', limit: 24 }); fetch('/ajax?' + params) .then(r => r.json()) .then(products => renderProducts(products));

Eksempel: Filtrer med ekstra felt og hent metadata

Utvidelsesfelt er angitt med ID-en til utvidelsesfeltet i parentes. Du finner ID-en under Innstillinger → Utvidede felt i admin. Eksempel der utvidelsesfelt 5 (f.eks. "materiale") skal være enten "bomull" eller "lin":

// extension[5]=bomull|linen fetch('/ajax?categories=12&extension[5]=' + encodeURIComponent('cotton|linen') + '&include_meta=1&include_pagination=1&limit=24') .then(r => r.json()) .then(data => { console.log(data.products); console.log(data.meta.attributes); console.log(data.pagination); });

Felt på hvert produkt i svaret

Hvert produkt i products-matrisen har blant annet følgende felt:

• product_id, own_id, name, description, list_description
• price, real_price, sale_price, price_dk (dansk formatert)
• lager, attr_lager, variant_lager, lager_streng_en
• brand_name, supplier_id, supplier_name, profile_name
• category_ids, category_names
• miniatyrbilde (200x200 fit), miniatyrbilder (matrise av alle bilder i 200x200), url
• avg_rating, online_since, delivery_time, delivery_time_not_in_stock, approx_shipping
• har_kampanjer, kampanje_info
• meta_values (fylles bare ut hvis du sender meta=...)

Hvis forhandleren har aktivert "skjul lager via ajax", vil lager, attr_stock og lagerantall i variant_stock være null, slik at lagertallene ikke lekker ut offentlig.

Bufring

Endepunktet bufres på serveren i 12 timer per unike URL. Svaret sendes også med riktige Last-Modified- og Expires-overskrifter, slik at nettlesere og mellomliggende cacher kan returnere en rask 304 Not Modified hvis innholdet er uendret. Dette gir raske svartider, men betyr også at endringer i et produkt først trer i kraft etter at hurtigbufferen er utløpt. Du kan tvinge frem en gjenoppbygging av hurtigbufferen for en bestemt URL ved å legge til rebuild=1.

Les mer i artikkelen Cache i Shoporama, som går gjennom hurtigbufferlagene generelt.

Implementering i temaet ditt

For å bygge en komplett ajax-filtrert produktliste må utvikleren vanligvis

1. Bygge filtergrensesnittet med avmerkingsbokser eller rullegardinlister basert på meta.attributes, meta.brands og meta.categories
2. lytte til endringer i filtrene og kompilere dem til en spørringsstreng
3. Anrop /ajax med de valgte parameterne
4. Oppdater produktlisten dynamisk og vis paginering basert på pagination.total

Ofte stilte spørsmål

Hvor finner jeg ID-en til et ekstra felt eller en attributtverdi?

I administratoren under Innstillinger → Utvidede felt for ekstra felt og under Innstillinger → Profiler for attributtverdier. ID-ene vises i listen eller i URL-en når du redigerer et felt.

Hvorfor får jeg ingen resultater når jeg bruker category_id=123?

Fordi parameteren ikke finnes. Endre til categories=123 (flertall). Dette er en av de vanligste feilene når du bygger ajax-filtrering for første gang. Sjekk også at du ikke bruker price_from/price_to eller extra_field[...], som heller ikke finnes.

Endringene mine i et produkt gjenspeiles ikke i /ajax. Hva bør jeg gjøre?

Endepunktet bufres i 12 timer. Vent, eller hent URL-en med &rebuild=1 for å tvinge frem en ny generering av den aktuelle URL-en.

Påvirker mange ajax-kall hastigheten på nettstedet mitt? (Mikkel, utvikler)

Cachen sørger for at gjentatte anrop går raskt. Vær imidlertid forsiktig så du ikke gjør et nytt anrop for hvert tastetrykk i en søkeboks. Bruk "debounce", slik at du bare ringer når brukeren tar en pause på 200-300 ms. Nettleseren bruker også If-Modified-Since, slik at uendrede svar kommer som 304, og nesten ingen båndbredde brukes.

Får jeg det samme resultatet som på kategorisiden?

Ja, stort sett. /ajax respekterer de samme reglene som ProductFactory bruker på kategorisidene, så filtrering, sortering og synlighet (f.eks. skjulte produkter) oppfører seg på samme måte.

Kan jeg gjøre søk på toppen av /ajax? (Sofie, nyansatt)

/ajax tar ikke en fritekstsøkeparameter. For søk må du bruke Shoporamas dedikerte søkeendepunkt i temaet (vanligvis /search) eller filtrere på product_ids hvis du gjør søket selv og bare vil hente data på en kjent liste over produkter.

Hvor mange produkter kan jeg hente i ett anrop? (Jonas, skala)

Det er ingen fast grense i koden, men for å holde JSON-nyttelasten liten og svaret raskt, bør du holde det under noen hundre per anrop. Bruk limit og offset til sidetelling, eller hent bare neste batch når brukeren blar.

Vil kundenes lagerbeholdning bli eksponert offentlig? (Malene, Markedsføring)

I utgangspunktet inneholder svaret lagerantallet. Hvis du vil skjule det (slik at konkurrenter eller roboter ikke kan se hvor mye du har på lager), kan utvikleren din aktivere "skjul lager via ajax" i nettbutikken, og deretter sendes lagerfeltene som null.

Kan jeg bruke /ajax som et "ekte" REST API? (Mikkel, utvikler)

Nei, det er et offentlig cache-vennlig produktendepunkt for frontend-bruk. Hvis du trenger å opprette, oppdatere eller integrere på et dypere nivå, må du i stedet bruke det faktiske REST API -et, som krever en API-nøkkel.

Bør jeg være bekymret for at filtreringen fungerer ulikt for kunder på ulike språk?

Endepunktet kjører i samme nettbutikk-kontekst som forsiden, slik at priser, valuta og synlighet følger nettbutikken som anropet rammer inn. Hvis du har flere nettbutikker eller språk, må du huske at hver nettbutikk har sin egen URL, og dermed sin egen /ajax-cache.

Vil du at vi skal hjelpe deg med å bygge inn ajax-filtrering i temaet ditt, eller har du tekniske spørsmål? Skriv til support@shoporama.dk.