Mijn situatie:
Op dit moment ben ik een nieuwe website aan het maken voor een vriend van mij. De website draait op wordpress en ik heb een plugin gebruikt om een API-call te maken tussen de website voor mijn vriend en Pararius. Op Pararius CRM Office uploadt hij de vastgoed objecten en de wens is om deze objecten ook te tonen op de nieuwe Wordpress website.

Ik heb hier geen ervaring mee, maar het is me wél gelukt om de API call werkend te krijgen.

Op dit moment ben ik hier:
- Ik gebruik een shortcode om de JSON resultaten van de API call weer te geven. Maar het ziet er natuurlijk uit als een hele lange som resultaten. Het moet natuurlijk op een gebruiksvriendelijke manier worden weergegeven zoals op zijn oude, huidige website die op Webflow draait (zie wat ik hier bedoel: link. Dus de data uit de JSON moet daar in dat soort product cards gegoten worden.

- Op dit moment kan ik er niet achter komen hoe ik de JSON-resultaten van de API-aanroep op een mooie manier kan weergeven.

Is er iemand die mij kan / wil helpen?

Dank alvast!

Ik ben geen programmeur dus misschien omschrijf ik dingen net wat anders/verkeerd; maar moeten die JSON resultaten niet in een PHP loop/array verwerkt worden, zodat deze in een HTML opmaak gezet kunnen worden zodat je ze daarna met een shortcode kunt weergeven?

Je hebt wel een idee, dus chatgpt kan je vast helpen.
Geef aan wat je wil, geen aan welke cms, geef een voorbeeld van de json, en chatgpt doet de rest.

Daar zijn toch kant-en-klare plug-ins voor?

Ik heb dat geprobeerd maar er wordt helaas niks weergegeven. Ik heb de volgende code, die helaas dus niet werkt.

PHP Code:

<?php// use the wpgetapi_endpoint() to call our endpoint// and save into the $getproperties variable

$getproperties = wpgetapi_endpoint('urbsliving', 'urbslivingunique', array('debug' => false));
// loop to get all dataforeach ($getproperties['results'] as $property) {    // display the content    ?>    <div class="container">        <div class="box">            <div class="top">                <img src="<?php echo $property['photos'][0]; ?>" alt="" />                <span>                    <i class="fas fa-heart"></i>                    <i class="fas fa-exchange-alt"></i>                </span>            </div>            <div class="bottom">                <h3><?php echo $property['description']; ?></h3>                <p>                    <?php echo $property['bijzonderheden']; ?>                </p>                <div class="advants">                    <div>                        <span>Bedrooms</span>                        <div><i class="fas fa-bed"></i><?php echo $property['bedrooms']; ?></div>                    </div>                    <div>                        <span>Bathrooms</span>                        <div><i class="fas fa-bath"></i><?php echo $property['bathrooms']; ?></div>                    </div>                    <div>                        <span>Area</span>                        <div><i class="fas fa-vector-square"></i><?php echo $property['surface']; ?> m˛</div>                    </div>                </div>                <div class="price">                    <span>Price</span>                    <div>€<?php echo $property['price_inc']; ?></div>                </div>            </div>        </div>    </div>    <?php}?>

Deze code heb ik gebruikt in de Snippet-plugin van Wordpress. De shortcode die van daaruit gecreeerd werd heb ik op mijn website geplaatst, maar het blijft leeg helaas.

Ik heb de instructies gevolgd zoals deze hier zijn beschreven en uiteraard veel YT video's bekeken, maar er gaat toch iets niet goed.

Hi Jeroen, dat heb ik inderdaad al geprobeerd. Kom er toch helaas niet uit.

Wat krijg je als je dit doet?:

Code:

<?php
$getproperties = wpgetapi_endpoint('urbsliving', 'urbslivingunique', array('debug' => false));
var_dump($getproperties);
?>

Zie je dan wel output?:
Zo nee, dan ligt het aan je API koppeling.
Zo ja, dan klopt de onderliggende code niet om het resultaat te tonen.

Sowieso is je code niet te lezen... je hebt nu dit:

Code:

// loop to get all dataforeach ($getproperties['results'] as $property) {    // display the content

Maar dit moet natuurlijk zijn:

Code:

// loop to get all data
foreach ($getproperties['results'] as $property) {
// display the content

Vraag me overigens wel af, als programmeur zijnde, of het niet beter/sneller/goedkoper was om daadwerkelijk een programmeur in te schakelen. Dit kost mij nog geen uur tijd. En dan ben je dus enkel 1x een uurtarief kwijt.

Zoiets? Code komt uit GPT. en de waardes in de productcard moet je uiteraard vervangen door de waardes uit je json feed. Daarnaast zou ik die API / JSON feed wel cachen in je eigen DB.

PHP Code:

<?php

// Haal de JSON-data op van de API
$api_response = wp_remote_get('https://example.com/api/v1/properties');
if (is_wp_error($api_response)) {
  echo 'Fout bij ophalen API-gegevens.';
  return;
}

$json_data = json_decode($api_response['body'], true);

// Loop door de JSON-data en maak voor elk object een productkaart
foreach ($json_data as $property) {
  ?>
  <div class="product-card">
    <h3><?php echo $property['title']; ?></h3>
    <img src="<?php echo $property['image_url']; ?>" alt="<?php echo $property['title']; ?>">
    <p><?php echo $property['description']; ?></p>
    <ul>
      <li>Prijs: €<?php echo $property['price']; ?></li>
      <li>Oppervlakte: <?php echo $property['surface_area']; ?> m˛</li>
      <li>Kamers: <?php echo $property['rooms']; ?></li>
    </ul>
    <a href="<?php echo $property['url']; ?>">Bekijk woning</a>
  </div>
  <?php
}

?>