Tabjes in Zoo met maps widget

 Voor het plaatsen van tabs op de details pagina van de APP product catelog heb ik een Type Woning aangemaakt met hierin de velden die we wilden gebruiken, denk aan perceel oppervlak, inhoud woning, aantal slaapkamers, etc etc.

Vervolgens heb ik een kopie gemaakt van de UIkit template, en deze toegewezen aan onze pagina's. In deze template heb ik gelijk wat eigen posities aangemaakt en de velden toegewezen aan de juiste posities.

In deze kopie template, Woning genaamd, heb ik vervolgens de diverse posities in tabjes geplaatst, m.b.v. NoNumber's Tabs extensie.

Dit, door de code om tabjes te genereren volgens de spec's van NoNumber's Tabs, gewoon in de template van de details pagina te plaatsen. Deze vind je hier:

media/zoo/applications/product/templates/WONING/renderer/item/full.php

(waarbij WONING dus de naam van mijn eigen template is).

 De toegevoegde code ziet er dan bijv. zo uit:

{tab Algemeen}
<?php if ($this->checkPosition('algemeen')) : ?>
<?php echo $this->renderPosition('algemeen'); ?>
<?php endif; ?>

{tab Meer informatie}
<?php if ($this->checkPosition('formulier')) : ?>
<?php echo $this->renderPosition('formulier'); ?>
<?php endif; ?>
{/tabs}

Dit werkt prachtig, op de site:

 Blijft over het laden van een google maps in een tab. Het betreffende tabje is bij eerste laden van de pagina nog niet geopend, en dus heeft google maps geen idee hoe groot het kaartje kan en mag worden.

Via de site van NoNumber de volgende oplossing gevonden:

<script language="javascript" type="text/javascript">
(function($) {
$(document).ready(function() {
$('.nn_tabs-tab > a[href="#locatie"]').on('show.bs.tab', function(e) {
alert('test');
});
});
})(jQuery);
</script>

Dit stukje code onderin mijn template file gezet, en inderdaad resulteerde dat in een popup window "test" zodra je het locatie tabje opende.

Nu nog het kaartje verversen.

De oplossing die in NoNumber's forum werd aangedragen, werkt waarschijnlijk wel met normale google maps kaartjes, maar natuurlijk weer niet met YooTheme's google maps widget.

Wat ik uiteindelijk heb gedaan, is 

location.reload();

gebruikt.

Misschien niet het meest fraai, maar wel effectief.

Als je nu het tabje aanklikt met de maps widget, wordt de inhoud van het tabje direct herladen en krijg je een goed kaartje te zien.

:-)