Hook on create_account to show popover when EU countries selected

[14Steve14]

Due to the latest EU regulations we don't ship products into the EU, but we do still sell virtual products to customers from in the EU. We had a few EU customers get confused when they could create an account but not get shipping quotes, as we have removed all EU countries from the Royal mail shipping we use.

Therefore we created a hook, based on another one, that shows a popover message when a customer selects a country in the EU. with a simple explanation text saying we don't ship to the EU but downloads are still available.

This is the hook code which does what we want it to.

Code: Select all

<?php
/*
  $Id$
  CE Phoenix, E-Commerce made Easy
  https://phoenixcart.org
  Copyright (c) 2026 Phoenix Cart
  Released under the GNU General Public License
*/

class hook_shop_create_account_eu_shipping_notice {

  public function listen_injectBodyEnd() {
    // message from language file
    $eu_notice_message = addslashes(EU_SHIPPING_NOTICE_MESSAGE);

    // Country IDs for the 27 current EU member states, matched against
    // this site's countries table (UK excluded - already out of the EU)
    $eu_country_ids = json_encode(['14','21','33','53','55','56','57','67','72','73','81','84','97','103','105','117','123','124','132','150','170','171','175','189','190','195','203']);

    return <<<EOD
<script>
document.addEventListener('DOMContentLoaded', function() {
  var euCountryIds = {$eu_country_ids};
  var countrySelect = document.getElementById('inputCountry');
  var popover = null;

  function createPopover() {
    var pop = document.createElement('div');
    pop.className = 'popover bs-popover-top';
    pop.setAttribute('role', 'tooltip');

    var arrow = document.createElement('div');
    arrow.className = 'arrow';
    pop.appendChild(arrow);

    var body = document.createElement('div');
    body.className = 'popover-body';
    body.innerHTML = '{$eu_notice_message}';
    pop.appendChild(body);

    document.body.appendChild(pop);
    return pop;
  }

  function positionPopover() {
    if (!popover || !countrySelect) return;
    var rect = countrySelect.getBoundingClientRect();
    var spaceAbove = rect.top;
    var popHeight = popover.offsetHeight;

    // Switch placement if there isn't enough space above the input box
    if (spaceAbove < popHeight + 12) {
      popover.className = 'popover bs-popover-bottom';
      popover.style.position = 'absolute';
      popover.style.left = (window.scrollX + rect.left + rect.width/2 - popover.offsetWidth/2) + 'px';
      popover.style.top = (window.scrollY + rect.bottom + 8) + 'px';
    } else {
      popover.className = 'popover bs-popover-top';
      popover.style.position = 'absolute';
      popover.style.left = (window.scrollX + rect.left + rect.width/2 - popover.offsetWidth/2) + 'px';
      popover.style.top = (window.scrollY + rect.top - popHeight - 8) + 'px';
    }
  }

  if (countrySelect) {
    countrySelect.addEventListener('change', function() {
      if (euCountryIds.indexOf(this.value) !== -1) {
        if (!popover) popover = createPopover();
        positionPopover();
        popover.classList.add('show');
      } else if (popover) {
        popover.classList.remove('show');
      }
    });
  }

  window.addEventListener('resize', positionPopover);
  window.addEventListener('scroll', positionPopover);
});
</script>
EOD;
  }

}