Virtuemart Support :: Topic: Show the quantity box in product details (1/1)

Welcome, Guest

TOPIC: Show the quantity box in product details

Show the quantity box in product details 11 years 4 months ago #1486

Bert van der Veen

Hi,

I want to show the the quantity box in the product details.
In the file templates/MYTEMP/html/com_virtuemart/productdetails/flex2.php i see the following code:

<?php // Display the quantity box
 
    $stockhandle = VmConfig::get('stockhandle', 'none');
    if (($stockhandle == 'disableit' or $stockhandle == 'disableadd') and ($this->product->product_in_stock - $this->product->product_ordered) < 1) {
 ?>
		<span><a href="<?php echo JRoute::_('index.php?option=com_virtuemart&tmpl=component&view=productdetails&layout=notify&virtuemart_product_id='.$this->product->virtuemart_product_id); ?>" class="FlexibleProductDetailsNotify" <?php  if (!($parameter == "quicklook")) { ?>rel="facebox" rev="iframe|550|550"<?php } ?>><?php echo JText::_('COM_VIRTUEMART_CART_NOTIFY') ?></a></span>
 
<?php } else { ?>
						<!-- <label for="quantity<?php echo $this->product->virtuemart_product_id; ?>" class="quantity_box"><?php echo JText::_('COM_VIRTUEMART_CART_QUANTITY'); ?>: </label> -->
 
 
        <input type="hidden" class="quantity-input js-recalculate" name="quantity[]" value="1">
 
	    <?php // Display the quantity box END ?>

When i comment out the <! -- label stuff in only see the label, what code do i need to show the quantity box again?

--cheers--
BerD

The topic has been locked.

Show the quantity box in product details 11 years 4 months ago #1506

Support

Hi,

find this line this file:

<input type="hidden" class="quantity-input js-recalculate" name="quantity[]" value="1">

and change it with this:

 <div class="FlexibleProductDetailsSelectBox">
        <select class="quantity-input js-recalculate" name="quantity[]">
  			<option value="1">1</option>
  			<option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>   
		</select>  
         </div>

(which is the quantity selection style in the "default" layout, if you want to retrieve the original Virtuemart's quantity style, then add this code instead:

<span class="quantity-box">
		<input type="text" class="quantity-input js-recalculate" name="quantity[]" value="<?php if (isset($this->product->min_order_level) && (int)$this->product->min_order_level > 0) {
			echo $this->product->min_order_level;
		} else {
			echo '1';
		} ?>"/>
	    </span>
				<span class="quantity-controls js-recalculate">
		<input type="button" class="quantity-controls quantity-plus"/>
		<input type="button" class="quantity-controls quantity-minus"/>
	    </span>

But, there was a reason why we hide the quantity box in flexv2 layout, beucause there wasn't enough space to put it. So, once you include the quantity, the layout might not be looking good and it would require some CSS changes in the layout (width size of columns), but looks like you are an advanced user and i hope you can handle that.

Regards.
Forum Support.

Last Edit: 11 years 4 months ago by Support.

The topic has been locked.

Show the quantity box in product details 11 years 4 months ago #1508

Bert van der Veen	Hi, The code of the the quantity selection style in the "default" layout works, But the original Virtuemart's quantity style where i can add a number and the plus and minius signs does not work, in other words nothing shows up. Can you help me out to fix this one, because we sell screws and nails with large numbers. Thanks ..
	The topic has been locked.

Show the quantity box in product details 11 years 4 months ago #1532

Support

hmm, then the quantity box is a requirement for you.
Instead of "+" or "-" you can include a plan input there, so buyers will manually type the number in the field and add that many product to shopping cart, for example, if you are selling usually 50 or 100 items, then clicking the "plus" button 100 times, would drive your buyers crazy. For this purpose, typing the 100 in the input field manually and pressing "add to cart" button is the easiest for buyers.

To add plain input field for quantity, you can change this:

<input type="hidden" class="quantity-input js-recalculate" name="quantity[]" value="1">

to

<input type="text" class="quantity-input js-recalculate" name="quantity[]" value="1">

So the quantity field will have the "1" value by default, but users can change this "1" to whatever they want. by removing it and typing their value there.

And you can style this input box by adding this CSS rule to any CSS file:

input.quantity-input.js-recalculate {
  width:50px;
  height:20px;
  text-align:center;
  border:none;
}

(or you can include as many CSS rule as you would like, just make sure there are no "override" because lots of CSS files style .quantity-input differently, for this purpose, use the "firebug" plugin to investigate it. Look here to see how to download firebug and how to use firebug: www.flexiblewebdesign.com/forum-virtuemart-2-template-puremart-support/342-using-firebug-for-customization-or-troubleshooting

OR you can use what amazon.com uses, which is this:

<span>Quantity:</span>
<select class="quantity-input js-recalculate" name="quantity[]">
        <option selected="" value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
        <option value="16">16</option>
        <option value="17">17</option>
        <option value="18">18</option>
        <option value="19">19</option>
        <option value="20">20</option>
        <option value="21">21</option>
        <option value="22">22</option>
        <option value="23">23</option>
        <option value="24">24</option>
        <option value="25">25</option>
        <option value="26">26</option>
        <option value="27">27</option>
        <option value="28">28</option>
        <option value="29">29</option>
        <option value="30">30</option>
  </select>