1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[517],{98843(t,e,i){i.r(e),i.d(e,{assets:()=>s,contentTitle:()=>a,default:()=>c,frontMatter:()=>r,metadata:()=>n,toc:()=>l});const n=JSON.parse('{"id":"playerSDKIntegrationAndroid-product-highlights","title":"Product highlights","description":"Android SDK product highlights: should-update-product-highlight products payload, custom product view/list events, product hydration.","source":"@site/live/playerSDKIntegrationAndroid-product-highlights.mdx","sourceDirName":".","slug":"/mobile-sdk-integration-android/product-highlights","permalink":"/docs/live/mobile-sdk-integration-android/product-highlights","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"playerSDKIntegrationAndroid-product-highlights","title":"Product highlights","description":"Android SDK product highlights: should-update-product-highlight products payload, custom product view/list events, product hydration.","sidebar_label":"Product highlights","slug":"mobile-sdk-integration-android/product-highlights"},"sidebar":"someSidebars","previous":{"title":"Product hydration","permalink":"/docs/live/mobile-sdk-integration-android/product-hydration"},"next":{"title":"Add to wishlist","permalink":"/docs/live/mobile-sdk-integration-android/add-to-wishlist"}}');var o=i(74848),d=i(28453);const r={id:"playerSDKIntegrationAndroid-product-highlights",title:"Product highlights",description:"Android SDK product highlights: should-update-product-highlight products payload, custom product view/list events, product hydration.",sidebar_label:"Product highlights",slug:"mobile-sdk-integration-android/product-highlights"},a="Product highlights",s={},l=[{value:"Handle Highlight Updates",id:"handle-highlight-updates",level:2},{value:"Handle Product View (Custom Navigation)",id:"handle-product-view-custom-navigation",level:2},{value:"Handle Product List",id:"handle-product-list",level:2}];function h(t){const e={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",...(0,d.R)(),...t.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(e.header,{children:(0,o.jsx)(e.h1,{id:"product-highlights",children:"Product highlights"})}),"\n",(0,o.jsx)(e.p,{children:"Product highlights allow the host of a live show to pin a product in the player overlay. Your app is notified whenever the highlighted product changes, and can update custom native UI elements in response."}),"\n",(0,o.jsx)(e.h2,{id:"handle-highlight-updates",children:"Handle Highlight Updates"}),"\n",(0,o.jsxs)(e.p,{children:["Listen for the ",(0,o.jsx)(e.code,{children:"should-update-product-highlight"})," event in your ",(0,o.jsx)(e.code,{children:"BambuserVideoPlayerDelegate"})," implementation. The event contains a ",(0,o.jsx)(e.code,{children:"products"})," array with one product when a product is highlighted, and an empty array when the highlight is cleared."]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-kotlin",children:'videoPlayerDelegate = object : BambuserVideoPlayerDelegate {\n override fun onNewEventReceived(\n playerId: String,\n event: BambuserEventPayload,\n viewActions: ViewActions\n ) {\n when (event.event) {\n\n "should-update-product-highlight" -> {\n val products = event.data["products"] as? List<Map<*, *>> ?: return\n val productData = products.firstOrNull()\n\n if (productData == null) {\n clearHighlightedProduct()\n return\n }\n\n val productId = productData["id"] as? String\n val sku = productData["ref"] as? String\n val title = productData["title"] as? String\n\n // Use these values to update your custom highlighted product UI\n }\n }\n }\n}\n'})}),"\n",(0,o.jsx)(e.h2,{id:"handle-product-view-custom-navigation",children:"Handle Product View (Custom Navigation)"}),"\n",(0,o.jsxs)(e.p,{children:["When the ",(0,o.jsx)(e.code,{children:"product"})," button is set to ",(0,o.jsx)(e.code,{children:'"none"'}),", tapping a highlighted product fires ",(0,o.jsx)(e.code,{children:"should-show-product-view"}
1)," instead of opening the player's built-in modal. Navigate to your native product detail screen."]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-kotlin",children:'"should-show-product-view" -> {\n val productData = event.data["event"] as? Map<*, *> ?: return\n val sku = productData["ref"] as? String ?: return\n\n runOnUiThread {\n navigateToProduct(sku)\n }\n}\n'})}),"\n",(0,o.jsx)(e.p,{children:"Enable custom product view handling in your player configuration:"}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-kotlin",children:'configuration = mapOf(\n "buttons" to mapOf(\n "product" to "none"\n )\n)\n'})}),"\n",(0,o.jsx)(e.h2,{id:"handle-product-list",children:"Handle Product List"}),"\n",(0,o.jsxs)(e.p,{children:["Use ",(0,o.jsx)(e.code,{children:"should-show-product-list"})," and ",(0,o.jsx)(e.code,{children:"should-hide-product-list"})," to coordinate your own overlay with the player's product list."]}),"\n",(0,o.jsx)(e.pre,{children:(0,o.jsx)(e.code,{className:"language-kotlin",children:'"should-show-product-list" -> {\n runOnUiThread { showProductListOverlay() }\n}\n\n"should-hide-product-list" -> {\n runOnUiThread { hideProductListOverlay() }\n}\n'})}),"\n",(0,o.jsxs)(e.p,{children:[(0,o.jsx)(e.strong,{children:"Note:"})," Product data for highlights is supplied to the player via product hydration. See ",(0,o.jsx)(e.a,{href:"/docs/live/mobile-sdk-integration-android/product-hydration",children:"Product hydration"})," for details on providing product data using ",(0,o.jsx)(e.code,{children:"getShoppableVideoPlayerCollection"}),"."]})]})}function c(t={}){const{wrapper:e}={...(0,d.R)(),...t.components};return e?(0,o.jsx)(e,{...t,children:(0,o.jsx)(h,{...t})}):h(t)}},28453(t,e,i){i.d(e,{R:()=>r,x:()=>a});var n=i(96540);const o={},d=n.createContext(o);function r(t){const e=n.useContext(d);return n.useMemo(function(){return"function"==typeof t?t(e):{...e,...t}},[e,t])}function a(t){let e;return e=t.disableParentContext?"function"==typeof t.components?t.components(o):t.components||o:r(t.components),n.createElement(d.Provider,{value:e},t.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.