Jump to content
Latest News: (loading..)
burt

Bootstrap 3 in 2.3.4 - Responsive from the Get Go

Recommended Posts

Hi @@burt

Please disregard my last post. The problem appears to have been caused by the upgrade to 2.3.4
I’ll see if I can find it.

Regards

Ken

Share this post


Link to post
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


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
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.

Share this post


Link to post
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

@@kymation

 

bit of a quandry as to what to do now :-


Bootstrap 3 ROCKS!

(or it will if I ever get my head around it lol)

(and I think I have now (w00t) )

Share this post


Link to post
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.

Share this post


Link to post
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

Edited by kymation

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

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

@@kymation @@wHiTeHaT

 

The large part of html_output is template dependent and we should put into message boxes functions.

 

v2.4 concept is not based on that way where templated files are totaly separeted from the core. We could use there templated php function libraries on another sort of includes from aplication_top.


:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

Hi all,

 

2 way fixes when return link would not be http://myshop.com/index.php?products_id=3

 

Firtst fix for continue shopping button in shopping cart

    $back = sizeof($navigation->path)-2;
    if (isset($navigation->path[$back])) {
      $mainpage = false;
      if ($navigation->path[$back]['page'] == 'index.php') {
        foreach ($navigation->path[$back]['get'] as $key => $value) {
          if ($key == 'products_id') {
            $mainpage = true;
          }
        }
      }
      echo tep_draw_button(IMAGE_BUTTON_CONTINUE_SHOPPING, 'glyphicon-chevron-left', tep_href_link($navigation->path[$back]['page'], tep_array_to_string($navigation->path[$back]['get'], ($mainpage ? array('action', 'products_id') : array('action'))), $navigation->path[$back]['mode']));
    }

this fix drops products_id. Customers can buy product from new products main page module.

 

 

Second alternative when use more safety post formula for button_buy_now on main page

 

new_products.php

change:

      $new_prods_content .= '        <div class="btn-group">';
      $new_prods_content .= '          <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'products_id=' . $new_products['products_id']) . '" class="btn btn-default" role="button">' . SMALL_IMAGE_BUTTON_VIEW . '</a>';
      $new_prods_content .= '          <a href="' . tep_href_link($PHP_SELF, tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $new_products['products_id']) . '" class="btn btn-success" role="button">' . SMALL_IMAGE_BUTTON_BUY . '</a>';
      $new_prods_content .= '        </div>';

to:
 

      $new_prods_content .= tep_draw_form('new_products' . $new_products['products_id'], tep_href_link((DISPLAY_CART == 'true' ? FILENAME_SHOPPING_CART : $PHP_SELF), tep_get_all_get_params(array('action', 'products_id')) . 'action=buy_now&products_id=' . $new_products['products_id'])) . '        <div class="btn-group">';
      $new_prods_content .= '          <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, tep_get_all_get_params(array('action')) . 'products_id=' . $new_products['products_id']) . '" class="btn btn-default" role="button">' . SMALL_IMAGE_BUTTON_VIEW . '</a>';
      $new_prods_content .= '<button class="btn btn btn-success"  role="button" type="submit"><span class="glyphicon cart"></span>' . IMAGE_BUTTON_BUY_NOW . '</button>';
      $new_prods_content .= '        </div><!--btn-wrap//--></form>';

:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites

On this morning after 3 month preparation and one month update work on my producing v2.3.3 site I am arrived on bootstrap frontend and start to collect the experiencies. Now the URL redirection module is on the top! :sweating:

 

Thanks to everyone who worked on!

 

 

First of all I had to make a lot of compromise due to phone template.

 

- reorganise master product and change to descripton categories and product size based set of groups so the variants magic could be much closer to customers

- information manager articles put the right way under product info tabs

- navigation class used on all linked page

- extra fields got a php class and a html output (display) function library

- Matc confirmation modules could be more easy

- discovering the new address creation issue

- implemented kiss image thumbs

- add ajax autocomplete/typeahead search help

- figured out address card select in address book

- adapted store mode

- used datatable html code change in descriptions (validation and html class change and make responsive image)

- etc..

 

 

So I dont suggest without any direction way to upgrade a well moded store to bootsrap. :wacko:

 

Lets start to work on v2.4!


:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites
....Lets start to work on v2.4!

 

I'm willing to help with this. In fact I've already started. So who's going to start the development thread, and where's the roadmap?

 

Regards

Jim


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

Share this post


Link to post
Share on other sites

As of right now, I am formulating the way forward and this will be announced in due course.

 

In the meantime, for those who didn't help in the community build; take the time to get up to speed with how the community build panned out, and take the time to get up to speed with Bootstrap.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

@@burt  I've done all that. Now just waiting for our fearless leader to catch up. :) :-

 

Regards

Jim


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

Share this post


Link to post
Share on other sites

Great, so get to work on the community build to;

 

1.  update to 234

2.  update bootstrap to 3.2

3.  fix (some of or all of) the idiosyncracies that crept in during the build

4.  update the admin side to bootstrap

5.  update the installer to bootstrap

 

All of this would make excellent pointers for the way forward.  I'd be particularly keen for you to do #5.

 

 

Thanks

Edited by burt

This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

I thought we were going to abandon the community build and start over with 2.3.4 as a base? In any case, #5 sounds like fun. I'll start on that.

 

Regards

Jim


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

Share this post


Link to post
Share on other sites

The build is not going to be abandoned.  Many lessons were learned during the code phase of the BS build ... so it is very useful guideline.

 

Bootstrapping the installer will allow you to show your prowess at BS ;)

You'd be surprised at how difficult it can be, as every code change must be accompanied by checking in a range of browsers and devices...

 

And it will allow me to knock 1 item off the to-do list.


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

I'm really good at BS. Bootstrap, not so much.... :)

 

I'll check in every browser I can. I don't have access to the newer Microsoft browsers or anything on Apple products, so I'll need some help with those.

 

Regards

Jim


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

Share this post


Link to post
Share on other sites

@@burt  The Bootstrap Buttons and Messages (messageStack) code is done, so you can check those off your list. Subject to the above restrictions on the browsers I can check with, of course.

 

Should we move the discussions on 2.4 (Bootstrap) to a new thread, to keep from confusing the 2.3.3.4BS folks?

 

Regards

Jim


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

Share this post


Link to post
Share on other sites

@@burt

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

 

 

It is a way, but is not the way.

 

So, will you show us *the* way ?

 

Malcolm


If you are running the "official" osC 2.3.4 or 2.3.4.1 download, your installation is obsolete! Get the latest community-supported responsive "Frozen" release here

Share this post


Link to post
Share on other sites

Simply keep up to date with the github master. @@ArtcoInc


This is a signature that appears on all my posts.  
IF YOU MAKE A POST REQUESTING HELP...please state the exact version
of osCommerce that you are using. THANKS

 
Get the latest current code (community-supported responsive 2.3.4.1BS Edge) here

 

Share this post


Link to post
Share on other sites

Hi all,

 

can somebody explain categories sort order? What happening in a multi language shop? The sort order is a litle bit confused.


:blink:
osCommerce based shop owner with minimal design and focused on background works. When the less is more.
Email managment with tracking pixel, package managment for shipping, stock management, warehouse managment with bar code reader, parcel shops management on 3000 pickup points without local store.

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×