NopRoot Bootstrap theme (Free)

BrainStation-23 wrote:

Thanks BrainStation.

I will now be using the NOPROOT theme.

Your work and the work of BrainStation is very much appreciated along with all of the other contributors to the nopCommerce effort.  I got a lot of answers to problems from the people here.  It has allowed me to learn and produce.

Thanks,
Tony

BrainStation

I'm having a problem displaying a Google map on the contact us page.  I was using the DefaultClean theme and it worked as you can see here: http://auto-images-llc.com/contactus

I tried to include my changes into your version of the NopRoot Contactus view page and it is not displaying the map, but it does display the labels and fields.

When I click the Contact us link while debugging, it returns to my VS2013 IDE with an error that says:
"Unhandled exception at line 45, column 1928 in https://maps.gstatic.com/maps-api-v3/api/js/20/6/main.js
0x800a138f - JavaScript runtime error: Unable to get property 'offsetWidth' of undefined or null reference"

If I click "Continue" it returns to the contact us page, but the map is not displayed.

Also, the map does not show up in Firefox and Google Chrome, but those browsers do not give the javascript error.

Here is my version of the ContactUs.cshtml from the NopRoot theme:

Any help that you can provide to resolve this issue would be gratefully appreciated.

Thanks,
Tony

@model ContactUsModel
@using Nop.Web.Models.Common;
@{
    Layout = "~/Views/Shared/_ColumnsTwo.cshtml";

    //title
    Html.AddTitleParts(T("PageTitle.ContactUs").Text);

    <script src="https://maps.googleapis.com/maps/api/js"></script>

    <script>
        var myLatlng = new google.maps.LatLng(39.7938, -75.061379);
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var mapCanvas = document.getElementById('map-canvas');
            var mapOptions = {
                center: new google.maps.LatLng(39.7938, -75.061379),
                sensor: false,
                zoom: 17,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(mapCanvas, mapOptions);
            directionsDisplay.setMap(map);

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: 'Auto Images, Inc. 401 South Black Horse Pike, Blackwood, NJ 08012'
            });
        }

        function calcRoute() {
            var start = document.getElementById('start-input').value;
            var request = {
                origin: start,
                destination: myLatlng,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>

}
<div class="panel panel-default form-panel">
    <div class="panel-heading">
        <h3>@T("PageTitle.ContactUs")</h3>
    </div>
    @Html.Action("TopicBlock", "Topic", new { systemName = "ContactUs" })
    <div class="panel-body">
        @Html.Widget("contactus_top")
        @if (Model.SuccessfullySent)
        {
            <div class="result">
                @Model.Result
            </div>
        }
        else
        {
            using (Html.BeginForm())
            {
                <div class="message-error">
                    @Html.ValidationSummary(true)
                </div>
                <div class="form-fields">
                    <div class="inputs-left">

                        <div class="form-group row">
                            @Html.LabelFor(model => model.FullName, new { @class = "col-md-2 control-label" }, ":")
                            <div class="col-md-6">
                                @Html.TextBoxFor(model => model.FullName, new { @class = "form-control", placeholder = T("ContactUs.FullName.Hint") })
                            </div>
                            <div class="col-md-4">
                                @Html.ValidationMessageFor(model => model.FullName)
                            </div>
                        </div>

                        <div class="form-group row">
                            @Html.LabelFor(model => model.Email, new { @class = "col-md-2 control-label" }, ":")
                            <div class="col-md-6">
                                @Html.TextBoxFor(model => model.Email, new { @class = "form-control", placeholder = T("ContactUs.Email.Hint") })
                            </div>
                            <div class="col-md-4">
                                @Html.ValidationMessageFor(model => model.Email)
                            </div>
                        </div>
                        @if (Model.DisplayCaptcha)
                        {
                            <div class="captcha-box">
                                @Html.Raw(Html.GenerateCaptcha())
                            </div>
                        }
                    </div>

                    <div class="form-group row">
                        @Html.LabelFor(model => model.Enquiry, new { @class = "col-md-2 control-label" }, ":")
                        <div class="col-md-6">
                            @Html.TextAreaFor(model => model.Enquiry, new { @class = "enquiry form-control", placeholder = T("ContactUs.Enquiry.Hint") })
                        </div>
                        <div class="col-md-4">
                            @Html.ValidationMessageFor(model => model.Enquiry)
                        </div>
                    </div>
                </div>

                <div class="buttons">
                    <input type="submit" name="send-email" class="button-1 register-next-step-button btn btn-default" value="@T("ContactUs.Button")" />
                </div>
            }
        }

    </div>

    <div class="panel-body">
        <div class="form-fields">
            <div class="inputs-left">
                <h4><b>Directions to our shop</b></h4>
                <br />
                Please enter a Starting address, then click 'Get directions'
                <br />
                <br />
                <div class="form-group row">
                    <label class="col-md-2 control-label" for="saddr">Starting address: </label>
                    <div id="start" class="col-md-6">
                        <input class="form-control" style="width: 100%" id="start-input" type="text" name="start" required>
                    </div>
                </div>
            </div>

            <div class="col-md-2 inputs-right">
                <div class="inputsbtn btn-default>
                    <div id="map-canvas">
                </div>
            </div>
        </div>
        <div class="buttons">
            @*<button onclick="calcRoute(); return false;" class="button-1 register-next-step-button btn btn-default" value="Get directions">Get directions</button>*@
            <input onclick="calcRoute(); return false;" value="Get directions" type="button" class="button-1 register-next-step-button btn btn-default">
        </div>
    </div>

        @Html.Widget("contactus_bottom")
    </div>

Carneno wrote:

Thanks for giving feedback we will check this issue and fix as soon as possible.

Carneno wrote:

Hi,

The above "ContactUs.cshtml" file is not same as nopCommerce version 3.5. Is it your modified code? We cannot regenerate the issue.

BrainStation,

Thanks for your help in trying to fix this problem.  It is still an issue.

That ContactUs view was created by me cloning the NopRoot theme "Presentation\Nop.Web\Themes\NopRoot\Views\Common\ContactUs.cshtml" file and adding the "<script>" code at the beginning and adding a second "<div class="panel-body">" division near the end of the file.

It is my attempt at trying to render a Google map on the ContactUs form in the NopRoot theme.  When I applied those changes to the nopCommerce 3.50 "Presentation\Nop.Web\Views\Common\ContactUs.cshtml" view file, it displays the Google map.

Thanks,
Tony

The vendor details page is not showing correctly. To reproduce, add a vendor to your store, assign a customer to the vendor, and assign a product to the vendor. The go to Configuration-> Settings-> Vendor Setting and check the "Show vendor on product details page" box. Then browse to the product and click the vendor link on the page. Notice the Order text and vendors per page text is not correct.

Please see Andrei's post here about the vendor information block link.

I added a customer attribute with control type set to checkboxes and on the Register page it does not display correctly. Please fix!

SilhouetteBS wrote:

Hi SilhouetteBS,
Thanks a lot for your suggestion. We will implement those as soon as possible.

SilhouetteBS wrote:

Hi,

Thanks a lot for your feedback. This issue is solved. You will get update from the following CodePlex link - https://noproot.codeplex.com/SourceControl