Jump to content

echo dynamic data from api call to owl carousel


Go to solution Solved by Ch0cu3r,

Recommended Posts

Hi all new to php and this forum i have been looking around and im very impressed most questions get answered not like on some of the forums around.

 

Is there any one kind enough to help me out i have an api call via php and would like to output the results to owlcarousel where do i start with this.

 

Code i have is:

<?php
 
 
error_reporting(E_ALL); // Turn on all errors, warnings and notices for easier debugging
 
// API request variables
$endpoint  = 'http://svcs.ebay.com/services/search/FindingService/v1'; // URL to call
$version   = '1.0.0'; // API version supported by your application
$appid     = 'YourAppID'; // Replace with your own AppID
$globalid  = 'EBAY-GB'; // Global ID of the eBay site you want to search (e.g., EBAY-DE)
$query     = 'tools'; // You may want to supply your own query
$safequery = urlencode($query); // Make the query URL-friendly
 
 
 
// Construct the findItemsByKeywords HTTP GET call
$apicall = "$endpoint?";
$apicall .= "OPERATION-NAME=findItemsIneBayStores";
$apicall .= "&SERVICE-VERSION=$version";
$apicall .= "&SECURITY-APPNAME=$appid";
$apicall .= "&GLOBAL-ID=$globalid";
$apicall .= "&keywords=$safequery";
$apicall .= "&storeName=yourstorename";
$apicall .= "&paginationInput.entriesPerPage=6";
$apicall .= "&paginationInput.pageNumber=1";

 
// Load the call and capture the document returned by eBay API
$resp = simplexml_load_file($apicall);
 
// Check to see if the request was successful, else print an error
if ($resp->ack == "Success") {
    $results = '';
    // If the response was loaded, parse it and build links
    foreach ($resp->searchResult->item as $item) {
        $pic   = $item->galleryURL;
        $link  = $item->viewItemURL;
        $title = $item->title;
        $price = $item->currentPrice;
 
        // For each SearchResultItem node, build a link and append it to $results
        $results .= "<div id='item'><div class='img-wrap' align='center'><img src=\"$pic\" class='itemimg'></div> <div class='itemtxt' align='center'><a href=\"$link\">$title</a>$price</div></div>";
    }
}
// If the response does not indicate 'Success,' print an error
else {
    $results = "<h3>Oops! The request was not successful. Make sure you are using a valid ";
    $results .= "AppID for the Production environment.</h3>";
}
?>

<html>
<head>
<body>
 
<table>
    <tr>
        <td> 
                <div id="result">
                    <?php echo $results;?>

                </div>
        </td>
    </tr>
</table>
 
</body>
</html>

Im sure is pretty basic but being new to this i have no idea where to start,

 

any advice would be much appreciated.

 

thanks

Edited by didz666
  • Solution

owlcarousel as in the JQuery plugin? Read these steps here to add it to your page.

 

For step 2 you just wrap <?php echo $results;?> with the div  for the style of carousel you want (this is shown in the HTML tab for each demo), example html for the custom carousel effect

<!-- example html for the custom carousel -->
<div id="owl-demo" class="owl-carousel owl-theme">
   <?php echo $results; /* this line gets wrapped in the div for the style of carousel */ ?>
</div>

<div class="customNavigation">
  <a class="btn prev">Previous</a>
  <a class="btn next">Next</a>
  <a class="btn play">Autoplay</a>
  <a class="btn stop">Stop</a>
</div>

All you need to do now is apply the Javascript and CSS shown for the carousel you want.

Edited by Ch0cu3r
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.