How to show Product Details page in a popup without its layout?

Howdy.

We have a popup button that pops up cooool. Right if you don't mind me asking? On that page there is the detail's button how would I go about connecting that button to pop up... As with the test it coming up with a generic server error as it can't the sever etc.. Do I lace the code within that spefic button if you understand what I mean??

Thanks again. Its coming :)

Richard.

In that same _ProductBox.cshtml file, there is the details button.  You just have to change the onclick to what you used for the other button.

Within that page, there is this peice of code

  <div class="buttons">
            <input type="button" value="@T("Products.Details")" class="productlistproductdetailbutton" onclick="setLocation('@Url.RouteUrl("Product", new { productId = Model.Id, SeName = Model.SeName })')" />

I changed it to this

<div class="buttons">
            <input type="button" value="@T("Products.Details")" class="productlistproductdetailbutton" onclick="javascript:OpenWindow('@Url.RouteUrl("ProductValueCreatePopup", new { productId = Model.Id, SeName = Model.SeName })')"Product-form" }))', 800, 400, true); return false;" class="t-button" />

I was hit with an error when I tried to display my products from the category display that was before I got to my product view??

All help would be grand

A route named 'ProductValueCreatePopup' could not be found in the route collection.
Parameter name: name

</div>
Line 24:         <div class="buttons">
Line 25:             <input type="button" value="@T("Products.Details")" class="productlistproductdetailbutton" onclick="javascript:OpenWindow('@Url.RouteUrl("ProductValueCreatePopup", new { productId = Model.Id, SeName = Model.SeName })')"Product-form" }))', 800, 400, true); return false;" class="t-button" />
Line 26:             @if (!Model.ProductPrice.DisableBuyButton)
Line 27:             {

Thank you

Richard

Yes I have it popping out on the correct page now I need to only display the  <div class = products-page>

Any quick work around's anyone????

Thank you

Richard

Hi Andy,

Congrates btw for your MVP status. I hoping you would be able to advise me again on this thread concerning my pop up.

I have had more time to clean my work up. I have created a public action in the product controller as follows.

 public ActionResult On_click_Javascript()
        {
            return PartialView();
        }

[HttpPost, ActionName("Productpopup")]
public ActionResult Productpopup(int productId)
        {
            var product = _productService.GetProductById(productId);
            if (product == null || product.Deleted || !product.Published)
                return RedirectToAction("Index", "Home");

            //prepare the model
            var model = PrepareProductDetailsPageModel(product);

            //CCCStockCode
            model.CCCStockCode = product.CCCStockCode;

            //CCCPack
            model.CCCPack = product.CCCPack;

            //CCCLane
            model.CCCLane = product.CCCLane;

            //CCCRRP
            model.CCCWholesalePrice = product.CCCWholesalePrice;

            ////CCCRetailPrice
            model.CCCRetailPrice = product.CCCRetailPrice;

            //CCCMRP
            model.CCCMRP = product.CCCMRP;

            //CCCQTYINSTOCK
            model.CCCQTYINSTOCK = product.CCCQTYINSTOCK;

            //CCCBay
            model.CCCBay = product.CCCBay;

            //CCCSourceBarcode
            model.CCCSourceBarcode = product.CCCSourceBarcode;

            //CCCRetailBarcode
            model.CCCRetailBarcode = product.CCCRetailBarcode;

            //CCCWeight
            model.CCCWeight = product.CCCWeight;

            //CCCQTYPacksPerLayer
            model.CCCQTYPacksPerLayer = product.CCCQTYPacksPerLayer;

            //CCCQTYLayersPerPallet
            model.CCCQTYLayersPerPallet = product.CCCQTYLayersPerPallet;

            //CCCQTYLayersPerPallet
            model.CCCQTYTotalPerPallet = product.CCCQTYTotalPerPallet;
            
            return PartialView();
        }

From this I have generated a partial view to display the a form whilst using the RootPopup provide by the Nop team Thank you!! .

@model Nop.Web.Models.Catalog.ProductModel
@{
    Layout = "~/Views/Shared/_RootPopup.cshtml";        
}

  @using (Html.BeginRouteForm("Productpopup", new { productId = Model.Id, SeName = Model.SeName }, FormMethod.Post, new { enctype = "multipart/form-data" }))
  {
      <div class="product-popup">
            <div class="product-details-info">
                <!--product pictures-->
                @Html.Partial("_ProductDetailsPictures", Model)
                <div class="overview">
                    <h1 class="productname">
                     @Model.Name
                    </h1>
                    <div class="shortdescription">
                     @Html.Raw(Model.ShortDescription)
                    </div>
                    
                    <div class="StockCode">
                     @Model.CCCStockCode 
                    </div>
                     
                    <div class="WholesalePrice">
                    @Model.CCCWholesalePrice
                    </div>

                    <div class="Pack">
                    @Model.CCCPack
                    </div>

                    <div class="Weight">
                    @Model.CCCWeight
                    </div>

                    <div class="RetailPrice">
                    @Model.CCCRetailPrice
                    </div>

                    <div class="RetailBarcode">
                    @Model.CCCRetailBarcode
                    </div>

                    <div class="SourceBarcode">
                    @Model.CCCSourceBarcode
                    </div>

                    <div class="PacksPerLayer">
                    @Model.CCCQTYPacksPerLayer
                    </div>

                    <div class="LayersPerPallet">
                    @Model.CCCQTYLayersPerPallet
                    </div>

                    <div class="TotalPerPallet">
                    @Model.CCCQTYTotalPerPallet
                    </div>
                  
                  </div>
                
                </div>
             
             </div>

  }

I am using the the image in the _productbox to onclick create the popup displaying all data.

@model Nop.Web.Models.Catalog.ProductModel
<div class="product-item">
    <h2 class="product-title">
        <a href="@Url.RouteUrl("Product", new { productId = Model.Id, SeName = Model.SeName })">@Model.Name</a>
    </h2>
    <div class="picture">
        <a href="@Url.RouteUrl("Product", new { productId = Model.Id, SeName = Model.SeName })" title="@Model.DefaultPictureModel.Title">
            <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
        </a>
    </div>

The code I have placed in bold I would like to onclick to the partial popup view - I have change the code to the following

 <div class="picture">
    <a href= onclick= @Url.Action("Productpopup", new { Product = Model, formId = "Productpopup" }) 800, 400, true); return=false;" class="product-popup" 
     title="@Model.DefaultPictureModel.Title">
    <img alt="@Model.DefaultPictureModel.AlternateText" src="@Model.DefaultPictureModel.ImageUrl" title="@Model.DefaultPictureModel.Title" />
    </a>
    </div>

but for some reason I don't know it doesnt route to the partial view - and remains on this Url http://localhost:2640/c/1/onclick=

I have updated the route infrastructure as follows too.

routes.MapLocalizedRoute("Productpopup",
                           "p/{productId}/{SeName}",
                           new { controller = "Catalog", action = "Productpopup", SeName = UrlParameter.Optional },
                           new { productId = @"\d+" },
                           new[] { "Nop.Web.Controllers" });

I hope this make sense and as always all help would be highly regarded.

Kind regards

Richard.......

I hate to dig up old topics, but I'm in the same boat. I really need to get a popup with some dynamic information for each of our product variants. The description on the product variant is a bit limiting, so this is the best course of action. Using what I see here, I have gotten the popup to work, but it returns nothing unless I add something that is already defined (like "search"). I'm quite new to the world of css and asp.net mvc. I'm an old, class asp guy and my dirty solution would involve breaking lots of asp.net mvc rules. I'd love to have a nice solution that pulls up a simple list with the two or three dynamic fields needed.

I'm batting my head on this one.

Nop 2.65

Can I ask what form you are trying to display could you describe it to me more fully??

I created a new ProductTemplate and inserted it into the Database and mapped all my Products to that Id. I had a new View page where I used the Product Model. If this helps further :)


R

Sorry, it was late last night or I would have been a bit more descriptive. :)

I took the code I found on the first page here and now I can get my popup, but that is about it.

What I want to do is have a popup that shows some static text (well, static across a number of product variants) as well as some additional details that I'm pulling from the database. Essentially, it would be pulling:
Category Name
Product Name
Variant Name
Variant Price
Plus some static information and a link to a terms/conditions page. Better formatted than that of course!

Okay, Let me start by saying I'm currently working with BTT Business to trade only. I have cut all ProductVariants out as we just has a list of Products I dont use Attributes  etc(Yet) . Price Products Vast Qty's Money :D I can try and help.

There is probely a more professional way of doing this I have to say I'm a junior. But I would test the following.
(Btw I don't know if you have access to the source code and the db - where you are hosting or if you are developing in Visual Studio)

If Visual Studio

.1 - I would create a new ProductTemplate View  in your Catalog View Dircetory in NopWeb - ProductTemplate.(Name).
.2 - I would add the record to the Database in dbo.ProductTemplate.
.2a - You can then set all or any products to this view either directly in the database(Using an update statement) or in Nop Admin (Indivdualy) Depentant on your need.

Leaving the orignal Templates intact.

3.Right this is something I just quickly knocked up. Highlighted in Bold are Certain details that you are pulling Category Name I've used the product breadcrumb. It maybe messy but its a starting point and I hope it helps you will need to work on the CSS :D

@model ProductDetailsModel
@using Nop.Core;
@using Nop.Core.Domain.Common;
@using Nop.Core.Infrastructure;
@using Nop.Web;
@using Nop.Web.Framework.UI;
@using Nop.Web.Models.Catalog;
@{
    Layout = "~/Views/Shared/_RootPopup.cshtml";

    //title, meta
    Html.AddTitleParts(!String.IsNullOrEmpty(Model.MetaTitle) ? Model.MetaTitle : Model.Name);
    Html.AddMetaDescriptionParts(Model.MetaDescription);
    Html.AddMetaKeywordParts(Model.MetaKeywords);

    var canonicalUrlsEnabled = EngineContext.Current.Resolve<SeoSettings>().CanonicalUrlsEnabled;
    if (canonicalUrlsEnabled)
    {
        var productUrl = Url.RouteUrl("Product", new { productId = Model.Id, SeName = Model.SeName }, this.Request.Url.Scheme);
        Html.AddCanonicalUrlParts(productUrl);
    }
}
@{
    var defaultProductVariant = Model.ProductVariantModels.Count > 0 ? Model.ProductVariantModels[0] : null;
}
<!--product breadcrumb-->
@Html.Action("ProductBreadcrumb", "Catalog", new { productId = Model.Id })

<div class="product-details-page">
    @using (Html.BeginRouteForm("Product", new { productId = Model.Id, SeName = Model.SeName }, FormMethod.Post, new { id = "product-details-form" }))
    {
        <div class="product-essential">
            <div class="product-details-info">
                @Html.Action("WidgetsByZone", "Widget", new { widgetZone = "productdetails_before_pictures" })
                <!--product pictures-->
                @Html.Partial("_ProductDetailsPictures", Model)
                @Html.Action("WidgetsByZone", "Widget", new { widgetZone = "productdetails_after_pictures" })
                <div class="overview">
                    <h1 class="productname">
                       @Model.Name
                    </h1>
                    </div>
                    <div class="shortdescription">
                    @Html.Action("WidgetsByZone", "Widget", new { widgetZone = "productdetails_overview_top" })
                  @{
               var dataDictPrice = new ViewDataDictionary();
               dataDictPrice.TemplateInfo.HtmlFieldPrefix = string.Format("price_{0}", defaultProductVariant.Id);
                        @Html.Partial("_ProductVariantPrice", defaultProductVariant.ProductVariantPrice, dataDictPrice)
                   } 
               </div>
               </div>
          
    </div>
        }
 </div>

Route.... to the Terms of use // don't know you may require a Javascript function to close the popup and route back to that  page.

I hope this helps

Richard

Thanks Richard, I will take a look at this. I appreciate the help.