X-Cart forums

[mgatten]

I made a modification tonight that I think some people will like to use.

First, the situation: In the store I'm building right now, each product has one set of options - so the variants of each product all appear on a single pulldown menu. You might be able to adapt this to work with multi-option variants, but I'm not sure. But if your products have (for example) a choice of sizes but not colors, and you want sizes to vanish from the menus as they run out, then this will help.

It also shows the currently available quantity for each variant, right in the menu. You can easily remove that part if you don't want it, but I thought it was pretty cool.

Before finally getting to the code, I should mention that Smarty is not on my list of "things I know really well". I'm quite sure there are other ways to do this more efficiently, but this is what I was able to come up with. Since nothing else I could find on the forums does this, I'm pretty happy with the result.

So, without further adieu...

Only one file needs to be changed: skin/common_files/modules/Product_Options/customer_options.tpl

Around line 49 you'll find the code that generates the select menu and the loop that generates the options:

            <select id="po{$v.classid}" name="{$poname}"{if $disable} disabled="disabled"{/if}{if $nojs ne 'Y'} onchange="javascript: check_options();"{/if}>

              {foreach from=$v.options item=o}

                <option value="{$o.optionid}"{if $o.selected eq 'Y'} selected="selected"{/if}>
                {strip}
                  {$o.option_name|escape}
                  {if $v.is_modifier eq 'Y' and $o.price_modifier ne 0}
                    &nbsp;(
                    {if $o.modifier_type ne '%'}
                      {currency value=$o.price_modifier display_sign=1 plain_text_message=1}
                    {else}
                      {$o.price_modifier}%
                    {/if}
                    )
                  {/if}
                {/strip}
                </option>

              {/foreach}
            </select>

All you need to do is replace that section of code with my special sauce:

            <select id="po{$v.classid}" name="{$poname}"{if $disable} disabled="disabled"{/if}{if $nojs ne 'Y'} onchange="javascript: check_options();"{/if}>
              {* SEE EXPLANATION IN THE FORUM POST FOR THE NEXT SIX FUNKY LINES, IF YOU'RE CURIOUS *}
              {foreach from=$v.options item=o key=index name=foo}
               {foreach from=$variants item=m key=index name=bar}
                  {if $smarty.foreach.foo.index eq $smarty.foreach.bar.index}
                    {assign var="varavail" value = $m.avail}
                  {/if}
               {/foreach}
               {if $varavail gt 0}   {* THIS IS THE 'IF' THAT SUPPRESSES OUT OF STOCK VARIANTS  *}
                <option value="{$o.optionid}"{if $o.selected eq 'Y'} selected="selected"{/if}>
                {strip}
                  {$o.option_name|escape}
                  {* SEE TWO NOTES IN THIS FORUM POST REGARDING NEXT THREE LINES *}
                  {if $smarty.foreach.foo.index gt 0}
                      &nbsp;&nbsp;({$varavail} available)
                  {/if}
                  {if $v.is_modifier eq 'Y' and $o.price_modifier ne 0}
                    &nbsp;(
                    {if $o.modifier_type ne '%'}
                      {currency value=$o.price_modifier display_sign=1 plain_text_message=1}
                    {else}
                      {$o.price_modifier}%
                    {/if}
                    )
                  {/if}
                {/strip}
                </option>
               {/if}   {* THE END OF THE OUT-OF-STOCK VARIANT SUPPRESSION CONDITIONAL *}
              {/foreach}
            </select>                              

Two notes regarding the three lines below the "SEE NOTES" comment:
1. If you don't want to show the quantity available for each variant, just delete all three of those lines.
2. They suppress the count for the first item, since every option pulldown menu in my store has "Please Select An Option" as its first item. I don't want to show a quantity for that, so it skips the first one. If your store doesn't have that, and everything on the menu is selectable, then delete the first and third of those lines and the quantity will be shown for every item.

You may be wondering about the funky "foo bar" pair of loops. The avail variable for variants is available by default to customer_options.tpl. But the problem is that it exists in $variants.<variantid>.avail. (If the variantid is 576, for example, you can find the number available at $variants.576.avail.) However, that array key name is the only place that the variantid appears at all in the variables given to this template. Since you can't determine the variantid of the option you are working with, that means you can't use it to get the value of avail.

But the $variant array has the variantid's appearing in the same order as the options in the menu. So, instead of referring to it with the array's keyname, we can refer to it with the array's index number. So we add a counter to the main loop (foo) and then throw another loop inside (bar). The first time through foo, the index is 0. Bar also starts at 0, and since foo=bar=0, it assigns $variants.0.avail to $varavail. None of the other times through bar match 0, so it continues and uses $varavail to give the quantity. Then foo starts over again at 1. Bar starts over at 0, doesn't match, goes to 1, matches and assigns $variants.1.avail to $varavail, then cycles through the rest without another match so the next option generates. And so on. (In case you want one more example further down the process to elucidate that, let's say you have five or more options. The fifth time through foo, the foo index equals 4. Bar starts over at zero and increments itself until it matches foo. It succeeds on it's fifth time through, when foo=bar=4, so it assigns $variants.4.avail to $varassign and then finishes looping without matching foo again so the foo loop continues with the newly assigned $varavail.

(Not that it matters in the least, but "varavail" is short for "variant available", not "variable avail". I just noticed that somebody assuming that the var stood for variable might think I chose a weird variable name.)

I hope somebody finds this useful. I also hope somebody else finds a more efficient want to do it. (That "bar" loop is a ridiculously inefficient trick - but it works.)

Marshall

[webkida]

Hi Marshall,

I had the same issue, I wanted to hide the variants with zero stock. I tried your code but no luck.

I have 3 different variants i.e. style, color and size

Now I just want the script to modify according to size.

Can you help me with that.

[JWait]

I'd be happy just get "Please Select An Option" to work correctly.

[mgatten]

Webkida: Like I said, adapting it to multiple variants might not be possible. That might require another approach entirely. I think what I might do in that case is add a field to xcart_variants and run an external script via cron every few minutes to calculate the availability of each variant of each product and set the new field to a Yes/No value based on availability. Then the trick would be getting that field added to the variables available to the template. (That would be the hardest part, but forum searching and a little creativity would probably yield something.) And then use my mod above using your custom field instead of the avail field. Not needing it myself, and no having time to play with it in the foreseeable future, that's probably about all the help I can provide on that front.

@JWait: I've never had much of a problem with the "Please Select An Option" working. I just create an option of "Please select an option" and make sure that it is set as the default option, and here's the javascript that I put into the Validation Script field on the Options screen for every product:

var order_Form = document.orderform;
var re = new RegExp(/po\d+/);  // Product Option fields all have ids starting with 'po' and ending with a number. The set of numbers used is unique to every product. If the field name starts with 'po', then we know it's a product option.
// loop through the form elements
for(i = 0; i < order_Form.elements.length; i++){
// execute our regular expression against each element id
var m = re.test(order_Form.elements[i].id);
    if (m) {  // In other words, if the field is a product option
            var matched_id1=order_Form.elements[i].id;
            if (document.getElementById(matched_id1).selectedIndex == 0 || document.getElementById(matched_id1).value == '' )
            {
                alert('Please be sure to select an option.'); return false;
            }
        }
}
return true; 

This makes sure that any product option pulldown menu has something selected other than it's first option, and that every product option text field has a non-empty value. (If you want to allow non-empty values, just remove "|| document.getElementById(matched_id1).value == ''" from line 9 of that Javascript code.

(I removed some JS code related to other details of my cart customizations, and haven't tested it as it appears above, but I'm pretty confident I didn't break it in the process.)

All this Javascropt stuff for a non-active "Please Select" option is available scattered elsewhere in the forum, but since it is pretty closely related to the above mod I figure it can't hurt to include it in this thread.

Good luck!
Marshall

[JWait]

Thanks Marshall, but I still have the same problem I've always had when trying to add a "Please Select An Option" option, namely that the "Please Select An Option" option has to be "in stock" or else the following happens...
"Warning: The product variant you previously defined to be the default one for this product is no longer used as the default selection: the combination of product options of which this variant is made is included into an exception, or the quantity of this variant in stock is 0 (zero), while your store settings do not allow customers to order products that are out of stock (either the option 'Disable inventory tracking' is disabled or the option 'Disable products which are out of stock' is enabled)."

If I put one "in stock" then the script works fine, but the problem is, if all of the "real" products are out of stock then the "Please Select An Option" is the only one "in stock" and the product(s) are still displayed even though "Please Select An Option" cannot be purchased and confuses / frustrates customers. I hope this makes sense.

[mgatten]

I haven't had to deal with that specific situation since I've only used this on products that can never be out of stock. However, if I needed to implement it in that situation then I think I'd look at the code that decides whether or not to display a product based on stock availability and change that to not display when total avail < 2.

Then on products that don't have options, keep their inventory in X-Cart at one more than you actually have. If you show your customer the quantity in stock, then change that code to subtract one from the value before displaying.

Kludgy, but it would work.

Marshall

[rodzok]

can you please help me
i have 4.5.5 version and i need to sort the list of variant and show the out of stock at end of the row . what i mean is when one color is out of stock then that color will be shown as last option in variant list . do you have a code for this