Difference between revisions of "Changing additional pictures display on mouse over"

From AbleCommerce Wiki
Jump to: navigation, search
(New page: First of all add a new ConLib control, for example i say it '''CustomProductSwatches'''. Then add it to my Product Page scriptlet '''ShowProduct1''' in the following way <code> <pre> #if(...)
 
 
Line 81: Line 81:
  
 
and you are done with your new conlib control which will change and display the product images on mouse over.
 
and you are done with your new conlib control which will change and display the product images on mouse over.
 +
 +
[[Category:AbleCommerce 7]]

Latest revision as of 11:07, 15 August 2013

First of all add a new ConLib control, for example i say it CustomProductSwatches. Then add it to my Product Page scriptlet ShowProduct1 in the following way 

#if($Product.Images.Count > 0)
<td style="border-top:solid 1px gray; border-right:solid 1px gray; padding:5px;">
[[ConLib:CustomProductSwatches]]
#else
<td style="border-top:none; border-right:solid 1px gray; padding:0px;">
#end

The control's files will be as bellow 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CustomProductSwatches.ascx.cs" Inherits="ConLib_CustomProductSwatches" %>
<script type="text/javascript">
    function changeImage(urlpath)
    {
        t = urlpath.length;
        urlpath = urlpath.substr(2,t-2);
        document.getElementById("ProductImage").src = urlpath;
    }
</script>
<ajax:UpdatePanel ID="DescriptionAjax" runat="server">
    <ContentTemplate>
        <div>
            <asp:Repeater runat="server" ID="ImageList">
                <ItemTemplate>
                    <span onmouseover="changeImage('<%# Eval("ImagePath") %>');"> 
                    <asp:Image runat="server" ID="DisplayImage" ImageUrl='<%# Eval("ImagePath") %>' Width="50" Height="50" BorderWidth="0" />
                    </span>
                </ItemTemplate>
            </asp:Repeater>
        </div>
    </ContentTemplate>
</ajax:UpdatePanel>


using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using CommerceBuilder.Products;
using CommerceBuilder.Utility;

public partial class ConLib_CustomProductSwatches : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ImagePath", typeof(String));
        int _ProductId = AlwaysConvert.ToInt(Request.QueryString["ProductId"]);
        Product _Product = ProductDataSource.Load(_ProductId);
        if (_Product != null)
        {
            ProductImageCollection images = _Product.Images;
            dt.Rows.Add(new Object[] { AlwaysConvert.ToString(_Product.ImageUrl) });
            foreach (ProductImage theimage in images)
            {
                dt.Rows.Add(new Object[] { AlwaysConvert.ToString(theimage.ImageUrl) });
            }
            ImageList.DataSource = dt;
            ImageList.DataBind();
        }
    }
}

and you are done with your new conlib control which will change and display the product images on mouse over.

Retrieved from "http://wiki.ablecommerce.com/index.php?title=Changing_additional_pictures_display_on_mouse_over&oldid=1157"