Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Bootstrap Quantity Box


Recommended Posts

Has anyone added a decent looking quantity box to the bootstrap version of osC or does the code for that already exist on one of the pages? No point in reinventing the wheel or duplicating code. I'm looking for something that will allow me to add a quantity box to the product listing and product info pages...something with a plus or minus button would be ideal.

Link to comment
Share on other sites

  • Replies 62
  • Created
  • Last Reply

don't know about the quantity thing inside the product listing and product info but the plus and minus thing is "probably" javascript code.

 

here is a piece of code that I picked up somewhere and changed it to use with "font awesome" + and - icons. it is an old code but it works.

$products_name .= '<td><span class="fa fa-minus-square fa-lg" style="cursor:pointer;" onclick="javascript:changeValue(document.getElementById(\'add_id_'.$products[$i]['id'].'\'),-1);return false;" /></span> ' .
	 '<input type="text" name="cart_quantity[]" id="add_id_'.$products[$i]['id'].'" value="' . $products[$i]['quantity'] . '" size="3" maxlength="3" style="text-align:center;">' .
	 ' <span class="fa fa-plus-square fa-lg" style="cursor:pointer;" onclick="javascript:changeValue(document.getElementById(\'add_id_'.$products[$i]['id'].'\'),1);return false;"></span></td>';

and this is the javascript code that goes inside the template_bottom.php (in my case it was so, some people rather put js code inside the footer.php, never worked for me...)

<script type="text/javascript">
function changeValue(textObject,delta){
var myVal = parseInt(textObject.value);
if (myVal == NaN) {
myVal = 0;
} else {
myVal = myVal + delta;
}
/* check that it is not negetive */
if (myVal < 1) {
myVal = 1;
}
textObject.value = myVal;
return;
}
</script>

i am sure there are better ways to do that and i hope that someone eventually shows us how.

There is also multimixers version of a quantity input field, you find the tutorial on his website. Never tried it in a BS store though...

Link to comment
Share on other sites

@@burt sorry... I haven't been involved in the bootstrap discussions in a while and didn't want to step on anyone's toes. I remember at one point you where talking about "vetting" contributions for bts - still true? Or should we just upload to the 2.3 area with clear notes they are for bootstrap?

Link to comment
Share on other sites

@@Dan Cole here are the very basic instructions for product info;

 

In application_top change;

     // customer adds a product from the products page
      case 'add_product' :    if (isset($HTTP_POST_VARS['products_id']) && is_numeric($HTTP_POST_VARS['products_id'])) {
                                $attributes = isset($HTTP_POST_VARS['id']) ? $HTTP_POST_VARS['id'] : '';
                                $cart->add_cart($HTTP_POST_VARS['products_id'], $cart->get_quantity(tep_get_uprid($HTTP_POST_VARS['products_id'], $attributes))+1, $attributes);
                              }
                              $messageStack->add_session('product_action', sprintf(PRODUCT_ADDED, tep_get_products_name((int)$HTTP_POST_VARS['products_id'])), 'success');
                              tep_redirect(tep_href_link($goto, tep_get_all_get_params($parameters)));
                              break;

To

	// customer adds a product from the products page
          case 'add_product' :  if (isset($HTTP_POST_VARS['products_id']) && is_numeric($HTTP_POST_VARS['products_id'])) {
                                 $attributes = isset($HTTP_POST_VARS['id']) ? $HTTP_POST_VARS['id'] : '';
                                 $quantity   = isset($_POST['quantity']) ? max($_POST['quantity']) : 1;
                                 $cart->add_cart($HTTP_POST_VARS['products_id'], $cart->get_quantity(tep_get_uprid($HTTP_POST_VARS['products_id'], $attributes))+$quantity, $attributes);
                                 }
							     $messageStack->add_session('product_action', sprintf(PRODUCT_ADDED, tep_get_products_name((int)$HTTP_POST_VARS['products_id'])), 'success');
                                 tep_redirect(tep_href_link($goto, tep_get_all_get_params($parameters)));
                                 break;	

In Product Info change;

  <span class="buttonAction"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'glyphicon-shopping-cart', null, 'primary'); ?></span>
 

To

   <span class="buttonAction"><?php echo tep_draw_input_field('quantity[]', '1', 'size="5" style="vertical-align:middle').' '. tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_draw_button(IMAGE_BUTTON_IN_CART, 'glyphicon-shopping-cart', null, 'primary'); ?></span>
Link to comment
Share on other sites

@Dan Cole here are the very basic instructions for product listing (this will forward the customer to product info if the product has attributes... otherwise just adds to cart);

 

In application_top change;

      // performed by the 'buy now' button in product listings and review page
      case 'buy_now' :        if (isset($HTTP_GET_VARS['products_id'])) {
                                if (tep_has_product_attributes($HTTP_GET_VARS['products_id'])) {
                                  tep_redirect(tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $HTTP_GET_VARS['products_id']));
                                } else {
                                  $cart->add_cart($HTTP_GET_VARS['products_id'], $cart->get_quantity($HTTP_GET_VARS['products_id'])+1);
                                  $messageStack->add_session('product_action', sprintf(PRODUCT_ADDED, tep_get_products_name((int)$HTTP_GET_VARS['products_id'])), 'success');
                                }
                              }
                              tep_redirect(tep_href_link($goto, tep_get_all_get_params($parameters)));
                              break;

To

	// performed by the 'buy now' button in product listings and review page
	  case 'buy_now' : 	if (isset($HTTP_GET_VARS['products_id'])) {
				 if (tep_has_product_attributes($HTTP_GET_VARS['products_id'])) {
					tep_redirect(tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $HTTP_GET_VARS['products_id']));
				} else {
					//modification by Alexander Dimelow (www.web-project.co.uk)
					if($HTTP_POST_VARS['buyqty']=="") {
					$quantity = 1;
					}else{
					$quantity = $HTTP_POST_VARS['buyqty']; 
					}
				$cart->add_cart($HTTP_GET_VARS['products_id'], $cart->get_quantity($HTTP_GET_VARS['products_id'])+1);
                                $messageStack->add_session('product_action', sprintf(PRODUCT_ADDED, tep_get_products_name((int)$HTTP_GET_VARS['products_id'])), 'success');
                                }
                              }
                              tep_redirect(tep_href_link($goto, tep_get_all_get_params($parameters)));
                              break;

 In includes/modules/product_listing change

  $prod_list_contents .= '      <div class="btn-wrap">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm');

to

   $prod_list_contents .= '       <div class="btn-wrap">' . tep_draw_form('buy_now', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id='. $listing['products_id']), 'POST') . tep_draw_input_field('buyqty', '1', 'size="3" style="vertical-align:middle') .' '. tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', NULL, NULL, 'btn-success btn-sm') . '</form>';

Please double check this doesn't break the add to cart in product_reviews - I seem to remember having an issue but I'm testing right now and seems to work fine. You could also quickly hack a qty box in product reviews I'm sure...

Link to comment
Share on other sites

@@greasemonkey - it was my aim to vet all addons from 234BS onwards, but I dont have the time to do it along with my other duties and code work and what not.

 

I'm hoping that any addons made are fully tested prior to them being upped to the addons area and that the one who uploads them sets them so that no-one else can pollute their work...

 

We'll see :)

 

In the meantime, post up any tips/tricks like this one in the forum and if a dev spots it, they can optimise the code (eg make into a content module if needed or HT module or whatever)...

Link to comment
Share on other sites

  • 1 month later...

Just getting back to this...I got a bit side tracked. With help from @@Tsimi and @@greasemonkey I got a quantity box added to my shopping cart page and have plans to add it my product_info and perhaps my product_listing pages when I'm happy that it displays properly in responsive mode. At the moment it does not.

I'm happy with the way it looks down to about 650 px wide where things start to fall apart.

Here is what it looks like on a desk top...

 

post-182953-0-31507800-1418180810_thumb.jpg

 

On a tablet it would look something like this...

 

post-182953-0-80441200-1418180861_thumb.jpg

 

And on a XS device it gets ugly...

 

post-182953-0-72712800-1418180934_thumb.jpg

 

I would love to have it look the same on a tablet and xs device.  The suggestion is that the use of tables on the shopping_cart page is giving me the grief I'm expericing and perhaps someone could confirm that and/or offer a suggestion on how I might sort this out.  Here is the code that was added to the shopping_cart.php page...

    $products_name .= '<br><div class="row"><div class="mops-input-group mops-input-group1 col-xs-4 col-md-8">' .
		      '<span class="input-group-btn"><span class="btn btn-substract-quantity btn-number" style="cursor:pointer;" onclick="javascript:changeValue(document.getElementById(\'add_id_'.$products[$i]['id'].'\'),-1);return false;" /><span class="glyphicon glyphicon-minus"></span></span></span>' .
		      '<input type="text" name="cart_quantity[]" id="add_id_'.$products[$i]['id'].'" value="' . $products[$i]['quantity'] . '" class="form-control input-number">' .	
		      '<span class="input-group-btn"><span class="btn btn-add-quantity btn-number" style="cursor:pointer;" onclick="javascript:changeValue(document.getElementById(\'add_id_'.$products[$i]['id'].'\'),1);return false;" /><span class="glyphicon glyphicon-plus"></span></span></span>' .
                      tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'glyphicon-refresh', NULL, NULL, NULL, 'btn-info btn') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn');

    $products_name .= '</div></div></td>';

    $products_name .= '<td align="right" valign="top"><strong>' . $currencies->display_price($products[$i]['final_price'], tep_get_tax_rate($products[$i]['tax_class_id']), $products[$i]['quantity']) . '</strong></td>' .
                        '</tr>';
    }
    echo $products_name;

I'd welcome and suggestions or ideas you might have...

 

Dan

 

Link to comment
Share on other sites

Just getting back to this...I got a bit side tracked. With help from @@Tsimi and @@greasemonkey I got a quantity box added to my shopping cart page and have plans to add it my product_info and perhaps my product_listing pages when I'm happy that it displays properly in responsive mode. At the moment it does not.

 

I'm happy with the way it looks down to about 650 px wide where things start to fall apart.

 

Here is what it looks like on a desk top...

 

attachicon.gifFull_Screen.JPG

 

On a tablet it would look something like this...

 

attachicon.gifTablet_Size.JPG

 

And on a XS device it gets ugly...

 

attachicon.gifSmall_Size.JPG

 

I would love to have it look the same on a tablet and xs device.  The suggestion is that the use of tables on the shopping_cart page is giving me the grief I'm expericing and perhaps someone could confirm that and/or offer a suggestion on how I might sort this out.  Here is the code that was added to the shopping_cart.php page...

    $products_name .= '<br><div class="row"><div class="mops-input-group mops-input-group1 col-xs-4 col-md-8">' .
		      '<span class="input-group-btn"><span class="btn btn-substract-quantity btn-number" style="cursor:pointer;" onclick="javascript:changeValue(document.getElementById(\'add_id_'.$products[$i]['id'].'\'),-1);return false;" /><span class="glyphicon glyphicon-minus"></span></span></span>' .
		      '<input type="text" name="cart_quantity[]" id="add_id_'.$products[$i]['id'].'" value="' . $products[$i]['quantity'] . '" class="form-control input-number">' .	
		      '<span class="input-group-btn"><span class="btn btn-add-quantity btn-number" style="cursor:pointer;" onclick="javascript:changeValue(document.getElementById(\'add_id_'.$products[$i]['id'].'\'),1);return false;" /><span class="glyphicon glyphicon-plus"></span></span></span>' .
                      tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'glyphicon-refresh', NULL, NULL, NULL, 'btn-info btn') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn');

    $products_name .= '</div></div></td>';

    $products_name .= '<td align="right" valign="top"><strong>' . $currencies->display_price($products[$i]['final_price'], tep_get_tax_rate($products[$i]['tax_class_id']), $products[$i]['quantity']) . '</strong></td>' .
                        '</tr>';
    }
    echo $products_name;

I'd welcome and suggestions or ideas you might have...

 

Dan

 

Hello Dan @@Dan Cole,

 

You could just enhance the input field with the correct input type "number", tep_draw_input_field uses "text" by default, so you should add it like this:

      $products_name .= '<br>' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 70px;" min="1" max="' . MAX_QTY_IN_CART . '"', 'number') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-refresh', NULL, NULL, NULL, 'btn-info btn-xs') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs');

This shows the generic OS up down arrows in most modern desktop browsers and input is much easier on mobile phones showing the correspondent input field set.

I wanted to suggest this already in general for all input fields in create_account, other account pages, e-mail on the contact page.......

- "email" for e-mails

- "tel" for phone number and fax

 

@@burt, what do you think about for the core files.

 

kind regards

Rainer

Link to comment
Share on other sites

You can make a github fork, then a branch, and update all the necessary files.

Make a pull requst.

ok @@burt,

 

I just need first to read some information how to use github, I'm a newbee on github teamwork. Can you recommend a FAQ?

I have some more suggestions to improve create account for mobile optimization.

 

Thank you and kind regards

Rainer

Link to comment
Share on other sites

Hello Dan @@Dan Cole,

 

You could just enhance the input field with the correct input type "number", tep_draw_input_field uses "text" by default, so you should add it like this:

      $products_name .= '<br>' . tep_draw_input_field('cart_quantity[]', $products[$i]['quantity'], 'style="width: 70px;" min="1" max="' . MAX_QTY_IN_CART . '"', 'number') . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-refresh', NULL, NULL, NULL, 'btn-info btn-xs') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger btn-xs');

This shows the generic OS up down arrows in most modern desktop browsers and input is much easier on mobile phones showing the correspondent input field set.

I wanted to suggest this already in general for all input fields in create_account, other account pages, e-mail on the contact page.......

- "email" for e-mails

- "tel" for phone number and fax

 

@@burt, what do you think about for the core files.

 

kind regards

Rainer

Thanks Rainer @@raiwa.  That seems to solve or at least side steps the format issue but it's not very pretty is it?   I thought I might be able to style it but from what I read the ability to do that is limited at best.  In any case I put it in place on my test site until I'm able to get the look I want.  Function is probably better than form at this point.  Thanks again...

 

Dan

Link to comment
Share on other sites

@@Dan Cole

 

can you please try this once and tell me how it goes.

$products_name .= '<td><div class="col-xs-12 col-sm-6 col-md-4" style="margin-top:10px;">
						  <div class="input-group">
							<span class="input-group-btn">
								<button onclick="javascript:changeValue(document.getElementById(\'add_id_'.$products[$i]['id'].'\'),-1);return false;" type="button" class="btn btn-default" data-type="minus" data-field="cart_quantity">
									<span class="glyphicon glyphicon-minus"></span>
								</button>
							</span>' .
								'<input type="text" name="cart_quantity[]" class="form-control text-center" id="add_id_'.$products[$i]['id'].'" value="' . $products[$i]['quantity'] . '">' .
						   '<span class="input-group-btn">
								<button onclick="javascript:changeValue(document.getElementById(\'add_id_'.$products[$i]['id'].'\'),1);return false;" type="button" class="btn btn-default" data-type="plus" data-field="cart_quantity">
									<span class="glyphicon glyphicon-plus"></span>
								</button>
							</span>
					    </div></div>';
		 $products_name .= '<div class="col-xs-12 col-sm-6 col-md-8" style="margin-top:10px;">' . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-refresh', NULL, NULL, NULL, 'btn-info') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger') . '</div></td>';		

and add a

class="hidden-xs"

to the products images <td> tag to hide the image in xs view mode.

Resolutions starting at 348px width shouldn't be any problem. Anything lower than that will cause problems with the plus/minus input field.

Link to comment
Share on other sites

Will do @@Tsimi but unfortunately I won't get to it until this evening....got a busy day ahead of me...I'll take it for a test drive as soon as I can and will report back...

Link to comment
Share on other sites

@@Tsimi I like it.   I took it for a test drive and while it worked pretty much as I expected with the image being hidden I tweaked it a bit more just to get the look I wanted.  Instead of hiding the image I decide it might be better to hide the product name...I then resized the buttons to the default size that comes with the stock shopping_cart.php and resized the input box to match with a bit of css and it now looks great down to 320 X 480.  I might mess around with the position of the product name and see if I can move it up a line or otherwise reposition it so it stays on the page as well, but the bottom line is that I like it and will move forward from here.  Thanks for all you help and effort with this. Well done.

 

Dan

Link to comment
Share on other sites

  • 1 month later...

@@Dan Cole

 

can you please try this once and tell me how it goes.

$products_name .= '<td><div class="col-xs-12 col-sm-6 col-md-4" style="margin-top:10px;">
						  <div class="input-group">
							<span class="input-group-btn">
								<button onclick="javascript:changeValue(document.getElementById(\'add_id_'.$products[$i]['id'].'\'),-1);return false;" type="button" class="btn btn-default" data-type="minus" data-field="cart_quantity">
									<span class="glyphicon glyphicon-minus"></span>
								</button>
							</span>' .
								'<input type="text" name="cart_quantity[]" class="form-control text-center" id="add_id_'.$products[$i]['id'].'" value="' . $products[$i]['quantity'] . '">' .
						   '<span class="input-group-btn">
								<button onclick="javascript:changeValue(document.getElementById(\'add_id_'.$products[$i]['id'].'\'),1);return false;" type="button" class="btn btn-default" data-type="plus" data-field="cart_quantity">
									<span class="glyphicon glyphicon-plus"></span>
								</button>
							</span>
					    </div></div>';
		 $products_name .= '<div class="col-xs-12 col-sm-6 col-md-8" style="margin-top:10px;">' . tep_draw_hidden_field('products_id[]', $products[$i]['id']) . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-refresh', NULL, NULL, NULL, 'btn-info') . ' ' . tep_draw_button(NULL, 'glyphicon glyphicon-remove', tep_href_link(FILENAME_SHOPPING_CART, 'products_id=' . $products[$i]['id'] . '&action=remove_product'), NULL, NULL, 'btn-danger') . '</div></td>';		

and add a

class="hidden-xs"

to the products images <td> tag to hide the image in xs view mode.

Resolutions starting at 348px width shouldn't be any problem. Anything lower than that will cause problems with the plus/minus input field.

 

Is it better to have the javascript in a seperate location rather than hardcoded in?

thanks

Link to comment
Share on other sites

Yes it would be better. It is not recommended to use javascript inline code. At least that is what most javascript/jquery cracks say. My skills are not that good to recode it so if anyone with decent skills want to have a go at it please go ahead.

I don't see any trouble so far using it as it is though.

Link to comment
Share on other sites

Yes it would be better. It is not recommended to use javascript inline code. At least that is what most javascript/jquery cracks say. My skills are not that good to recode it so if anyone with decent skills want to have a go at it please go ahead.

I don't see any trouble so far using it as it is though.

hi

thanks

 

i found this link which seems to be exactly what is required

 

http://bootsnipp.com/snippets/featured/buttons-minus-and-plus-in-input

 

it has the html, and javascipt seperate.

Link to comment
Share on other sites

  • 4 weeks later...

@@Dan Cole what did you end up using for a qty box in the product listing?

 

I'm starting down the road for my next site - thinking ahead maybe 4 to 6 months (not in a huge rush but I figure I might as well start my new build now with 2.3.4BS Gold).

 

Looking back at this thread I has supplied some code I used in a small test site of mine - but it has a bug... It doesn't work with SSL. I like the buttons you guys where playing around with in shopping_cart.... Did you finish them on product_listing?

 

 

 In includes/modules/product_listing change

$prod_list_contents .= ' <div class="btn-wrap">' . tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id=' . $listing['products_id']), NULL, NULL, 'btn-success btn-sm');

to

$prod_list_contents .= ' <div class="btn-wrap">' . tep_draw_form('buy_now', tep_href_link(basename($PHP_SELF), tep_get_all_get_params(array('action')) . 'action=buy_now&products_id='. $listing['products_id']), 'POST') . tep_draw_input_field('buyqty', '1', 'size="3" style="vertical-align:middle') .' '. tep_draw_button(IMAGE_BUTTON_BUY_NOW, 'cart', NULL, NULL, 'btn-success btn-sm') . '</form>';

Please double check this doesn't break the add to cart in product_reviews - I seem to remember having an issue but I'm testing right now and seems to work fine. You could also quickly hack a qty box in product reviews I'm sure...

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...