Jump to content
ArtcoInc

Drop down state selection and 2334bs3

Recommended Posts

In both 2334bs3 and the stock osC, when a user is, say, creating an account, the State field is a free-for-all. Only after the user enters something that isn't correct does the drop-down option become enabled.

 

I'd like to have it so that the drop-down selection is enabled when the user first begins to fill out the form. I have already defined the USA as the default country (I think).

 

I have looked at several add-ons, but most seem to be for earlier versions of osC (and none for bootstrap). I've just spent most of today mucking with one that went so far as to replace the Zones table (w00t) Even so, I wasn't able to get it to work.

 

Ideally, I'd also like to do this with the Active Country add-on:

 

http://addons.oscommerce.com/info/3607

 

but this too is for an older version of osC, and is not bootstrap friendly.

 

Thanks!

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

* update *

I was able to get Active Country to work. I disabled the new password code, and had to mix the state drop-down code with code from the pre-Ajax version of Country-State Selector:

http://addons.oscommerce.com/info/2028

I'm still a little confused with the resulting code, but it seems to work :rolleyes:

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@ArtcoInc Where you able to get it to work with bootstrap version? I wish this version had it implemented already. Can you upload it here?

Edited by drillsar

Share this post


Link to post
Share on other sites

Hi Thomas

 

I use DHTML State Selection

 

http://addons.oscommerce.com/info/6975

 

This is something that always bugged me too. Once you fill out the form and click on the continue button it kicks you back with an error message and a suddenly a new dropdown for the state.

This DHTML State Selection does a great Job if the country has states it will show a dropdown if not then just an empty input field. And it pre-selects the country that is setup in the primary address.

 

It is really not hard to install mostly cosmetic/visual stuff. Remove table, tr and td tags and replace with bootstrap style.

The only downside in using that addon is you won't be able to use the option "Allow Orders Not Matching Defined Shipping Zones". I don't use that option so it is no problem for me.

Edited by Tsimi

Share this post


Link to post
Share on other sites

@@drillsar Thomas,

 

As I mentioned, I ended up kit-bashing code from both of the mentioned add-ons to get it to work the way I wanted. And, as @@Tsimi mentioned, other add-ons also gives this function.

 

I went my way because I wanted the ability to enable (and disable) countries and states from within the Admin area. The Active Countries add-on gave me this.

 

You may notice that many websites have the country as one of the first fields the user must select. This makes it easier when the user moves through the form, as the state options will have already been defined by selecting the country first.

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

You guys use MVS contribution or no? I am almost done but the checkout shipping page is creating me problems. Another thing I noticed that there is a refresh button. You can use ajax to auto update cart correct instead of refresh?

Edited by drillsar

Share this post


Link to post
Share on other sites

@@drillsar

Just tried several countries in your sample site. Seems to be working, pulling up the appropriate 'states' when there are any in your database. There are a couple of small formatting/layout issues, though.

 

I don't see a ENTRY_STATE_TEXT issue. Usually, that's a problem with something not being defined in a language file. Seems to be fixed now.

 

Having the country up in the form is a personal preference. Your Ajax version seems to work where it is.

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

You guys use MVS contribution or no? I am almost done but the checkout shipping page is creating me problems. Another thing I noticed that there is a refresh button. You can use ajax to auto update cart correct instead of refresh?

 

No, I've not used MVS.

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

@@ArtcoInc you mean the state and country not lining up correctly on the page is that what you mean? I am trying to figure out why at this moment. Yes I fixed that part.

Share this post


Link to post
Share on other sites

@@ArtcoInc you mean the state and country not lining up correctly on the page is that what you mean? I am trying to figure out why at this moment. Yes I fixed that part.

I was referring to the FAX number, Newsletter, and Password areas not lining up ...

 

 

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

Ok Fixed, now onto trying to add MVS to this version.. The admin side done. I think the only page I have trouble with is the checkout shipping page. Thanks for pointing that out

Share this post


Link to post
Share on other sites

FWIW ... I have my screen set to 1024x768, which Bootstrap considers 'Medium'. I just looked at your site again, and it was still the same as my screenshot above. I even refreshed the cache ... no change. I then changed my resolution to 1280x1024 (Large), and your site looked fine. I then started playing with shrinking the viewport, and it seemed to be working. Then, something on your site crashed ...

 

1146 - Table 'giftboun_store.TABLE_VENDOR_CONFIGURATION' doesn't exist

select configuration_key as cfgKey, configuration_value as cfgValue from TABLE_VENDOR_CONFIGURATION

[TEP STOP]

 

 

I'm guessing you're still working on it. :rolleyes:

 

So, maybe it was me and my computer. <shrug>

 

Malcolm


Get the latest Responsive osCommerce CE (community edition) here .

Share this post


Link to post
Share on other sites

I am working on MVS contribution. I got it working now just a few display issues to deal with. I like to get products in a box. Also the shipping address displayed differently. I am receiving the orders, etc. When U add two more orders from vendors is a issue that I am fixing at the moment.

Share this post


Link to post
Share on other sites

I just wanted to get everything working than try to fix on how it displays. I am trying to decide if I should go Ajax fast checkout or simple checkout route. I know with both of them will be a challenge to get MVS to work. On the cart itself do you know what contribution or something I can do in order to not use refresh button when changing qty? I rather have like you add 2 to cart and auto refresh total. If that makes sense.

 

I added IP Trap which I suggest. It's very easy and can add security to your site

Edited by drillsar

Share this post


Link to post
Share on other sites

Since I found the state selection - like some others - extremely frustrating and annoying I tried different solutions for that, among others DHTML State Selection for 2.3.1.  I got it to work somehow, but it was very arkward, much too complicated and in some cases I got very interesting results :x. 

OK, I thought this must be to make it even easier! And yes, it is:
 
1. ) I recommend to change e.g. in create_account.php the order from state - country to country - state. This is not necessary, but to me it seems more logical.
 
2. ) In create_account.php find: 

echo tep_get_country_list('country', NULL, 'required aria-required="true" id="inputCountry"');

change it to:

echo tep_get_country_list('country', NULL, 'onChange="getState(this.value)" required aria-required="true" id="inputCountry"');

3. ) In create_account.php find: 

<?php
  if (ACCOUNT_STATE == 'true') {
?>
    <div class="form-group has-feedback">
      <label for="inputState" class="control-label col-sm-3"><?php echo ENTRY_STATE; ?></label>
      <div class="col-sm-9">
        <?php
        if ($process == true) {
          if ($entry_state_has_zones == true) {
            $zones_array = array();
            $zones_query = tep_db_query("select zone_name from " . TABLE_ZONES . " where zone_country_id = '" . (int)$country . "' order by zone_name");
            while ($zones_values = tep_db_fetch_array($zones_query)) {
              $zones_array[] = array('id' => $zones_values['zone_name'], 'text' => $zones_values['zone_name']);
            }
            echo tep_draw_pull_down_menu('state', $zones_array, 0, 'id="inputState"');
            echo FORM_REQUIRED_INPUT;
          } else {
            echo tep_draw_input_field('state', NULL, 'id="inputState" placeholder="' . ENTRY_STATE . '"');
            echo FORM_REQUIRED_INPUT;
          }
        } else {
          echo tep_draw_input_field('state', NULL, 'id="inputState" placeholder="' . ENTRY_STATE    . '"');
          echo FORM_REQUIRED_INPUT;
        }
        if (tep_not_null(ENTRY_STATE_TEXT)) echo '<span class="help-block">' . ENTRY_STATE_TEXT . '</span>';
        ?>
      </div>
    </div>
<?php
  }
?>

change it to:

<?php
  if (ACCOUNT_STATE == 'true') {
?>
    <div class="form-group has-feedback">
      <label for="inputState" class="control-label col-sm-3"><?php echo ENTRY_STATE; ?></label>
      <div class="col-sm-9">
        <?php
         echo '<span id="results">';
          echo tep_draw_input_field('state', NULL, 'id="inputState" placeholder="' . ENTRY_STATE    . '"');
         echo '</span>';
          echo FORM_REQUIRED_INPUT;

        if (tep_not_null(ENTRY_STATE_TEXT)) echo '<span class="help-block">' . ENTRY_STATE_TEXT . '</span>';
        ?>
      </div>
    </div>
<?php
  }
?>

4. )  Add to footer.php (maybe it would also work if you add it to template_bottom.php - I didn't test it!)

<script>
function getState(str){
var xhr = false;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

if (xhr) {
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
document.getElementById("results").innerHTML = xhr.responseText;
}
}
xhr.open("GET", "get_states.php?st="+str, true);
xhr.send(null);
}
}
</script>

5. ) Create a new file catalog/get_states.php: 

<?php
/*
  $Id$

  osCommerce, Open Source E-Commerce Solutions
  http://www.oscommerce.com

  Copyright (c) 2015 osCommerce

  Released under the GNU General Public License
*/
require('includes/application_top.php');


$state = ($_GET['st']);
     $check_query = tep_db_query("select count(*) as total from " . TABLE_ZONES . " where zone_country_id = '" . (int)$state . "'");
     $check = tep_db_fetch_array($check_query);
     $entry_state_has_zones = ($check['total'] > 0);
      
      if ($entry_state_has_zones == true) {
          $zones_array = array();
          $zones_array[0] = array('id' => '0', 'text' => PULL_DOWN_DEFAULT);                        
          $zones_query = tep_db_query("select zone_name from zones where zone_country_id = '" . (int)$state . "' order by zone_name");
            while ($zones_values = tep_db_fetch_array($zones_query)) {
             $zones_array[] = array('id' => $zones_values['zone_name'], 'text' => $zones_values['zone_name']);
             }
            echo tep_draw_pull_down_menu('state', $zones_array, '', 'id="inputState"');
             } else {
            echo tep_draw_input_field('state', NULL, 'id="inputState" placeholder="' . ENTRY_STATE . '"');
             }
?>
There are a few other files, such as includes/modules/checkout_new_address.php or includes/modules/address_book_details.php, in which the states pulldown is used. There the same changes as in the create_account must be carried out.

 

I know that this feature requires changes to core files. But sometimes this simply can not be avoided.....

Tested with BS-gold!

 

J.J.

Share this post


Link to post
Share on other sites

@@De Dokta,

 

Thank you, works great.

I added the following modification to create_account.php to get the store country selected by default and show the store country states menu:

1.

  // Country-State Selector 
  if (!isset($_GET['st'])) {
  	$country = STORE_COUNTRY;
  }

  $breadcrumb->add(NAVBAR_TITLE, tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL'));

  require(DIR_WS_INCLUDES . 'template_top.php');
  require('includes/form_check.js.php');
?>

2.

    <div class="form-group has-feedback">
      <label for="inputCountry" class="control-label col-sm-3"><?php echo ENTRY_COUNTRY; ?></label>
      <div class="col-sm-9">
        <?php
        echo tep_get_country_list('country', $country, 'onChange="getState(this.value)" required aria-required="true" id="inputCountry"');
        if (tep_not_null(ENTRY_COUNTRY_TEXT)) echo '<span class="help-block">' . ENTRY_COUNTRY_TEXT . '</span>';
        ?>
      </div>
    </div>

<?php
  if (ACCOUNT_STATE == 'true') {
?>
    <div class="form-group has-feedback">
      <label for="inputState" class="control-label col-sm-3"><?php echo ENTRY_STATE; ?></label>
      <div class="col-sm-9">
        <?php
        $check_query = tep_db_query("select count(*) as total from " . TABLE_ZONES . " where zone_country_id = '" . (int)$country . "'");
        $check = tep_db_fetch_array($check_query);
        $entry_state_has_zones = ($check['total'] > 0);
      
        if ($entry_state_has_zones == true) {
          $zones_array = array();
          $zones_array[0] = array('id' => '0', 'text' => PULL_DOWN_DEFAULT);                        
          $zones_query = tep_db_query("select zone_name from zones where zone_country_id = '" . (int)$country . "' order by zone_name");
            while ($zones_values = tep_db_fetch_array($zones_query)) {
            	$zones_array[] = array('id' => $zones_values['zone_name'], 'text' => $zones_values['zone_name']);
            }
            echo '<span id="results">';
            echo tep_draw_pull_down_menu('state', $zones_array, '', 'id="inputState"');
            echo '</span>';
        } else {
        	echo '</span>';
          echo tep_draw_input_field('state', NULL, 'id="inputState" placeholder="' . ENTRY_STATE . '"');
          echo '</span>';
        }
        echo FORM_REQUIRED_INPUT;
        if (tep_not_null(ENTRY_STATE_TEXT)) echo '<span class="help-block">' . ENTRY_STATE_TEXT . '</span>';
        ?>
      </div>
    </div>
<?php
  }
?>
Edited by raiwa

Share this post


Link to post
Share on other sites

Sorry,

there was a small error in the above posted snippet:

echo '<span id="results">';

instead of:

echo '</span>';

above the input field:

    <div class="form-group has-feedback">
      <label for="inputCountry" class="control-label col-sm-3"><?php echo ENTRY_COUNTRY; ?></label>
      <div class="col-sm-9">
        <?php
        echo tep_get_country_list('country', $country, 'onChange="getState(this.value)" required aria-required="true" id="inputCountry"');
        if (tep_not_null(ENTRY_COUNTRY_TEXT)) echo '<span class="help-block">' . ENTRY_COUNTRY_TEXT . '</span>';
        ?>
      </div>
    </div>

<?php
  if (ACCOUNT_STATE == 'true') {
?>
    <div class="form-group has-feedback">
      <label for="inputState" class="control-label col-sm-3"><?php echo ENTRY_STATE; ?></label>
      <div class="col-sm-9">
        <?php
        $check_query = tep_db_query("select count(*) as total from " . TABLE_ZONES . " where zone_country_id = '" . (int)$country . "'");
        $check = tep_db_fetch_array($check_query);
        $entry_state_has_zones = ($check['total'] > 0);
      
        if ($entry_state_has_zones == true) {
          $zones_array = array();
          $zones_array[0] = array('id' => '0', 'text' => PULL_DOWN_DEFAULT);                        
          $zones_query = tep_db_query("select zone_name from zones where zone_country_id = '" . (int)$country . "' order by zone_name");
            while ($zones_values = tep_db_fetch_array($zones_query)) {
            	$zones_array[] = array('id' => $zones_values['zone_name'], 'text' => $zones_values['zone_name']);
            }
            echo '<span id="results">';
            echo tep_draw_pull_down_menu('state', $zones_array, '', 'id="inputState"');
            echo '</span>';
        } else {
          echo '<span id="results">';
          echo tep_draw_input_field('state', NULL, 'id="inputState"');
          echo '</span>';
        }
        if (tep_not_null(ENTRY_STATE_TEXT)) echo '<span class="help-block">' . ENTRY_STATE_TEXT . '</span>';
        ?>
      </div>
    </div>
<?php
  }
?>

And here the header tag module with the javascript (language and main file)

Edited by raiwa

Share this post


Link to post
Share on other sites

hello @@De Dokta,

 

I prepared this for all files where needed, shall I pack it in an Add-On and upload or would you like to do it.

I would included the store country default selection optional in a header tag setting.

 

regards

Rainer

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×