A couple of adjustments to create responsive site

[Brewhaus]

We are making headway in altering our website to be responsive, but are hitting a couple of issues to get everything working properly. If anyone can help it would be appreciated.

1- There is a slight gap between the header and body on the homepage (see dev.brewhaus.com). I have tried zeroing all margins and paddings 20px and under and that did not remove it, so it has to be somewhere else, and I cannot find it. Can anyone help on this?

2- The Featured Products Grid requires us to specify how many columns of items there will be. In order to be responsive we need this adapt to the width of the main panel. Is there a way to make the columns adapt to the space available so that they will drop to a second row if the width becomes too small to accommodate the items? I expect that we will be able to repeat this for the Category Grid pages.

I will do my best to record my steps in case anyone else would like to do the same for their site, and we are successful.

[mazhar]

1- There is a slight gap between the header and body on the homepage (see dev.brewhaus.com). I have tried zeroing all margins and paddings 20px and under and that did not remove it, so it has to be somewhere else, and I cannot find it. Can anyone help on this?

In your style.css file locate following styles

Code: Select all

#header {
    clear: both;
    display: block;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    max-width: 1000px;
    width: 100%;
}

and remove margin-bottom: 1em; from it. This should remove the gap.

[Brewhaus]

Thank you, Mazhar.

Do you know how we can make the Featured Items not a fixed number of columns, so that if the main panel is not as wide the items will use 2 columns, or 1 column, depending on the width of the panel?

[mazhar]

Featured grid is using DataList which generates table based structure. I don't think so what you are saying is possible with current configuration of control. You will need to update user control to make use of Repeater control and then generate list based HTML. Then using CSS styles you can make it drop to separate lines depending about available container width. Like you can locate code in ConLib/FeaturedProductsGrid.asx

Code: Select all

<asp:DataList ID="ProductList" runat="server" RepeatColumns="2" RepeatDirection="Horizontal" Width="100%" DataKeyField="ProductId" SkinID="ItemGrid">
                    <ItemTemplate>
	                    <div class="itemContainer">
                            <uc2:ProductItemDisplay ID="FeaturedItem" runat="server" Item='<%#(CommerceBuilder.Products.Product)Container.DataItem%>' ShowImage="true" ImageType="THUMBNAIL" ShowPrice="true" ShowSku="false" ShowManufacturer="true" ShowRating="true" ShowAddToCart="true"  />
					    </div>
                    </ItemTemplate>
                </asp:DataList>

and update it like

Code: Select all

<asp:Repeater ID="ProductList" runat="server">
                    <ItemTemplate>
	                    <div style="text-align:center; width:200px;float:left;">
                            <uc2:ProductItemDisplay ID="FeaturedItem" runat="server" Item='<%#(CommerceBuilder.Products.Product)Container.DataItem%>' ShowImage="true" ImageType="THUMBNAIL" ShowPrice="true" ShowSku="false" ShowManufacturer="true" ShowRating="true" ShowAddToCart="true"  />
					    </div>
                    </ItemTemplate>
                </asp:Repeater>

and then in ConLib/FeaturedProductsGrid.ascx.cs file locate

Code: Select all

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(this.Caption)) CaptionLabel.Text = this.Caption;
            ProductList.RepeatColumns = this.Columns;
            ProductList.ItemStyle.Width = new System.Web.UI.WebControls.Unit(100 / this.Columns, System.Web.UI.WebControls.UnitType.Percentage);
            var products = ProductDataSource.GetRandomFeaturedProducts(0, true, IncludeOutOfStockItems, this.Size);
            this.Visible = products != null && products.Count > 0;
            ProductList.DataSource = products;
            ProductList.DataBind();
        }

and update it like

Code: Select all

protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(this.Caption)) CaptionLabel.Text = this.Caption;
            var products = ProductDataSource.GetRandomFeaturedProducts(0, true, IncludeOutOfStockItems, this.Size);
            this.Visible = products != null && products.Count > 0;
            ProductList.DataSource = products;
            ProductList.DataBind();
        }

This will generate the HTML that can drop

[Brewhaus]

I updated the code as you suggested, but receive the following error:

[[ConLib:Custom/FeaturedProductsGrid]] e:\Websites\ACGold R8 Sites\Brewhaus\ConLib\Custom\FeaturedProductsGrid.ascx.cs(62): error CS1061: 'System.Web.UI.WebControls.Repeater' does not contain a definition for 'RepeatColumns' and no extension method 'RepeatColumns' accepting a first argument of type 'System.Web.UI.WebControls.Repeater' could be found (are you missing a using directive or an assembly reference?)

[mazhar]

Probably you are using WAP bulid for AbleCommerce. This will need you to recompile it after code change using Visual Studio and then upload bin/AbleCommerce.dll.

[jmestep]

Did you take these two lines out, like they are in the patched code?
ProductList.RepeatColumns = this.Columns;
ProductList.ItemStyle.Width = new System.Web.UI.WebControls.Unit(100 / this.Columns, System.Web.UI.WebControls.UnitType.Percentage);

[Brewhaus]

I have confirmed that I am using the WSP build.

I completely over-wrote the code as shown. My changed files are as follows:
FeaturedProductsGrid.ascx

Code: Select all

<%@ Control Language="C#" AutoEventWireup="true" Inherits="AbleCommerce.ConLib.FeaturedProductsGrid" EnableViewState="false" CodeFile="FeaturedProductsGrid.ascx.cs" %>
<%@ Register src="~/ConLib/Utility/ProductRatingStars.ascx" tagname="ProductRatingStars" tagprefix="uc1" %>
<%--
<conlib>
<summary>Displays featured products</summary>
<param name="IncludeOutOfStockItems" default="False">If true out of stock items are also included for display</param>

<param name="Size" default="6">Same as MaxItems</param>
<param name="MaxItems" default="6">The maximum number of featured products that can be shown.</param>
<param name="Columns" default="3">The number of columns to display in the grid.</param>
</conlib>
--%>
<%@ Register src="~/ConLib/Utility/ProductItemDisplay.ascx" tagname="ProductItemDisplay" tagprefix="uc2" %>

<div class="widget featuredProductsGrid">
    <div class="innerSection">

        <div class="content">
          <div class="featuredProductListing">
			<div class="itemListingContainer">			
                <asp:Repeater ID="ProductList" runat="server">
                    <ItemTemplate>
                       <div style="text-align:center; width:200px;float:left;">
                            <uc2:ProductItemDisplay ID="FeaturedItem" runat="server" Item='<%#(CommerceBuilder.Products.Product)Container.DataItem%>' ShowImage="true" ImageType="THUMBNAIL" ShowPrice="true" ShowSku="false" ShowManufacturer="true" ShowRating="true" ShowAddToCart="true"  />
                   </div>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </div>
    </div>
</div>
</div>

FeaturedProductsGrid.ascx.cs

Code: Select all

namespace AbleCommerce.ConLib
{
    using System;
    using System.ComponentModel;
    using System.Web.UI.WebControls.WebParts;
    using CommerceBuilder.Products;

    [Description("Displays featured products")]
    public partial class FeaturedProductsGrid : System.Web.UI.UserControl
    {
        private string _Caption;
        private int _Size = 3;
        private int _Columns = 3;
        private bool _includeOutOfStockItems = false;

        [Personalizable(), WebBrowsable()]
        [Browsable(true), DefaultValue(false)]
        [Description("If true out of stock items are also included for display")]
        public bool IncludeOutOfStockItems
        {
            get { return _includeOutOfStockItems; }
            set { _includeOutOfStockItems = value; }
        }

        [Personalizable(), WebBrowsable()]
        [Browsable(true), DefaultValue("Featured Products")]
        [Description("The caption / title of the control")]
        public string Caption
        {
            get { return _Caption; }
            set { _Caption = value; }
        }

        [Personalizable(), WebBrowsable()]
        [Browsable(true), DefaultValue(4)]
        [Description("Same as MaxItems")]
        public int Size
        {
            get { return _Size; }
            set { _Size = value; }
        }

        [Browsable(true), DefaultValue(4)]
        [Description("The maximum number of featured products that can be shown.")]
        public int MaxItems
        {
            get
            {
                if (_Size < 1) _Size = 1;
                return _Size;
            }
            set { _Size = value; }
        }

        [Personalizable(), WebBrowsable()]
        [Browsable(true), DefaultValue(2)]
        [Description("The number of columns to display in the grid.")]
        public int Columns
        {
            get
            {
                if (_Columns < 0) return ProductList.RepeatColumns;
                return _Columns;
            }
            set
            {
                _Columns = value;
                ProductList.RepeatColumns = Columns;
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(this.Caption)) CaptionLabel.Text = this.Caption;
            var products = ProductDataSource.GetRandomFeaturedProducts(0, true, IncludeOutOfStockItems, this.Size);
            this.Visible = products != null && products.Count > 0;
            ProductList.DataSource = products;
            ProductList.DataBind();
        }
    }
}

[jmestep]

I think you might need to take part of this out- where it says return ProductList.RepeatColumns

Code: Select all

 public int Columns
        {
            get
            {
                if (_Columns < 0) return ProductList.RepeatColumns;
                return _Columns;
            }
            set
            {
                _Columns = value;
                ProductList.RepeatColumns = Columns;
            }
        }

[mazhar]

I think you might need to take part of this out- where it says return ProductList.RepeatColumns

Code: Select all

 public int Columns
        {
            get
            {
                if (_Columns < 0) return ProductList.RepeatColumns;
                return _Columns;
            }
            set
            {
                _Columns = value;
                ProductList.RepeatColumns = Columns;
            }
        }

Yes! Thanks for pointing that out Judy! I missed that property is directly using RepeatColumn reference.

[Brewhaus]

I get a shorter and somewhat more descript error:

[[ConLib:Custom/FeaturedProductsGrid]] e:\Websites\ACGold R8 Sites\Brewhaus\ConLib\Custom\FeaturedProductsGrid.ascx.cs(55): error CS0592: Attribute 'Personalizable' is not valid on this declaration type. It is only valid on 'property, indexer' declarations.

Thoughts?

[mazhar]

I get a shorter and somewhat more descript error:

[[ConLib:Custom/FeaturedProductsGrid]] e:\Websites\ACGold R8 Sites\Brewhaus\ConLib\Custom\FeaturedProductsGrid.ascx.cs(55): error CS0592: Attribute 'Personalizable' is not valid on this declaration type. It is only valid on 'property, indexer' declarations.

Thoughts?

After removing the code Judy asked also remove remaining

Code: Select all

[Personalizable(), WebBrowsable()]
[Browsable(true), DefaultValue(2)]
[Description("The number of columns to display in the grid.")]

[Brewhaus]

Do we need to remove all instances of [Personalizable(), WebBrowsable()], or just this one? I tried removing just the instance that you show and receive a different error.

[mazhar]

Do we need to remove all instances of [Personalizable(), WebBrowsable()], or just this one? I tried removing just the instance that you show and receive a different error.

Just this one. Means remove complete property

Code: Select all

[Personalizable(), WebBrowsable()]
        [Browsable(true), DefaultValue(2)]
        [Description("The number of columns to display in the grid.")]
        public int Columns
        {
            get
            {
                if (_Columns < 0) return ProductList.RepeatColumns;
                return _Columns;
            }
            set
            {
                _Columns = value;
                ProductList.RepeatColumns = Columns;
            }
        }

[Brewhaus]

Maybe I have made a mistake, but I tried to follow the changes very carefully. Below is my FeaturedProductsGrid.ascx.cs file.

Code: Select all

namespace AbleCommerce.ConLib
{
    using System;
    using System.ComponentModel;
    using System.Web.UI.WebControls.WebParts;
    using CommerceBuilder.Products;

    [Description("Displays featured products")]
    public partial class FeaturedProductsGrid : System.Web.UI.UserControl
    {
        private string _Caption;
        private int _Size = 3;
        private int _Columns = 3;
        private bool _includeOutOfStockItems = false;

        [Personalizable(), WebBrowsable()]
        [Browsable(true), DefaultValue(false)]
        [Description("If true out of stock items are also included for display")]
        public bool IncludeOutOfStockItems
        {
            get { return _includeOutOfStockItems; }
            set { _includeOutOfStockItems = value; }
        }

        [Personalizable(), WebBrowsable()]
        [Browsable(true), DefaultValue("Featured Products")]
        [Description("The caption / title of the control")]
        public string Caption
        {
            get { return _Caption; }
            set { _Caption = value; }
        }

        [Personalizable(), WebBrowsable()]
        [Browsable(true), DefaultValue(4)]
        [Description("Same as MaxItems")]
        public int Size
        {
            get { return _Size; }
            set { _Size = value; }
        }

        [Browsable(true), DefaultValue(4)]
        [Description("The maximum number of featured products that can be shown.")]
        public int MaxItems
        {
            get
            {
                if (_Size < 1) _Size = 1;
                return _Size;
            }
            set { _Size = value; }
        }


        protected void Page_Load(object sender, EventArgs e)
        {
            if (!string.IsNullOrEmpty(this.Caption)) CaptionLabel.Text = this.Caption;
            var products = ProductDataSource.GetRandomFeaturedProducts(0, true, IncludeOutOfStockItems, this.Size);
            this.Visible = products != null && products.Count > 0;
            ProductList.DataSource = products;
            ProductList.DataBind();
        }
    }
}

With this I am getting the following error:
[[ConLib:Custom/FeaturedProductsGrid]] e:\Websites\ACGold R8 Sites\Brewhaus\ConLib\Custom\FeaturedProductsGrid.ascx.cs(58): error CS0103: The name 'CaptionLabel' does not exist in the current context

[Brewhaus]

I started with a fresh copy of FeaturedProductsGrid files and now the products are displaying, however, the text on the page after the Featured Products is to the right of the items, not below.

[mazhar]

I started with a fresh copy of FeaturedProductsGrid files and now the products are displaying, however, the text on the page after the Featured Products is to the right of the items, not below.

one more small change needed to drop the contents. In your ConLib/FeaturedProductsGrid.ascx file put following code at very end of the file. It should be the last div

Code: Select all

<div class="clear"></div>

[Brewhaus]

Thank you, Mazhar.

Will the changes be the same to CategoryGrid4 (replace the similar corresponding code above in CategoryGrid4.aspx and CategoryGrid4.aspx.cs)?

Also, how can we add a meta tag to the head section of the category and product pages? To work properly with mobile browsers, such as Android and iPhone, we need to add <meta name="viewport" content="width=device-width"> to the head. This can be done on each individual category and each individual product, but it would obviously be much better to have this automatically generated for each category and product.

[jmestep]

You know you are making progress when you change something and get a different error, at least that is what I tell myself.

[rmaweb]

Brewhaus how about adding that meta tag to the
\Layouts\Master and \Layouts\Fixed\Master files? Then it will be on all of your pages in your site.

[Brewhaus]

Judy- You're a glass is half-full kind of girl!

rmaweb- that worked perfectly- thank you!

Now, hopefully just these last couple of things and the site will be completely responsive and allow the full site to work properly across all platforms (making the full site available on mobile devices for better appearance and to avoid potential duplicate content created by running a separate mobile site):

It appears that CategoryGrid4 is set up slightly differently than the FeatureProductsGrid, but has a similar block that probably pulls the information for the product grid. Would we replace the similar code in CategoryGrid4 with the same code that we used to update the FeaturedProductsGrid files? I will give it a shot if I don't hear back- I can always reverse it, and it is just the DEV site.

The other question is if anyone knows how to make the Left Sidebar and Main Panel both reach to the bottom of the page. Out of the box these are both independent panels, and specifying the height as a percentage (either % or vh) does not work. It there is very little information in the main content panel then the left sidebar may be taller, leaving a gap between the bottom of the main panel and the footer. If there is a lot of information in the main panel (such as a category page with a large number of items), then the left sidebar will be shorter than the main panel, leaving a gap between it and the footer. For optimal appearance, both should really be the same height at all times.

[Brewhaus]

We nearly have the site updated to be responsive, but are still having a problem getting the left sidebar and body to match in length (eg. http://dev.brewhaus.com/Distillers-Yeas ... Yeast.aspx). Can anyone help with this? The site will obviously look better if the sidebar and body appear to be one piece, and both extend all the way to the footer.

[abradley]

You are probably going to have to do some javascript where you detect the height of the longer element of the two, then set the the shorter element to the same height as the longer. I dont remember specifics but I remember doing some research on this same problem and a little custom code was the way to go then.

[Brewhaus]

Unfortunately, that is a bit beyond me. I assume that it will take some adjustment to the left sidebar page and the CategoryGrid4 page? Can anyone help with this?