@altazion/commerce-sdk-vue

Plugin Vue 3 pour l'Altazion Commerce SDK. Fournit des stores Pinia réactifs, des composables et des composants prêts à l'emploi.

Installation

npm install @altazion/commerce-sdk-vue @altazion/commerce-sdk-core
npm install vue pinia  # peer dependencies

Configuration

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { AltazionCommercePlugin } from '@altazion/commerce-sdk-vue'

const app = createApp(App)
app.use(createPinia())
app.use(AltazionCommercePlugin, {
  baseUrl: 'https://votre-api.altazion.com',
  siteUrl: 'https://votre-site.com',
})
app.mount('#app')

Mode offline borne

Le package expose aussi un store dédié à l'état réseau et au mode d'écran terminal.

useConnectivityStore

import { useConnectivityStore } from '@altazion/commerce-sdk-vue'

const connectivityStore = useConnectivityStore()

connectivityStore.status                  // 'online' | 'offline'
connectivityStore.isOnline               // boolean
connectivityStore.isOffline              // boolean
connectivityStore.screenMode             // 'interactive' | 'offline'
connectivityStore.isInteractiveAvailable // boolean

Cas d'usage typique sur borne : basculer vers un écran passif (pub, branding, attente) quand screenMode === 'offline'.

Stores Pinia

useCartStore

import { useCartStore } from '@altazion/commerce-sdk-vue'

const cartStore = useCartStore()

await cartStore.load()           // charger le panier
await cartStore.addItem('REF-001', 2)
await cartStore.updateItem(lineId, 3)
await cartStore.removeItem(lineId)
await cartStore.applyCoupon('PROMO10')
await cartStore.clear()

cartStore.cart          // Cart | null
cartStore.itemCount     // nombre d'articles (computed)
cartStore.total         // total TTC (computed)
cartStore.isEmpty       // boolean (computed)
cartStore.loading       // boolean
cartStore.isOffline     // boolean

useCatalogStore

import { useCatalogStore } from '@altazion/commerce-sdk-vue'

const catalogStore = useCatalogStore()

await catalogStore.loadProduct('REF-001')
await catalogStore.loadCategory('chaussures', 0, 20)

catalogStore.currentProduct   // ProductDetails | null
catalogStore.categoryResult   // SearchResult | null

useSearchStore

import { useSearchStore } from '@altazion/commerce-sdk-vue'

const searchStore = useSearchStore()

await searchStore.search({ q: 'sneakers', offset: 0, length: 12 })
await searchStore.suggest('sneak')

searchStore.result       // SearchResult | null
searchStore.suggestions  // string[]
searchStore.query        // string (dernière query)

useSessionStore

import { useSessionStore } from '@altazion/commerce-sdk-vue'

const sessionStore = useSessionStore()

await sessionStore.load()

sessionStore.session   // SessionInfo | null
sessionStore.isOnline  // boolean réactif
sessionStore.isKiosk   // boolean
sessionStore.isReady   // boolean

Exemple de bascule d'écran

<script setup lang="ts">
import { useConnectivityStore } from '@altazion/commerce-sdk-vue'

const connectivityStore = useConnectivityStore()
</script>

<template>
  <OfflineScreen v-if="connectivityStore.screenMode === 'offline'" />
  <InteractiveApp v-else />
</template>

Composants

<ProductCard>

<ProductCard :product="product" :show-add-to-cart="true" />

| Prop | Type | Description | |---|---|---| | product | WebProduct | Produit à afficher | | showAddToCart | boolean | Affiche le bouton d'ajout au panier |

<CartSummary>

<CartSummary :show-lines="true" />

| Prop | Type | Description | |---|---|---| | showLines | boolean | Affiche le détail des lignes |

<AddToCartButton>

<AddToCartButton reference="REF-001" :quantity="1" />

Composable bas niveau

import { useCommerceClient } from '@altazion/commerce-sdk-vue'

// Accès direct au CommerceClient dans n'importe quel composant
const client = useCommerceClient()

Licence

Propriétaire — © Altazion SAS. Tous droits réservés.