CSS modification to Product Template fields

[rmaweb]

Hello Everyone,

I am in the process of customizing AC Gold R6 to fit my site's needs. I would like to apply a css class to the product template fields in the product pages. So far, I am having no luck. Can someone show me what I need to edit in the BuyProductDialog.ascx.cs file to insert CSS classes to the TemplatesList_ItemDataBound class?

I tried
((TextBox)o).CssClass = "form-control";

and

o.CssClass = "form-control";

but when loading the product page, i dont see it in the source code.

Thank you for your time,
Ryan

[rmaweb]

*bump* still not having any luck on this.

[rmaweb]

Found out how to take care of this. Posting my solution in case it helps anybody else out.

It looks like ablecommerce does have a db field for the product template inputs for css. However, it just isn't used in the catalog either in the admin section or the frontend. So here's how to make use of that existing db field.

In Admin -> Products -> ProductTemplates -> AddInputField.aspx

Find:

Code: Select all

<tr id="trChoices" runat="server" visible="false">

Add Before:

Code: Select all

                    <tr>
                        <th>
                            <asp:Label ID="ControlCssClassLabel" runat="server" Text="Frontend CSS Class(s):" SkinID="FieldHeader"></asp:Label><br />
                        </th>
                        <td>
                            <asp:TextBox ID="ControlCssClass" runat="server" Text="" Columns="20" MaxLength="100"></asp:TextBox>
                            <asp:RegularExpressionValidator ID="ControlCssClassValidator" runat="server" ErrorMessage="Maximum length for CSS Class is 100 characters." Text="*" ControlToValidate="Name" ValidationExpression=".{0,100}"  ></asp:RegularExpressionValidator>
                        </td>
                    </tr>

In Admin -> Products -> ProductTemplates -> AddInputField.aspx.cs

Find:

Code: Select all

input.UseShopBy = trUseShopBy.Visible ? UseShopBy.Checked : false;

Add After:

Code: Select all

input.ControlCssClass = ControlCssClass.Text;

In Admin -> Products -> ProductTemplates -> EditInputField.aspx

Find:

Code: Select all

<tr id="trChoices" runat="server" visible="false">

Add Before:

Code: Select all

                    <tr>
                        <th>
                            <asp:Label ID="ControlCssClassLabel" runat="server" Text="Frontend CSS Class(s):" SkinID="FieldHeader"></asp:Label><br />
                        </th>
                        <td>
                            <asp:TextBox ID="ControlCssClass" runat="server" Text="" Columns="20" MaxLength="100"></asp:TextBox>
                            <asp:RegularExpressionValidator ID="ControlCssClassValidator" runat="server" ErrorMessage="Maximum length for CSS Class is 100 characters." Text="*" ControlToValidate="Name" ValidationExpression=".{0,100}"  ></asp:RegularExpressionValidator>
                        </td>
                    </tr>

In Admin -> Products -> ProductTemplates -> EditInputField.aspx.cs

Find:

Code: Select all

if (_InputField.MaxLength > 0) MaxLength.Text = _InputField.MaxLength.ToString();

Add After:

Code: Select all

if (!string.IsNullOrEmpty(_InputField.ControlCssClass)) ControlCssClass.Text = _InputField.ControlCssClass;

Find:

Code: Select all

_InputField.Save();

Add Before:

Code: Select all

_InputField.ControlCssClass = ControlCssClass.Text;

In ConLib -> BuyProductDialog.ascx.cs

Find:

Code: Select all

WebControl o = input.GetControl();
                    if (o != null)
                    {

Add After:

Code: Select all

o.CssClass = input.ControlCssClass;