Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Questions
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
Prev Previous Post   Next Post Next
  #1  
Old March 18th, 2013, 05:46 PM
sian75 sian75 is offline
 
Join Date: Jun 2012
Posts: 87
Default Responsive Product List

I found this great custom css to make the product list responsive with a pin it button etc.. However I think because of my theme it only shows one product under another and the images are different sizes. Is there anything i can add to this code to make it display 3 products in a line and similar image sizes?

<?php
function awdurl(){
$protocol = ($_SERVER['HTTPS'] && $_SERVER['HTTPS'] != "off") ? "https" : "http";
return $protocol . "://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
}
$awdprice = 1;
if ($_GET['sort']) {if ($_GET['sort'] == '-price') {$awdprice = -1; }}

if ($awdprice == 1) {
?>
<div class="awdsort">
<form method="get">
<input type="hidden" name="sort" value="-price" />
<input type="submit" value="Sort highest to lowest" class="btn" />
</form>
</div>
<?php
}
else {
?>
<div class="awdsort">
<form method="get">
<input type="hidden" name="sort" value="price" />
<input type="submit" value="Sort lowest to highest" class="btn" />
</form>
</div>
<?php
}
?>

<!-- Product List -->
<div class="awdproductlist">
[product.each]
<div class="awdproduct">
<div class="awdsocial">
<div class="pinit">
<a target="_blank" href="http://pinterest.com/pin/create/button/?url=<?php echo rawurlencode(awdurl().$product->site_link); ?>&media=<?php echo rawurlencode($product->image); ?>&description=<?php echo rawurlencode($product->name.' by '. $product->brand . ' (sold by '. $product->merchant . ') '. $product->sprice); ?>" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>
</div>
</div>
<div class="awdproductimage"><a href="[product.url]" rel="nofollow external" target="_blank" alt="Click to view more images of this [product.name]" title="Click to view more images of this [product.name]"><img src="[product.image direct='0' tag='0']" alt="Click to view more images of this [product.name]" title="Click to view more images of this [product.name]" /></a>
</div>
<div class="awdproductdetails">
<a href="[product.url direct='1']" title="[product.name]" target="_blank" rel="nofollow">
<div class="awdmerchant">
[product.merchant]
</div>
<?php if ($product->saleprice > 0 && $product->saleprice < $product->price) { ?>
<div class="awdproductprice">
<small>
Was: <span style="text-decoration: line-through;">[product.currency mode='sign'][product.price]</span>
Now: <span style="font-weight: bold; color:red;">[product.currency mode='sign'][product.saleprice]</span>
</small>
</div>
<?php } else { ?>
<div class="awdproductprice">
<small>
Best Price: [product.currency mode='sign'][product.price]
</small>
</div>
<?php } ?>
</a>
<div class="awdname">
<?php echo substr($product->name, 0, 40); ?>... <a href="[product.link]" title="[product.name]" rel="nofollow">read more</a>
</div>
<div class="awdbuybutton"><a href="[product.url]" rel="nofollow external" class="btn" target="_blank">Buy Now</a></div>
</div>
</div>
[/product.each]
</div>
<!-- /Product List -->
<!-- Box to display message for continuous scroll -->
<div style="clear:left; display:none; border:1px solid #aaa; padding:10px;
margin-top:10px!important; text-align:center;" id="loadingmoreproducts">Loading More Products...</div>
<script language="javascript" type="text/javascript">
var nextpage = 1, ajaxloading = false, nextproductset = '', thispageurl = '';
jQuery(window).scroll(function () {
if (jQuery(window).scrollTop() >= jQuery(document).height() - jQuery(window).height() - 500) {
if (!ajaxloading) {
ajaxloading = true;
if (nextpage + 1 <= <?php echo $pager->count; ?>) {
nextpage = nextpage + 1;
//Add something at the end of the page
nextproductset = '';
thispageurl = '[server.url type='fullpage']';
if (thispageurl.indexOf('?') > 0) {
thispageurl = thispageurl + '&page=' + nextpage;
}
else {
thispageurl = thispageurl + '?page=' + nextpage;
}

jQuery('#loadingmoreproducts').css('display', 'block');
jQuery.get(thispageurl, function(data) {
nextproductset = jQuery('.awdproductlist .awdproduct', jQuery(data));
jQuery('.awdproductlist').append(nextproductset);
jQuery('#loadingmoreproducts').css('display', 'none');
ajaxloading = false;
});
}
}
}
});
</script>
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Product list with comparison set for each product theast Questions 11 March 16th, 2013 02:11 PM
Responsive Wordpress Themes hipstrcom Questions 4 October 22nd, 2012 08:59 AM
Product List broken TS1807 Problems 4 November 18th, 2011 12:15 PM
Product list to comparison set youngy Questions 1 October 11th, 2011 10:21 AM
... make product images bigger in the product list? ayorofrance Questions 10 January 9th, 2011 10:22 PM


All times are GMT -5. The time now is 12:50 PM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.