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.

javascript

<script>
  if (productVariantSelected) {
    window.dispatchEvent(new CustomEvent('tn-variant-changed'));
    calculateAddToCartButtonState();
  }
</script>