Jump to content
Claudia M

Quantity in Basket Drop Down

Recommended Posts

Hi,

When an item is added to the basket and you go to the View Basket page it shows the quantity of 1 in a box.  What if you have more than one of this item and the customer didn't notice the stock level on the product page and they really wanted to purchase more?  Is there any way, on the view basket page and others if applicable, the quantity box can be changed to a dropdown showing a list of quanties available. 1 2 3 4 5 Up to the limit on hand? Thanks in advance for any and all help

Claudia

1169937859_CapturebasketQuantitybox.thumb.PNG.1cad725707547fdea9ece74a29ef3e71.PNG

Share this post


Link to post
Share on other sites

Yes, and no. CubeCart includes a (current) stock_level for each item in the basket. However, CubeCart will list the same item separately if there are differences in the options. That is, Widget:square, and Widget:round may have the same stock_levels because the master level has each same-item's quantity in the basket subtracted from it.

But... changing the quantity of one same-item does not automatically re-calculate the remaining stock level to update the other same-item. Therefore it is possible to increase the quantity of both Widget items and, taken together, exceed the stock level of Widgets, even if the quantity input form element can be limited to appropriate values.

That said, it is easy to replace the text input with a numerical spinner input, having the spinner be limited to max=stock_level. (A hint can be displayed next to the input.)

CubeCart delivers a dedicated stock level for each same-item if the item uses the Options Matrix Table.

Share this post


Link to post
Share on other sites

I don't use product options.

" That said, it is easy to replace the text input with a numerical spinner input, having the spinner be limited to max=stock_level. (A hint can be displayed next to the input.) "

How would I do this?

Thanks,

Claudia

Share this post


Link to post
Share on other sites

In the skin template for Foundation, content.checkout.medium-up.php (content.checkout.small.php will be a different solution):

Find:

<input name="quan[{$hash}]" type="text" value="{$item.quantity}" maxlength="3" class="quantity checkout" {$QUAN_READ_ONLY}>

Change to:

<input name="quan[{$hash}]" type="number" min="{$item.minimum_quantity}"{if $item.stock_level gt 0} max="{$item.stock_level}"{/if} value="{$item.quantity}" maxlength="3" class="quantity checkout" {$QUAN_READ_ONLY}>

I will solve the small template shortly.

Share this post


Link to post
Share on other sites
Posted (edited)

In the skin template for Foundation, content.checkout.small.php:

Find:

<input name="quan[{$hash}]" maxlength="3" type="hidden" value="{$item.quantity}">

Change to:

<input name="quan[{$hash}]" maxlength="3" type="hidden" value="{$item.quantity}" min="{if $item.minimum_quantity gt 1}{$item.minimum_quantity}{/if}" max="{if $item.stock_level gt 0}{$item.stock_level}{/if}">

Then in /js/2.cubecart.js:

Near line 600, find:

function update_quantity(rel, sign) {

Just below that, find:

var old_val = $(target).val();

Change to:

var old_val = $(target).val();
var min_val = $(target).attr("min");
var max_val = $(target).attr("max")||999;

Just below that, find:

if (old_val < 999) {
     
Change to:

if (old_val < max_val) {

Just below that, find:

if (old_val < 1) {

Change to:

if (old_val < 1 || old_val <= min_val) {

 

Edited by bsmither

Share this post


Link to post
Share on other sites

Thanks so much Brian

I implemented the 'medium" and it did as it should.  I'll do the "small" and "js" tomorrow.

Share this post


Link to post
Share on other sites

Thanks Brian the small worked great.  I looked at the small basket on my phone before I did your changes.  Placed an item in the basket and  moved the plus minus quantities and it allowed for a lot more quantity than I have of that item.  With your change if just went up to the correct amount I have on hand.

Share this post


Link to post
Share on other sites
Posted (edited)

Hi Brian,

I just, in medium, noticed in IE the up down errors do not show at all and in Chrome they only show if you mouse over the box.  I don't know about small.  Also is it possible to move the code you gave me for medium checkout to the product page?  I'd prefer to change the quantity box on the product page to a dropdown if possible.  I don't use product options.

Thanks,

Claudia

Edited by Claudia M

Share this post


Link to post
Share on other sites
Posted (edited)

There is a recent conversation that explored implementing a spinner input on various pages. It may interest you.
https://forums.cubecart.com/topic/54898-implementing-third-party-jquery/

"up down errors"?

Maybe you mean arrows? And I have not read any complaints about using <input type="number"> on Chrome. Even though I didn't go looking for any, and I despise Chrome, I would expect such behavior to be widely discussed.

And yet, here it is:
https://stackoverflow.com/questions/25410856/restore-input-type-number-spinners-in-chrome

And then, there's this:
https://css-tricks.com/numeric-inputs-a-comparison-of-browser-defaults/

I appreciate this opinion about consistency that is mentioned in the conclusion:

Quote

Although that [User Interface] experience might also be consistent for them across sites, since that user likely sticks to one browser.

 

Edited by bsmither

Share this post


Link to post
Share on other sites

I removed all the code you gave me because it created a lot of errors.  Yes I meant arrows .. sorry.  I don't use Chrome for anything but my Google Drive but decided to try your code out there.  In stock Foundation code on small.checkout why does the -+ quantity allow you to go beyond the amount in stock. And then when you do you get the red error about capping it to the amount in stock?  The changes you gave me corrected this, but again I got errors.  Wish I hadn't deleted the log.  I'll look at the links you furnished.  Thanks so much

Share this post


Link to post
Share on other sites

"on small.checkout why does the -+ quantity allow you to go beyond the amount in stock"

My testing this before posting the code showed that the + and - round circles stopped incrementing and decrementing the value shown according to the max and min settings. For the javascript to not work with those settings suggests that the browser is still using a cached copy of the javascript -- not a fresh copy of the edited javascript.

 

Share this post


Link to post
Share on other sites

It worked ... I just got a lot errors in my log that ocurred at the same time.

I thought I had posted this but I must not have.  I use just the content.products file - not the call to action, etc files.  Here is the code I'm questioning.

 <h4 class="prodprice">
               {if $PRODUCT.ctrl_sale}
               <span class="old_price" id="fbp"{if !$CTRL_HIDE_PRICES} data-price="{$PRODUCT.full_base_price}"{/if}>{$PRODUCT.price}</span>
               <span class="sale_price" id="ptp"{if !$CTRL_HIDE_PRICES} data-price="{$PRODUCT.price_to_pay}"{/if}>{$PRODUCT.sale_price}</span>
               {else}
               <span class="ptp"{if !$CTRL_HIDE_PRICES} data-price="{$PRODUCT.price_to_pay}"{/if}>{$PRODUCT.price}</span>
               {/if}
            </h4>

               <div class="medium-2 columns show-for-medium-up">
                  <input type="text" name="quantity" value="1" maxlength="3" class="quantity product required text-center">
                  <input type="hidden" name="add" value="{$PRODUCT.product_id}">
               </div>                   
                 <div  class="small-12 medium-10 columns">
               <link itemprop="availability" href="http://schema.org/InStock" />
                  <button type="submit" value="{$LANG.catalogue.add_to_basket}" class="button green expand">{$LANG.catalogue.add_to_basket}</button>
               </div>
                 {/if}
               </div>
                         
          {else}
            {if $CTRL_HIDE_PRICES}
            <p class="buy_button"><strong>{$LANG.catalogue.login_to_view}</strong></p>
            {else if $CTRL_OUT_OF_STOCK}
            <link itemprop="availability" href="http://schema.org/OutOfStock" />
            <div class="buy_outofstock txt ">This product has sold</div>
                       {/if}
            {/if}


Can I remove the show-for-medium-up without causing any problems there or in small display?

Share this post


Link to post
Share on other sites

There won't be any errors, per se, but removing the show-for-medium-up will then show the medium-2 columns as a next row the full width on small screens. There should be a companion section for quantity dedicated to small screens. Otherwise, there will be the medium-2 row with a quantity form element and (presumably) a show-for-small-only row with a second quantity form element. Clicking submit with two visible same-named form elements will cause consternation in the CubeCart code.

Share this post


Link to post
Share on other sites

I just looked at the CC demo store on small screen and I didn't see any box where you can put the quantity you want to buy.

Share this post


Link to post
Share on other sites
Posted (edited)

Ok, no companion section to hold a quantity form element is necessary. The HTML standard says that an unrendered (hidden visibility or non-displayed) form element is still a "successful control".

So, a quantity will still POST when the form is submitted - it's just that the visitor does not have a control to set the quantity on a small screen (on the View Product page).

According to the Github issues #359 and #420, this is a conscious design decision.

 

Edited by bsmither

Share this post


Link to post
Share on other sites

Regardless, we know we are free to make the skin (and all of CubeCart) do what we want.

For your code posted above:

Find:

<div class="medium-2 columns show-for-medium-up">
   <input type="text" name="quantity" value="1" maxlength="3" class="quantity product required text-center">
   <input type="hidden" name="add" value="{$PRODUCT.product_id}">
</div>                   
<div  class="small-12 medium-10 columns">
   <link itemprop="availability" href="http://schema.org/InStock" />
   <button type="submit" value="{$LANG.catalogue.add_to_basket}" class="button green expand">{$LANG.catalogue.add_to_basket}</button>
</div>

Change to:

<input type="hidden" name="add" value="{$PRODUCT.product_id}">
<div class="small-3 medium-2 columns">
   <input type="text" name="quantity" value="1" maxlength="3" class="quantity required text-center">
</div>
<div class="small-9 medium-10 columns">
   <link itemprop="availability" href="http://schema.org/InStock" />
   <button type="submit" value="{$LANG.catalogue.add_to_basket}" class="button postfix"><span class="show-for-small-only">{$LANG.common.add}</span><span class="show-for-medium-up">{$LANG.catalogue.add_to_basket}</span></button>
</div>

This adds a quantity text field to the small layout. It does not add spinners. But that can be done similar to what has been discussed for content.checkout.medium-up.php.

Share this post


Link to post
Share on other sites

Thank you Brian!  I'll add that ASAP.  I don't think I'll use the spinners, I'll just add some text.  Thanks again!!!!!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...