Headless

this document provides a comprehensive guide on leveraging sparklayer in conjunction with a shopify powered headless storefront at the present moment, sparklayer's exclusive support for shopify is due to the need for a synchronisation mechanism however, in the near future, we plan expand its capabilities, enabling the development of custom integrations that can be compatible with many other platforms requirements a shopify store the sparklayer app https //apps shopify com/sparklayer installed on the store a metafield definition set up for the sparklayer authentication metafield enable storefronts access for this metafield definition sparklayer uses a customer metafield to store authentication data, which allows the sparklayer front end to authenticate the user with the sparklayer api overview this is a high level overview of how sparklayer runs on a headless site get the customer data for the logged in user check if the customer is a b2b customer (has the tag "b2b") and has the sparklayer authentication metafield set if they do, continue load the sparklayer javascript by injecting a script tag such as \<script src="https //sparkcdn io/sparkjs/ site id /live">\</script> when the script has loaded call window\ sparkinit({ options }}) , passing in options like siteid more details on configuration can be found here inject a style element into the document which sets css variables to customise the look and behaviour of the sparklayer components more details here additional code changes are required to show sparklayer components, hide elements that should not be seen by b2b customers and integrate sparklayer with controls on your site elements to hide the following elements should be hidden for b2c customers on all pages prices add to cart button quantity selector by adding the following data attribute to the element data spark="b2c only" , the element will be hidden when sparklayer loads you can learn more here https //docs sparklayer io/frontend integration#ahyma include sparklayer components you'll want to include sparklayer's components in place of the elements that were just hidden product list {{ parentproductid }} the syntax for setting parent id will vary depending on the template system used learn more here https //docs sparklayer io/product card interface product details page learn more here https //docs sparklayer io/product detail interface code to load sparklayer an example react component to load sparklayer in a nextjs project // sparklayer jsx import { usestate, useeffect } from 'react'; import script from 'next/script'; const defaultstyles = ` // style spark web components to fit your design spark product card { width 100%; } spark pdp { margin 0 5em 0 1 25em; display block; } // set css vars to customise styling of elements within sparklayer web components \ root { / set the brand styling / \ b2b brand color var( primary); / main brand colour / \ b2b brand color hover var( secondary); / main brand colour hover / \ b2b brand font poppins, sans serif; / main brand font / \ b2b brand font heading poppins, sans serif; / main brand heading font / / see https //docs sparklayer io/sparklayer frontend/customising the design for more variables / }`; const defaultoptions = { platform 'shopify', shopify { useappproxy false, }, cartbuttonselectors '', // css selector for cart button usually located in header accountbuttonselectors '', // css selector for account button usually located in header }; export function sparklayer(props) { const { customer, authenticationmetafield, options, onlogout, styles = defaultstyles, } = props; const options = { defaultoptions, options }; const \[sparkinitialised, setsparkinitialised] = usestate(false); const \[sparkloaded, setsparkloaded] = usestate(false); useeffect(() => { if ( !sparkinitialised && customer !== null && authenticationmetafield finished && sparkloaded && !window\ spark ) { const s = document createelement('style'); s innerhtml = styles; document head appendchild(s); window\ spark = window\ initspark({ options, onlogout, auth { user customer? email, token authenticationmetafield metafield? value, }, }); setsparkinitialised(true); } }, \[customer, authenticationmetafield, sparkloaded]); return customer !== null && customer tags includes('b2b') ? ( \<script id="spark script" src={`https //sparkcdn io/sparkjs/${ options siteid}/live`} onload={() => { setsparkloaded(true); }} /> ) null; } you can see an example usage of this component // layout jsx import { sparklayer } from ' /snippets/integrations/sparklayer'; function layout({ props }) { // your app should provide a way to get data for the logged in customer const customer = getcustomer(); // your app should provide a way to get shopify metafields for the logged in customer const authenticationmetafield = getcustomermetafield('sparklayer authentication'); return ( \<div> \<sparklayer options={{ siteid '', }} onlogout={() => { // call function to log customer out provided by your app logout(); }} authenticationmetafield={authenticationmetafield} customer={customer} /> {/ components to render your site here /} \</div> ); } export default layout; for more information, please feel free to get in touch https //docs sparklayer io/support and we'd be happy to discuss our headless solution in more detail