# Περιπτώσεις χρήσης του commerce API: επτά κατασκευές που δεν μπορείτε να κάνετε με widget

> Όταν ένα widget καταστήματος δεν έχει το κατάλληλο σχήμα: ενσωματωμένο εμπόριο σε SaaS, κατάλογοι σε πολλές επιφάνειες, καταστήματα white-label, προσαρμοσμένο UX, πράκτορες AI, προσαρμοσμένο BI. Συν παραδείγματα κώδικα από το Shoprocket JS SDK.

Ryan Badger - 4 Αυγούστου 2025 - 5 λεπτά ανάγνωσης

## Σε τι χρησιμεύει ένα API ηλεκτρονικού εμπορίου για ενσωμάτωση

Οι περισσότερες πλατφόρμες ηλεκτρονικού εμπορίου σας δίνουν ένα widget. Επικολλάτε ένα script και παίρνετε κατάστημα. Δουλεύει μια χαρά για το 95% των καταστημάτων.

Ένα commerce API είναι αυτό που διαλέγετε όταν θέλετε να κάνετε κάτι που δεν κάνει το widget: να εμφανίσετε προϊόντα μέσα στο δικό σας UI, να ενσωματώσετε checkout μέσα σε πίνακα ελέγχου SaaS, να διανείμετε έναν κατάλογο σε πολλές επιφάνειες (web + κινητό + φωνή) ή να χτίσετε προσαρμοσμένες ροές αγοραστή που καμία πλατφόρμα δεν παρέχει έτοιμες.

Το Shoprocket παρέχει και τα δύο. Το [widget](https://v3.shoprocket.io/el/blog/headless-commerce-the-three-tiers-the-real-options-and-which-one-you-probably-actually-want.md) είναι η προεπιλογή. Το [`@shoprocket/core` SDK](https://github.com/shoprocket/shoprocket-js) είναι για όταν ξεπερνάτε το widget ή δεν το χρειαστήκατε ποτέ εξαρχής.

## Περιπτώσεις χρήσης που απαιτούν API, όχι widget

Αυτές είναι οι κατασκευές όπου ένα widget δεν αρκεί. Αν η ιδέα σας είναι σε αυτή τη λίστα, βρίσκεστε σε έδαφος API.

### 1. Εμπόριο μέσα στο προϊόν SaaS σας

Ο πίνακας ελέγχου του SaaS σας έχει ήδη δικό του UI. Θέλετε οι πελάτες να αγοράζουν πρόσθετα, πακέτα credits, premium επίπεδα ή φυσικό merchandise χωρίς να φεύγουν από την εφαρμογή σας.

Ένα widget θα ήταν λάθος σχήμα: δεν ξέρει τους χρήστες σας, δεν ταιριάζει με το design system σας και υποθέτει κατάστημα πλήρους σελίδας. Το API σάς επιτρέπει να εμφανίζετε κάρτες προϊόντων με τα δικά σας components, να καλείτε `cart.addItem()` στο κλικ ενός κουμπιού και να ανοίγετε το δικό σας πάνελ checkout (ή να ανακατευθύνετε σε φιλοξενούμενο checkout αν θέλετε να αναβάλετε τη δουλειά συμμόρφωσης).

```
import { ShoprocketCore } from '@shoprocket/core'

const sr = new ShoprocketCore({ publicKey: 'pk_...' })

// Εμφάνιση πλακιδίων πρόσθετων μέσα στον πίνακα ελέγχου του SaaS σας
const addons = await sr.products.list({ category: 'addons' })

// Ο χρήστης πατά το κουμπί "Add credits"
await sr.cart.addItem(addon.id, 1)
```

### 2. Κατάλογος σε πολλές επιφάνειες (web + εγγενής εφαρμογή + φωνή + chat)

Ένας κατάλογος προϊόντων, που εμφανίζεται διαφορετικά σε κάθε σημείο. Το web κατάστημα δείχνει πλήρεις λεπτομέρειες προϊόντος, η εγγενής εφαρμογή iOS δείχνει μια συμπαγή λίστα, ο φωνητικός βοηθός περιγράφει τα προϊόντα φωναχτά, μια ενσωμάτωση chat απαντά με σύνδεσμο αγοράς.

Και οι τέσσερις επιφάνειες καλούν το ίδιο API. Όταν αλλάζετε την τιμή ενός προϊόντος στον πίνακα ελέγχου του Shoprocket, κάθε επιφάνεια την αντανακλά στην επόμενη ανάκτηση. Χωρίς συγχρονισμό περιεχομένου ανά επιφάνεια.

### 3. Καταστήματα white-label / συνεργατών

Είστε πλατφόρμα όπου άλλοι πουλούν τα προϊόντα τους: ένα marketplace κοινότητας, ένας κατάλογος συνεργατών, ένα δίκτυο franchise με ξεχωριστούς ιστότοπους αντιπροσώπων. Κάθε συνεργάτης έχει δική του ταυτότητα brand, όχι τη δική σας.

Ο ιστότοπος κάθε συνεργάτη τρέχει το framework σας αλλά καλεί το commerce API με το δικό του `publicKey`. Τα προϊόντα του, οι παραγγελίες του, οι πληρωμές του, όλα οριοθετημένα ανά λογαριασμό. Κανένα widget δεν μπαίνει εμπόδιο στην ταυτότητα του brand τους.

### 4. Εντελώς προσαρμοσμένο UX αγοραστή

Διαδραστικοί διαμορφωτές προϊόντων (προσαρμοσμένες συναρμολογήσεις υπολογιστών, εξατομικευμένα κοσμήματα, έπιπλα κατά παραγγελία). Προβολείς 3D προϊόντων. Συλλογές φωτογραφιών «ψωνίστε το δωμάτιο», όπου το κλικ σε pixels μιας εικόνας προσθέτει το προϊόν στο καλάθι. Κουμπιά γρήγορης επαναπαραγγελίας μέσα σε email.

Το widget δεν μπορεί να κάνει κανένα από αυτά. Το API μπορεί. Εσείς φτιάχνετε όποιο UI οραματίστηκε ο σχεδιαστής σας· το API χειρίζεται τη μηχανική του εμπορίου πίσω από αυτό.

### 5. Πράκτορες AI και agentic commerce

Ένας πράκτορας AI (ChatGPT, Claude, ένας προσαρμοσμένος πράκτορας) που μπορεί να περιηγείται σε προϊόντα και να ολοκληρώνει αγορές για λογαριασμό του χρήστη. Ο πράκτορας χρειάζεται προγραμματιστική πρόσβαση στον κατάλογο και στο καλάθι σας, όχι ένα widget DOM που πρέπει να αναλύσει.

Το Shoprocket παρέχει feeds για πρωτόκολλα εμπορίου AI παράλληλα με την τυπική πρόσβαση API. Ένας πράκτορας που ρωτά «τι υπάρχει σε απόθεμα κάτω από $50 με δωρεάν αποστολή» παίρνει δομημένη απάντηση, όχι screen scrape.

### 6. Ενσωματωμένο εμπόριο σε εργαλεία περιεχομένου

Μια σελίδα Notion όπου τα blocks μπορούν να είναι αγοράσιμα. Ένας σχεδιασμός Framer με hotspots αγοράς με ένα κλικ. Ένα εργαλείο newsletter όπου οι συνδρομητές μπορούν να πατήσουν μια κάρτα προϊόντος και να πληρώσουν χωρίς να φύγουν από το email. Όλα χτισμένα πάνω σε ένα API.

### 7. Προσαρμοσμένες αναφορές και πίνακες BI

Ο πίνακας ελέγχου του Shoprocket δείχνει έσοδα, μετατροπές, κορυφαία προϊόντα. Αυτό που δεν δείχνει είναι *οι δικές σας* μετρικές: αξία διάρκειας ζωής ανά ομάδα πελατών, παραγγελίες ανά πηγή παραπομπής, περιθώριο μετά το κόστος προμηθευτή. Το API εκθέτει δεδομένα παραγγελιών και πελατών ώστε να τα στέλνετε στο δικό σας εργαλείο BI, υπολογιστικό φύλλο ή εσωτερικό πίνακα ελέγχου.

## Τι σας δίνει το SDK σήμερα

Από το `@shoprocket/core`:

```
// Products
sr.products.list({ limit, offset, sort, category })
sr.products.get(productId)

// Cart
sr.cart.get()
sr.cart.addItem(productId, quantity)
sr.cart.updateItem(itemId, quantity)
sr.cart.removeItem(itemId)

// Session
sr.session.create()
sr.setSessionToken(token)
```

Συν ολόκληρο το REST API για ό,τι δεν καλύπτει ακόμη το SDK (παραγγελίες, πελάτες, εκπτώσεις, εγγραφή προϊόντων). Δείτε το [api.shoprocket.io/docs](https://api.shoprocket.io/docs) για την πλήρη τεκμηρίωση.

## Πού η προσέγγιση API-first είναι λάθος

Μερικές περιπτώσεις όπου το widget είναι η σωστή επιλογή και το API υπερβολή:

- **Ένα απλό κατάστημα με 10-200 προϊόντα.** Το widget το αποδίδει τέλεια· το να γράψετε το δικό σας UI καταλόγου σημαίνει ότι ξανακάνετε λυμένη δουλειά.
- **Δεν έχετε ειδική δυναμικότητα frontend μηχανικών.** Το API-first απαιτεί να παραδώσετε και να συντηρείτε τις δικές σας καταστάσεις φόρτωσης, UI παραλλαγών, χειρισμό σφαλμάτων, προσβασιμότητα, i18n σε 21 γλώσσες. Είναι εβδομάδες δουλειάς που το widget σάς δίνει δωρεάν.
- **Η κύρια έγνοια σας είναι η ταχύτητα της εκκίνησης.** Το widget είναι λεπτά· το API-first είναι εβδομάδες το λιγότερο.

Ξεκινήστε με το widget. Καταφύγετε στο API όταν συναντήσετε κάτι που το widget δεν μπορεί να κάνει.

## Ένα ρεαλιστικό πρώτο έργο

Το πιο συνηθισμένο έργο «χρειάζομαι το API»: ένα προϊόν SaaS που θέλει να πουλά credits, συνδρομές ή εφάπαξ πρόσθετα μέσα στον δικό του πίνακα ελέγχου.

Προσέγγιση:

1. Εγκαταστήστε το `@shoprocket/core` στο frontend σας
2. Δημιουργήστε στο Shoprocket μια κατηγορία με όνομα «Add-ons» ή παρόμοιο
3. Προσθέστε προϊόντα με την ακριβή τιμολόγηση / περιγραφή που θέλετε
4. Εμφανίστε τη λίστα προϊόντων στον πίνακα ελέγχου σας με τη δική σας βιβλιοθήκη components
5. Στο κλικ, προσθέστε στο καλάθι + ανακατευθύνετε στο φιλοξενούμενο checkout του Shoprocket (ή ενσωματώστε το checkout inline αν νιώθετε άνετα με την επιπλέον δουλειά)
6. Ρυθμίστε ένα endpoint webhook για να λαμβάνετε γεγονότα `order.paid`, ώστε να παρέχετε ό,τι ξεκλειδώνει η αγορά (credits, πρόσβαση, αποστολή)

Αυτό είναι όλο. Λίγα αρχεία, μία ημέρα δουλειάς για κάποιον που έχει συνηθίσει να καλεί APIs. Χωρίς widget, χωρίς iframe, χωρίς συμβιβασμό στο UI του προϊόντος σας.

## Τι δεν συνιστούμε

Μην ξαναχτίζετε ένα πλήρες UI καταλόγου που μοιάζει πολύ με αυτό που κάνει ήδη το widget. Αν περνάτε εβδομάδες σε «πλέγμα προϊόντων με φίλτρα και αναζήτηση», γράφετε αυτό που το widget παρέχει σε λεπτά. Χρησιμοποιήστε το widget για αυτό το σχήμα και το API για τα πραγματικά διαφορετικά σχήματα.

> **Συμβουλή:** Αν σκέφτεστε το API-first επειδή το προεπιλεγμένο στυλ του widget δεν ταιριάζει με το brand σας, δοκιμάστε πρώτα τα [hooks στυλ του widget](https://github.com/shoprocket/shoprocket-js). Το widget δέχεται πολύ περισσότερη προσαρμογή CSS απ' ό,τι φαίνεται. Η πλήρης ανοικοδόμηση με API είναι πολύ βαρύτερη δουλειά.

## Εν συντομία

- **Widget** = η προεπιλογή, καλύπτει το 95% των καταστημάτων
- **API / SDK** = όταν το widget δεν έχει το κατάλληλο σχήμα (ενσωματωμένο εμπόριο σε SaaS, πολλές επιφάνειες, white-label, προσαρμοσμένο UX, πράκτορες AI, προσαρμοσμένο BI)
- **Η επιφάνεια του SDK σήμερα:** προϊόντα, καλάθι, συνεδρίες· συν πλήρες REST API για παραγγελίες / πελάτες / εκπτώσεις
- **Μοτίβο πρώτου έργου:** πίνακας ελέγχου SaaS που πουλά credits ή πρόσθετα μέσω SDK + παροχή οδηγούμενη από webhook
- **Μην ξαναχτίζετε με API** ό,τι το widget κάνει ήδη καλά· διαλέξτε το σχήμα σας

[Ξεκινήστε μια δωρεάν δοκιμή](https://app-v3.shoprocket.io/signup) και πάρτε ένα δημόσιο κλειδί· το SDK είναι δωρεάν σε οποιοδήποτε πλάνο του Shoprocket. 14 ημέρες, χωρίς κάρτα.

---

- HTML version: https://v3.shoprocket.io/el/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget
- Language: Ελληνικά (el)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [Deutsch](https://v3.shoprocket.io/de/blog/commerce-api-anwendungsfaelle-sieben-builds-ohne-widget.md), [English](https://v3.shoprocket.io/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [Español](https://v3.shoprocket.io/es/blog/casos-de-uso-api-de-comercio-siete-proyectos-que-un-widget-no-puede-hacer.md), [Français](https://v3.shoprocket.io/fr/blog/api-commerce-sept-cas-usage-impossibles-avec-un-widget.md), [עברית](https://v3.shoprocket.io/he/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/kasus-penggunaan-commerce-api-tujuh-hal-yang-tidak-bisa-dilakukan-widget.md), [Italiano](https://v3.shoprocket.io/it/blog/api-commerce-sette-casi-duso-che-un-widget-non-copre.md), [日本語](https://v3.shoprocket.io/ja/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/prekybos-api-panaudojimo-atvejai-septyni-sprendimai-kuriu-nepadarysite-su-valdykle.md), [Norsk](https://v3.shoprocket.io/nb/blogg/handels-api-sju-ting-du-ikke-kan-bygge-med-en-widget.md), [Nederlands](https://v3.shoprocket.io/nl/blog/commerce-api-use-cases-zeven-projecten-zonder-widget.md), [Polski](https://v3.shoprocket.io/pl/blog/api-do-e-commerce-siedem-zastosowan-ktorych-nie-zrobisz-widzetem.md), [Português](https://v3.shoprocket.io/pt/blog/casos-de-uso-api-de-commerce-sete-projetos-que-widget-nao-faz.md), [Română](https://v3.shoprocket.io/ro/blog/cazuri-de-utilizare-api-comert-sapte-proiecte-fara-widget.md), [Русский](https://v3.shoprocket.io/ru/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [ไทย](https://v3.shoprocket.io/th/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md), [Türkçe](https://v3.shoprocket.io/tr/blog/commerce-api-kullanim-senaryolari-widget-ile-yapilamayan-yedi-proje.md), [中文](https://v3.shoprocket.io/zh/blog/commerce-api-use-cases-seven-builds-you-cant-do-with-a-widget.md)