New feature: Highlight popular countries in country select (#4089)

* allow to configure top countries that will be shown on top in the country dropdown

* refactored Mage_Checkout_Block_Onepage_Abstract::getCountryHtmlSelect() to use related method in Mage_Directory to avoid code duplication, moved new code for top countries also to Mage_Directory

* improved onchange listener for virtual orders

* moved sorting of top countries further down so result is not cached and erroneously used in other places

* re-added and deprecated method getCountryOptions() because it is public api

* added missing translations

* Update Data.php

Removed empty space.

---------

Co-authored-by: Sven Reichel <[email protected]>
Co-authored-by: Ng Kiat Siong <[email protected]>

Author: 3 people

app/code/core/Mage/Checkout/Block/Onepage/Abstract.php

@@ -161,22 +161,12 @@ public function getAddressesHtmlSelect($type)
      */
     public function getCountryHtmlSelect($type)
     {
-        $countryId = $this->getAddress()->getCountryId();
-        if (is_null($countryId)) {
-            $countryId = Mage::helper('core')->getDefaultCountry();
-        }
-        $select = $this->getLayout()->createBlock('core/html_select')
-            ->setName($type . '[country_id]')
-            ->setId($type . ':country_id')
-            ->setTitle(Mage::helper('checkout')->__('Country'))
-            ->setClass('validate-select')
-            ->setValue($countryId)
-            ->setOptions($this->getCountryOptions());
-        if ($type === 'shipping') {
-            $select->setExtraParams('onchange="if(window.shipping)shipping.setSameAsBilling(false);"');
-        }
-
-        return $select->getHtml();
+        return Mage::getBlockSingleton('directory/data')->getCountryHtmlSelect(
+            $this->getAddress()->getCountryId(),
+            $type . '[country_id]',
+            $type . ':country_id',
+            $this->helper('checkout')->__('Country'),
+        );
     }
 
     /**
@@ -197,6 +187,7 @@ public function getRegionHtmlSelect($type)
     }
 
     /**
+     * @deprecated
      * @return bool|mixed
      * @throws Mage_Core_Model_Store_Exception
      */
@@ -240,5 +231,4 @@ public function isShow()
     {
         return true;
     }
-    /* */
 }

app/code/core/Mage/Directory/Block/Data.php

@@ -19,6 +19,7 @@
  *
  * @category   Mage
  * @package    Mage_Directory
+ * @phpstan-type Option array{label: string, value: non-falsy-string}
  *
  * @method int getRegionId()
  */
@@ -78,7 +79,7 @@ public function getCountryHtmlSelect($defValue = null, $name = 'country_id', $id
             ->setTitle(Mage::helper('directory')->__($title))
             ->setClass('validate-select')
             ->setValue($defValue)
-            ->setOptions($options)
+            ->setOptions($this->sortCountryOptions($options))
             ->getHtml();
 
         Varien_Profiler::stop('TEST: ' . __METHOD__);
@@ -172,4 +173,29 @@ public function getRegionsJs()
         Varien_Profiler::stop('TEST: ' . __METHOD__);
         return $regionsJs;
     }
+
+    /**
+     * @template T of Option[]
+     * @param T $countryOptions
+     * @return array{0: array{label: string, value: Option[]}, 1: array{label: string, value: Option[]}}|T
+     */
+    private function sortCountryOptions(array $countryOptions): array
+    {
+        $topCountryCodes = $this->helper('directory')->getTopCountryCodes();
+        $headOptions = $tailOptions = [];
+
+        foreach ($countryOptions as $countryOption) {
+            if (in_array($countryOption['value'], $topCountryCodes)) {
+                $headOptions[] = $countryOption;
+            } else {
+                $tailOptions[] = $countryOption;
+            }
+        }
+
+        if (empty($headOptions)) {
+            return $countryOptions;
+        }
+
+        return [['label' => $this->__('Popular'), 'value' => $headOptions], ['label' => $this->__('Others'), 'value' => $tailOptions]];
+    }
 }

app/code/core/Mage/Directory/Helper/Data.php

@@ -310,4 +310,16 @@ public static function getConfigCurrencyBase(): string
     {
         return (string) Mage::getStoreConfig(Mage_Directory_Model_Currency::XML_PATH_CURRENCY_BASE);
     }
+
+    /** @return list<string> */
+    public function getTopCountryCodes(): array
+    {
+        $topCountries = array_filter(explode(',', (string)Mage::getStoreConfig('general/country/top_countries')));
+
+        $transportObject = new Varien_Object();
+        $transportObject->setData('top_countries', $topCountries);
+        Mage::dispatchEvent('directory_get_top_countries', ['topCountries' => $transportObject]);
+
+        return $transportObject->getData('top_countries');
+    }
 }

app/code/core/Mage/Directory/etc/system.xml

@@ -279,6 +279,17 @@
                             <show_in_store>0</show_in_store>
                             <can_be_empty>1</can_be_empty>
                         </optional_zip_countries>
+                        <top_countries translate="label comment">
+                            <label>Top Countries</label>
+                            <frontend_type>multiselect</frontend_type>
+                            <sort_order>40</sort_order>
+                            <source_model>adminhtml/system_config_source_country</source_model>
+                            <show_in_default>1</show_in_default>
+                            <show_in_website>1</show_in_website>
+                            <show_in_store>1</show_in_store>
+                            <can_be_empty>1</can_be_empty>
+                            <comment>Choose popular countries that should be grouped on top of the country select.</comment>
+                        </top_countries>
                     </fields>
                 </country>
                 <region translate="label">

app/locale/en_US/Mage_Directory.csv

@@ -7,6 +7,7 @@
 "Base currency is used for all online payment transactions. Scope is defined by the catalog price scope (""Catalog"" > ""Price"" > ""Catalog Price Scope"").","Base currency is used for all online payment transactions. Scope is defined by the catalog price scope (""Catalog"" > ""Price"" > ""Catalog Price Scope"")."
 "Can't convert rate from ""%s-%s"".","Can't convert rate from ""%s-%s""."
 "Cannot retrieve rate from %s.","Cannot retrieve rate from %s."
+"Choose popular countries that should be grouped on top of the country list.","Choose popular countries that should be grouped on top of the country list."
 "Connection Timeout in Seconds","Connection Timeout in Seconds"
 "Continue »","Continue »"
 "Country","Country"
@@ -37,6 +38,7 @@
 "List of regions in specified country","List of regions in specified country"
 "No API Key was specified or an invalid API Key was specified.","No API Key was specified or an invalid API Key was specified."
 "One or more invalid symbols have been specified.","One or more invalid symbols have been specified."
+"Popular","Popular"
 "Postal Code is Optional for the following countries","Postal Code is Optional for the following countries"
 "Region","Region"
 "Region API","Region API"
@@ -52,6 +54,7 @@
 "The account this API request is coming from is inactive.","The account this API request is coming from is inactive."
 "The current request did not return any results.","The current request did not return any results."
 "The maximum allowed API amount of monthly API requests has been reached.","The maximum allowed API amount of monthly API requests has been reached."
+"Top Countries","Top Countries"
 "Unable to initialize the import model.","Unable to initialize the import model."
 "Undefined rate from ""%s-%s"".","Undefined rate from ""%s-%s""."
 "WARNING:","WARNING:"

skin/frontend/base/default/js/opcheckout.js

@@ -408,6 +408,7 @@ Shipping.prototype = {
         this.form = form;
         if ($(this.form)) {
             $(this.form).observe('submit', function(event){this.save();Event.stop(event);}.bind(this));
+            $(this.form).select('#shipping\\:country_id').first()?.addEventListener('change', () => { if (window.shipping) shipping.setSameAsBilling(false) });
         }
         this.addressUrl = addressUrl;
         this.saveUrl = saveUrl;