TryNow Button Latency
Recommendations for optimizing the TryNow Button Latency.
Button Load & Render Times
Background
Some PDPs are rendered with no variants are selected. In this case, the TryNow button will not appear because the button only renders when a product and variant are identified as having the TryNow selling plan.
The TryNow button will recalculate its visibility state when a variant is selected. Depending on theme code this can affect the speed at which the button is rendered.
What's next?
You have the option to dispatch an event to trigger the recalculate of the state of the TryNow button. In the case of a slow button load time (>200ms), TryNow recommends dispatching the [\[tn-variant-changed\]](https://how.trynow.works/reference/events#variants)
event which triggers the recalculation of the button state at a time that is most suitable for your application flow.
Implementation
To implement this optimization, simply dispatch the \[[tn-variant-changed]](\<<https://how.trynow.works/reference/events#variants>)
event within your theme code. This event will prompt the system to recalculate the TryNow CTA button state, ensuring its visibility and functionality are maintained, regardless of loading delays.
Usage Example
For instance, within your application logic, you can incorporate the following JavaScript code snippet to dispatch the event:
<!--- TRYNOW RECALCULATE CTA VISIBILITY STATE --->
window.dispatchEvent(new CustomEvent('tn-variant-changed'));
<!------- END TRYNOW ------>
By integrating this code into your platform, the merchant can decide when the button visibility calculation is happening, which can improve load times significantly.
Hint
In themes where variant selection is not automatic, there is often a Javascript file which calculates the state of the Add To Cart button. TryNow recommends calculating the TryNow button state in the same block.
<script> if (productVariantSelected) { window.dispatchEvent(new CustomEvent('tn-variant-changed')); calculateAddToCartButtonState(); } </script>
Updated 2 months ago