Best way to show dealer (office) detail

Dennis Hulsmans asked on March 21, 2016 12:36

A question from a colleague:

I'm wondering what the best approach is to show office details. I have a "dealer locator" with a google maps, after a search we get a list of suitable dealers in the region.
When I click on a dealer, the dealer detail page opens. This detail page should have a "shared layout", which will be used by all dealers. How should I configure this? I think there are 2 possibilities:

configure it like news, with a repeater and all html inside a transformation
configure it like the E-commerce Site - Products List and Detail

The question is, is there a way to get the custom page type fields as default values inside webparts. Why? :

The idea of putting all HTML inside a transformation is not that customer friendly (as customers don't always have the required html knowledge)
The use of all the repeaters to get just 1 field seems overkill

Is there another approach, like putting default values inside webparts which will get the correct values if linked to a dealer page type?

My personal thought is go with option 2? What do you recommend?

Kind regards

dealer office detail

Correct Answer

Brenden Kehren answered on March 21, 2016 22:56

Yes it can Dennis. You can simply place the following (example code) in your transformation. The script is what is needed to add a static google maps script to the page for that location.

<div class="map" id='googleMap<%# DataItemIndex %>'></div>  
<h3><%# Eval("Name") %></h3>  
<ul class="details">
    <li><%# Eval("Address") %></li>
    <li><%# Eval("City") %>, <%# Eval("State") %> <%# Eval("ZipCode") %></li>
    <%# IfEmpty(Eval("Phone"), "", "<li><a href=\"tel:"+Eval("Phone")+"\">"+Eval("Phone")+"</a></li>") %> 
    <%# IfEmpty(Eval("URL"), "", "<li><a target=\"_blank\" href=\""+Eval("URL")+"\">Website Link</a></li>") %>
</ul>    
<script>
    function initialize() {
    var mapCenter = new google.maps.LatLng(<%# Eval("Latitude") %>,<%# Eval("Longitude") %>);
                                            var mapProp = {
                                            center: mapCenter,
                                            zoom:13,
                                            mapTypeId:google.maps.MapTypeId.ROADMAP
                                            };
                                            var map = new google.maps.Map(document.getElementById("googleMap<%# DataItemIndex %>"),mapProp);
    var marker = new google.maps.Marker({
        position: mapCenter,
    });
    marker.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Then on our page displaying the maps (either in a list or a detail page) add this to the HEAD section of your site (best bet is with a HEAD html webpart):

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js"></script>

1 votesVote for this answer Unmark Correct answer

Recent Answers

David te Kloese answered on March 21, 2016 12:46

Hi Dennis,

Where are these "Details" stored and edited? I can imagine a custom page type with these details. Do these details consist of multiple predefined values (title, summary, address, contact, etc) or just 1 free content field (They should be able to use the WYSIWYG control so they don't need any HTML knowledge)

If multiple fields you could either create a custom webpart (in which you check if fields are entered) or just a normal transformation in which you can also check if values are entered.

Greets,

David

1 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on March 21, 2016 13:39

Hi David

It's a page type based on the CMS.Office page type + some specific fields for their dealers, so there are a lot of fields.

2 votesVote for this answer Mark as a Correct answer

David te Kloese answered on March 21, 2016 13:53

Hi,

And why can't you put all these fields in a transformation?

You can see available methods here: https://docs.kentico.com/display/K9/Reference+-+Transformation+methods

And use something like:

<%# IfEmpty(Eval("ProductPhoto"), "No image", GetImage("ProductPhoto")) %>

Or you could use something like

<asp:Placeholder runat="server" ID="ph1" visible='<%# ... %>'> 
    ...
</asp:Placeholder>

Hope this helps!

David

2 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on March 21, 2016 14:12 (last edited on March 21, 2016 14:13)

That's a possibility (point 1 in my question), but this has a side effect > limited adaptability because the customer might want to change the order of some fields and doesn't have the required knowledge. Option 2 gives a more adaptive solution, but I'm wondering if all the repeaters are the correct approach to achieve this.

Both options are valid solutions, I'm just wondering if there are other side effects and if there isn't a better solution

2 votesVote for this answer Mark as a Correct answer

David te Kloese answered on March 21, 2016 14:21

Hi,

transformations are quite easy to adjust (but indeed would probably require a developer).

You could try limiting the number of fields and use a few big WYSIWYG content field... this gives them all the freedom, but make the styling of the page harder. You could try helping the editor and expand the functionality of the toolbar:

https://docs.kentico.com/display/K9/Personalizing+the+editor+toolbars+and+buttons

Or you could full hardcore and create some sort of custom 'order control' to configure the order (and use) of fields, but this usually isn't worth the effort.

David

1 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on March 21, 2016 17:41 (last edited on March 24, 2018 12:15)

I'd forgo the multiple repeater approach because that's a lot of queries being requested for a single page load.

I'd go with Davids approach of a single repeater with the transofrmation as it follows best practices. If the client needs to make a change, educate them enough to do so after the site is setup.

Another approach is to use an editable text webpart and simply let them enter a macro in place where they want that data to appear. This would require a new template for the details but not a big deal. Simply use {% YourColumnName %} and it will display when you are selected on that specific office page type.

1 votesVote for this answer Mark as a Correct answer

Dennis Hulsmans answered on March 21, 2016 20:59

Hi Brenden

Thanks for the reply. But one of the things I need to show is a Google Map with the location of the dealer. Can this be handled within the transformations? The transformation part is still pretty new to me :)

thx!
D.

2 votesVote for this answer Mark as a Correct answer