> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/pre-order/app-api/javascript-api-online-store/event-listeners.md).

# Event listeners

### 1. When form back in stock show

<pre class="language-javascript"><code class="lang-javascript"><strong>document.addEventListener('globo.preorder.show.bis', e =>{
</strong>   const { form , type } = e.detail;
   // form => current element form 
   // type => back in stock HTML
});
</code></pre>

### 2. When form back in stock hidden

<pre class="language-javascript"><code class="lang-javascript"><strong>document.addEventListener('globo.preorder.hidden.bis', e =>{
</strong>   const { form , type } = e.detail;
   // form => current element form 
});
</code></pre>

### 3. When show preorder "Not available message"

<pre class="language-javascript"><code class="lang-javascript"><strong>document.addEventListener('globo.preorder.show.naMessage', e =>{
</strong>   const { form , profile } = e.detail;
   // form => current element form 
   // profile => current profile preorder apply not availabel message
});
</code></pre>

### 4. When show coming soon preorder

<pre class="language-javascript"><code class="lang-javascript"><strong>document.addEventListener('globo.preorder.show.comingSoon', e =>{
</strong>   const { form , profile } = e.detail;
   // form => current element form 
   // profile => current profile preorder coming soon
});
</code></pre>

### 5. When show coming soon product available

<pre class="language-javascript"><code class="lang-javascript"><strong>document.addEventListener('globo.preorder.show.comingSoonAtc', e =>{
</strong>   const { form , profile } = e.detail;
   // form => current element form 
   // profile => current profile coming soon
});
</code></pre>

### 6. When show preorder&#x20;

<pre class="language-javascript"><code class="lang-javascript"><strong>document.addEventListener('globo.preorder.show.preorder', e =>{
</strong>   const { form , profile } = e.detail;
   // form => current element form 
   // profile => current profile preorder active
});
</code></pre>

### 7. When show payment options&#x20;

<pre class="language-javascript"><code class="lang-javascript"><strong>document.addEventListener('globo.preorder.show.payment', e =>{
</strong>   const { form } = e.detail;
   // form => current element form 
});
</code></pre>

### 8. When show add to cart - product normal

<pre class="language-javascript"><code class="lang-javascript"><strong>document.addEventListener('globo.preorder.show.addtocart', e =>{
</strong>   const { form } = e.detail;
   // form => current element form 
});
</code></pre>

### 9. When app loaded

```javascript
window.addEventListener('preorderRendered', e =>{
  // code here
});
```

### 10. When app show badge

```javascript
document.addEventListener('globo.preorder.show.badge', e =>{
   const { imageWrapper } = e.detail;
   // code here
});
document.addEventListener('globo.preorder.show.comingSoonPreorderBadge', e =>{
   const { imageWrapper } = e.detail;
   // code here
});
document.addEventListener('globo.preorder.show.comingSoonAtcBadge', e =>{
   const { imageWrapper } = e.detail;
   // code here
});
```