Fyrir forritara

Þú smíðar vefinn.
Restin er til í Eldra.

Smíðaðu vefinn í því framework sem þú vilt. Vörurnar, karfan og efnið koma úr Eldra í gegnum TypeScript SDK og greiðslan fer fram á greiðslusíðu Eldra.

Heyrðu í okkur headless-kit á GitHub

$npm install @eldrajs/sdk @eldrajs/vue

Opinn kóði, MIT-leyfi
Á npm undir @eldrajs
Enginn API-lykill

Ekki með forritara? Við smíðum vefinn fyrir þig. Heyrðu í okkur

pages/haustlina.vuenuxt.config.tsVue

<script setup lang="ts">import { createEldraClient } from '@eldrajs/sdk';import { EldraImage } from '@eldrajs/vue'; const { eldraOrgId } = useRuntimeConfig().public;const eldra = createEldraClient({ orgId: eldraOrgId }); const { data: products } = await useAsyncData('haustlina', async () =>  (await eldra.catalog.listCollectionProducts('haustlina')).data);</script> <template>  <ul class="grid">    <li v-for="product in products" :key="product.id">      <EldraImage        :src="product.thumbnail"        :alt="product.title"        sizes="(min-width: 1024px) 25vw, 50vw"        :aspect-ratio="4 / 5"      />      <h3>{{ product.title }}</h3>    </li>  </ul></template>

Allt á npm undir @eldrajs.

Kóðinn er opinn í headless-kit á GitHub. Þú getur lesið hann, fylgst með breytingum og sent inn lagfæringar.

@eldrajs/sdk
SDK
TypeScript client fyrir vörulistann, körfuna, efnið, pantanir og birgðir. Bara fetch, svo hann keyrir í vafra, í Node og á edge.
- Vite plugin sem býr til TypeScript types úr skemunum þínum við hvert build.
- Slóð á greiðslusíðuna fyrir körfuna.
- Forskoðunarlykill fyrir drög.
npm install @eldrajs/sdk
@eldrajs/vue
Vue components
RichText og EldraImage fyrir Vue 3 og Nuxt, og í @eldrajs/ui eru Button, Input, Select, VariantPicker og fleiri. Útlitinu stýrirðu með CSS design tokens.
- RichText birtir rich text úr Studio, og þú getur skipt út hvaða node sem er.
- EldraImage með srcset í réttum stærðum.
- toHtml úr @eldrajs/rich-text ef þú notar ekki Vue.
npm install @eldrajs/vue @eldrajs/ui
@eldrajs/theme-nuxt
Þemu fyrir síðusmiðinn
Þú smíðar einingarnar sem viðskiptavinurinn þinn raðar saman í síðusmiðnum. eldra-theme deploy sendir vefinn og einingarnar til Eldra.
- Hver eining er block.json og Vue component.
- eldra-theme CLI í @eldrajs/theme-cli: init, validate og deploy.
- Forskoðun í Studio á meðan efnið er í drögum.
npm install @eldrajs/theme-nuxt

Opinn kóði undir MIT-leyfi. Vantar eitthvað? Opnaðu issue á GitHub.

Nuxt starter headless-kit á GitHub @eldrajs/sdk á npm

Vörur og karfa

Vörulistinn og karfan koma úr Eldra.

Vörur, flokkar, vörusöfn og leit koma úr sama vörulista og kassinn í búðinni notar. Karfan er geymd hjá Eldra, sem reiknar verð, afslætti og VSK.

Enginn API-lykill. Eldra svarar bara lénum sem eru skráð í Studio.
Responsive myndir í AVIF eða WebP.
Birgðastaðan sú sama og kassinn sér.

cart.tsTypeScript

import { eldra } from './eldra'; export async function addToCart(productId: string, variantId: string) {  const cart = await eldra.cart.addItem({    cartId: localStorage.getItem('cartId') ?? undefined,    productId,    variantId,    quantity: 1,  });  localStorage.setItem('cartId', cart.id);  return cart.totals;}

Skemu

Þú skilgreinir efnið í Studio.

Skemu lýsa efninu á vefnum: námskeiðum, starfsfólki, algengum spurningum eða hverju sem vefurinn þarf. Þú skilgreinir reitina í Studio, viðskiptavinurinn þinn fyllir þá út í vefumsjóninni og Vite plugin-ið býr til TypeScript types úr þeim.

Texti, rich text, myndir, tilvísanir, vallistar og fleira.
Types verða til í .eldra/ við hvert dev og build.
Forskoðunarlykill sýnir drögin áður en þau eru birt.

Reitur	Auðkenni	Tegund
Titill	`title`	Stuttur texti
Slóð	`slug`	Slóðarheiti
Lýsing	`body`	Sniðinn texti
Mynd	`image`	Miðill
Kennari	`teacher`	Tilvísun
Stig	`level`	Vallisti

courses.tsTypeScript

import { toHtml } from '@eldrajs/rich-text'; // Types koma úr skemanu í Studio.const { data: courses } = await eldra.cms.list('course'); const first = courses[0];const html = toHtml(first.data.body);

Webhooks

Nýtt build þegar efni er birt.

Ef vefurinn er static sendir Eldra webhook þegar eitthvað breytist, til dæmis cms.entry.published, og vefurinn er deployaður aftur. Deploy-webhook fyrir Cloudflare Pages bíður í mínútu og safnar breytingum saman.

Atburðir fyrir efni, vörur, myndir, pantanir og bókanir.
Undirritað með HMAC-SHA256.
Misheppnaðar sendingar eru reyndar aftur og sjást í Studio.

Webhooks

Nýr webhook

Endurbyggja hnoda.isCloudflare Pages · Hlustar á 3 atburðiVirkur
LeitarvísirHTTP webhook · Hlustar á 4 atburðiVirkur

2 breytingar bíða til 14:32.

Nýlegar sendingar

Tími	Atburðir	Staða
14:31	`cms.entry.published`	Í bið
13:05	`catalog.product.updated`	Tókst
11:48	`cms.entry.published`	Tókst

verify.tsNode

import { createHmac, timingSafeEqual } from 'node:crypto'; export function fromEldra(body: string, h: Headers, key: string) {  const ts = h.get('X-Eldra-Timestamp') ?? '';  if (Math.abs(Date.now() / 1000 - Number(ts)) > 300) return false;  const mac = createHmac('sha256', key)    .update(`${ts}.${body}`)    .digest('hex');  const want = Buffer.from(`v1=${mac}`);  const got = Buffer.from(h.get('X-Eldra-Signature') ?? '');  return got.length === want.length    && timingSafeEqual(got, want);}

MCP

Claude vinnur í Studio, með þeim heimildum sem eru stilltar þar.

Eldra er með MCP server, svo Claude getur lesið og breytt efni, vörum og birgðum. Í Studio er valið hvað Claude má gera, og Claude vinnur alltaf sem notandinn sem skráði sig inn, með sömu réttindi.

Claude skrifar drög og birtir ekkert nema það sé leyft í Studio.
Verð og birgðir aðeins ef kveikt er á því.
Í Claude Code eða claude.ai, með Studio-aðgangi hvers og eins.

ClaudeHnoða · Eldra MCP

Skrifaðu enskan texta við nýju lopapeysuna og settu birgðirnar í 12.

get_productLopapeysa · Ljós

update_productEnskur texti á óvirkri vöru

set_stockEkki leyft hjá Hnoða

Enski textinn er kominn inn. Peysan er ekki enn virk, svo hún sést ekki á vefnum fyrr en einhver virkjar hana í Studio. Ég má ekki breyta birgðum hjá Hnoða. Ef þið viljið leyfa það er kveikt á «Breyta birgðum» í Studio.

Greiðslusíðan

Greiðslan fer fram á greiðslusíðu Eldra.

Þú þarft ekki að smíða greiðsluferli. Þegar karfan er tilbúin færðu slóð á greiðslusíðu Eldra, þar sem kaupandinn velur afhendingu, greiðir og fær staðfestingu. Pöntunin birtist svo í Studio eins og hver önnur.

Sent með Póstinum eða Dropp, eða sótt í búðina.
Kortagreiðslur í gegnum færsluhirði verslunarinnar.
Kortanúmer fara aldrei um þinn kóða.

Það sem þú þarft ekki að smíða.

Allt á bak við vefinn er þegar til í Eldra. Þú tengist því með SDK-inu.

Þú smíðar

Vefinn sjálfan.

Framework-ið. Nuxt, Vue, Astro eða bara HTML.
Útlitið. Hönnunin, letrið og hreyfingarnar eru þínar.
Hýsinguna. Hjá Eldra með eldra-theme deploy, eða hvar sem þú vilt.
Hvernig hann keyrir. Static, SSR eða blanda af hvoru tveggja.

Þú þarft ekki að smíða

Það er allt til í Eldra.

Vörulista og birgðir. Sama vöruskrá og kassinn í búðinni notar.
Körfu og greiðsluferli. Verð, afslættir og VSK reiknast í körfunni og greiðslusíðan tekur við greiðslunni.
Pantanir og sendingar. Pósturinn og Dropp eru þegar tengd.
Vefumsjón. Viðskiptavinurinn þinn breytir efninu sjálfur í Studio.

Algengar spurningar

Þarf ég API-lykil?: Nei. Vefurinn sendir auðkenni fyrirtækisins. Pantanir, karfa og bókanir koma bara frá lénum sem eru skráð í Studio.
Er til OpenAPI-skjal?: Já, á /api/public/openapi.json.
Hvaða framework get ég notað?: Hvaða framework sem er. Nuxt er best stutt.
Get ég prófað Eldra?: Heyrðu í okkur og við ræðum það.
Get ég unnið með ykkur?: Já. Við vinnum með sjálfstæðum forriturum og vefstofum og bjóðum þeim sérkjör. Heyrðu í okkur.

Næsta skref

Heyrðu í okkur.

Segðu okkur frá rekstrinum og hvað þú vilt að kerfið geri.

headless-kit á GitHub @eldrajs/sdk á npm Bara vefur

Eða sendu póst á eldra@eldra.is

Þú smíðar vefinn.
Restin er til í Eldra.

Allt á npm undir @eldrajs.

SDK

Vue components

Þemu fyrir síðusmiðinn

Vörulistinn og karfan koma úr Eldra.

Haustlínan er komin

Haustlína

Þú skilgreinir efnið í Studio.

Námskeið

Nýtt build þegar efni er birt.

Webhooks

Claude vinnur í Studio, með þeim heimildum sem eru stilltar þar.

Gervigreindaraðstoð

Greiðslan fer fram á greiðslusíðu Eldra.

Það sem þú þarft ekki að smíða.

Þú smíðar

Þú þarft ekki að smíða

Algengar spurningar

Heyrðu í okkur.

Þú smíðar vefinn. Restin er til í Eldra.

Allt á npm undir @eldrajs.

SDK

Vue components

Þemu fyrir síðusmiðinn

Vörulistinn og karfan koma úr Eldra.

Þú skilgreinir efnið í Studio.

Nýtt build þegar efni er birt.

Claude vinnur í Studio, með þeim heimildum sem eru stilltar þar.

Greiðslan fer fram á greiðslusíðu Eldra.

Það sem þú þarft ekki að smíða.

Þú smíðar

Þú þarft ekki að smíða

Algengar spurningar

Heyrðu í okkur.

Þú smíðar vefinn.
Restin er til í Eldra.