Post by Opencartleerling » Fri Jul 01, 2016 11:13 pm

Hello,
I am attempting to apply a quantity dropdown on product page, shopping cart and also on the category pages. Unfortunately I am not very good at coding anything and I am failing miserably. The quantity spinner on the product pages I will remove if I get this working
I found some help here
http://stackoverflow.com/questions/3406 ... n-opencart

Code: Select all

 <input type="text" name="quantity" value="<?php echo $product['minimum']; ?>" size="2" id="input-quantity-<select name='quantity'><option value="<?php echo $minimum; ?>"><?php echo $minimum; ?></option> <option value="2">2</option> <option value="3">3</option> </select> <input type='text' name='quantity' size='3' value='1' />
My current code is this

Code: Select all

 <input type="text" name="quantity" value="<?php echo $product['minimum']; ?>" size="2" id="input-quantity-<?php echo $product['product_id']; ?>" class="form-control" />
How can I create a quantity dropdown that does
1. Not influences the size of the quantity box
2. Gives a dropdown option that uses the minimum order quantity by default and does not give the option to insert a lower amount than that MOQ
3. Works! :P
Any help is appreciated, the more detailed it is the better. If more information is needed please let me know.
Kind regards

New member

Posts

Joined
Thu May 21, 2015 12:08 am

Post by IP_CAM » Sat Jul 02, 2016 1:11 am

just to mention it, some relatively similar nice functions already exist for various Versions !
---
To make this one work, showing on the image below, I unpacked the not working Plus/Minus Quantity [OCMOD] spinnerquantity.ocmod.zip and renamed the spinner_quantity.ocmod.xml file to spinner_quantity.xml and then uploaded it into the vqmod/xml Sub, instead of unsuccessfully trying to install it by use of the OC v.2.2.0.0 Extension Installer as OcMod:
http://www.opencart.com/index.php?route ... n_id=25740
---
more can be found here:
http://www.opencart.com/index.php?route ... us%20minus
http://www.opencart.com/index.php?route ... y%20select

Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by Opencartleerling » Mon Jul 04, 2016 9:31 pm

I appreciate your time for writing a reply, but unfortunately the plus minus productspinner is the exact one I am currently using. It's not very suitable for me, we are a wholesale company and customer often order large quantities of the same product. Also this extension and most extensions I looked at only work on the product page. We will have a lot of products per page, hence I would like costumers to be able to shop from the category pages and also change the quantity in the shooping cart itself with a dropdown.

This is a category page on our (Dutch) website
https://www.sieradendirect.nl/kettingen

It is currently possible to enter a quantity in the category pages, but not yet with a dropdown. If the product has diferent options a costumer get's redirected to the product page. I figured if I can get it to work on the category pages it shouldn't be very hard to do the same thing for the product and shopping cart pages.

Any help is appreciated

New member

Posts

Joined
Thu May 21, 2015 12:08 am

Post by IP_CAM » Tue Jul 05, 2016 2:38 am

but to create a dropdown-selection, active in every product, and containing a huge range of (once manually entered!) Numbers, would, at best, slow down your Pageload dramaticly, because, for every product displayed, it would repeat 1'000 Values, if you plan, to let them choose each single Value, from 1 to 1000. Such a page would end up, carrying 30'000 Lines Code Line or more! Just compare a registration Page Source, where a lot of Countries and Zones are selectable.
Check this Page Source, to get an idea...
http://www.bigmax.ch/shop/index.php?rou ... t/register

Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by IP_CAM » Tue Jul 05, 2016 5:51 am

This here could be an alternative, at least for the Product Page!
I have 'cleaned out' the VqMod a little, and tested it in my Test OC v.2.2.0.0
as you can see here:
http://www.bigmax.ch/oc22/index.php?rou ... duct_id=43

Link the category Add-to-Cart BUTTON to directly access the Product Page, and let them
add products only from the Product Page, it would be much less work to do!
Ernie
---
Links:
http://forum.opencart.com/viewtopic.php ... 67#p604967
---
jb_quantity_selector.xml VqMod, free, as tested on my OC v.2.2.0.0:
the MAX-Product Stock is automatically the MAX-Drop-Down Display-Value, visible,
and if a Minimum Quantity exists, this Value will be shown as such on the first button.
---

Code: Select all

<modification>
<id>VQMOD Easy Quantity Selector with Settings</id>
<version>OC v.2.2.x</version>
<vqmver>2.6.1</vqmver>
<author>jericbas- cleaned by IP_CAM</author>

<file name="admin/language/*/setting/setting.php">
<operation error="log">
<search position="after"><![CDATA[$_['entry_status']]]></search>
<add><![CDATA[
	$_['entry_jbqty_number_of_button'] = 'Number of Quantity selector buttons';
	$_['entry_jbqty_button_css_style'] = 'Quantity selector CSS';
]]></add>
</operation>
</file>
 
<file name="admin/controller/setting/setting.php">
<operation error="log">
<search position="after"><![CDATA[$data['entry_status'] = $this->language->get('entry_status');]]></search>
<add><![CDATA[
	$data['entry_jbqty_number_of_button'] = $this->language->get('entry_jbqty_number_of_button');
	$data['entry_jbqty_button_css_style'] = $this->language->get('entry_jbqty_button_css_style');
]]></add>
</operation>

<operation error="log">
<search position="before" ><![CDATA[if (isset($this->request->post['config_review_status'])) {]]></search>
<add><![CDATA[
	if (empty($this->config->get('config_jbqty_number_of_button'))) {
	$this->config->set('config_jbqty_number_of_button',5);
	$data['config_jbqty_number_of_button'] = $this->config->get('config_jbqty_number_of_button');
	}
	if (isset($this->request->post['config_jbqty_number_of_button'])) {
	$data['config_jbqty_number_of_button'] = $this->request->post['config_jbqty_number_of_button'];
	} else {$data['config_jbqty_number_of_button'] = $this->config->get('config_jbqty_number_of_button');}
	if (empty($this->config->get('config_jbqty_button_css_style'))) {
	$this->config->set('config_jbqty_button_css_style','.jb-btn-circle {
	width: 30px;
	height: 30px;
	text-align: center;
	padding: 6px 0;
	font-size: 12px;
	line-height: 1.428571429;
	border-radius: 15px;
	}');
	}
	if (isset($this->request->post['config_jbqty_button_css_style'])) {
	$data['config_jbqty_button_css_style'] = $this->request->post['config_jbqty_button_css_style'];
	} else {
	$data['config_jbqty_button_css_style'] = $this->config->get('config_jbqty_button_css_style');
	}
]]></add>
</operation>
</file>

<file name="admin/view/template/setting/setting.tpl">
<operation error="log">
<search position="before" offset="2"><![CDATA[<legend><?php echo $text_review; ?></legend>]]></search>
<add><![CDATA[
	<div class="form-group">
	<label class="col-sm-2 control-label" ><?php echo $entry_jbqty_number_of_button?></label>
	<div class="col-sm-10">
	<input type="text" name="config_jbqty_number_of_button" value="<?php echo $config_jbqty_number_of_button; ?>" placeholder="<?php echo $entry_jbqty_number_of_button; ?>" class="form-control" />
	</div>
	</div>
	<div class="form-group">
	<label class="col-sm-2 control-label" ><?php echo $entry_jbqty_button_css_style?></label>
	<div class="col-sm-10">
	<textarea name="config_jbqty_button_css_style" rows="15" placeholder="<?php echo $entry_jbqty_button_css_style; ?>" class="form-control"><?php echo $config_jbqty_button_css_style; ?></textarea>
	</div>
	</div>
]]></add>
</operation>
</file>

<file name="catalog/controller/product/product.php">
<operation error="log">
<search position="after" offset="2"><![CDATA[$data['minimum'] = 1;]]></search>
<add><![CDATA[
	$data['config_jbqty_number_of_button'] = $this->config->get('config_jbqty_number_of_button');
	$data['config_jbqty_button_css_style'] = $this->config->get('config_jbqty_button_css_style');
	if ($product_info['quantity']) {
	$data['quantity'] = $product_info['quantity'];
	} else {
	$data['quantity'] = $data['minimum'] ;
	}
]]></add>
</operation>
</file>

<file name="catalog/view/theme/*/template/product/product.tpl">
<operation error="log">
<search position="after"><![CDATA[<input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control" />]]></search>
<add><![CDATA[
	<style><?php
	if(empty($config_jbqty_button_css_style)){ ?>
	.jb-btn-circle {
	width: 30px;
	height: 30px;
	text-align: center;
	padding: 6px 0;
	font-size: 12px;
	line-height: 1.428571429;
	border-radius: 15px;
	} <?php } else {
	echo $config_jbqty_button_css_style;
	} ?>
</style>
<div class="jb-btn-circles">
<?php 
	$jbLimit = 5;
    if(!empty($config_jbqty_number_of_button)){
    $jbLimit = $config_jbqty_number_of_button;
    }
    $jb_ctr=0;
    for($x=$minimum;$x<=$quantity;++$x){ ?>
    <button type="button" class="btn btn-default jb-btn-circle<?php if($jb_ctr==0){ echo ' active';}?>" value="<?php echo $x;?>"><?php echo $x;?></button>
    <?php 
    --$jbLimit;
    if($jbLimit==1){ ?>
    <button type="button" class="btn btn-default jb-btn-circle jb-hide-circles" value="<?php echo $x+1;?>"><?php echo $x+1;?>+</button>
    <?php    break;
    }
    ++$jb_ctr;
    } ?>
    <select id="jb-select-quantity" class="form-control" style="display:none;">
	<?php for($x=$minimum;$x<=$quantity;++$x){ ?>
    <option value="<?php echo $x;?>"><?php echo $x;?></option>
    <?php } ?>
    </select>  
    </div>
    <script>
    $(function(){$("#input-quantity,#jb-select-quantity").hide(),$("#jb-select-quantity").hide(),$(".jb-btn-circle").on("click",function(){$(".jb-btn-circle").removeClass("active"),$(this).hasClass("jb-hide-circles")?($(".jb-btn-circle").hide(),$("#jb-select-quantity").show(),$("#jb-select-quantity").val($(this).val())):($("#input-quantity").val($(this).val()),$(this).addClass("active"))}),$("#jb-select-quantity").on("keyup change",function(){$("#input-quantity").val($("#jb-select-quantity").val())})});
    </script>
]]></add>
</operation>	      
</file>

</modification>
---

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by Opencartleerling » Wed Jul 06, 2016 10:05 pm

Too bad I can't do it without slowing down the site. I the think the second extension you mention would be a good one to use in combination with the product spinner then, assuming this is possible.

Is there anyone who is willing to help me implement the productspinner on the category pages? I am currently trying to do it myself, I don't want to immediately hire someone. It might not be exactly what I had in mind originally, but it most certainly would be a nice improvement!

EDIT

I managed to add the product spinner with the code below

Code: Select all

<div class="input-group number-spinner"> <span class="input-group-btn"> <button class="btn btn-default" data-dir="dwn"><i class="fa fa-minus"></i></button> </span> <input type="text" name="quantity" value="<?php echo $product['minimum']; ?>" id="input-quantity" class="form-control text-center" /> <span class="input-group-btn"> <button class="btn btn-default" data-dir="up"><i class="fa fa-plus"></i></button> </span> </div>
Now it looks good, but is not functioning yet. How would I make it work? The product spinner is showing the moq and it is possible to change this number with the +/-

As stated in the extension I removed

Code: Select all

<input type="text" name="quantity" value="<?php echo $minimum; ?>" size="2" id="input-quantity" class="form-control" />
And added

Code: Select all

<script type="text/javascript">$(document).on('click', '.number-spinner button', function () { var btn = $(this), oldValue = btn.closest('.number-spinner').find('input').val().trim(), newVal = 1; if (btn.attr('data-dir') == 'up') { newVal = parseInt(oldValue) + 1; } else { if (oldValue > 1) { newVal = parseInt(oldValue) - 1; } else { newVal = 1; } } btn.closest('.number-spinner').find('input').val(newVal); }); //</script>]]>

New member

Posts

Joined
Thu May 21, 2015 12:08 am

User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by straightlight » Thu Jul 07, 2016 2:32 am

For multi-values selections, you can also try this one: http://forum.opencart.com/viewtopic.php?t=22425#p110625

Dedication and passion goes to those who are able to push and merge a project.

Regards,
Straightlight
Programmer / Opencart Tester


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by Opencartleerling » Thu Jul 07, 2016 9:57 pm

Thanks for referring me to this thread guys, I didn't find it before because I only checked the more recent threads since I am using opencart 2.0.2.0 and this thread is 6 years old and for opencart 1.5

The code currently looks like this (I am assuming this is where I have to make some changes)

Code: Select all

<div class="form-group">
              <label class="control-label" for="input-quantity"><?php echo $entry_qty; ?></label>
<div class="input-group number-spinner">
			      <span class="input-group-btn">
					<button class="btn btn-default" data-dir="dwn"><i class="fa fa-minus"></i></button>
			      </span>
				<input type="text" name="quantity" value="<?php echo $minimum; ?>" id="input-quantity" class="form-control text-center" />
				  <span class="input-group-btn">
					<button class="btn btn-default" data-dir="up"><i class="fa fa-plus"></i></button>
				  </span>
			    </div>
              <input type="hidden" name="product_id" value="<?php echo $product_id; ?>" />
			  
              <br />
              <button type="button" id="button-cart" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-primary btn-lg btn-block"><?php echo $button_cart; ?></button>
            </div>
            <?php if ($minimum > 1) { ?>
            <div class="alert alert-info"><i class="fa fa-info-circle"></i> <?php echo $text_minimum; ?></div>
            <?php } ?>
I understand I can apply my own variables, but the code I have t remove according to that thread does not exist in my product.tpl

This is the code I would have to insert (with my own numbers) but where?

Code: Select all

<?php $min = '<?php echo $minimum; ?>'; ?>
<?php if ($min = 5) { ?>
<?php echo ?>
<select name="quantity">
  <option value="<?php echo $minimum; ?>"><?php echo $minimum; ?></option>
  <option value="10">10</option>
  <option value="15">15</option>
  <option value="20">20</option>
</select>
<?php } elseif ($min = 12) { ?>
<?php echo ?>
<select name="quantity">
  <option value="<?php echo $minimum; ?>"><?php echo $minimum; ?></option>
  <option value="24">24</option>
  <option value="36">36</option>
</select>
<?php } else { ?>
<?php echo ?>
<input type="text" name="quantity" size="3" value="<?php echo $minimum; ?>" />
<?php } ?>
</div>

New member

Posts

Joined
Thu May 21, 2015 12:08 am
Who is online

Users browsing this forum: No registered users and 387 guests