Extending the ProductVariant Edit UI

Hi.  I'm developing a plugin for nopCommerce 2.x that requires some additional properties associated with the ProductVariant.  I've followed all of the great how-to posts on how to create plugins.

My plugin:
- Has it's own data model, with a new domain entity, mapping, context, etc.
- Is one-to-one with a Product Variant, so there is an integer ProductVariantId in my entity/
- Has it's own service for working with the entity, like the examples show.
- All of this is working great

Because my entity properties are related to a ProductVariant, I want to be able to set these properties from a new tab on the ProductVariant edit screen.

- I created a view and embedded it in my plugin.
- I created a model for sending data to/from the view.

- I created a controller in my plugin that has two actions:
public ActionResult Configure(int productVariantId)
// Retrieves a view and model with the properties to display

[HttpPost]
public ActionResult Configure(MySettingsModel model)
// Saves the model back to the database


- I added a line to show the tab on the edit screen
in file /Presentation/Nop.Web/Administration/Views/ProductVariant/_CreateOrUpdate.cshtml

x.Add().Text("Custom Settings").LoadContentFrom("Configure", "../Plugins/MyPlugin", new { productVariantId = Model.Id });


Everything works as desired when clicking the tab, retrieving the data, and showing the view.


PROBLEM:  How do I save the data?  I had to load the tab content dynamically using LoadContentFrom because I need to go through my own controller.  If I tried treating my view as a partial view like the other tabs, I would have to go an modify a controller outside of my plugin - which I shouldn't have to do.

I can't have my view contain its own form, because it would become nested in the outer form that already exists on the page.

Basically, what I need is some javascript that I can put on my view such that when the "save" or "save and continue" buttons are clicked that when (or before) the main form is submitted, I have the model from my view sent seperately to my own controller.  I believe this might be possible with ajax/json posting, but the answer eludes me.

Can anyone offer advise of how to accomplish this?  Is using LoadContentFrom the appropriate method?  Or perhaps there is a better way?

Thanks,
Matt

Thanks for your reply in my thread. Do you have skype ??

I don't think it is possible to save an other partial view with the postback of the default view.
You could try to realize this with the help of some ajax, but then it's only possible for existing products.

2 options:

- Extend the product variant class (it's a partial class), but then the ProductVariantMapping class needs to be extended as well, and that's not possible.. Lots of problems in the end (I think)

- Create your own set like you did, and also create an own administration panel for this. I agree it's not the greatest solution in the world...

I would go for the second option.

I solved the problem.  Well, kindof.  It's a hack, but it works.



Instead of using LoadContentFrom, I went old-school and used an IFrame for the content on my tab:

x.Add().Text("Custom Settings").Content(string.Format("<iframe frameborder=\"0\" width=\"100%\" height=\"200\" src=\"../../../Plugins/MyPlugin/Configure/{0}\"></iframe>", Model.Id));


This lets me work with my view and controller just like they were on a separate page.  So now, my view has to have its own form to work properly.  Also, I need a layout that has all of the basic stuff required for the admin site but without the headers.  I went with the _AdminPopupLayout.cshtml - I'm not a popup, but its the same idea.

Now when saving, I need to link the main form submit to my iframe's form submit.  A little jQuery goes a long way:

$('#productvariant-form', window.parent.document).submit(function () {
   $.ajax({
            type: 'POST',
            data: $('#myplugin-form').serialize(),
            async: false
        });
});

And voila, I now have my own tab on the ProductVariant edit UI!  The same technique can probably be used on other existing edit forms.


Stephen, no I'm not on Skype, but I will zip this all up and post it to the community extensions download.  Look for a plugin called Pricing.PreciousMetals

-Matt