Chat widget chrome

A webáruház Inbox chat widgetje egy téma chrome, akárcsak a promóciós sáv. A platform kezeli a munkamenetet, az élő kapcsolatot, az üzenetkézbesítést és a csatolmányokat a @poltura/theme-sdk/inbox mögött. A téma dönti el, hogyan rendeződnek el az elemek.

Hol találhatóHivatkozás másolása

Helyezd a widgetet a src/layout/chat.tsx fájlba a fájl alapértelmezett exportjaként. A webáruház erről az útvonalról csatolja be. E fájl nélkül a platform teljes widgetje jelenik meg helyette – ugyanaz, amit az <InboxWidget /> is kirajzol. Az alapértelmezett téma ezt a fájlt tartalmazza:

import {
  InboxChatGlyph,
  InboxComposer,
  InboxConversation,
  InboxLauncher,
  InboxOfflineForm,
  InboxPanel,
  InboxPanelHeader,
  InboxRoot,
  InboxStatusLine,
} from '@poltura/theme-sdk/inbox';

export default function ThemeChatWidget() {
  return (
    <InboxRoot className='pol-chat'>
      <InboxPanel className='pol-chat__panel'>
        <InboxPanelHeader className='pol-chat__header' />
        <InboxConversation className='pol-chat__conversation' />
        <InboxStatusLine className='pol-chat__status' />
        <InboxOfflineForm className='pol-chat__offline' />
        <InboxComposer className='pol-chat__composer' />
      </InboxPanel>
      <InboxLauncher className='pol-chat__launcher'>
        <InboxChatGlyph />
      </InboxLauncher>
    </InboxRoot>
  );
}

Minden elemnek az <InboxRoot> komponensen belül kell megjelennie, amely semmit sem renderel, ha a boltban nincs bekapcsolva a chat. A useInbox() ebből a contextből olvassa ki a nézetet és a műveleteket.

A panel bodyjaként az InboxConversation komponenst rendereld. Ez jeleníti meg az üzenetlistát, és ez mutatja a megnyitott súgócikket is a helyén, amint a vásárló kiválaszt egyet. Ha egy elrendezés közvetlenül az InboxMessageList komponenst rendereli, magának kell átváltania az InboxKnowledgeArticle komponensre, amíg a view.knowledge.article be van állítva – különben a cikk kiválasztásának nem lesz látható eredménye.

ElemekHivatkozás másolása

A useInbox() a { view, actions } objektumot adja vissza:

• A view.copy tartalmazza a widget szövegezését feloldott formában: először a téma chat szövegeit, majd a platform inbox.* üzeneteit.
• Az actions.send, attach, removeAttachment és retry az egyedüli chatműveletek, amelyeket a téma meghív. Az actions.open, close és toggle a panelt vezérli.
• A view.appearance tartalmazza a kereskedő által beállított elhelyezkedést, színmódot és színeket.
• A bolt súgócikkei a view.knowledge alatt találhatók (enabled, query, results, loading, article), az actions.searchKnowledge, openArticle és closeArticle kíséretében. Az enabled értéke true, ha a bolt rendelkezik legalább egy közzétett cikkel. A cikk a /guides/{category}/{slug} címre mutat, ha az az oldal létezik. Ellenkező esetben a panel beágyazva jeleníti meg a megtisztított bodyját.

A platform widgetje (InboxWidget) az üres beszélgetést egy üdvözlőkártyaként és egy Súgó szekcióként jeleníti meg: egy keresőmező, majd legfeljebb három javasolt cikk. Az InboxMessageList rajzolja ki ezt az üres állapotot, ha a súgócikkek be vannak kapcsolva. Az InboxConversation nyitott cikk esetén a listát az InboxKnowledgeArticle komponensre cseréli. A „Továbbra is segítségre van szükséged? Küldj üzenetet” bezárja a cikket, és a beviteli mezőre állítja a fókuszt. A témaszerkesztőben a súgókereső mintaeredményeket ad vissza. Az indítógomb asztali nézetben nyitott panel mellett is látható marad, de a 640 képpontnál keskenyebb képernyőkön elrejtőzik.

Stabil classokHivatkozás másolása

Formázd újra a src/styles/theme.css fájlból a :where() segítségével, a többi chrome hookhoz hasonlóan. Lásd: Chrome stabil osztályok.

A színek CSS-változók a root elemen: --inbox-accent, --inbox-accent-text, --inbox-bg és --inbox-text.

BeállításokHivatkozás másolása

A téma chat beállításcsoportja (és a sötét mód színeihez tartozó chat_dark) formázza a widgetet a témaszerkesztőben. Nem ez kapcsolja be a chatet a boltban: az a bolt saját Inbox-beállítása.

Ha kiválasztod a chatet a témaszerkesztőben, a panel mintaadatokkal nyílik meg. Ezt az InboxRoot intézi, így a témakódban semmit sem kell tenned érte.

További lépésekHivatkozás másolása

• Chrome stabil osztályok: az override-minta az összes platformelemhez.
• inbox referencia: a @poltura/theme-sdk/inbox minden exportja.