https://discord.umbraco.com logo
Join Discord
Powered by
How to override a view file in Umbraco Commerce Ch...
# help-with-umbraco
u
I'm sure I'm doing something really obviously wrong, but I can't work out what. I'm trying to override a view file from Umbraco Commerce Checkout (without altering the source), and I understand I can replace a cshtml view file and it should just work by placing the new file in the correct location, i.e. wwwroot/App_Plugins/UmbracoCommercCheckout/etc.... However I can't get this to work. I resorted to trying a few different locations after the logical location didn't work, but still nothing. Has anyone else done this before and what path did you use, or did you have to do anything additional to get this to work? TIA, tom
s
Looking at the package soruce, it seems like the views are located in /Views/UmbracoCommerceCheckout, and not in App_Plugins
u
Awesome, thanks for that. I now get an error that I can look into but that mean the file is being read.
m
to get your starting point to customise the views?
u
Yes V13. I don't think v14 is usable in production at the moment and the site has been under development for a while. By copy the CheckInformation file to the correct location I am now getting the error below, but I can't look into it until this evening, but it is progress: <option value="@(country.Id)" @Html.Raw(currentOrder.PaymentInfo.CountryId == country.Id ? "selected=\"selected\"" : "") ā€¢ The tag helper 'option' must not have C# in the element's attribute declaration area. +
m
yeah MS taghelpers don't like that.. you can either disable the option tag helper.. or refactor.
@removeTagHelper Microsoft.AspNetCore.Mvc.Razor.TagHelpers.OptionTagHelper, Microsoft.AspNetCore.Mvc.Razor
in your _ViewImports (I think you can have multiple _ViewImports so if you put in the umbracoCheckoutCommerce folder it will only apply to those views, incase something is using the option taghelpers elsewhere, you might then also have to include the imports from https://github.com/umbraco/Umbraco.Commerce.Checkout/blob/support/13.x/src/Umbraco.Commerce.Checkout/Views/UmbracoCommerceCheckout/_ViewImports.cshtml
u
awesome, that'll save me some time. I'll try that this evening.
m
or maybe (I believe netcore is intellegent enough these days to not output 
selected=""
if you are passing null )
Copy code
csharp
    @foreach (var country in countries)
                    {
        var selected = currentOrder.ShippingInfo.CountryId == country.Id ? "selected" : null;
        <option value="@(country.Id)" selected="@selected" data-regions="@(JsonConvert.SerializeObject(UmbracoCommerceApi.Instance.GetRegions(country.StoreId, country.Id).Select(x => new {
                                    id = x.Id,
                                    name = x.Name
                                })))">
                            @(country.Name)
                        </option>
                    }
though it's interesting that from a RCL it's ok.. I guess it's because the RCL ends up as code so no taghelpers involved, but a little above my ken there...... šŸ˜‰ But does that mean that tag helpers don't work in RCL's ???? šŸ¤” šŸ¤· in the umbraco.commerce.checkout assembly for the 
AspNetCoreGeneratedDocument
Copy code
csharp
foreach (CountryReadOnly item in countries)
            {
                WriteLiteral("                <option");
                BeginWriteAttribute("value", " value=\"", 5645, "\"", 5666, 1);
                WriteAttributeValue("", 5653, item.Id, 5653, 13, isLiteral: false);
                EndWriteAttribute();
                WriteLiteral(" ");
                Write(Html.Raw((currentOrder.PaymentInfo.CountryId == item.Id) ? "selected=\"selected\"" : ""));
                WriteLiteral("\n                        data-regions=\"");
                Write(JsonConvert.SerializeObject(from x in UmbracoCommerceApi.Instance.GetRegions(item.StoreId, item.Id)
                    select new
                    {
                        id = x.Id,
                        name = x.Name
                    }));
                WriteLiteral("\">\n                    ");
                Write(item.Name);
                WriteLiteral("\n                </option>\n");
            }
u
I haven't touched RCLs and although I'm aware of tag helpers, I work on the backend and occasional React/Next front end of a headless site with a custom API (hoping to move to the content Delivery API at some point). So this is part of some occasional help I give to a designer friend when he gets a bit stuck. You help is really useful. ā¤ļø
n
If you want to fall back to a normal 
<option>
tag instead of the tag helver version you can do 
<!option>
instead just as an FYI (I really dislike that 
<option
is a tag helper!)
u
Just tried a quick test with !option and added the necessary imports and it works a treat. Thanks everyone
m
FYI One reason to not use 
<!option />
is in the eyes of the frontend coder it doesn't look like a real tag, so tend to correct it without thinking šŸ™‚ šŸ”„
<body/>
is also another one that seems to create taghelper issues.
looking at https://github.com/dotnet/aspnetcore/blob/main/src/Mvc/Mvc.TagHelpers/src/OptionTagHelper.cs the helper here is actually to help you set the 
selected
... šŸ¤“ if you were using the the 
selectTagHelper
..
Copy code
<select asp-for="Person" asp-items="Model.People">
    <option value="">Pick one</option>
</select>
but not sure how you'd add the data attributes required here. (or indeed if tag helpers translate into RCL libraries)
14 Views
PreviousNext
Powered by