Data feed file integration price comparison shopping script

Documentation Wiki - DataFeedFile.com - Online merchant datafeed integration for affiliates : dffPSEThumbnailSlider

HomePage | Categories :: PageIndex :: RecentChanges :: RecentlyCommented :: Login/Register
Home Affiliate FAQ Merchant FAQ Examples Merchants Networks & Programs Forum Blog Wiki Knowledge Base Login

PSE (price search engine) Thumbnail Slide

Example : Full Source Code (.zip)

PSE thumbnail slide is a nice eye candy and product showcase which allow user to interact by sliding the sliding belt left - right.
The PSE thumbnail slide is quite flexible because you can control the products to show by specifying search phrase (keyword) into the PSE simply through parameter supported by the DFF_get_featured_prdt_from_PSE() function. See DFF_get_featured_prdt_from_PSE parameters details.

The top # products of PSE search results are to populate the Thumbnail Slider, since you can control the keyword + sort order, technically you can control which product to show.

Requirements to use PSE Thumbnail Slider
  1. DFF PHP Client Library - download latest version here
  2. JQuery javascript library
  3. Step Carousel javascript from DynamicDrive.com
  4. your PHP script to display the Slide (see below)
  5. your CSS styling to control the style (see below)
  6. Three images: product background box, left arrow and right arrow.
  7. PPC (product price comparison) page to display multiple merchant price comparison (example: price_compare.php).

How to use / install PSE Thumbnail Slide on your web site
  1. Download the DFF PHP Client Library package and extract only the /DFF directory (only if you have not installed it yet)
  2. Modify the DFF PHP Client Library config file at /DFF/DFF_config.php (only if this is the first time you install the DFF PHP client library)
  3. Insert the following code in the HTML HEAD section of the web page where you will display the slide:
  1. <script type="text/javascript" src="js/jquery-1.2.2.pack.js"></script>
  2. <script type="text/javascript" src="js/stepcarousel.js">
  3. /***********************************************
  4. * Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
  5. * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
  6. * This notice must stay intact for legal use
  7. ***********************************************/
  8. </script>
  9. <style type="text/css">
  10.     .stepcarousel{
  11.     position: relative; /*leave this value alone*/
  12.     overflow: scroll; /*leave this value alone*/
  13.     width: 550px; /*Width of Carousel Viewer itself*/
  14.     height: 135px; /*Height should enough to fit largest content's height*/
  15.     }
  16.     .stepcarousel .belt{
  17.     position: absolute; /*leave this value alone*/
  18.     left: 0;
  19.     top: 0;
  20.     }
  21.     .stepcarousel .panel{
  22.     background: url(image/bg_blue_square.gif) no-repeat;
  23.     float: left; /*leave this value alone*/
  24.     overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
  25.     margin: 0; /*margin around each panel*/
  26.     width: 140px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
  27.     height: 150px;
  28.     }
  29. </style>


  • Insert the following PHP code in the BODY section of the web page where you will display the slide:

    1. require_once $DFF_config['dir_include'].'DFF_featured_prdt.func.php';
    2.  
    3. $featured_prdt_arr = DFF_get_featured_prdt_from_PSE();
    4. //echo "<pre>".print_r($featured_prdt_arr,TRUE)."</pre>";   //FOR DEBUG ONLY
    5.  
    6. if(count($featured_prdt_arr)>0){
    7. ?>
    8.  
    9.  
    10. <body style="font-family:arial;">
    11.    
    12.     <div id="wholepage" style="width:900px;margin:20px 100px;">
    13.  
    14.         <script type="text/javascript">
    15.        
    16.         stepcarousel.setup({
    17.             galleryid: 'mygallery', //id of carousel DIV
    18.             beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    19.             panelclass: 'panel', //class of panel DIVs each holding content
    20.             panelbehavior: {speed:500, wraparound:false, persist:false},
    21.             defaultbuttons: {enable: true, moveby: 1, leftnav: ['image/arrow_left.gif', -70, 30], rightnav: ['image/arrow_right.gif', 20, 30]},
    22.             statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    23.             contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
    24.         })
    25.        
    26.         </script>
    27.        
    28.         <div id="mygallery" class="stepcarousel">
    29.             <div class="belt">
    30.            
    31.             <?php
    32.             foreach($featured_prdt_arr as $fpa){
    33.             ?>
    34.                 <a href="<?=$DFF_config['url_base'].'price_compare.php?DFF_SKU='.$fpa['corenum']?>" style="text-decoration:none;">
    35.                 <div class="panel">
    36.                     <div><img style="margin:7px 20px;border:0" src="<?=$fpa['imgurl']?>" title="<?=$fpa['shortdesc']?>" alt="<?=$fpa['prdtname']?>" /></div>
    37.                     <div style="font-size:10pt;width:120px">
    38.                         <center>
    39.                         <?=$DFF_config['currency_symbol'].number_format($fpa['prdtprice'],$DFF_config['currency_decimals'],$DFF_config['currency_decimal_symbol'],$DFF_config['currency_thousand_symbol'])?>
    40.                     </center>
    41.                     </div>
    42.                 </div>
    43.                 </a>
    44.                
    45.             <?php
    46.             }
    47.             ?>
    48.            
    49.             </div>
    50.         </div>
    51.  
    52.     </div>
    53.  
    54. </body>
    55.  
    56. <?
    57. } else {
    58.     echo "[DFFERR]: Failed getting list of Featured Products";
    59. }
    60. ?>


    1. That is all.


    Optional Customizations


    Controlling which products to show
    The function called DFF_get_featured_prdt_from_PSE() on line 3 of the PHP Code above controls and returns the product search result. The DFF_get_featured_prdt_from_PSE() actually have many possible parameters. Click here to see all DFF_get_featured_prdt_from_PSE() function parameters.

    I need even more control...
    To have even more control you should copy the function DFF_get_featured_prdt_from_PSE() place it on the PHP page where you will use this function (or create a separate PHP file).
    Make sure you specify a different function name. If you use an external PHP file to contain your new function, you need to change the PHP require_once call which loads the original function on line #1 in the PHP script shown above to load your custom function. Then you need to edit your new custom function by specifying a different keyword or sort order, see PSE parameter options for more info.

    To change the width of the Slide
    You can show as little as 1 to # number of products on the slide belt. You simply need to change the pixels width from the HTML CSS code line # 13.

    To change the product background image or styling
    You can create your own image for the each product background or you can simply have no background image and just adjust the CSS styling using borders, background color, etc...
    Look at line # 22 in the HEAD section HTML CSS code above.

    To change the arrows
    You can create your own image for both the left and right arrow.
    Look at line # 21 in the BODY sectio PHP code above.

    For more design / styling customization
    Look at the original author of the Carousel Slide from Dynamic Drive for more information.





    There are no comments on this page. [Add comment]

    Integrate price comparison shopping data feed file from thousands of online merchant product data feeds | Valid CSS

    Page was generated in 0.1003 seconds