Implement AreaButler in detail page template

[fredericalpers]

Initiative

Enhance integration of third-party-services

Epic

Integration of onOffice marketplace service prodiver AreaButler

User Story

As a real estate agent utilizing the onOffice for WP-Websites plugin, I find it challenging to integrate AreaButler maps onto the property detail pages due to the current requirement of template customization. To streamline this process and enhance the presentation of property listing, I request a new section within the property detail page settings. This section should allow for the easy insertion of iframe code, automatically populated with the AreaButler map link from the standard fields in onOffice enterprise.

Standard fields:
MPAreaButlerUrlWithAddress
MPAreaButlerUrlNoAddress
TargetAudience

At present, integrate AreaButler maps onto property detail pages requires manual template customization, which is time-consuming and requires technical expertise. To address this challenge and provide real estate agents with a more accessible solution, a new section within the property detail page, "oo-area-butler". The fields need to be added to the "don't echo".

Tasks

• Introduce a dedicated section (oo-area-butler) in the detail page template
• Implement a functionality to automatically populate the "src" of the iframe with the AreaButler map link retrieved from the standard fields in onOffice enterprise
• Conduct thorough testing to validate the functionality and performance of the AreaButler maps integration

By implementing the AreaButler into the detail page template, the onOffice for WP-Websites plugin can significantly enhance the user experience and streamline the workflow for real estate agents using the onOffice Marketplace Services.

[fredericalpers]

To implement and test this you will have to get the marketplace provider activated in your enterprise version. Please let me know for which account.

[dai-eastgate]

To implement and test this you will have to get the marketplace provider activated in your enterprise version. Please let me know for which account.

@fredericalpers Please help us activate for account:
Customer name: MAT-TRAFFIC
user name: Tobias

[dai-eastgate]

Customer name: MAT-TRAFFIC
user name: Tobias

@fredericalpers As I understand, AreaButler is referring to this product https://areabutler.de/page/alle-features
Currently, it can be seen on the onOffice system that AreaButler has not been activated. Can you activate it for me?

[fredericalpers]

Customer name: MAT-TRAFFIC
user name: Tobias

@fredericalpers As I understand, AreaButler is referring to this product https://areabutler.de/page/alle-features Currently, it can be seen on the onOffice system that AreaButler has not been activated. Can you activate it for me?

Unfortunately I'm still waiting for a reply from the IT Department.

[fredericalpers]

@dai-eastgate FYI: I sent Linh login data via onOffice enterprise for an development account, where AreaButler is unlocked and ready for implementation and testing.

[dai-eastgate]

@dai-eastgate FYI: I sent Linh login data via onOffice enterprise for an development account, where AreaButler is unlocked and ready for implementation and testing.

@fredericalpers i got it, thank!

[dai-eastgate]

@fredericalpers After researching, I'm encountering a block in distinguishing between MPAreaButlerUrlWithAddress and MPAreaButlerUrlNoAddress. Could you explain the data storage mechanism when using AreaButler for these two fields? If possible, please create a tutorial video on how to use it.

[fredericalpers]

MPAreaButlerUrlWithAddress = The address of the property is shared via API. The pin on the map will be displayed on the exact address on AreaButler Map.
MPAreaButlerUrlNoAddress = The address of the property is not shared via API. The pin will not be displayed on the exact address on the AreaButler Map.

AreaButler on my testing environment

https://testinstanz-fal.onofficeweb.com/

(1) Setting changed to yes in AreaButler

(2) Setting export to MPAreaButlerUrlWithAddress field in enterprise

(3) Link in property

[dai-eastgate]

@fredericalpers I have implemented and I need to confirm these issues:

1. If the API returns results for both fields:

• MPAreaButlerUrlWithAddress
• MPAreaButlerUrlNoAddress

Which field takes precedence when embedding a URL in an iframe src?

2. If the API result only returns data from one of the 2 fields, the field containing the data will have the URL embedded in the iframe src. Is it correct?

3. Please explain the meaning of the Target group (TargetAudience) field in the onOffice Enterprise system.
   Can you explain the data storage mechanism when using AreaButler for the TargetAudience field?
   

4. When embedding an Iframe on a details page, where do you want to display the Iframe? On the estate list, Google Maps is placed at the top. --> Would you like to do the same?

[fredericalpers]

If the API returns results for both fields - Which field takes precedence when embedding a URL in an iframe src?

In this rare case (this just happened when I was playing around with the feature) the field MPAreaButlerUrlWithAddress should take precedence.

If the API result only returns data from one of the 2 fields, the field containing the data will have
the URL embedded in the iframe src. Is it correct?

Correct

Please explain the meaning of the Target group (TargetAudience) field in the onOffice Enterprise system. Can you explain the data storage mechanism when using AreaButler for the TargetAudience field?

The target group does not have to specifically be implemented. It's values can stay in the fieldlist

When embedding an Iframe on a details page, where do you want to display the Iframe?

Please implement the new section between location and map, as seen in my quick scribble below.

[dai-eastgate]

@fredericalpers Ok, I got it. Thanks!

[dai-eastgate]

@fredericalpers I have tried implementing it. This is the demo video.

https://files.fm/u/senqrgh2fz#/view/6sw4pcvmnf

Note: Current, I implement "width = 100%" and "height = 300px" for iframe of AreaButler(same as google map)
Do you keep this style or do you need to change the specific size?

[fredericalpers]

@dai-eastgate I think we should add a little more height to the AreaButler Iframe since we do display a lot of information. Please go ahead and make it 500px height. Thank you :)

[dai-eastgate]

@fredericalpers I got it

[dai-eastgate]

@fredericalpers I have updated the height and created PR. Please help me review it and let me know your opinion. Thanks!