Display Product 360 HTML in the _ProductDetailsPictures view

Posted: April 11, 2018 at 3:28 PM Quote #203058
Hi,

I have a requirement to display a product 360 view of my product on our Product details page.  I want to display it in the Product Details Pictures view so that it becomes one more "photo" of the product.  The product 360 is simply an iframe that comes from an online service.

I've already taken care of displaying the thumbnail but I cannot get the partial view to be displayed; I get a file not found error.  I guess the problem I have is in the way I'm calling the link...

The code that displays the the thumbnail and  photo is like this:


@if (!String.IsNullOrEmpty(Model.SpinVideoId))
{
<a class="thumb-popup-link" href="/Themes/Tiffany/Views/Product/_spin.cshtml" title="Product 360 Image">
<img src="~/Content/Images/360img.jpg" alt="Product 360 Image" title="Product 360 Image" />
</a>
}


This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: April 12, 2018 at 12:32 AM Quote #203062
Where do you get the file not found error? Check the view template path or the path to this iframe.
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Pls up-vote the answer, if it helps you! :)

nopAccelerate - Faster, Reliable & Scalable nopCommerce

http://www.nopAccelerate.com | http://www.xcellence-it.com | http://shop.xcellence-it.com

Need any professional assistance? Drop us your requirements on sales(at)nopaccelerate.com
Posted: April 12, 2018 at 8:00 AM Quote #203096
Once I click the thumbnail to open my view, I get the error in the screenshot below.  Is it that the modal popup will only display image files?  I think the error is in how I'm calling it.  On a different section, I called @HTML.Partial("_spin") and that worked, so how do I call my view from the <a> tag source field? (i.e. <a src=~/themes/.../.../_spin.cshtml">)?

This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Posted: April 12, 2018 at 10:29 AM Quote #203110
I figured out one way to make it work.  I created an action method in the Product controller that takes the video Id as a string parameter.

Then I call the view and pass my id as the model.

Another problem I found was that the MagnificPopup script had a type property set to image and that did not let my iframe display, I simply changed the type to iframe and styled it to fit.  Evidently the iframe type has no problem displaying images also.

Here is the updated code for the thumbnail image:

<a class="thumb-popup-link" href="@Url.Action("spin", "Product", new { SpinVideoId = @Model.SpinVideoId })" title="Product 360 Image">
<img src="~/Content/Images/360img.jpg" alt="Product 360 Image" title="Product 360 Image" />
</a>


I hope this helps others!
This post/answer is useful
0
This post/answer is not useful

Please login or register
to vote for this post.

(click on this box to dismiss)
Premium support services
  • Dedicated premium support services provided by core developers are intended for persons who run mission critical websites, work on projects with tight deadlines, or want to get dedicated support.
Professional services
  • Want to open a new store? Want to take your store to the next level? Need a custom extension? We can customize nopCommerce to fit your store perfectly. Request a quote to get started.
eCommerce CONFERENCE 2018
Learn more