Contact Us in Product Detail Page

Hi everyone,
I am making changes on 4.0 and I want to add contact us section under product detail page.

Since we use view components instead of partial views couldn't figure out how to do it since we cannot make http post in components.

In 3.80 i was just adding it in controller, adding my contact us partial view and use @Html.Action("ContactUs", "ControllerName".

How can I do it in 4.0?

Hope this helps...

Not for product detail page but for custom pages...

In your Controller:

1- Add following to #region Fields

        private readonly ICommonModelFactory _commonModelFactory;
        private readonly ILocalizationService _localizationService;
        private readonly IWorkContext _workContext;
        private readonly ICustomerActivityService _customerActivityService;
        private readonly IWorkflowMessageService _workflowMessageService;
        private readonly CommonSettings _commonSettings;
        private readonly CaptchaSettings _captchaSettings;

2- Add following to #region Constructors

            ICommonModelFactory commonModelFactory,
            ILocalizationService localizationService,
            IWorkContext workContext,
            ICustomerActivityService customerActivityService,
            IWorkflowMessageService workflowMessageService,
            CommonSettings commonSettings,
            CaptchaSettings captchaSettings

and

            this._commonModelFactory = commonModelFactory;
            this._localizationService = localizationService;
            this._workContext = workContext;
            this._customerActivityService = customerActivityService;
            this._workflowMessageService = workflowMessageService;
            this._commonSettings = commonSettings;
            this._captchaSettings = captchaSettings;

3- Add following regions

#region Tuple Helpers
        private ContactUsModel CUModel()
        {

            var model = new ContactUsModel();
            return model;
        }

        private XYZModel XModel()
        {

            var model = new XYZModel();
            return model;
        }
#endregion

#region Contact Us Section

        //contact us page
        [HttpsRequirement(SslRequirement.Yes)]
        //available even when a store is closed
        [CheckAccessClosedStore(true)]
        public virtual IActionResult ContactUs()
        {
            var model = new ContactUsModel();
            model = _commonModelFactory.PrepareContactUsModel(model, false);
            return PartialView(model);
        }

        [HttpPost, ActionName("ContactUs")]
        [PublicAntiForgery]
        [ValidateCaptcha]
        //available even when a store is closed
        [CheckAccessClosedStore(true)]
        public virtual IActionResult ContactUsSend(ContactUsModel model, bool captchaValid)
        {
            //validate CAPTCHA
            if (_captchaSettings.Enabled && _captchaSettings.ShowOnContactUsPage && !captchaValid)
            {
                ModelState.AddModelError("", _captchaSettings.GetWrongCaptchaMessage(_localizationService));
            }

            model = _commonModelFactory.PrepareContactUsModel(model, true);

            if (ModelState.IsValid)
            {
                var subject = _commonSettings.SubjectFieldOnContactUsForm ? model.Subject : null;
                var body = Core.Html.HtmlHelper.FormatText(model.Enquiry, false, true, false, false, false, false);

                _workflowMessageService.SendContactUsMessage(_workContext.WorkingLanguage.Id,
                    model.Email.Trim(), model.FullName, subject, body);

                model.SuccessfullySent = true;
                model.Result = _localizationService.GetResource("ContactUs.YourEnquiryHasBeenSent");

                //activity log
                _customerActivityService.InsertActivity("PublicStore.ContactUs", _localizationService.GetResource("ActivityLog.PublicStore.ContactUs"));

                return PartialView(model);
            }

            return PartialView(model);
        }

        #endregion

4- Change your IActionResult Index as

public IActionResult Index()
        {
            var model = new Tuple<ContactUsModel, XYZModel> (CUModel(), XModel());
            return View(model);
        }

5- Add using directives

6- Add Partial View for 'public virtual IActionResult ContactUs()'

7- In your ContactUs partial view add following;

@model ContactUsModel
@{
    //page class
    Html.AppendPageCssClassParts("html-contact-page");
}
<div class="page contact-page">
    <div class="page-title">
        <h1>@T("PageTitle.ContactUs")</h1>
    </div>
    <div class="page-body">
        @await Component.InvokeAsync("TopicBlock", new { systemName = "ContactUs" })
        @await Component.InvokeAsync("Widget", new { widgetZone = "contactus_top" })
        @if (Model.SuccessfullySent)
        {
            <div class="result">
                @Model.Result
            </div>
        }
        else
        {
            <form asp-route="ContactUs" method="post">
                <div asp-validation-summary="ModelOnly" class="message-error"></div>
                <div class="fieldset">
                    <div class="form-fields">
                        <div class="inputs">
                            <label asp-for="FullName" asp-postfix=":"></label>
                            <input asp-for="FullName" placeholder="@T("ContactUs.FullName.Hint")" class="fullname" />
                            <nop-required />
                            <span asp-validation-for="FullName"></span>
                        </div>
                        <div class="inputs">
                            <label asp-for="Email" asp-postfix=":"></label>
                            <input asp-for="Email" placeholder="@T("ContactUs.Email.Hint")" class="email" />
                            <nop-required />
                            <span asp-validation-for="Email"></span>
                        </div>
                        @if (Model.SubjectEnabled)
                        {
                            <div class="inputs">
                                <label asp-for="Subject" asp-postfix=":"></label>
                                <input asp-for="Subject" placeholder="@T("ContactUs.Subject.Hint")" class="subject" />
                                <nop-required />
                                <span asp-validation-for="Subject"></span>
                            </div>
                        }
                        <div class="inputs">
                            <label asp-for="Enquiry" asp-postfix=":"></label>
                            <textarea asp-for="Enquiry" placeholder="@T("ContactUs.Enquiry.Hint")" class="enquiry"></textarea>
                            <nop-required />
                            <span asp-validation-for="Enquiry"></span>
                        </div>
                        @if (Model.DisplayCaptcha)
                        {
                            <div class="captcha-box">
                                <nop-captcha />
                            </div>
                        }
                    </div>
                </div>
                <div class="buttons">
                    <input type="submit" name="send-email" class="button-1 contact-us-button" value="@T("ContactUs.Button")" />
                </div>
            </form>
        }
        @await Component.InvokeAsync("Widget", new { widgetZone = "contactus_bottom" })
    </div>
</div>

8- In your Index.cshtml

change @model as

@model Tuple<ContactUsModel, XYZModel>

9- Add your contact us partial page

@await Html.PartialAsync("ContactUs", Model.Item1)

10- If you have any previous model items used in razor view, make sure you change them.
i.e. Model.abc to Model.Item2.abc

Enjoy ContactUs section on your page...

on Tuple Helpers please change ContactUsModel as

private ContactUsModel CUModel()
        {
            var model = new ContactUsModel();
            model = _commonModelFactory.PrepareContactUsModel(model, false);
            return model;
        }

Appreciate with your contribution.

Thank you man..!!