Custom Slots ("Targets")

🚀 upgrading to the latest sparklayer version to benefit from our latest updates, please upgrade your frontend integration guide docid\ qwxsym9x5 pviogutekcp introduction custom slots (or "targets") allow you to enhance a range of the sparklayer frontend interfaces docid\ ccz1vnh0o6d 722w35xpa by adding your own custom code in predefined areas it's a great way to further enhance your b2b customer experience and use cases could include any of the following use case details promotional content adding promotional content to the my account interface docid\ lqxani7ivdqna09d9soap that customers see as soon as they login (e g announcing a new product line) adding links adding links in the my cart interface docid\ efevur a3ycjxuhvrr7t area that your b2b customers can access (e g downloadable csv templates) upsell content adding upsells and promotional content when a customer my cart interface docid\ efevur a3ycjxuhvrr7t (e g asking for a rating) in addition to this, you could also set up more advanced content that varies based on specific rules use case details customer specific based on who the customer is and which customer groups docid 5 lwmnohhjbjjppg9e6vh they belong to, show different content (e g customer group vip , show a promotional message) order specific based on the order contents or order total, show a message (e g if the order is under $100, encourage them to add more products) custom slots allow a lot of flexibility in how they're used and it's really up to you how creative you can be! how it works custom slots work by adding special template slots to your website that are then displayed in specific locations of the sparklayer frontend interfaces docid\ ccz1vnh0o6d 722w35xpa you can learn how to begin using them under "getting started" below my account the "my account" template slot is displayed at the top of the my account interface docid\ lqxani7ivdqna09d9soap when a b2b customer signs in my order the "my order" template slot is displayed at the top of the my cart interface docid\ efevur a3ycjxuhvrr7t when a b2b customer signs in order complete the "order complete" template slot is displayed when a b2b customer customer my cart interface docid\ efevur a3ycjxuhvrr7t cart shipping step the "cart shipping step" template slot is displayed on the "shipping" step of the checkout cart payment step the "cart payment step" template slot is displayed on the "payment" step of the checkout purchase summary header the "purchase summary header" template slot is displayed above the purchase summary when viewing a purchase purchase summary footer the "purchase summary footer" template slot is displayed below the purchase summary when viewing a purchase getting started configuring your store to begin using custom slots, you'll need to add some specific code to the frontend integration guide docid\ qwxsym9x5 pviogutekcp within the display section based on the locations you intend to add to your website, you can include the below code in your sparklayer core script display { showslots \[ 'spark slot my account', 'spark slot my cart', 'spark slot order complete', 'spark slot cart shipping step', 'spark slot cart payment step', 'spark slot purchase summary header', 'spark slot purchase summary footer', ], }, name details spark slot my account this enables the "my account" slot spark slot my cart this enables the "my order" slot spark slot order complete this enables the "order complete" slot spark slot cart shipping step this enables the "cart shipping step" slot spark slot cart payment step this enables the "cart payment step" slot spark slot purchase summary header this enables the "purchase summary header" slot spark slot purchase summary footer this enables the "purchase summary footer" slot adding & customising the slots once you've adjusted the sparklayer core script with the above changes, you can then proceed to add custom content for each of the locations to get started, you simply need to add a template element within your website code, referencing the id of one of the slot locations above content here will show in the my account section content here will show in the my order section content here will show in the order complete section content here will show in the cart shipping step section content here will show in the cart payment step section content here will show in the purchase summary header section content here will show in the purchase summary footer section you could include these template elements within the main template file of your website (e g layout/theme liquid for shopify), or any other appropriate location that is easy for you to access and update the template markup can be very simple with some basic text or you could extend this with more extensive html, css, images, and other elements it is really up to you! please note it's important to note the following any code added within the template element s will show within the specific sparklayer interface (e g the spark slot my cart template element will show in the my cart interface docid\ efevur a3ycjxuhvrr7t these template elements will not be shown anywhere else on your website and will be invisible to logged out customers examples you can use to help you get started, we've included some examples you could use show a custom html message with coloured backgrounds 🎉 for this week only, get an extra 10% off your b2b order! 🎉 👋 welcome back, claire! don't forget to check our latest special offers here! 😊 whilst you're here, would you be able to leave feedback on your b2b experience? it would really help us improve our website! show a custom html message with gradient coloured backgrounds new! show custom content here for specific customers, such as new promotions 🚀 new! show content to your b2b customers such as promoting free shipping 🚀 new! when an order is placed, you can include further content here show a message using ready made sparklayer components (e g "success") show a message that shows customer metafields {% if customer metafields custom field name %} your message here you can output a metafield like this {{ customer metafields custom field name }} {% endif %} show a message that includes the customer's name hello {{ customer name }}, here's a message for you hello {{ customer name }}, here's a message for you hello {{ customer name }}, here's a message for you show a message based on the shopify tag assigned to a customer (e g b2b vip) {% for tag in customer tags %} {% if tag == "b2b group 1" %} as a group 1 customer, you qualify for special b2b pricing! {% elsif tag == "b2b group 2" %} as a group 2 customer, you qualify for special b2b pricing! {% else %} message to show for regular b2b customers {% endif %} {% endfor %} show a message that includes text and an image here is a message here is a message here is a message show a dynamic message that can be updated with javascript this example shows a simple dynamic slot that will automatically update any time the cart is updated by the customer we will use the sparklayer options config to hook into the cart updated event and update the contents of the slot first let's define a simple template for the slot please update the cart to see this update now we need to add some javascript in this example we will trigger this javascript using sparklayer options cart updated hook, but this could be done anywere, such as a custom js script in the theme files window\ sparkoptions = { // other options not shown display { showslots \[ 'spark slot my cart', ], }, oncartupdate (c) => { // let's get the current updated gross total const sltotal = c totals total prediscount gross number; const freeshippingmin = 100; const remaining = freeshippingmin sltotal; // we will now setup the dynamic message to show let message = 'you qualify for free shipping!'; if (remaining > 0) { const formatted = (remaining / 100) tofixed(2); message = `spend £${formatted} more to qualify for free shipping`; } // we need to get the sparklayer shadow dom root const slhost = document queryselector('spark drawer'); const slroot = slhost shadowroot; // finally we can query any element inside our template const el = slroot queryselector(' spark slot my cart content'); // let's update the content to our new dynamic message if (el) el textcontent = message; }, // the rest of sparklayer options } important please note that you can only modify elements in your custom slot template please do not attempt to modify the dom of any sparklayer widget elements as the structure and selectors of sparklayer elements changes regularly, and any dom interactions will stop working come up with an interesting use case? we've love to know how you're using custom slots let our team know by emailing product\@sparklayer io