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
  #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>
  #2  
Old March 18th, 2013, 05:49 PM
sian75 sian75 is offline
 
Join Date: Jun 2012
Posts: 87
Default custom css

This is the code that is in the custom css for this responsive product list:

.awdproduct {
width:180px;
height: 320px;
float:left;
position:relative;
text-align:center;
overflow: hidden;
margin-bottom: 10px;
border:1px solid #eee;
margin-right:5px;
line-height:1em;
}
.awdproduct:hover {
border:1px solid #aaa;
}

.awdproductimage {
width:180px;
height:200px;
}
.awdproductimage img {
max-width:180px;
max-height:200px;
}
.awdsocial {
position:absolute;
top:5px;
left:5px;
}
.awdname {
font-size:10px;
color: #888;
}
.awdproduct a {
color:black;
}
.awdproduct a:hover {
color:black;
}
.awdmerchant {
font-weight:bold;
}
.awdbuybutton {
position:absolute;
bottom:5px;
width:100px;
left:50%;
margin-left:-50px;
}
  #3  
Old March 18th, 2013, 06:48 PM
sian75 sian75 is offline
 
Join Date: Jun 2012
Posts: 87
Default

I decreased the image size to 180x200 and there are now 2 products in a row but thr price y details disappeared. Onlt the buy y pin buttons are left.
  #4  
Old March 18th, 2013, 08:08 PM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi,

Unfortunately we're not able to provide support for third party scripts.

Eric
 


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 09:01 PM.


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