Thread: No default Variant Dropdown Selection

The new variants in drop down (product.variantsindropdown.xml) is a great way for user to select a variant.

Is there anyway to force the user to make a selection rather than have first choice as the default. Some customers will likely overlook the choices and click add to cart without making the proper selection. They may have made a decision and returned to the page and then just click ADD TO CART without remembering to choose his desired selection.

It would be real nice if the drop down said 'Choose option...'

I tried some mods in the xml to force a choice to be made, but the validation is only done if the user makes a change to selection so i couldn't figure out how to force a selection.

Any thoughts?

Thanks,

Guy

You would need to mod the extension function in XSLT Extension Base that generates the dropdown menu to add a "non selectable" default option, and then add some javascript checking in the xml package. Shouldn't be terribly hard to do.

Is this source code editing?

Modding XSLTExtensionBase would require source code, yes.

We found a way to make this work without editing source code. I'll put an example up soon. Here's a summary of what we did.

1. Add a string resource that will become the first option in the drop-down list. Something like "Please select a product".
2. Copy and rename the variantsindropdown XmlPackage.
3. Edit your newly named XmlPackage:

a. Add an option as the first option in the drop-down list and make it selected. This will call the new string resource.
b. Use a find and replace technique described in another thread (not able to find at the moment) to initially disable the Add to Cart button.
c. Modify the javascript already on the page to enable the button if a variant is selected and disable the button if "Please select a product" is selected.

So basically, you can't add an item to the cart until a variant is selected, which is what we wanted.

Looking at product.variantsindropdown.xml.config, Look for the following, pretty much top to bottom in the code. Edit note: (Be sure to rename this package and place in your Skins/Skin_#/XmlPackages)

1. In the javascript, look for

Code:

function SetCartVariant(selValue){...}

a. modify the if statement:

Code:

if(selValue=='thedefault' || selValue=='')

and add:

Code:

theForm.addbutton.disabled=true;

b. modify the else statement:

Code:

add theForm.addbutton.disabled=false;

2. Add the following parameter in the Product template. Note: you will want to create the string resource so it can be used as the first option in the drop-down list.

Code:

<xsl:param name="myvariant" select="aspdnsf:StringResource('selectvariant.aspx.1', $LocaleSetting)" />

3. Modify the drop-down list by adding an option that calls your string resource

Code:

<select name="variants" onchange="SetCartVariant(this.value)">
<option value="thedefault">
  <xsl:attribute name="selected">selected</xsl:attribute>
  <xsl:value-of select="$myvariant" disable-output-escaping="yes" />
</option>
<xsl:apply-templates select="/root/ProductVariants/Variant" />
</select>

4. Replace the AddToCart Form call with the following. (note: this technique was found in another thread in the forums)

Code:

<xsl:variable name="returnhtml" select="aspdnsf:AddtoCartForm(ProductID, $defaultVariant, 1)" /><!--original-->
<xsl:variable name="codelocation" select="'onClick=&quot;document.AddToCartForm'"/><!--code to replace-->
<xsl:variable name="jscriptSnippet" select="'disabled=&quot;true&quot; name=&quot;addbutton&quot; onClick=&quot;document.AddToCartForm'"/><!--new code to plug in-->
<xsl:value-of select="concat(substring-before($returnhtml, $codelocation), $jscriptSnippet, substring-after($returnhtml, $codelocation))" disable-output-escaping="yes"/>

5. Finally, comment out (or delete) the "selected" attribute for the default variant

Code:

<option value="{VariantID}">
<!--<xsl:if test="IsDefault=1">
<xsl:attribute name="selected">selected</xsl:attribute>
</xsl:if>-->
<xsl:value-of select="$vName" />*-*<xsl:value-of select="aspdnsf:GetVariantPrice(VariantID, number(HidePriceUntilCart), Price, SalePrice, ExtendedPrice, Points, $pSalesPromptName, $pTaxClassID)" disable-output-escaping="yes" />
</option>