APP creation | Server-side and Client-side questions

Highlighted
New Member
2 0 0

Hi everybody,

 

We are currently building an App for the Shopify App Store. We want to track/tag some events in order to follow them in our Solution.

 

So we’ve based our tests on your webhooks (client-side and server-side) and we’ve got questions. Can you help me on these technical questions ?

-----------------------------------------------------------------
[Server-side event management] (webhooks)

The detection of "carts/update" and "checkouts/update" events is not immediate on the server side.
• What is the average/maximum waiting time between an action performed on the site (cart update, etc.) and the reception of the associated event on the server side?

Receipt of a "checkouts/update" event on the display:
- of the "shipping" and "payment" steps => no possibility to distinguish these steps,
- of the "review order" page => step identification by deduction, on the presence of the "gateway" property specifying the type of payment (ex: "gateway": "Cash on Delivery (COD)") and without validation date ("completed_at": null),
- of the "confirmation" page => step identification by deduction, on the presence of the "gateway" properties: "Cash on Delivery (COD)" and with a "completed_at" validation date: "2019-02-08T05:49:48-05:00".
• Is there a way to distinguish the two steps "shipping" and "payment" when receiving the "checkouts/update" event on the server side?
• Is there a safer way to distinguish the "review order" and "confirmation" steps when receiving the "checkouts/update" event on the server side?

No sharing of client/server context. List of bypass solutions tested:
- use of the "note" property (cart) => risk of overwriting a note declared on the website,
- use of the "attributes" property (cart) => the property is not transferred on a "cart.update" webhook,
- use of the property "properties" (products) => the value is automatically added to the product description and appears in the shopping cart.
• Is there a technical way to transmit an identifier generated on the client/front side to the server/back code of the application?
• Conversely, is it possible to send data retrieved from an application (form fields) to the site, in JavaScript variables?

---------------------------------------------------------------------------------
[Client side action management]

Use of an undocumented JavaScript object "ShopifyAnalytics" for the recovery of:
- the page name (ShopifyAnalytics.meta.page.pageType, ShopifyAnalytics.meta.page.pageType.path),
- the variant of a product (ShopifyAnalytics.meta.selectedVariantId),
- the currency (ShopifyAnalytics.meta.currency).
• Can we use the "ShopifyAnalytics" JavaScript object to retrieve context-related data?

Detection of checkout pages from the url of the current page:
- "Customer information" page ; step=contact_information => ex: https://ecommerce-xxx.myshopify.com/xxx/checkouts/a189824fac27aceadf0ac8120b24ccca?step=contact_info...
- "Shipping method" page ; step=shipping_method => ex: https://ecommerce-xxx.myshopify.com/xxx/checkouts/a189824fac27aceadf0ac8120b24ccca?step=shipping_met...
- "Payment method" page ; step=payment_method => ex: https://ecommerce-xxx/xxx/checkouts/a189824fac27aceadf0ac8120b24ccca?step=payment_method
• Are the urls of the checkout pages always formatted on the same template? Can we use the query string parameter "?step " to determine a step?

We retrieve the product properties after a call to the Ajax Shopify API thanks to the product label, on the "product", "home" and "collection" pages:
- on the "product" page, the label is taken from the current url => ex: https://ecommerce-xxx.myshopify.com/products/blue-silk-tuxedo
- on the "home" page or on the "collection" pages, the labels are retrieved from the urls (href) of the products. Detection is done with JQuery, from class names such as ".product-card" or ".full-width-link".
• Do the urls of the "product" pages always contain the product label (handle)?
• Can we use the class names ".product-card" and ".full-width-link" to retrieve product labels from the HTML code?
• Can we consider that the JQuery library will always be present in the e-commerce site?

• Is the tagging approach combining client-side and server-side events not recommended? Are there any other alternatives?

 

Thank you,

0 Likes
Shopify Staff
Shopify Staff
1558 77 232

Hey @gfo.

 

To answer your questions directly:

 

What is the average/maximum waiting time between an action performed on the site (cart update, etc.) and the reception of the associated event on the server side?

 

There is no average or maximum waiting time that I have which I can officially share. However, my experience dictates that they webhooks are delivered within 60 seconds, and way more often within 10 seconds assuming there are no issues with delivery.

 

The only time this would be different would be in the case of update webhooks. They are deduped, and all updates within 10 seconds will be rolled together into a single update webhook containing the last changes that were made during that 10 second period.

 

Is there a way to distinguish the two steps "shipping" and "payment" when receiving the "checkouts/update" event on the server side?

 

After shipping information has been provided, you will be able to see the `shipping_address` in the webhook payload. Once the payment step is complete, you will be able to see the `gateway` in the webhook payload.

 

Is there a safer way to distinguish the "review order" and "confirmation" steps when receiving the "checkouts/update" event on the server side?

 

Orders in review will have a null value for the “completed_at” field, whereas confirmed orders will have that property set to the date time of the completion. It’s most likely your best means of distinguishing between the two states.

 

Is there a technical way to transmit an identifier generated on the client/front side to the server/back code of the application?

Conversely, is it possible to send data retrieved from an application (form fields) to the site, in JavaScript variables?

 

Honestly not aware of any foolproof solution to this. Cart notes and attributes are visible to merchants and customers and can be overwritten easily, line item properties can be seen by customers as well, and any identifiable cart properties like a token aren’t guaranteed to be present on their resulting orders.

 

Using a ScriptTag (https://help.shopify.com/en/api/reference/online-store/scripttag) you can load an external javascript resource onto a storefront though and run your own scripts and place custom variables.

 

Can we use the "ShopifyAnalytics" JavaScript object to retrieve context-related data?

 

You can try, but it’s only intended to be used internally by Shopify. I would not depend on this object continuing to work in the same way it does, and I cannot speak to all of the things you can or should do with this object.

 

Are the urls of the checkout pages always formatted on the same template? Can we use the query string parameter "?step " to determine a step?

 

“Step” will consistently reflect the step the user is viewing on the checkout unless something changes in the future.

 

Do the urls of the "product" pages always contain the product label (handle)?

 

Yes.

 

Can we use the class names ".product-card" and ".full-width-link" to retrieve product labels from the HTML code?

 

I don’t think this would be air tight, custom themes might use different class names unless I’m misunderstanding your question.

 

Can we consider that the JQuery library will always be present in the e-commerce site?

 

I’m not a theme developer, and questions specific to themes are a bit outside of my team’s expertise, but it looks like you can expect the object the be present in all cases. That said: always plan for the case that it isn’t, and have conditional code that executes pure JS to accomplish the same goals if you need to. If that changes in the future or there’s some caveat I haven’t been made aware of, you want to protect your app’s functionality in any way you can.

 

Is the tagging approach combining client-side and server-side events not recommended? Are there any other alternatives?

 

If you mean you’re making a call to the admin API from the storefront, this isn’t something I would recommend unless you can manage to completely secure your authentication credentials. I recommend delegating to your back end to make authenticated requests, and feeding responses to those requests back to your front end on the storefront.

 

I hope that helps a bit. Cheers.

1 Like
New Member
2 0 0

Hi @Alex 

 

Thanks for these answers.

 

Yes it definitely helps me.

 

Have a nice day!

 

Géric

0 Likes