Adding a product from external website with lineitem properties

Dave_A
Shopify Partner
2 0 1

Hi! 

Being able to add line-item customizations is something that's critical for several of my clients with Shopify stores (the typical example is custom embroidery or adding text to a tshirt, etc)-- their entire business model depends on it. However, for some (rather complicated but valid) reasons one large client is moving away from using Shopify on the frontend, and just keeping it for backend fulfillment and checkout, meaning all product pages and adding to the cart must be done from a website that is external to Shopify...

... So I finished integrated the Buy Button JavaScript SDK, and it's working great-- for those not aware it creates a temporary cart in the browser's LocalStorage, and then fires off all the product variants and quantities at once to the checkout page using the:

/cart/[variant_id_1]:[qty_1],[variant_id_2]:[qty_2]...

format. However, when this client-side cart is transferred to Shopify all the lineitem properties/customizations that have been set on the client-side are NOT transferred over. This was suprising to me because looking at the SDK source code, it has lots of logic dedicated to dealing with properties (eg, adding a variant to a cart with different properties will not simply increment the existing variant, but add it as a new item). Searching through the forums, it seems this feature is available for iOS, Android and others, just not the web one. It seems like everything is in place for this to work, and yet it does not. I've played around with URLs trying to figure it out but got nowhere.

So, Question Number 1: 
Is there any way to add LineItem Properties using the web Buy SDK?
It seems like an oversight not to include this given it's baked into the other SDKs, and even well-supported by the JS SDK on the client-side.

An alternative:
Before discovering the Buy SDK, my previous plan was to embed an iframe on the product pages on my website which would serve as a 'proxy' to the Shopify site. That way I could pass information about variant, quanity, and lineitem properties via URL query-string parameters, and have Javascript within the Shopify page read in and decode those parameters, and then trigger a POST to the cart with the proper information set, as if the visitor had added the product to the cart on the Shopify site directly. (You can't directly do an remote-POST to the cart of course). This seems like it should work, but in doing so I noticed in the Chrome Developer Tools a notification about Content Security Policy directives:

[Report Only] Refused to display 'http://XYZ.myshopify.com/' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors XYZ.myshopify.com".

The [Report Only] means it doesn't actually block the content loading, so it should work, but it made me nervous because it actually does send a report of the activity to a url along with a tracking UUID:

/csp-report/[UUID]?source%5Baction%5D=index&source%5Bcontroller%5D=shop&source%5Bsection%5D=storefront

I don't want to spend another ton of time implementing another solution to have this feature one day disappear and have the client's business grind to a sudden panicked halt because of Shopify decided to turn off the "Report Only" flag, thereby instructing browsers that support it to block the request entirely. That would be Very Bad.

So: Question Number 2:
Although I know this is unsupported, does Shopify have any plans to prevent people from including shops/pages within iframes going forward? Is the reporting that is done research and security-oriented, or is it used to crack down on shop owners doing unsupported things with iframes?


Finally, a third solution I just thought of would be to use the Buy SDK (client-side javascript) that I've already integrated, and instead of using its standard method of linking to the cart with the /cart/[variant_id]:[qty] format, I could have the Checkout button send the browser to a page on the Shopify site with a URL query string that included the entire array of serialized product information from the client-side cart, decoded that and added all products to the cart using standard same-domain ajax POSTs, and then redirect to the checkout page, all in one go. That will probably be what I try next if Option #1 proves to be impossible. 

I already have private Apps set up for website<->shopify communication but as far as I know there's nothing that can be done with that to create a cart for a client, but if anyone knows of any other ways to accomplish this I'm all ears.

Thanks for any input!
Dave

0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

Hi,

I've been to that situation with a client some time ago. If I remember correctly the Javascript SDK did not allowed passing the product line items. I think they are working on it thought.

The solution found was to create a custom checkout URL and send additional data as cart attributes.

Look into permalinks https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart. You can get the checkout link from the SDK cart object and add to the link parameters that contain your additional data: &attributes[monogram]=Something

Hope it helps

Finally—Add variant descriptions to your products
0 Likes
Simon_Layfield
New Member
2 0 0

Just bumping this thread because I'm working on something really similar and really need to pass line item properties to multiple products in cart. There doesn't seem to be a way to do it from an external application - is it planned for a future release at all? 

0 Likes
Dave_A
Shopify Partner
2 0 1

Hi Simon, I did end up figuring this out by using the Shopify JS Buy SDK. Basically I created a custom checkout button handler for the cart button which generates a payload of line items and custom line item properties which gets loaded into a GET request that is sent to the Shopify-hosted store. Then a handler on the store page searches for that payload and if found uses the regular JS API to populate the cart with the items and the forwards the browser to the checkout page.

See details and code here: 
https://github.com/Shopify/js-buy-sdk/issues/238#issuecomment-251683487

Also note the bugfix in the first comment of that thread which will have to be made to get things working properly.

AvidBrio
Shopify Expert
125 6 12

@Dave_A  did you fixed the problems? if yes then please share the solution 

If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes