Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

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.

Link to comment
Share on other sites

  • Replies 2.2k
  • Created
  • Last Reply

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->addBlock

to:
 

$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

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

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

@@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

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

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.

Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

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

Just another argument: Tostejensen uses only placeholder for "Better Checkout". This was one reason I made the step to implement it to ioscMobile.

Link to comment
Share on other sites

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

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>

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

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

@@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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • burt locked this topic
  • burt unlocked and locked this topic

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...