So hat Planeta Huerto sechs native Komponenten der Produktseite für seine Shopify-App neu gebaut

Planeta Huerto, ein spanischer Händler für Gesundheitsprodukte und Bio-Lebensmittel auf Shopify Plus, hat sechs über Metafields gesteuerte Komponenten seiner Produktseite als individuelle native App-Komponenten neu gebaut und dabei die Logik seines Mirakl-Marktplatzes beibehalten. Das Beispiel zeigt, dass auch eine stark angepasste Produktseite in einer mobilen App funktionieren kann, sofern die zugrunde liegenden Daten und die Logik verfügbar sind.

Im Katalog sind Angaben zu Anbietern, Staffelpreise, Ernährungsfilter und die Logik der Kollektionen in Metafields und Metaobjekten hinterlegt. Für die grundsätzliche Entscheidung zwischen Eigenentwicklung und fertiger Lösung und zwischen nativer App und WebView lesen Sie So machen Sie aus Ihrem Shopify-Shop eine mobile App.

Die Ergebnisse nach dem Wechsel zu einer nativen App

App-Kanal im Vergleich zum Onlineshop, erste 90 Tage. Diese Ergebnisse wurden beobachtet, nachdem Planeta Huerto von einer WebView-App zu einer nativen App gewechselt war. Sie vergleichen die App mit dem Onlineshop. Es handelt sich nicht um einen kontrollierten Vorher-nachher-Vergleich. Warum dieser Unterschied wichtig ist, erfahren Sie im Leitfaden zu Kennzahlen mobiler Apps.

Jede Kennzahl im App Store geht durch die Decke, verglichen mit den früheren Werten aus der Zeit, als WebViews im Einsatz waren.

Albert MiraCTO, Planeta Huerto

Der Einwand: „Unser Katalog ist zu individuell für eine App“

Planeta Huerto kam von einer WebView-Plattform zu NAPPS. Wenn Sie nicht sicher sind, ob Ihre eigene App eine WebView-App ist, erfahren Sie hier, wie Sie das prüfen. Die Leistung reichte für eine Marke, deren Kundschaft regelmäßig nachkauft, nicht aus. Einen Vorteil hatte die WebView-App aber: Sie bildete jede individuelle Komponente der Website ab.

Genau darin lag die Falle. Diese Website-Komponenten waren ausgefeilt, und jede von ihnen beruhte auf eigener Logik aus Metafields, Metaobjekten und unternehmensspezifischen Berechnungen. Allein auf der Produktseite gab es sechs davon. Außerdem betreibt Planeta Huerto eine Mirakl-Marktplatzintegration. Ein einziger Katalog enthält daher Produkte, die das Unternehmen selbst verkauft und versendet, und Produkte von Drittanbietern, jeweils mit eigenen Regeln für Anbieter, Versand und Lieferung.

Die Wahl kann wie ein Entweder-oder aussehen: die WebView-Hülle behalten oder für einen vollständigen nativen Neubau bezahlen. Das Team von Planeta Huerto ging davon aus, dass der Neubau 2.000 bis 3.000 $ pro Monat kosten würde oder dass es die Produktseite vereinfachen müsste, damit sie in eine Vorlage passt. Beides kam für das Unternehmen nicht infrage. Die Komponenten gab es aus gutem Grund.

Alle sechs Komponenten wurden nativ neu gebaut und waren im Tarif von Planeta Huerto enthalten, statt als individuelle Enterprise-Entwicklung berechnet zu werden.

Die sechs Komponenten

Die Produktseite von Planeta Huerto hatte sechs verschiedene Komponenten, die über Metafields gesteuert wurden. NAPPS hat alle sechs als native Komponenten neu gebaut. Dieser Artikel betrachtet die drei, deren Muster sich am ehesten auf andere Marken übertragen lassen. Die übrigen zeigen den Umfang der Arbeit.

Entscheidend ist die Unterscheidung zwischen neuer nativer Oberfläche und vorhandener Oberfläche mit eigener Logik darüber. Treffen Sie diese Unterscheidung, bevor Sie mit einer individuellen Entwicklung beginnen. Für die Wahl der Plattform lesen Sie, wie Sie eine Plattform für mobile Shopify-Apps bewerten.

Zwei entstanden als neue native Oberfläche: die Hinweiskarte zu Anbieter und Versand und die Mengenrabattstufen. Eine nutzte eine vorhandene native Komponente mit eigener Logik darüber: das intelligente Produktkarussell. Die anderen drei sind die Produkt-Tags mit eigener Logik, das EU-Bio-Siegel und der zustandsabhängige Warenkorb-Button.

Die sechste Komponente, der zustandsabhängige Warenkorb-Button, zeigt an, wie viele Stück dieses Artikels bereits im Warenkorb liegen. So behalten Kunden auf dem Marktplatz bei einer gemischten Bestellung den Überblick über Artikel verschiedener Anbieter.

Im Detail 1: die Hinweiskarte zu Anbieter und Versand

Zeigen Sie Versand und Lieferung pro Anbieter in der App an. So erhalten Marktplatzprodukte auf der Produktseite dieselben klaren Informationen wie Produkte aus dem eigenen Sortiment.

Die Hinweiskarte steht auf der Produktseite und zeigt den Namen des Anbieters (anklickbar und mit dessen Kollektion verlinkt), die Versandkosten und eine voraussichtliche Lieferzeit. Schwierig ist, dass sich diese Angabe nach zwei Faktoren zugleich richtet:

• Wochentag. Bei Bestellung von Montag bis Donnerstag wird am nächsten Tag versendet. Bei Bestellung am Freitag wird am Montag versendet. Bei Bestellung am Wochenende wird am Dienstag versendet.
• Produktart. Für Direktprodukte gilt eine einheitliche Versandberechnung. Marktplatzprodukte haben einen anderen Anbieter und andere Versandregeln. Diese stammen aus Produkt-Metafields, Metaobjekten der Anbieter und der Mirakl-Integration.

NAPPS hat die Komponente wiederverwendbar gebaut: Sie unterstützt beliebig viele Einträge statt fest drei oder vier, ein Icon für jeden Eintrag und Rich-Text-Formatierung für Titel und Einträge. Andere Marken nutzen sie heute für Produktzertifizierungen, Angaben zur Nachhaltigkeit und Hinweise auf Produktmerkmale.

Im Detail 2: die Mengenrabattstufen

Halten Sie die Rabattoberfläche nativ und lassen Sie die Marke die Preislogik liefern. Die Stufe aktualisiert sich ohne Umweg über das Web.

Die Komponente zeigt Mengenrabattstufen auf der Produktseite (1 Stück zum regulären Preis, 3 Stück kaufen und 10 % sparen, 5 Stück kaufen und 20 % sparen) und regt zu größeren Warenkörben an, indem sie die Ersparnis deutlich zeigt. Vier Dinge sind fest eingebaut:

• Eine variable Zahl von Stufen, von zwei bis zehn statt einer festen Zahl von drei.
• Kennzeichnungen wie „Most Popular“ oder „Best Value“ für jede beliebige Stufe.
• Erfassung der aktuellen Auswahl: Die Komponente weiß, welche Stufe aktiv ist, während die Kundin oder der Kunde die Menge ändert.
• Klick-Callbacks, die das Ereignis an die eigene Logik der Marke übergeben, damit diese den Preis neu berechnet. Die Oberfläche zeigt die Stufen, die Berechnung liegt bei der Marke. Durch diese Trennung kann dieselbe native Oberfläche bei jeder Marke auf völlig unterschiedlichen Preisregeln aufsetzen.

Die Komponente arbeitet mit dem zustandsabhängigen Warenkorb-Button zusammen. Tippt man auf eine Stufe, löst das einen Callback aus, der die Menge setzt. Danach zeigt der Button die Zahl der Stück im Warenkorb. Die Kundschaft wählt „3 kaufen, 10 % sparen“ und sieht, wie sich der Warenkorb ändert, ohne dass die Seite neu lädt. Diese Rückmeldung ist besonders nützlich, wenn eine Bestellung Artikel mehrerer Anbieter enthält.

Im Detail 3: das intelligente Produktkarussell

Nutzen Sie die Katalogstruktur, um passende Produkte automatisch zu zeigen. Die Marke liefert die Logik und verwendet eine vorhandene Oberfläche.

Diese Komponente nutzte ein vorhandenes NAPPS-Karussell. Individuell war die Auswahl, welche Kollektion angezeigt wird. Planeta Huerto benennt Kollektionen nach ihrem Navigationspfad (Breadcrumb), daher kann ein Produkt mehreren Kollektionen zugleich angehören:

• Home > Food > Organic > Vegetables
• Home > Food > Organic
• Home > Food

Das Karussell zeigt Produkte aus Vegetables, der spezifischsten Kollektion, statt aus der breiten Kollektion Food. Die Logik zählt die Tiefe des Pfads, wählt die tiefste Kollektion aus und liest den Titel der Produktreihe aus einem eigenen Metafield in der Sprache der Kundschaft. Das ist ein gängiges Muster für individuelle Entwicklungen: die vorhandene native Oberfläche behalten und TypeScript-Logik ergänzen.

async onComponentCreated() {
    // Every component already has the current product in scope.
    const collectionIDs = product.collectionIDs;

    // Fetch collections, including the custom metafield used for the display title.
    const collections = await collectionService.getCollectionsByIDs(
        collectionIDs,
        ["custom.show_title"]
    );

    // Collections are named by breadcrumb, e.g. "Home > Food > Organic > Vegetables".
    const separator = " > ";

    // Find the deepest (most specific) collection this product belongs to.
    let stepsToProduct = 0;
    let mainCollection: Collection | null = null;

    for (const collection of collections) {
        if (!collection?.title) continue;
        const steps = collection.title.split(separator).length;
        if (steps > stepsToProduct) {
            stepsToProduct = steps;
            mainCollection = collection;
        }
    }

    // Guard: if no collection matched, leave the carousel untouched.
    if (!mainCollection) return;

    // Title the row from the custom metafield, in the shopper's language.
    const title = mainCollection.metafields.custom.show_title;
    this.updateState({
        collectionID: mainCollection.id,
        title: `Más productos de ${title}`,
    });
}

Der Ausschnitt nutzt drei Funktionen der Plattform, die individuelle Komponenten häufig brauchen:

• Globaler Produktkontext. product ist bereits verfügbar, daher muss eine Komponente das Produkt der Seite nie erneut abrufen.
• Datendienste. collectionService (neben productService und metaobjectService) liest Shopify-Daten, einschließlich benannter Metafields, ohne selbst geschriebene API-Aufrufe.
• App-Kontext. AppUtils stellt Werte auf App-Ebene bereit, etwa das Land der Kundschaft. Hier wird das Land verwendet, um die Formulierung des Kollektionstitels zu bestimmen.

Ein ehrlicher Hinweis zur Umsetzung

Diese Entwicklung dauerte etwa vier Wochen und damit länger als eine typische App-Veröffentlichung mit NAPPS. Planeta Huerto war der erste Kunde, dessen App auf Expresso gebaut wurde, der Ebene von NAPPS, die React und TypeScript in nativen Code umsetzt. Deshalb erweiterte das Team während der Umsetzung grundlegende Funktionen der Plattform.

In diesen vier Wochen erweiterte NAPPS:

• Die Verbindung zwischen nativem Code (SwiftUI und Jetpack Compose) und der React- und TypeScript-Ebene.
• Die Dienste zum Lesen von Shopify-Daten: Kollektionen, Produkte und Metaobjekte.
• Funktionen, deren Bedarf das Team erst während des Projekts bestätigte, etwa die Rich-Text-Darstellung für die Hinweiskarte, das dynamische Laden von Icons, Event-Callbacks für die Rabattstufen und eine sprach- und regionsabhängige Formatierung für das Karussell.

Die für dieses Projekt entwickelten Funktionen wurden zu wiederverwendbaren Funktionen der Plattform. Das Entwicklungsteam von Planeta Huerto nimmt inzwischen am Expresso-Programm mit beschränktem Zugang teil und entwickelt neue native Komponenten für die App selbst.

Klären Sie vor der Planung einer Migration, wem die Entwicklerkonten gehören und was aus der bestehenden App übernommen werden kann.

Für wen das gilt und was Sie als Nächstes tun

Planeta Huerto ist ein relevantes Beispiel für komplexe Marktplatzkataloge, deren Produktseiten Metafields, Metaobjekte und Drittanbieter nutzen. Eine native App muss Sie nicht an Vorlagen binden. Bestehende Website-Logik lässt sich übertragen, wenn die Plattform die Dienste, die React- und TypeScript-Ebene und die nativen Komponenten bereitstellt, die dafür nötig sind.

Wenn Sie glauben, Ihr Katalog sei zu individuell für eine App, erfassen Sie zuerst die Daten und die Logik. Legen Sie dann fest, welche Teile eine neue Oberfläche brauchen und welche eine vorhandene native Komponente nutzen können.

Sehen Sie, wie individuelle native Komponenten für Ihre Marke funktionieren würden. Demo buchen.