Hi
Do you have any code already for a product slideshow and product carousel for pt?
I want to do something like on this sites: {link saved}
Can you help me out?
Thanx
Jacques
Hi David
How can I implement your above code into the following:
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>Thanks
Jacques
Hi Jacques,
Have a go with;
<div class='featured'>
<!-- caraousel script BEFORE HTML / JavaScript here -->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<?php foreach($featured["products"] as $i => $product): ?>
<li data-target="#myCarousel" data-slide-to="<?php print $i; ?>" <?php print ($i==0?"class=\"active\"":""); ?> ></li>
<?php endforeach; ?>
</ol>
<div class="carousel-inner">
<?php foreach($featured["products"] as $i => $product): ?>
<div class="item <?php print ($i==0?"":"active"); ?>">
<table>
<tr>
<td align='center' valign='top'>
<h4><a href='<?php print $product["productHREF"]; ?>'><?php print $product["name"]; ?></a></h4>
<?php if ($product["image_url"]): ?>
<p><a href='<?php print $product["productHREF"]; ?>'><img border='0' height='100' src='<?php print $product["image_url"]; ?>' alt='<?php print htmlentities($product["name"],ENT_QUOTES,$config_charset); ?>' /></a></p>
<?php endif; ?>
<?php if ($config_useInteraction): ?>
<small>
<?php if ($product["reviews"]): ?>
<?php print tapestry_stars($product["rating"],"s"); ?>
<a href='<?php print $product["reviewHREF"]; ?>'><?php print $product["reviews"]." ".translate("Reviews"); ?></a>
<?php else: ?>
<a href='<?php print $product["reviewHREF"]; ?>'><?php print translate("Review This Product"); ?></a>
<?php endif; ?>
</small>
<?php endif; ?>
<p>
<?php if ($product["numMerchants"] > 1): ?>
<em><?php print translate("from"); ?></em> <strong><?php print $config_currencyHTML.$product["minPrice"]; ?></strong><br />
<span class='nobr'><a href='<?php print $product["productHREF"]; ?>'><?php print translate("Compare Prices"); ?></a></span>
<?php else: ?>
<strong><?php print $config_currencyHTML.$product["price"]; ?></strong><br />
<span class='nobr'><a href='<?php print $product["productHREF"]; ?>'><?php print translate("More Information"); ?></a></span>
<?php endif; ?>
</p>
</td>
</tr>
</table>
</div> <!-- item -->
<?php endforeach; ?>
</div> <!-- carousel-inner -->
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div> <!-- myCarousel -->
<!-- caraousel script AFTER HTML / JavaScript here -->
</div>Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Hi David
It creates 2 active items.
It should create 1 class="item active" and the rest must be class="item".
Is this posible? I'm using bootstrap ui, you can find their instruction and demo at this link: http://twitter.github.io/bootstrap/javascript.html#collapse
You can see on my website at {link saved} where I've used the code.
thanks
jacques
Hi David
I don't know what I'm doing wrong, please see on my website: {link saved}. I'm using twitter-bootstrap to design my site,
you can go to this page http://twitter.github.io/bootstrap/javascript.html#carousel for the example and code for the carousel I'm trying to implement.
Thanks for your great support, this is why pt is the best comparison script ever.
Jacques
Hello Jacques,
Thank you for your comments!
My apologies - the test was the wrong way round in this line:
<div class="item <?php print ($i==0?"":"active"); ?>">...it should be:
<div class="item <?php print ($i==0?"active":""); ?>">...so everything but the first would have been active.
Also corrected in the code above...
Cheers,
David.
--
PriceTapestry.com
Hello David
I've also been struggling with bootstrap...
I like to show this carousel on every page.
To get the code above working I've copied the sql code from index.php but this breaks the description on the product page.
I have modified this carousel code so it present 4 image(items) in one slide.
I really like to present 12 random product (only with images) in a group of 4.
I need some help on how to extract the forearch in groups:
- link to product page
- link to image
- price
I don't know how to seperate the forearch into groups and sql the will not break product description.
New carousel code (working):
<div class="container-fluid">
<div class="row-fluid">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $111.11</h5>
</div>
</li>
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $222.22</h5>
</div>
</li>
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $333.33</h5>
</div>
</li>
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $444.44</h5>
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $111.11</h5>
</div>
</li>
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $222.22</h5>
</div>
</li>
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $333.33</h5>
</div>
</li>
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $444.44</h5>
</div>
</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $111.11</h5>
</div>
</li>
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $222.22</h5>
</div>
</li>
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $333.33</h5>
</div>
</li>
<li class="thumbnail span3">
<div class="thumbnail">
<a href="http://example.com/300x200"><img src="http://example.com/300x200" alt=""></a>
</div>
<div class="caption">
<h5>Best Price: $444.44</h5>
</div>
</li>
</ul>
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
</div>
</div>Thank you :o)
//Brian
Hello Brian,
The reason copying the code from index.php broke your product pages will be this section of code:
foreach($featured["products"] as $k => $product)
{
$featured["products"][$k]["productHREF"] = tapestry_productHREF($product);
$featured["products"][$k]["reviewHREF"] = tapestry_reviewHREF($product);
}...overwriting the $product variable. Instead, simply use a custom variable name e.g. $carouselProduct for example:
foreach($featured["products"] as $k => $carouselProduct )
{
$featured["products"][$k]["productHREF"] = tapestry_productHREF($carouselProduct );
$featured["products"][$k]["reviewHREF"] = tapestry_reviewHREF($carouselProduct);
}However to save having to repeat the code, I would recommend creating a function "carouselProducts" returning 4 random with the HTML structure from your example - have a go with something like this:
<?php
function carouselProducts($num)
{
global $config_databaseTablePrefix;
$sql = "SELECT name,1 AS sequence FROM `".$config_databaseTablePrefix."products` ORDER BY RAND() LIMIT ".$num;
if (database_querySelect($sql,$rows))
{
$sqlNames = array();
$sqlCase = "CASE normalised_name";
foreach($rows as $featured)
{
$featured["name"] = tapestry_normalise($featured["name"]);
$sqlNames[] = "'".$featured["name"]."'";
$sqlCase .= " WHEN '".database_safe($featured["name"])."' THEN ".$featured["sequence"];
}
$sqlCase .= " END AS sequence";
$sqlIn = implode(",",$sqlNames);
$sql = "SELECT * , MIN( price ) AS minPrice, MAX( price ) AS maxPrice, COUNT( id ) AS numMerchants, ".$sqlCase." FROM `".$config_databaseTablePrefix."products` WHERE normalised_name IN (".$sqlIn.") GROUP BY normalised_name ORDER BY sequence";
database_querySelect($sql,$rows);
foreach($rows as $product)
{
print ' <li class="thumbnail span3"> ';
print ' <div class="thumbnail"> ';
print ' <a href="'.tapestry_productHREF($product).'"><img src="'.$product["image_url"].'" alt=""></a> ';
print ' </div> ';
print ' <div class="caption"> ';
print ' <h5>Best Price: $'.$product["minPrice"].'</h5> ';
print ' </div>
print ' </li>
}
}
}
?>
<div class="container-fluid">
<div class="row-fluid">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<ul class="thumbnails">
<?php carouselProducts(4); ?>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<?php carouselProducts(4); ?>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<?php carouselProducts(4); ?>
</ul>
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div>
</div>
</div>Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Hello Jacques,
I haven't implemented any particular carousel script as yet however they all work in pretty much the same way which is that you are simply required to output each item to be rotated in the carousel with either a
<div>or a<span>of a certain name, enclosed within a containing<div>, again with a certain name, which the carousel JavaScript then works its magic on.I'll describe a generic modification to html/featured.php, to which it should be straight forward to use with any carousel script, and then if you're not sure at all about a particular implementation that you'd like to use let me know and I'll point you in the right direction...
Generic html/featured.php for use with carousel scripts
<div class='featured'><!-- caraousel script BEFORE HTML / JavaScript here -->
<div name='CAROUSEL_CONTAING_DIV_NAME'>
<?php foreach($featured["products"] as $product): ?>
<div name='CAROUSEL_ITEM_DIV_NAME'>
<table>
<tr>
<td align='center' valign='top'>
<h4><a href='<?php print $product["productHREF"]; ?>'><?php print $product["name"]; ?></a></h4>
<?php if ($product["image_url"]): ?>
<p><a href='<?php print $product["productHREF"]; ?>'><img border='0' height='100' src='<?php print $product["image_url"]; ?>' alt='<?php print htmlentities($product["name"],ENT_QUOTES,$config_charset); ?>' /></a></p>
<?php endif; ?>
<?php if ($config_useInteraction): ?>
<small>
<?php if ($product["reviews"]): ?>
<?php print tapestry_stars($product["rating"],"s"); ?>
<a href='<?php print $product["reviewHREF"]; ?>'><?php print $product["reviews"]." ".translate("Reviews"); ?></a>
<?php else: ?>
<a href='<?php print $product["reviewHREF"]; ?>'><?php print translate("Review This Product"); ?></a>
<?php endif; ?>
</small>
<?php endif; ?>
<p>
<?php if ($product["numMerchants"] > 1): ?>
<em><?php print translate("from"); ?></em> <strong><?php print $config_currencyHTML.$product["minPrice"]; ?></strong><br />
<span class='nobr'><a href='<?php print $product["productHREF"]; ?>'><?php print translate("Compare Prices"); ?></a></span>
<?php else: ?>
<strong><?php print $config_currencyHTML.$product["price"]; ?></strong><br />
<span class='nobr'><a href='<?php print $product["productHREF"]; ?>'><?php print translate("More Information"); ?></a></span>
<?php endif; ?>
</p>
</td>
</tr>
</table>
</div> <!-- CAROUSEL ITEM DIV -->
<?php endforeach; ?>
</div> <!-- CAROUSEL CONTAINING DIV -->
<!-- caraousel script AFTER HTML / JavaScript here -->
</div>
Hope this helps!
Cheers,
David.
--
PriceTapestry.com