Attribute Layout

[leehack]

Lee

Explain the product, tell us what the maximum number of letters someone can buy, how many letters do you get as standard before you need to pay for extras etc.

Give us the full picture on your goals, you will get a quicker and better solution then.

[NormanRouxel]

Here's a way to do count up to 3 characters that the user types into the Other Info field. As they are typed the first drop-down changes to follow the character count.

Set the Other Info Prompt to something like "Enter initals here".

Create a Component for the Product.

In that Component, Create an Attribute using a drop-down for your character count containing 4 entries 0,1,2,3.

Make sure this is the first attribute on that product.

Use Permutations to set prices for 0 through 3 characters.

Set this Attributes HTML for name to be "Characters"

Replace layout Standard Drop Down Attribute with the following (it will hide any drop-down fields called "Characters")

<actinic:block if="%3cActinic%3aVariable%20Name%3d%22AttributeDisplayLabel%22%2f%3e%20%3d%3d%20%22Characters%22" >
<span style="display:none; visibility:hidden;">
</actinic:block>
<span class="text_options"><Actinic:Variable Name="AttributeDisplayLabel"/></span>
<br />
<actinic:variable name="ChoiceList" value="Drop Down Choice List" />
<actinic:variable name="AttributeSeparator" />
<actinic:block if="%3cActinic%3aVariable%20Name%3d%22AttributeDisplayLabel%22%2f%3e%20%3d%3d%20%22Characters%22" >
</span>
</actinic:block>

Make a new Product Layout "Character Counting CSS Product Layout" containing the following.

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e">
      <form method="post" 
			action="<actinic:variable name="OnlineScriptURL" value="Shopping Cart Script URL" />"
			onsubmit="if (this['O_<actinic:variable Name="ProductID" />'].value == '' ) this['O_<actinic:variable Name="ProductID" />'].value = '---';return true;" 
		> 
         <input type="hidden" name="SID" value="<Actinic:Variable Name="SectionID"/>" />
         <input type="hidden" name="PAGE" value="PRODUCT" />           
         <input type="hidden" name="PAGEFILENAME" value="<actinic:variable name="SectionPageName" />" />
         <Actinic:SECTION BLOB='<Actinic:Variable Name="SectionCatFile"/>'/>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e">
            <!-- Hidden field when in trial mode -->
            <input type="hidden" name="SHOP" value="<Actinic:Variable Name="HiddenFields"/>" />
         </actinic:block>
</actinic:block>

	<div class="product_list">
		<div class="image_product"><actinic:variable name="ProductImageLayout" /></div>
			<div>
         <div style="float: right;">
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29" >
            <actinic:variable name="AddToCartButton" />
         </actinic:block>
			</div>

         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e">
            <div style="float: right;"><strong><span class="actrequired"><Actinic:Variable Name="OutOfStock"/></span></strong></div>
         </actinic:block>

         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e">
            <div style="float: right;"><strong><span class="actrequired"><Actinic:Variable Name="CatalogSuspended"/></span></strong></div>
         </actinic:block>
         
         <a name="<Actinic:Variable Name="EncodedProductAnchor"/>"></a>
			<h3 class="product"><Actinic:Variable Name="ProductName"/></h3>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductReferenceVisible%22%20%2f%3e" >
            <p>Ref: <actinic:variable Name="ProductReference" /></p>
         </actinic:block>
			<h3 class="product_price">
         <actinic:block if="%3cactinic%3avariable%20name%3d%22PriceIsEnabled%22%20%2f%3e">
				<Actinic:PRICES PROD_REF="<actinic:variable Name="ProductID" />" RETAIL_PRICE_PROMPT="<Actinic:Variable Name="ProductPriceDescription"/>">
            <actinic:variable name="PriceListRetail" />
            </Actinic:PRICES>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22ProductPriceIsEnabled%22%20%2f%3e%20%3d%3d%20False">
	         <Actinic:NOTINB2B><br /><actinic:variable name="ProductPriceNotEnabledMessage" /></Actinic:NOTINB2B>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCustomerMessageUsed%22%20%2f%3e">
            <br />
            <Actinic:PRICE_EXPLANATION PROD_REF="<actinic:variable Name="ProductID" />" COMPONENTID=-1><Actinic:Variable Name="RetailCustomerMessage"/></Actinic:PRICE_EXPLANATION>
         </actinic:block>
         </h3>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptShown%22%20%2f%3e">
            <p>
            <span class="actrequired"><Actinic:Variable Name="QuantityPrompt"/></span><input type="text" name="Q_<actinic:variable Name="ProductID"/>" size="4" value="<Actinic:Variable Name="DefaultQuantity"/>" class="form_input_general" />
            </p>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsQuantityPromptHidden%22%20%2f%3e">
            <input type="hidden" name="Q_<actinic:variable Name="ProductID"/>"  value="<actinic:variable name="DefaultQuantity"/>" />
         </actinic:block>
         <actinic:variable name="AttributeList" />
         <actinic:variable name="ComponentList" />
      </div>  
			<p>
         <actinic:variable name="CartError" />         
			<actinic:variable name="ProductDescription" />
			<actinic:variable name="ExtendedInformationLinks" />
         <actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e">
            <br />
            <a href="<Actinic:Variable Name="ProductLinkInfo"/>">
               <Actinic:Variable Name="ProductLinkText"/>
            </a>
         </actinic:block>
         <actinic:block if="%3cactinic%3avariable%20name%3d%22DiscountDescriptionIsShownForProducts%22%20%2f%3e">      
            <br /><actinic:variable name="DiscountList" value="Standard Discount List" />
         </actinic:block>
         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e">
            <br />
            <span class="actrequired"><Actinic:Variable Name="OtherInfoPrompt"/></span><br />
            <span class="actrequired">
            <input type="text" 
					name="O_<actinic:variable Name="ProductID"/>" 
					size="4" 
					maxlength="3" 
					value=""
					onchange="this.form['v_<actinic:variable Name="ProductID" />_1'].selectedIndex = this.value.length;"
				/>
				</span><br />
         </actinic:block>
         
         <actinic:block if="%3cactinic%3avariable%20name%3d%22IsDatePromptShown%22%20%2f%3e">
            <br />
            <span class="actrequired"><actinic:variable name="DatePrompt"/></span><br />
            <actinic:variable name="DayList" /><actinic:variable name="MonthList" /><actinic:variable name="YearList" />
         </actinic:block>
         
         <actinic:variable name="ProductAlsoBoughtList" />
         
         <actinic:variable name="ProductRelatedProductsList" />
         </p>
	</div>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductFormUsed%22%20%2f%3e">
      </form>
</actinic:block>

Use this Layout for such products.

If no text is entered it will be replaced with "---" to stop the empty other info error.

PS if you want to see the Select field change (for testing), simply set its HTML For Name to something other than "Characters"