General Discussion

Hello-

I am wondering if anyone else has needed to modify the way that products with multiple variants are displayed on the catalog product pages.

When I have a product that is available in 4 different colors, and each of those colors is available in 12 different sizes, and I set the product to use the VariantsinGrid template...the length of the page is REDICULOUS due to the amount of space that each variant takes up.

Ideally, I'd like to use the SingleVariant template because I like where the add item button is located on the page...but I'd also like to display two drop down boxes..one for color and one for size...with all of the possible options in those drop downs.

Does something like this already exist?...Is it even possible to achieve?... If so....where/how??

Thanks!
Steve

I have created a version of this similar to your needs...I can post the solution here if you like.  What version of nopCommerce are you using?

Hello-

I'm using Nopcommerce version 2.65, with version 2.65 of the 7spikes Electronics theme.

I found a post on the nopcommerce forum which showed me how to edit the ProductTemplate.VariantsInGrid.cshtml and the _ProductVariantAddToCart.cshtml
views to display the variants in a drop down box, and I relocated it within the layout to appear just below the short description... and that works great...however...

On the Electronics theme, all the classes for ".add-to-cart" seem to have been changed to ".add-info", and as a result, my Add item and Wish list buttons do not appear at all! I think I've changed all the references in those views to refer to the .add-info div class, but still no joy....very frustrating...
http://64.239.149.249/p/342/3pp-toe-loops


Yes, I'd be interested in any code that works with the electronics theme!

Thanks,
Steve

OK....stop teasing me....can you please post your solution?!?

Steve

Hey 7spikes guys.....
Just out of curiosity...why did you guys change that class name to "add-info" from "add-to-cart" ???

This is very confusing to noobs like me.

Hi embryo,

There is no particular reason for the name of the class. I suppose that due to the fact that some of the view have been started from scratch and that is why the css class is different than the default one. I am not sure how this can be a problem as the views are open to modification and the css file as well, but we have changed the class in the views and in the styles.css file in the latest version 2.7.

So now if you download the theme again you should see the new changes.

Hope that helps!

Hi Guys,

Long time talk to you, I imagine I didn't have time to screwup :-).. Finaly I am leaving Arvixe for the same reason as you. They closed my web site last weekend because I was using 250 meg ram.. I fight a bit and I got it reopen. Now I am testing VPS and it is going soso for  the moment. I can't reach the speed I am expecting, but it is a matter of setup. I will host my web site at the office sooner or later and My own server..

I am writing because I have two issues  and the first one, I tried to find the CSS to fix it and I wasn't lucky.. didn't find the right parameters to put. In fact, if you looking at my main page, you'll see the thumbs don't have a the same size and I am wondering what I did ..again !!

Also, that's probably a migration problem with my db, but in the tab review I always have the error message the file is not found (I have my error page appearing in the tab. I looked at the logs and the only things I found was :Resource string (sevenspikes.nopquicktabs.client.tabs.couldnotloadtaberrormessage) is not found. Language ID = That generally can be fix easy by importing the xml file, but I wonder if it is something to do with my migration. I am testing the version 2.70 (much better) on the address :http://66.147.232.131:8080

Bet regards and merry X'mas to all of u

BTW: very very nice your new site.. I like it very much

Yves

Hi Yves,

We are very happy that you like our new website.

We found the problem with the css. You need to edit the styles.css file for the Electronics theme. Go to line 2125 and edit

.home-page-product-grid .item .picture img {
width: 150px;
}

You need to remove the width property.

As for the reviews tab. You need to update a view and  a .js file of the Quick Tabs plugin.
Please read the following post for more info http://www.nop-templates.com/boards/topic/338/minimum-files-to-update-to-get-rid-of-bug#1734

We wish you luck with your new hosting, merry christmas and a happy new year.

Ivan Stoyanov

UPDATE:
I've got the drop down appearing on products that do have more than one variant, but I'm trying to code the page so that products with only one variant are displayed with just the quantity label/input and add item button..and any tier pricing if set up for that product.

Examples here:

This is a product with more than one variant - drop down appears "Available Options" ...when an option is chosen, the add item button and quantity input appear, just like i want...

this is a product with only one variant -  grid appears with tier pricing, but WHERE is the quantity input and Add Item button??

My code:
ProductTemplate.VariantsInGrid
changed:

<div class="product-variant-list">         @foreach (var variant in Model.ProductVariantModels)            {               dataDictVariant.TemplateInfo.HtmlFieldPrefix = string.Format("variant_{0}", variant.Id);               @Html.Partial("_ProductVariantLine", variant, dataDictVariant)            }   </div>

to:

@if  (Model.ProductVariantModels.Count > 1)
{
         /*display drop down with variants*/

<div class="product-variant-list">
   @Html.DropDownList("ddlProductVariants",        new SelectList((from variant in Model.ProductVariantModels                       select new { IdValue = variant.Id, TextValue 

= variant.Name + " - " + variant.ProductVariantPrice.Price }),"IdValue", "TextValue"),        "Available Options",        new { @onchange = "$('div.add-to-cart').hide();var 

e=document.getElementById('ddlProductVariants');var idValue = e.options[e.selectedIndex].value;$('div[id=addtocart_'+idValue+']').show();" })   @foreach (var variant in 

Model.ProductVariantModels)       {           var dataDictAddToCart = new ViewDataDictionary();           dataDictAddToCart.TemplateInfo.HtmlFieldPrefix = 

string.Format("addtocart_{0}", variant.Id);           @Html.Partial("_ProductVariantAddToCart", variant.AddToCart, dataDictAddToCart)       }   </div>

}
    else
                /* just display quantity input and add item button*/
{
        
           <div class="product-variant-list">
                @foreach (var variant in Model.ProductVariantModels)
                {
                    var dataDictVariant = new ViewDataDictionary();
                    dataDictVariant.TemplateInfo.HtmlFieldPrefix = string.Format("variant_{0}", variant.Id);
                    @Html.Partial("_ProductVariantLine", variant, dataDictVariant)
                }
            </div>
}

...and I moved it up the page so that it would appear to the right of the product photo and underneath the short description...
_ProductVariantAddToCart.cshtml
changed:

<div class="add-to-cart">

to:

<div class="add-to-cart" id="@string.Format("addtocart_{0}", Model.ProductVariantId)" style="display: none">

Hi Guys,

Thanks for the help, It is working very nice.. I'll be on the new server on December 23