https://oxid-esales.com/assets/OpalAttributgruppenPage-NsyAO2z3.js

1import{j as e}from"./vendor-ui-srD7R-Zr.js";import{r as g}from"./vendor-i18n-DtlmU0Vb.js";import{S as f}from"./SEOHead-DFGqe1Uz.js";import{c as j,d as c,B as s,L as w,A as u,k,j as m}from"./index-Cl50YbWy.js";import{C as a,c as l}from"./card-2FNxPkSo.js";import{A,a as v,b as N,c as z}from"./accordion-CuD9YxUj.js";import{A as r}from"./AnimatedSection-BrTxaeeR.js";import{S as P}from"./StaggeredAnimation-CHD3kroF.js";import{S as y}from"./StandardHero-BjTz0K9E.js";import{B as S}from"./BrevoContactForm-YsOjGt8g.js";import{o as G}from"./oxid-opal-grafik-BoYE_KV9.js";import{B as O}from"./BlueprintSection-CFnEeXjR.js";import{S as I}from"./share-2-BLY584yY.js";import{L as o}from"./vendor-react-4t1c1o1L.js";import"./vendor-recharts-BMEKEyEe.js";import"./input-DhK7JSUA.js";import"./label-CfLvV09J.js";import"./circle-alert-BYxcQNku.js";import"./send-iPnoUnZy.js";/**
2 * @license lucide-react v0.462.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const h=j("List",[["path",{d:"M3 12h.01",key:"nlz23k"}],["path",{d:"M3 18h.01",key:"1tta3j"}],["path",{d:"M3 6h.01",key:"1rqtza"}],["path",{d:"M8 12h13",key:"1za7za"}],["path",{d:"M8 18h13",key:"1lx6n3"}],["path",{d:"M8 6h13",key:"ik3vkj"}]]),x=[{id:"shopbetreiber",label:"Shop-Betreiber",title:"Shop-Betreiber / E-Commerce Manager",scenario:"Deine Produkte haben viele technische Attribute, und die Produktseite zeigt sie als lange, flache Liste, die sich schwerer erfassen lässt als eine gegliederte Struktur.",benefit:"Du strukturierst deine Spezifikationen nach Themen (z. B. Chassis, Motor, Akku), ohne dein bestehendes Attributmodell anzufassen. Kunden erfassen die relevanten Werte schneller und können Produkte leichter vergleichen. Dieselbe Struktur steht per OXAPI allen Kanälen zur Verfügung, sodass Shop, App und weitere Ausgaben konsistent aussehen. Icons pro Gruppe machen die Blöcke zusätzlich schnell erkennbar.",cta:"OPAL anfragen"},{id:"partner",label:"Partner / Agentur",title:"Partner / Agenturen",scenario:"Dein Kunde will strukturierte Produktspezifikationen über mehrere Kanäle, ohne dass die bestehenden Attributdaten migriert werden müssen.",benefit:"Du lieferst eine getestete Gruppen-Ebene mit Storefront-Accordion und OXAPI-Anbindung als Baustein, statt sie von Grund auf zu entwickeln. Die Architektur ist sauber getrennt (Repositories, Services, GraphQL-DataTypes) und für eine spätere Attribut-Hierarchie vorbereitet. Du investierst deine Zeit in Theme-Integration und Datenpflege, nicht ins Grundgerüst.",cta:"OPAL anfragen"},{id:"katalog",label:"Katalog / PIM",title:"Katalog- / PIM-Manager",scenario:"Du pflegst viele Produkte mit zahlreichen Attributen und brauchst eine konsistente, wiederverwendbare Struktur statt Sortierung im Einzelfall.",benefit:"Du definierst Gruppen einmal – mit Reihenfolge, Übersetzungen und Icons – und ordnest Attribute dort zu, wo sie hingehören (auch mehrfach). Die Reihenfolge innerhalb einer Gruppe ist steuerbar, sodass Spezifikationen über alle Produkte gleich aufgebaut sind. Über OXAPI ist die Struktur maschinenlesbar für weitere Systeme verfügbar.",cta:"OPAL anfragen"}],D=[{title:"Verschachtelte Gruppen beliebiger Tiefe",description:"Jede Gruppe kann eine übergeordnete Gruppe, sortierte Geschwister und beliebig viele Untergruppen haben. Die Reihenfolge wird je Ebene über die Sortierung gesteuert."},{title:"Mehrfachzuordnung & Reihenfolge",description:"Ein Attribut kann zu mehreren Gruppen gehören; die Reihenfolge der Attribute innerhalb einer Gruppe ist frei definierbar. So bleiben Spezifikationen über alle Produkte einheitlich aufgebaut."},{title:"Übersetzbare Titel & Beschreibungen",description:"Gruppentitel und -beschreibungen sind mehrsprachig pflegbar (OXID-Standard-Sprachspalten), inklusive optionaler Beschreibung je Gruppe."},{title:"Verwaltung im Admin – Zuweisung über Begleitmodul",description:'Im Admin-Menü „OPAL → Attributgruppen" werden Gruppen angelegt, umbenannt, um-gehängt, sortiert und mit einem Icon versehen. Das Zuweisen einzelner Attribute an Gruppen erfolgt über einen „Gruppen"-Tab, der das optionale Begleitmodul opal/opalattributemanager voraussetzt. Ohne dieses Modul funktioniert die Gruppenverwaltung, der Zuweisungs-Tab wird jedoch nicht angezeigt.'}],B=[{title:"Storefront-Accordion (Apex-Theme)",description:'Im Bereich „Spezifikation" der Produktseite werden gruppierte Attribute als tiefenbewusstes Accordion dargestellt: die erste oberste Gruppe ist standardmäßig geöffnet, Untergruppen erscheinen als betitelte Absc

6hnitte.'},{title:"Gruppen-Icons ohne externen CDN",description:'Jeder Gruppe lässt sich ein Bootstrap-Icon zuweisen (z. B. „bi bi-gear"), das neben dem Titel erscheint. Die Icons werden lokal ausgeliefert – kein externer CDN-Aufruf, damit auch DSGVO-sensible und offline betriebene Shops unberührt bleiben.'},{title:"OXAPI / GraphQL-fähig",description:"Der komplette Gruppenbaum mit verschachtelten Kindern und Attribut-Referenzen inklusive Reihenfolge ist per OXAPI abrufbar (setzt das Paket graphql-base voraus)."}],L=[],M=[{question:"Für welche Shops lohnt sich das?",answer:"Für Sortimente mit vielen technischen Attributen – Maschinen, Elektronik, E-Bikes, Fahrzeug- und Ersatzteile, Haushaltsgeräte. Überall dort, wo eine lange, flache Attributliste unübersichtlich wird und thematische Blöcke die Spezifikation verständlicher machen."},{question:"Muss ich mein bestehendes Attributmodell umbauen?",answer:"Nein. Die flache Attributstruktur bleibt vollständig erhalten; die Gruppen liegen als zusätzliche Ebene darüber. Die Gruppenebene ist außerdem so angelegt, dass sie als erste Stufe einer späteren hierarchischen Attributstruktur dienen kann, ohne Daten, API oder Storefront zu brechen."},{question:"Wie sieht das für den Kunden aus?",answer:'Sobald ein Produkt mindestens ein gruppiertes Attribut hat, zeigt die Produktseite die Attribute als Accordion unter ihren Gruppenüberschriften (Apex-Theme). Attribute ohne Gruppe erscheinen automatisch unter „Weitere Attribute", sodass nichts verloren geht.'},{question:"Wie weise ich Attribute den Gruppen zu?",answer:'Die Gruppen selbst legst du im Admin unter „OPAL → Attributgruppen" an (inkl. Reihenfolge, Übersetzung und Icon). Für das Zuweisen einzelner Attribute an Gruppen wird das optionale Begleitmodul opal/opalattributemanager benötigt, das den „Gruppen"-Tab bereitstellt. Ohne dieses Modul läuft die Gruppenverwaltung, der Zuweisungs-Tab wird aber nicht angezeigt.'},{question:"Sind die Gruppen über die API verfügbar?",answer:"Ja. Über OXAPI/GraphQL steht der verschachtelte Gruppenbaum mit Attribut-Referenzen und Reihenfolge bereit. Das setzt das Paket graphql-base in der Host-Anwendung voraus; ist es nicht vorhanden, werden die GraphQL-Endpunkte still übersprungen."},{question:"Welche Voraussetzungen gibt es?",answer:"Die Storefront-Ausgabe ist für das Apex-Theme umgesetzt (Accordion); eine Tabs-Variante ist enthalten, erfordert aber eine Theme-Anpassung."}],te=()=>{const[d,p]=g.useState("shopbetreiber"),n=x.find(t=>t.id===d),b=m().includes("/loesungen/opal")||m().includes("/solutions/opal");return e.jsxs(e.Fragment,{children:[e.jsx(f,{title:"Attributgruppen für OXID eShop – Specs sauber strukturiert",description:"Ordnet Produktattribute in benannte, verschachtelbare Gruppen – für eine klar strukturierte Spezifikation als Accordion auf der Produktseite. Baustein von OXID."}),e.jsx(y,{title:"OPAL",titleHighlight:"Attributgruppen",subtitle:"Produktattribute in benannte, verschachtelte Gruppen ordnen – für eine klar strukturierte Spezifikation auf der Produktseite, konsistent über alle Kanäle.",primaryButton:{label:"OPAL anfragen",onClick:()=>{var t;return(t=document.getElementById("opal-request-form"))==null?void 0:t.scrollIntoView({behavior:"smooth"})}},secondaryButton:{label:"Funktionen ansehen",href:"#features"}}),e.jsx("section",{className:"py-4 bg-background border-b",children:e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{className:"flex flex-wrap items-center justify-center gap-x-8 gap-y-2 text-sm text-muted-foreground",children:[e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(c,{className:"h-4 w-4 text-primary"}),"Für OXID eShop 7.4"]}),e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(c,{className:"h-4 w-4 text-primary"}),"Direkt vom Plattform-Hersteller"]})]})})}),e.jsxs("section",{className:"py-20 bg-gradient-to-br from-primary to-accent relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0",children:[e.jsx("div",{className:"absolute top-1/4 left-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl"}),e.jsx("div",{className:"absolute bottom-1/4 right-1/4 w-64 h-64 bg-white/5 rounded-full blur-3xl"})]}),e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative",children:e.jsxs(r,{animation:"fade-in-up",children:[e.jsxs("p",{className:"text-white/70 text-sm font-medium mb-3 flex items-center gap-2",children:[e.jsx(h,{className:"h-4 w-4"}),"Eine lange Attributliste ist schwerer zu erfassen als eine gegliederte."]}),e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-white mb-6 font-alexandria",children:"Aus der Attributliste wird eine klare Struktur"}),e.jsx("p",{className:"text-white/90 text-lg max-w-3xl mb-8",children:"Technische und erklärungsintensive Produkte haben viele Attribute. Flach untereinander gelistet sind sie schwer zu erfassen und über die Kanäle uneinheitlich. Mit benannten Gruppen – etwa Chassis, Motor, Akku – werden Spezifikationen scanbar und konsistent, ohne dass das bestehende, flache Attributmodell angetastet wird."}),e.jsx(s,{size:"lg",className:"bg-white text-primary hover:bg-white/90",onClick:()=>{var t;return(t=document.getElementById("opal-request-form"))==null?void 0:t.scrollIntoView({behavior:"smooth"})},children:"Jetzt anfragen"})]})})]}),e.jsx("section",{className:"py-20 bg-background",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsx(r,{animation:"fade-in-up",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-12 font-alexandria text-center",children:"Was der OPAL für dich löst"})}),e.jsx(P,{animation:"fade-in-up",staggerDelay:.15,className:"grid md:grid-cols-3 gap-8 max-w-5xl mx-auto",children:[{icon:w,text:"Ordne Attribute in benannte, beliebig tief verschachtelbare Gruppen (z. B. Chassis, Motor, Akku)."},{icon:h,text:'Zeige eine klar strukturierte Spezifikation als Accordion – nicht zugewiesene Attribute landen automatisch unter „Weitere Attribute".'},{icon:I,text:"Das bestehende Attributmodell bleibt intakt; die Struktur ist per OXAPI für alle Kanäle abrufbar."}].map((t,i)=>e.jsx(a,{className:"bg-card rounded-2xl border-0 shadow-[0_0_20px_rgba(0,0,0,0.12)] h-full hover:shadow-xl transition-all duration-300",children:e.jsxs(l,{className:"p-8",children:[e.jsx("div",{className:"w-12 h-12 bg-oxid-red/10 rounded-xl flex items-center justify-center mb-5 mx-auto",children:e.jsx(t.icon,{className:"h-6 w-6 text-oxid-red"})}),e.jsx("p",{className:"text-foreground text-lg leading-relaxed text-center",children:t.text})]})},i))})]})}),!b&&e.jsx("section",{className:"py-10 bg-gradient-to-b from-secondary from-[67%] to-background to-[67%]",children:e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:e.jsx(r,{animation:"fade-in-up",children:e.jsxs("div",{className:"rounded-3xl bg-gradient-to-r from-primary to-accent relative overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]"}),e.jsxs("div",{className:"relative grid grid-cols-1 lg:grid-cols-2 gap-0",children:[e.jsxs("div",{className:"p-8 lg:p-12 flex flex-col justify-center",children:[e.jsx("p",{className:"text-white/70 text-sm mb-1",children:"Teil der OPAL-Familie"}),e.jsx("p",{className:"text-white font-medium max-w-xl mb-6",children:"OPALe sind Bausteine von OXID eSales: eine erprobte, solide Basis, die an deine Systemlandschaft angepasst und in deinen Shop integriert werden muss."}),e.jsx("div",{children:e.jsxs(o,{to:"/loesungen/opal",className:"h-12 px-6 rounded-2xl font-semibold border-2 border-white/70 text-white hover:bg-white/20 backdrop-blur-sm text-sm transition-all duration-300 inline-flex items-center justify-center gap-2",children:["Alle OPALe entdecken",e.jsx(u,{className:"w-4 h-4"})]})})]}),e.jsxs("div",{className:"hidden lg:block relative min-h-[240px]",children:[e.jsx("img",{src:G,alt:"OXID OPAL Module",className:"absolute inset-0 w-full h-full object-cover rounded-r-3xl",loading:"lazy"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-primary/40 via-primary/10 to-transparent roun

6ded-r-3xl"})]})]})]})})})}),e.jsx("section",{id:"features",className:"py-20 bg-background overflow-visible",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 overflow-visible",children:[e.jsx(r,{animation:"fade-in-up",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-12 font-alexandria text-center",children:"Funktionen im Überblick"})}),e.jsx(O,{featuresLeft:D,featuresRight:B,featuresBottom:L})]})}),e.jsx("section",{className:"py-20 bg-background",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsx(r,{animation:"fade-in-up",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-8 font-alexandria text-center",children:"Für wen ist der OPAL gedacht?"})}),e.jsx("div",{className:"flex flex-wrap justify-center gap-2 mb-10",children:x.map(t=>e.jsx("button",{onClick:()=>p(t.id),className:`px-4 py-2 rounded-full text-sm font-medium transition-all ${d===t.id?"bg-primary text-white shadow-lg":"bg-card text-muted-foreground hover:bg-muted shadow-[0_0_10px_rgba(0,0,0,0.08)]"}`,children:t.label},t.id))}),e.jsx("div",{className:"max-w-4xl mx-auto",children:e.jsx(a,{className:"bg-card rounded-2xl border-0 shadow-[0_0_20px_rgba(0,0,0,0.12)]",children:e.jsxs(l,{className:"p-8 md:p-10",children:[e.jsx("h3",{className:"text-2xl font-bold text-foreground font-alexandria mb-4",children:n.title}),e.jsx("p",{className:"text-muted-foreground italic mb-6",children:n.scenario}),e.jsx("h4",{className:"font-semibold text-foreground mb-3",children:"Was der OPAL hier konkret bringt"}),e.jsx("p",{className:"text-muted-foreground mb-6",children:n.benefit}),e.jsxs(s,{onClick:()=>{var t;return(t=document.getElementById("opal-request-form"))==null?void 0:t.scrollIntoView({behavior:"smooth"})},className:"gap-2",children:[n.cta,e.jsx(u,{className:"h-4 w-4"})]})]})})})]})}),e.jsx("section",{className:"py-20 bg-secondary",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsx(r,{animation:"fade-in-up",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-12 font-alexandria text-center",children:"Häufige Fragen"})}),e.jsx(r,{animation:"fade-in-up",delay:.1,children:e.jsx("div",{className:"max-w-3xl mx-auto",children:e.jsx(A,{type:"single",collapsible:!0,className:"space-y-4",children:M.map((t,i)=>e.jsxs(v,{value:`faq-${i}`,className:"bg-card rounded-2xl border-0 shadow-[0_0_20px_rgba(0,0,0,0.12)] px-6 data-[state=open]:shadow-md transition-all hover:shadow-sm",children:[e.jsx(N,{className:"font-semibold hover:no-underline py-6 text-foreground",children:t.question}),e.jsx(z,{className:"text-muted-foreground pb-6 pt-0",children:t.answer})]},i))})})})]})}),e.jsx("section",{className:"py-20 bg-background",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsx(r,{animation:"fade-in-up",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-12 font-alexandria text-center",children:"Preis"})}),e.jsx(r,{animation:"fade-in-up",delay:.1,children:e.jsxs("div",{className:"max-w-sm mx-auto",children:[e.jsx(a,{className:"bg-card rounded-2xl border-0 shadow-[0_0_20px_rgba(0,0,0,0.12)]",children:e.jsx(l,{className:"p-8 text-center",children:e.jsx("p",{className:"text-4xl font-bold text-foreground font-alexandria mb-1",children:"10 €/Monat"})})}),e.jsxs("p",{className:"text-sm text-muted-foreground text-center mt-4",children:["OPALe sind auch in"," ",e.jsx(o,{to:"/loesungen/opal#opal-pricing",className:"text-primary hover:underline font-medium",children:"Abonnement-Paketen"})," ","erhältlich."]})]})})]})}),e.jsx("section",{id:"opal-request-form",className:"py-20 bg-background",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsx(r,{animation:"fade-in-up",children:e.jsx("div",{className:"text-center mb-10",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-4 font-alexandria",children:"Noch Fragen?"})})}),e.jsx(S,{hideHeader:!0,interesseAn:"Attributgruppen",formType:"opal-detail"})]})}),e.jsx("section",{className:"py-20 bg-gradient-to-br from-primary to-accent",children:e.jsx("div",{className:"container mx-auto px-4",children:e.jsx(r,{animation:"fade-in-up",children:e.jsxs("div",{className:"max-w-3xl mx-auto text-center",children:[e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-white mb-6 font-alexandria",children:"OPAL Attributgruppen anfragen"}),e.jsx("p",{className:"text-xl text-white/90 mb-8",children:"Strukturierte Produktspezifikationen – ohne Umbau deines Attributmodells."}),e.jsxs("div",{className:"flex flex-col sm:flex-row gap-4 justify-center",children:[e.jsxs(s,{size:"lg",className:"bg-white text-primary hover:bg-white/90 gap-2",onClick:()=>{var t;return(t=document.getElementById("opal-request-form"))==null?void 0:t.scrollIntoView({behavior:"smooth"})},children:[e.jsx(k,{className:"h-4 w-4"}),"Jetzt anfragen"]}),e.jsx(o,{to:"/loesungen/opal",children:e.jsx(s,{size:"lg",variant:"outline",className:"bg-transparent border-white/80 text-white hover:bg-white/20",children:"Zur OPAL Übersicht"})})]})]})})})})]})};export{te as default};