Thread: Product variants in radio button

Hi ,

I want to show product variants in radio button.
I just want to show singe add to cart button below the variants as shown in picture below.




Thanks inadvance


Regards
Hirish

Any help appreciated.. Please someone from aspdnf team help me

You're going to have to modify (or create) an xmlpackage to do this...we don't have a radio button xmlpackage by default. You should probably start with a copy of the product.variantsindropdown.xml.config xmlpackage, replacing the dropdown list with a radio button list and adding radio buttons for each of the variants.

As a good starting point, remove the select tags from the Product template

Code:

Options:
  <!--<select name="variants" onchange="SetCartVariant(this.value)">-->
  <xsl:apply-templates select="/root/ProductVariants/Variant" />
<!--</select>-->

then remove the option tags from the Variant template and add radio inputs

Code:

<xsl:template match="Variant">
	<xsl:param name="vName" select="aspdnsf:GetMLValue(Name)"></xsl:param>
	<xsl:param name="pSalesPromptName" select="aspdnsf:GetMLValue(/root/Products/Product/SalesPromptName)"></xsl:param>
	<xsl:param name="pTaxClassID" select="/root/Products/Product/TaxClassID" />

	<br/>
	<input type="radio" name="rg1" value="{VariantID}" onclick="SetCartVariant(this.value)">
		<xsl:if test="IsDefault=1">
			<xsl:attribute name="checked">checked</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"/>
	</input>
	<!--<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="ArtNo"/>*-*<xsl:value-of select="aspdnsf:GetVariantPrice(VariantID, number(HidePriceUntilCart), Price, SalePrice, ExtendedPrice, Points, $pSalesPromptName, $pTaxClassID)" disable-output-escaping="yes" />
	</option>-->
</xsl:template>

If you wanted the options to say Add x.xx or Subtract x.xx you'll probably have to implement some custom calculations through extension functions and maybe some javascript to get the prices to change depending on which one was selected, or possibly even create an entirely custom page so that you could implement some ajax or whatever you wanted to use to get the prices to change.

You could possibly use the Kit product for it too.

But if none of the solutions above help, feel free to contact Jan at jsimacek@compunix.us for a custom XmlPackage quote.

Thank you.

Thanks Mr.George.

Im not that good at doing customization to get Add x.xx or Subtract x.xx feature.

But ill try my best to do that. any help on this appreciated

Thanks again Mr.George. God bless you

Cheers!!!!