Shopify / Sparklayer customisation using Javascript SDK

[Ant3000]

I'm working on integrating Sparklayer (https://www.sparklayer.io) into a shopify B2B store however there is the requirement to add personalisation on a per product level (i.e. to supply a customer reference) on the product detail page however this is not supported 'out of the box' by Sparklayer.

Sparklayer have indicated that this might be possible using Javascript SDK (https://docs.sparklayer.io/javascript-sdk-and-headless) but I'm not sure where to start with this.

Can anybody offer any guidance or may be able to handle this as a custom development?

[Liam]

Hi Ant3000,

From what you've shared, it seems that you're looking to add a feature that allows customers to supply a reference at the product detail page level - would this be a unique code or what format would the reference take? Could this information be stored as a metafield that becomes associated with an order? 

[Ant3000]

It seems SparkLayer 'overlays' all of the Buy / Cart features with their own systems, and so a metafield wouldn't be passed to the the cart. I assume Jasvascript 'might' bridge this gap OR enable you to add a field within the SparkLayer ecosystem?

There are some example of SparkLayer / Javascript customisations here - https://docs.sparklayer.io/tech-docs/javascript-sdk

FYI - The reference would just need to be a text field that is passed along to the cart when "add to cart" is clicked

[Liam]

And does this reference text field need to be associated with the order? I'm thinking an order-based metafield might be the best option here, where some JS or a middleware is set up to pass the value from SparkLayer to Shopify.

[Ant3000]

The reference text field would need to associated with a specific product in the order. Widget 1 / Ref Widg1 - Widget 2 / Ref Widg2.

If a text field can be displayed on the product detail page and then this passed to the SparkLayer Cart using JS (or otherwise) then I think that would be a solution?

[Hallway]

Usually you'd do this by adding an input element on the product page which then adds line item properties when the variant is added to the cart (ref https://shopify.dev/docs/themes/architecture/templates/product#line-item-properties).

However, the SparkLayer app bypasses the Shopify product form entirely, and manages it's own cart. That means you would need to use the SparkLayer SDK to add your custom field at the product level.

Unfortunately, this is going to be pretty involved as there isn't any kind of built-in support for this. There's an order level reference field built in to SparkLayer, but that won't be product-specific.

The good news is that I've spoken to SparkLayer about this in the last couple of days, and they have said this feature will be coming in Q1 (estimated), so it might be easier to wait until it's rolled out by them.

If it's urgent and you need a developer to come up with a (probably quite complex and expensive) customisation to make this work on SparkLayer before then, happy to discuss that with you.

[Hallway · Accepted solution]

@Ant3000 Just had a quick call with the CTO at SparkLayer. It sounds like at the moment, it's not possible at all to add line item level custom fields or properties, even with the SDK.

In Q1, they will be looking to add the ability to support customisation however they have clarified that this is likely to still require custom development with their API to effectively roll your own widgets for the product page, using their SDK and/or collection of Web Components along with custom code.

[Ant3000]

@HallwayThanks for looking into this for me - much appreciated. It would seem the only option is to wait for SparkLayer to add the functionality and then look at options to integrate.

I have worked through their helps docs and added some custom fields at the checkout using their SDK and so I'm hopeful that adding the text field to the product detail page will follow a similar priciple.

Many thanks again!

[Hallway]

Hi there - just wanted to update this post, as SparkLayer have now released functionality to specify custom attributes to specific line items in the cart. You'll need a developer to write some code that works with their JavaScript SDK. We have clients at our agency that we will be developing an integration for, so if you need any help with that, let us know!

You can view their docs here:

https://docs.sparklayer.io/tech-docs/javascript-sdk#hyAeM

For merchants eager to offer customizations for their products, such as custom text or any other unique requirements, SparkLayer introduces a flexible solution via a pre-cart-update hook. Once an item adorned with custom attributes is placed in the cart, these customizations become visible under the product SKU. This visibility extends to past orders, ensuring that custom attributes are consistently accessible.

This functionality facilitates the incorporation of custom code, allowing for seamless customization management directly from your eCommerce storefront.

If this now answers the question, please can you update the accepted answer to this post (rather than the other one above).