♥raiwa Posted December 15, 2014 Share Posted December 15, 2014 As far as I know yes. I'm using placeholder instead labels in iosc Mobile since time and no one reported any problem until now. About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
clustersolutions Posted December 17, 2014 Share Posted December 17, 2014 Running into the same issue and applied this fix but something is not right...2 instead of 3 columns... http://www.clustersolutions.net/23resp/dvd-movies/action-c-3_10.html Any idea??? Also, the equal-height script probably needs to be called after the view switching...thanks for the help! Tim In /includes/modules/header_tags/ht_grid_list_view.php could you change the second $oscTemplate->addBlockto: $oscTemplate->addBlock('<script>$(function() {var cc = $.cookie(\'list_grid\');if (cc == \'list\') {$(\'#products .item\').removeClass(\'grid-group-item\').addClass(\'list-group-item\');}else {$(\'#products .item\').removeClass(\'list-group-item\').addClass(\'grid-group-item\');}$(document).ready(function() {$(\'#list\').click(function(event){event.preventDefault();$(\'#products .item\').addClass(\'list-group-item\').removeClass(\'grid-group-item\');$.cookie(\'list_grid\', \'list\');});$(\'#grid\').click(function(event){event.preventDefault();$(\'#products .item\').removeClass(\'list-group-item\').addClass(\'grid-group-item\');$.cookie(\'list_grid\', \'grid\');});});});</script>' . "\n", $this->group); Test and report back ? Link to comment Share on other sites More sharing options...
burt Posted December 17, 2014 Author Share Posted December 17, 2014 @@clustersolutions Tim you need to keep your codebase up to date...the piece of code you quoted goes with the new (simplified) grid/list module, your shop example is running the older version. Link to comment Share on other sites More sharing options...
clustersolutions Posted December 17, 2014 Share Posted December 17, 2014 @@burt, that was it, I pulled and merged and all is well. Thanks! Tim Link to comment Share on other sites More sharing options...
burt Posted December 17, 2014 Author Share Posted December 17, 2014 You can have a fast look for now on my dev installation. It's half done of each solution: http://www.sarfotostock.com/osCommerce-234-bootstrap/create_account.php Works good on Kindle. Works good on Samsung Mobile. Needs testing in real life on iPhone, iPad and so on...could anyone who has gadgets please test this page. We need to know if the placeholder text inside the input boxes is; [a] showing enough for a casual person signing up to make sense of what he/she needs to do. Thanks. http://caniuse.com/#feat=input-placeholder looks good. Link to comment Share on other sites More sharing options...
clustersolutions Posted December 17, 2014 Share Posted December 17, 2014 It's showing on iPhone 5, and it makes sense until you start typing. Is it a valid concern that you had type in a letter and you walk away, then when you return there will be no placeholder to remind you what's that input's for? Works good on Kindle. Works good on Samsung Mobile. Needs testing in real life on iPhone, iPad and so on...could anyone who has gadgets please test this page. We need to know if the placeholder text inside the input boxes is; [a] showing enough for a casual person signing up to make sense of what he/she needs to do. Thanks. http://caniuse.com/#feat=input-placeholder looks good. Link to comment Share on other sites More sharing options...
♥raiwa Posted December 18, 2014 Share Posted December 18, 2014 @@burt, @@clustersolutions I can confirm that it shows correct on Windows Phone 8.1 under IE and UC Browser. For the question to show only placeholder: - Users which fill in information should recognize the field: if they fill in their name, they should recognize that it's their name.:-) - The placeholder shows again if all input is deleted. - This is used on iosc Mobile since version 7.5 - June 2014 and no user complained for now. Although to say that in iosc Mobile there is a reset button added which is a jquery mobile core feature and allows to delete all field content with one click/touch to show again the placeholder. - This is not available in bootstrap, as far as I know and would need to be custom coded. - You can have a look on this for comparation: http://www.sarfotostock.com/2-3-4-prueba/mobile/create_account.php?redirectCancelled=true - What is also done in iosc Mobile: I added a configuration parameter which allows the store owner to decide if to show placeholder or label. This is done in a modified tep_draw_input_field function which includes all code for labels and placeholder. I understand that this is not possible for BS 2.3.4 for compatibility, but maybe it is doable for core 2.4? regards Rainer About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
♥raiwa Posted December 18, 2014 Share Posted December 18, 2014 Simplest to let user be aware what to type once user already start typing (placeholder text is gone when start typing) , is to take advantage of the help-block class: <label for="inputHelpBlock">Input with help text</label> <input type="text" id="inputHelpBlock" class="form-control" placeholder="your stuff"> <span id="helpBlock" class="visible-xs-block help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> view sample: http://jsfiddle.net/n7j8kpwz/ you could extend this with a .js once you put focus on the input. html: <label for="inputHelpBlock">Input with help text</label> <input type="text" id="inputHelpBlock" class="form-control" placeholder="your stuff"> <span id="helpBlock" class="hidden help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span> JS: $('#inputHelpBlock').focus(function() { $('#helpBlock').toggleClass('hidden show'); }); $('#inputHelpBlock').blur(function() { $('#helpBlock').toggleClass('show hidden'); }); sample 2: http://jsfiddle.net/n7j8kpwz/3/ @@wHiTeHaT, what do we win if we occupy the space we got by not showing the label with help text? About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
burt Posted December 18, 2014 Author Share Posted December 18, 2014 I'm not sure that the placeholder text disappearing matters - I can't imagine anyone getting halfway through an input, stoppng, coming back a day later and forgetting the first line of their address (for example)... Thoughts ? Link to comment Share on other sites More sharing options...
Dan Cole Posted December 18, 2014 Share Posted December 18, 2014 I'm not sure that the placeholder text disappearing matters - I can't imagine anyone getting halfway through an input, stoppng, coming back a day later and forgetting the first line of their address (for example)... Thoughts ? I agree Burt..I don't see the concern. Need help? See this thread and provide the information requested. Is your version of osC up to date? You'll find the latest osC community version (CE Phoenix) here. Link to comment Share on other sites More sharing options...
burt Posted December 18, 2014 Author Share Posted December 18, 2014 Thanks all OK, so to test this on your own live shops, all you need to do is open up create_account.php and; 1. change all `col-xs-3` to `hidden-xs col-sm-3` 2. change all `col-xs-9` to `col-xs-12 col-sm-9` have a go, and report back your thoughts. I'm at a place in 234bs where the thought of making major changes is a real turn off, I want to try to keep the features and scripts similar to normal 234 (235 236 etc etc). For 2.4 though, this is a different matter, and that's where major changes can be made. Link to comment Share on other sites More sharing options...
♥raiwa Posted December 18, 2014 Share Posted December 18, 2014 you ask: what we win if we occupy a space we got (what you want to do with that space?) By NOT showing the label with the help text. @@wHiTeHaT, Just to be sure: we are talking about xs only. So space is important for less scrolling. However I didn't caught the idea correct: I thought the help text space is always showing, but trying the example you posted, I got it that it shows and occupies space only when on focus.:-) Sorry! I made an example address block here: http://www.sarfotostock.com/osCommerce-234-bootstrap/create_account.php But IMO it will blow up the code and only placeholder should do it for xs. @@burt: other suggestion you can check please on the same page: - touchscreen optimized radio and checkbox for gender and newsletter - here the code: <div class="form-group has-feedback"> <label class="control-label col-xs-3"><?php echo ENTRY_GENDER; ?></label> <div class="col-xs-9"> <div class="btn-group"> <label class="btn btn-default"> <?php echo tep_draw_radio_field('gender', 'm', true, 'required aria-required="true"') . ' ' . MALE; ?> </label> <label class="btn btn-default"> <?php echo tep_draw_radio_field('gender', 'f') . ' ' . FEMALE; ?> </label> </div> <?php echo FORM_REQUIRED_INPUT; ?> <?php if (tep_not_null(ENTRY_GENDER_TEXT)) echo '<span class="help-block">' . ENTRY_GENDER_TEXT . '</span>'; ?> </div> </div> and: <div class="form-group"> <div class="col-xs-offset-3 col-sm-9"> <label class="btn btn-default" for="inputNewsletter"> <?php echo tep_draw_checkbox_field('newsletter', '1', NULL, 'id="inputNewsletter"') . ' ' . ENTRY_NEWSLETTER; ?> </label> <?php if (tep_not_null(ENTRY_NEWSLETTER_TEXT)) echo '<span class="help-block">' . ENTRY_NEWSLETTER_TEXT . '</span>'; ?> </div> </div> Is this correct coded? I would apply it then to all checkboxes and radios. regards Rainer About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
♥bruyndoncx Posted December 18, 2014 Share Posted December 18, 2014 I'm not sure that the placeholder text disappearing matters - I can't imagine anyone getting halfway through an input, stoppng, coming back a day later and forgetting the first line of their address (for example)... Thoughts ? it does matter for street and number in one field - often we have to add numbers people forget to enter and if you put them into separate fields, and validate the address, it needs to be very smart for those pesky rural areas in the UK and Ireland where numbers are optional,and house names more common. KEEP CALM AND CARRY ON I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support). So if you are still here ? What are you waiting for ?! Find the most frequent unique errors to fix: grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt Link to comment Share on other sites More sharing options...
♥raiwa Posted December 18, 2014 Share Posted December 18, 2014 Just another argument: Tostejensen uses only placeholder for "Better Checkout". This was one reason I made the step to implement it to ioscMobile. About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
clustersolutions Posted December 19, 2014 Share Posted December 19, 2014 You certainly can't make design change for that 0.01% of users. It just happened to me before...tapped the text input filed, punched in one single letter inadvertently, then got side tracked with a long phone call, went back to the phone and I had to clear that input field to see what it was for... Thanks for the input on help text...I was actually working on this and was contemplating what to do with the labels in small screen...hence, picking everyone's brains....thanks so much! Tim Link to comment Share on other sites More sharing options...
♥raiwa Posted December 19, 2014 Share Posted December 19, 2014 Here the source for the help text example: <h2><?php echo CATEGORY_ADDRESS; ?></h2> <div class="contentText"> <div class="form-group has-feedback"> <label for="inputStreet" class="control-label hidden-xs col-sm-3"><?php echo ENTRY_STREET_ADDRESS; ?></label> <div class="col-xs-12 col-sm-9"> <?php echo tep_draw_input_field('street_address', NULL, 'required aria-required="true" id="inputStreet" placeholder="' . ENTRY_STREET_ADDRESS . '"'); ?> <span class="visible-xs "><span id="inputStreetHelp" class="hidden help-block"><?php echo ENTRY_STREET_ADDRESS; ?></span></span> <?php echo FORM_REQUIRED_INPUT; if (tep_not_null(ENTRY_STREET_ADDRESS_TEXT)) echo '<span class="help-block">' . ENTRY_STREET_ADDRESS_TEXT . '</span>'; ?> </div> </div> <script> $('#inputStreet').focus(function() { $('#inputStreetHelp').toggleClass('hidden show'); }); $('#inputStreet').blur(function() { $('#inputStreetHelp').toggleClass('show hidden'); }); </script> <?php if (ACCOUNT_SUBURB == 'true') { ?> <div class="form-group"> <label for="inputSuburb" class="control-label hidden-xs col-sm-3"><?php echo ENTRY_SUBURB; ?></label> <div class="col-xs-12 col-sm-9"> <?php echo tep_draw_input_field('suburb', NULL, 'id="inputSuburb" placeholder="' . ENTRY_SUBURB . '"'); ?> <span class="visible-xs "><span id="inputSuburbHelp" class="hidden help-block"><?php echo ENTRY_SUBURB; ?></span></span> <?php if (tep_not_null(ENTRY_SUBURB_TEXT)) echo '<span class="help-block">' . ENTRY_SUBURB_TEXT . '</span>'; ?> </div> </div> <script> $('#inputSuburb').focus(function() { $('#inputSuburbHelp').toggleClass('hidden show'); }); $('#inputSuburb').blur(function() { $('#inputSuburbHelp').toggleClass('show hidden'); }); </script> <?php } ?> <div class="form-group has-feedback"> <label for="inputCity" class="control-label hidden-xs col-sm-3"><?php echo ENTRY_CITY; ?></label> <div class="col-xs-12 col-sm-9"> <?php echo tep_draw_input_field('city', NULL, 'required aria-required="true" id="inputCity" placeholder="' . ENTRY_CITY. '"'); ?> <span class="visible-xs "><span id="inputCityHelp" class="hidden help-block"><?php echo ENTRY_CITY; ?></span></span> <?php echo FORM_REQUIRED_INPUT; if (tep_not_null(ENTRY_CITY_TEXT)) echo '<span class="help-block">' . ENTRY_CITY_TEXT . '</span>'; ?> </div> </div> <script> $('#inputCity').focus(function() { $('#inputCityHelp').toggleClass('hidden show'); }); $('#inputCity').blur(function() { $('#inputCityHelp').toggleClass('show hidden'); }); </script> <div class="form-group has-feedback"> <label for="inputZip" class="control-label hidden-xs col-sm-3"><?php echo ENTRY_POST_CODE; ?></label> <div class="col-xs-12 col-sm-9"> <?php echo tep_draw_input_field('postcode', NULL, 'required aria-required="true" id="inputZip" placeholder="' . ENTRY_POST_CODE . '"'); ?> <span class="visible-xs "><span id="inputZipHelp" class="hidden help-block"><?php echo ENTRY_POST_CODE; ?></span></span> <?php echo FORM_REQUIRED_INPUT; if (tep_not_null(ENTRY_POST_CODE_TEXT)) echo '<span class="help-block">' . ENTRY_POST_CODE_TEXT . '</span>'; ?> </div> </div> <script> $('#inputZip').focus(function() { $('#inputZipHelp').toggleClass('hidden show'); }); $('#inputZip').blur(function() { $('#inputZipHelp').toggleClass('show hidden'); }); </script> <?php if (ACCOUNT_STATE == 'true') { ?> <div class="form-group has-feedback"> <label for="inputState" class="control-label hidden-xs col-sm-3"><?php echo ENTRY_STATE; ?></label> <div class="col-xs-12 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 . '"'); ?> <span class="visible-xs "><span id="inputStateHelp" class="hidden help-block"><?php echo ENTRY_STATE; ?></span></span> <?php echo FORM_REQUIRED_INPUT; } } else { echo tep_draw_input_field('state', NULL, 'id="inputState" placeholder="' . ENTRY_STATE . '"'); ?> <span class="visible-xs "><span id="inputStateHelp" class="hidden help-block"><?php echo ENTRY_STATE; ?></span></span> <?php echo FORM_REQUIRED_INPUT; } if (tep_not_null(ENTRY_STATE_TEXT)) echo '<span class="help-block">' . ENTRY_STATE_TEXT . '</span>'; ?> </div> </div> <script> $('#inputState').focus(function() { $('#inputStateHelp').toggleClass('hidden show'); }); $('#inputState').blur(function() { $('#inputStateHelp').toggleClass('show hidden'); }); </script> <?php } ?> <div class="form-group has-feedback"> <label for="inputCountry" class="control-label col-xs-12 col-sm-3"><?php echo ENTRY_COUNTRY; ?></label> <div class="col-xs-12 col-sm-9"> <?php echo tep_get_country_list('country', NULL, 'required aria-required="true" id="inputCountry"'); echo FORM_REQUIRED_INPUT; if (tep_not_null(ENTRY_COUNTRY_TEXT)) echo '<span class="help-block">' . ENTRY_COUNTRY_TEXT . '</span>'; ?> </div> </div> </div> About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
burt Posted December 19, 2014 Author Share Posted December 19, 2014 This is too much extra code for very little gain. If individual shopowners want something different to that given in the github download, the codebase is open to them and they can ask for advice if they cannot work it out themselves. Example change given at http://www.oscommerce.com/forums/topic/396152-bootstrap-3-in-2334-responsive-from-the-get-go/?p=1711400 Link to comment Share on other sites More sharing options...
♥raiwa Posted December 19, 2014 Share Posted December 19, 2014 This is too much extra code for very little gain. If individual shopowners want something different to that given in the github download, the codebase is open to them and they can ask for advice if they cannot work it out themselves. Example change given at http://www.sarfotost...ate_account.php About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
burt Posted December 19, 2014 Author Share Posted December 19, 2014 The label acts as a button anyway so it seems as though it's purely cosmetic? Link to comment Share on other sites More sharing options...
♥raiwa Posted December 19, 2014 Share Posted December 19, 2014 The label acts as a button anyway so it seems as though it's purely cosmetic? Not only, the area is a bit bigger and for the newsletter checkbox it's not very intuitive for a user to "click" on the label IMO. On other places like the checkout shipping/payment address selection there is only the radio active, same for reviews write radios which are also too close together.. About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
De Dokta Posted December 19, 2014 Share Posted December 19, 2014 One little thing. In checkout_shipping the code for the radio fields reads: tep_draw_radio_field('shipping', $quotes[$i]['id'] . '_' . $quotes[$i]['methods'][$j]['id'], $checked, 'required aria-required="true"') where a little label appears if the customer made no selection. In checkout_payment: echo tep_draw_radio_field('payment', $selection[$i]['id'], ($selection[$i]['id'] == $payment)); => no label! I changed that to: echo tep_draw_radio_field('payment', $selection[$i]['id'], ($selection[$i]['id'] == $payment), 'required aria-required="true"'); Now there's also a label. :) J.J. Link to comment Share on other sites More sharing options...
burt Posted December 19, 2014 Author Share Posted December 19, 2014 @@De Dokta this reminds me of a to-do, the payment page needs to be updated to use a table like the shipping page does. Could someone please take a look at the code and make it happen? Link to comment Share on other sites More sharing options...
♥raiwa Posted December 19, 2014 Share Posted December 19, 2014 @@De Dokta this reminds me of a to-do, the payment page needs to be updated to use a table like the shipping page does. Could someone please take a look at the code and make it happen? I have this done already, just waited for the radio and checkbox response to submit it together. About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
burt Posted December 19, 2014 Author Share Posted December 19, 2014 Separate commits is always better as this gives the easier opportunity to test and tweak individually :thumbsup: Link to comment Share on other sites More sharing options...
♥raiwa Posted December 19, 2014 Share Posted December 19, 2014 ok, i just figured out what the real issue seems to be with the forms currently in use. The whole issue is related because there is used the -xs-* class in the forms. When we go from desktop to mobile view the form insist the keep the layout exact the same as it where in desktop mode so: Label Email: [input field] However if we use -sm-* view the labels and input fields will go as expected and supposed to: Label Email: [input field] Creating code for hiding labels in mobile views is irrelevant, it has no benefit. (if there exist in someones head the feeling/idea there is to much space occupied in the way of how form is handled/presented, he/she can adapt the output via customized css) For the ones that need to be convinced: pls try: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_horizontal&stacked=h @@wHiTeHaT, It's just what is done in the example page: http://www.sarfotostock.com/osCommerce-234-bootstrap/create_account.php in the first block: "Personal Details" and which is on GitHub called "Stack input field labels for xs" I offered both alternatives, hide labels or stack lables as a solution for the overlapping label text in xs view. It's now just a matter to decide which is the better way. regards Rainer About Me: http://www.oscommerce.com/forums/user/249059-raiwa/ Need help? How To Get The Help You Need Is your version of osC up to date? You'll find the latest osC community version CE Phoenix here. Public Phoenix Change Log Cheat Set on Google Sheets Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.