Discussion on: Deploy your ZEIT's hosted website right from WordPress using Deploy Hooks

Hi Tom, this is exactly what I've been looking for, thanks !
However I've had one issue. I can't get my JS to recognise the element on the page using querySelector.
I noticed in your code you labelled the button deployButton and gave the full ID of the element as '#wp-admin-bar-deploy-button > a'. Was this deliberate? I would have expected it to be #wp-admin-bar-deployButton > a.

Either way, I can't get the script to recognise the element to add the event listener - is this code working for you still ?

I posted my code below, though it's pretty much a straight copy of yours with a couple of extra elements added in at the top to see what was firing, and deploy-button changed to deployButton.

Thanks for any advice you have! Tom

const deployButton = document.querySelector('#wp-admin-bar-deployButton > a')
console.log('JS loaded!') // fires on page load
if (deployButton) {
console.log(
'There is a deploy button!' // Never fires, and so nor does anything below this line...
)

  deployButton.addEventListener('click', (event) => {
    event.preventDefault()
    alert('button clicked!')

    // To make the POST Request will use
    // the gud-ol jQuery that comes with WordPress
    jQuery.ajax({
      url: 
        'https://api.zeit.co/v1/integrations/deploy/QmdWKLcWSnTCkTEaape22tcCGjMwM43YCTKof6YChq5SgG/Dtb57aRrbd', // Our Deploy Hook URL here,
      method: 'POST',
    }).done(() => {
      alert(
        'The website will be updated shortly. Check in a few minutes'
      )
    })
  })
}