Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Responsive osCommerce - Bootstrap


Recommended Posts

  • Replies 2.2k
  • Created
  • Last Reply

@@burt

 

Hi Gary!

 

I was working on something that required to use a modal.

Now when the modal shows up the whole shop shifts to the right for about 10-15px.

It is a known issue https://github.com/twbs/bootstrap/issues/9855

and there are some temporary solutions out there but the best would be to updated Bootstrap to the latest version 3.2.0

 

Did you make any particular custom changes inside the css and js files of bootstrap? Or are they vanilla BS?

I installed 3.2.0 and the search bar in the header shrinked so something is different then before...

If you tell me that you used the vanilla BS files then I will just need to go adjust the code inside the search header_tags module.

Link to comment
Share on other sites

No bootstrap .js .css was touched.

 

This is the exact reson why custom.css and user.css exist (so as not to have to touch files, making upgrades easy [drop in the new files and reference them if the names have changed]).

Link to comment
Share on other sites

Ok thanks then the new 3.2.0 version is the cause for the change of the search bar. It went from col-md-6 to what looks to be a col-md-2 not really sure yet need to take a look at it.

Also inside the create account file the asterik are going wild. There are now more then necessary...also something i will look into it as soon the modal thing is done.

 

Thanks Gary.

Link to comment
Share on other sites

Hi @@burt

 

I have installed the files and have come accross some problems that i dont know if you can help me with please. My website is cardsinspain.com

 

1- the products dont seem to line up.

2- when clicking on view, the products page are blank.

3- categories dont line up either.

 

Can you please help me out, thankyou

Link to comment
Share on other sites

@@burt

 

I updated the BS to version 3.2.0 and looked at the shop page by page and the only thing that looks not same anymore are the things i already told you.

The search input field and the asterik in the create account page.

I did some changes and I hope you find the time to confirm them that this is a way to do it or not.

 

html_output.php line 425
 

replace

'class="navbar-form"'

with

'style="margin: 10px 0px 10px 0px;"'

or use
 

'class="navbar-form navbar-right"'

to keep the search input field small but most right of the screen. I felt that it actually doesn't look that bad with a small search field. But that is just my opinion...

english.php

remove form-control-feedback from
 

define('FORM_REQUIRED_INFORMATION', '<span class="glyphicon glyphicon-asterisk inputRequirement"></span> Required information');

add new definition for the checkboxes
 

define('FORM_REQUIRED_INPUT2', '<span class="glyphicon glyphicon-asterisk inputRequirement"></span>');

keep this following definition as it is for the other input fields
 

define('FORM_REQUIRED_INPUT', '<span class="glyphicon glyphicon-asterisk form-control-feedback inputRequirement"></span>');

create_account.php

change this code around line 296

from this
 

<?php echo FORM_REQUIRED_INPUT; ?>

to this
 

<?php echo FORM_REQUIRED_INPUT2; ?>

I will keep looking around maybe there is more to change...

Link to comment
Share on other sites

the following two files also contain the gender checkboxes.

 

account_edit.php

includes\modules\address_book_details.php

 

so just change to <?php echo FORM_REQUIRED_INPUT2; ?>

Link to comment
Share on other sites

I've just moved what's new, greetings text and upcoming products to newly created modules. I hope I did it well with Github, I'm still trying to figure out how it works.

Link to comment
Share on other sites

Hi @@burt

There is a problem with the osCsid in the Manufacturers List.
The session id is repeated. For example
 



http://www.mysite.co.uk/index.php?osCsid=5c7bba67845e61e95ff1b9f14d7ead9b&manufacturers_id=7&osCsid=5c7bba67845e61e95ff1b9f14d7ead9b

This disappears after a couple of clicks of course but it should not be happening

Regards

Ken

Link to comment
Share on other sites

@@burt

 

not trying to sound lazy but is there a 2.3.4 bootstrap update available?

 

I did see in previous posts that you were comparing peoples code. Is github updated or do I take the plunge and start the update?

 

Thanks

 

Mark

Link to comment
Share on other sites

@@PupStar I've been bugging @@burt about this. Apparently Harald wants to start with 2.3.4 and add Bootstrap rather than update. I'm willing to work on this as well, just waiting for a roadmap.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Do whatever you want. I'm playing with upgrading 2.3.4 (buttons right now). I don't know if any of this code will get used, but it keeps me amused.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Button competition! I got a bit creative:

/*
 * Output the HTML for a Bootstrap Button
 *
 * Parameters:
 *   $title is the text that appears on the button
 *   $icon is the name of the gliphicon that appears on the button. Use the defined constants for these.
 *   $link is the output of tep_href_link(). Use only if the button is a link button.
 *   $priority is the button color. Use one of:
 *     'primary'
 *     'success'
 *     'info'
 *     'warning'
 *     'danger'
 *     'default'
 *     'secondary' (Only for compatibility with osCommerce 2.3. Do not use for new code.)
 *   $params is an array of key-value parameters. Acceptable key values are:
 *     'type'. Acceptable types are:
 *       'submit'
 *       'button'
 *       'reset'
 *     'iconpos'. Acceptable icon positions are:
 *       'left' (the default)
 *       'right'
 *     'class'. Adds an additional class to the button/anchor tag.
 *     'params'. The value of 'params' will be added to the HTML tag as is.
 */
  function tep_draw_button( $title = null, $icon = null, $link = null, $button_class = null, $params = null ) {
    // The allowed types of button to test the input
    $types = array('submit', 'button', 'reset');

    // Set the default button type if not set in the $params argument
    if ( !isset( $params['type'] ) ) {
      $params['type'] = 'submit';
    }

    // If the type is invalid, replace with the default
    if ( !in_array($params['type'], $types) ) {
      $params['type'] = 'submit';
    }

    // If a link is provided, the type must be button
    if ( ($params['type'] == 'submit') && isset($link) ) {
      $params['type'] = 'button';
    }

    // If the $button_class is not set, set it to the default
    if (!isset($button_class)) {
      $button_class = 'default';
    }

    // If the type is a link, output a link, otherwise a button
    if ( ($params['type'] == 'button') && isset($link) ) {
      $button .= '<a href="' . $link . '"';
    } else {
      $button .= '<button type="' . tep_output_string( $params['type'] ) . '"';
    }

    // If there are params, add them
    if ( isset($params['params']) ) {
      $button .= ' ' . $params['params'];
    }

    // Output the correct button class based on the $button_class
    switch( $button_class ) {
        case 'primary' :
          $button .= ' class="btn btn-primary';
          break;
    
        case 'success' :
          $button .= ' class="btn btn-success';
          break;
              
        case 'info' :
          $button .= ' class="btn btn-info';
          break;
    
        case 'warning' :
          $button .= ' class="btn btn-warning';
          break;
    
        case 'danger' :
          $button .= ' class="btn btn-danger';
          break;
    
        case 'default' :
        case 'secondary' :
        default :
          $button .= ' class="btn btn-default';
          break;
    }
    
    // If an additional class parameter has been set, add it to the output
    if( isset( $params['class'] ) && tep_not_null( $params['class'] ) ) {
      $button .= ' ' . $params['class'];
    }
    
    // End of the button/anchor tag
    $button .= '">';
 
    // Output the icon in the correct location if specified in $icon
    if ( isset( $icon ) ) {
      if ( !isset( $params['iconpos'] ) ) {
        $params['iconpos'] = 'left';
      }

      // Icon comes first if it is on the left
      if ( $params['iconpos'] == 'left' ) {
        $button .= '<span class="glyphicon glyphicon-' . $icon . '"></span> ';
      }
    }
    
    // Output the button title if specified
    $button .= $title;

    // Icon comes last if it is on the right
    if ( isset( $icon ) ) {
      if ( $params['iconpos'] != 'left' ) {
        $button .= ' <span class="' . $icon . '"></span>';
      }
    }
    
    // Close the tag
    if ( ( $params['type'] == 'button' ) && isset( $link ) ) {
      $button .= '</a>';
    } else {
      $button .= '</button>';
    }

    return $button;
  }

Usage is the same as the 2.3 function, just with different icons. This makes it easier to change over code written for 2.3.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

@@wHiTeHaT  That's an interesting idea. You would need to move all of the framework-dependent parts out of the core. The button code would be easy; the grid framework less easy. Of course it's all possible.

 

You should talk to Burt about this. Maybe we can get it into 2.4.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

I'm in favor of any change that separates code from presentation. My only concern was with making too big a change in 2.4, so the effort takes too long and developers lose interest. I don't think that would happen here, since we're changing all of that code anyway to make room for Bootstrap. We just need to plan that so the new/modified code gets put in the right place.

 

Any ideas on where to put the code? A new directory under /ext maybe?

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Maybe not so much "new" as "moved". I mean anything that needs to be changed in order to change the framework:

  1. The button generator code above.
  2. template_top.php
  3. template_bottom.php
  4. Maybe the header and footer as well.
  5. The image handling code in product_info.php, or should that be in a content module?
  6. What else am I forgetting here?

All of this needs to move somewhere that it can be easily replaced when the framework is changed from jQuery UI to Bootstrap to whatever, so we don't have to do this again.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Answer: includes/classes/message_stack.php, or at least the part that generates the display. Those messages really need to be in the theme.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

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