Magento Forum

Page 1 of 5
Scrolling Product Slider
 
Mandelina
Member
 
Total Posts:  63
Joined:  2008-09-26
Germany
 

Hi there,

i would like to add a scrolling product slider like on the diesel online store or on this online store

Does anyone know how to realize this? Any tipps, tricks or ideas?

Thanks in advance!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mandelina
Member
 
Total Posts:  63
Joined:  2008-09-26
Germany
 

Another example could be the apple product slider!?

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mandelina
Member
 
Total Posts:  63
Joined:  2008-09-26
Germany
 

bump! Still looking!

Any ideas and suggestions are very much appreciated!

Thanks in advance!

 
Magento Community Magento Community
Magento Community
Magento Community
 
demonkoryu
Guru
 
Avatar
Total Posts:  328
Joined:  2008-11-26
Dortmund, Germany
 

You could do it with http://script.aculo.us/, which is shipped with Magento, some CSS and implement the list with the category listing block with a custom template..

 
Magento Community Magento Community
Magento Community
Magento Community
 
chadhenry
Member
 
Total Posts:  38
Joined:  2009-01-01
 

This site might help.

I haven’t yet implemented this with Magento so I can’t give you specific directions related to Magento

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mandelina
Member
 
Total Posts:  63
Joined:  2008-09-26
Germany
 

Yes, this is exactly what i am looking for!
Thank you very much!

 
Magento Community Magento Community
Magento Community
Magento Community
 
vesvello
Sr. Member
 
Total Posts:  97
Joined:  2007-12-01
 

Did someone make any advances with this?
Thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
grooves1200
Sr. Member
 
Total Posts:  122
Joined:  2008-02-01
 

this looks like it could be the future of sliders. a magento module would be awesome, though i guess you can just embed the thing otherwise:

http://www.progressivered.com/cu3er/

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lionheart81
Jr. Member
 
Avatar
Total Posts:  16
Joined:  2009-10-30
 

So if anyone has successfully implemented this, can you post some code snippets, or give us some clues how to do this ourselves? I am wanting to do this on upsells.

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Lionheart81
Jr. Member
 
Avatar
Total Posts:  16
Joined:  2009-10-30
 

I was able to get a slider to display on the upsell view using jCarousel a jQuery plugin. It was actually pretty easy to do. Most of my efforts were on styling the look of the slider and hunting down where magento sets the number of items to be displayed (catalog.xml).

Thanks to the writers of this code!
jCarousel

jCarousel comes with two skins that you can modify to your liking!

This is how I had to change the upsell.phtml view to display in the slider. Basically change it to a list instead of a nasty table, yuck!

<?php if(count($this->getItemCollection()->getItems(12))): ?>
<div class="collateral-box up-sell">
    <
div class="head"><h4><?php echo $this->__('You may also be interested in the following product(s)'?></h4></div>
    
    <
div class="generic-product-grid catalog-listing" id="upsell-product-table">
    
<?php  $this->setColumnCount(12); // uncomment this line if you want to have another number of columns. also can be changed in layout ?>
    
<?php $this->resetItemsIterator() ?>
    <?php 
for($_i=0;$_i<$this->getRowCount();$_i++): ?>
       
       
<ul class="carousel jcarousel-skin-ie7">
        
<?php for($_j=0;$_j<$this->getColumnCount();$_j++): ?>
            <?php 
if($_link=$this->getIterableItem()): ?>
            
<li>
                <
class="product-image"><a href="<?php echo $_link->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_link, 'small_image')->resize(125) ?>" width="125" height="125" alt="<?php echo $this->htmlEscape($_link->getName()) ?>" /></a></p>
                <
h5><a href="<?php echo $_link->getProductUrl() ?>"><?php echo $this->htmlEscape($_link->getName()) ?></a></h5>
                
<?php echo $this->getPriceHtml($_linktrue?>
                <?php 
echo $this->getReviewsSummaryHtml($_link?>
            
</li>
            
<?php else: ?>
            
<li class="empty-product">&nbsp;</li>
            
<?php endif; ?>
        <?php 
endfor; ?>
        
</ul>
        
    
<?php endfor; ?>
    
</div>
    
  <!-- <
script type="text/javascript">decorateTable('upsell-product-table')</script> //-->
</div>
<?php endif ?>

And this is all I had to change in order to get more products. Change the limit number to whatever you wish, I don’t know if the columns even matter anymore, but couldn’t hurt.

<block type="catalog/product_list_upsell" name="product.info.upsell" as="upsell_products" template="catalog/product/list/upsell.phtml">
          <
action method="setColumnCount"><columns>12</columns></action>
          <
action method="setItemLimit"><type>upsell</type><limit>12</limit></action>
</
block>

Oh, I almost forgot, add this to head.phtml

<script type="text/javascript">
jQuery(document).ready(function() {
    
// Initialise the first and second carousel by class selector.
    // Note that they use both the same configuration options (none in this case).
    
jQuery('.carousel').jcarousel();
});
</script>
 
Magento Community Magento Community
Magento Community
Magento Community
 
sean14538
Member
 
Avatar
Total Posts:  32
Joined:  2009-11-04
Gouldsboro, PA
 

I managed to get cu3er running in magento! I have tested it is IE, Safari, and Opera, all working yet it will not initialize in firefox?
I am going to post exactly what I did and maybe someone can figure out how to get it working in firefox.

In CMS -> Pages -> “My Home Page” I added :

<reference name="top_slider">
  <
block type="cms/block"  name="cu3er">
    <
action method="setBlockId">
      <
block_id>cu3er</block_id>
    </
action>
  </
block
</
reference>
in the design section,

I then made a CMS ->Static Block, with the title and identifier set to: cu3er
and in the content section, I pasted:

<script type="text/javascript" src="{{skin url=""}}cu3er/js/swfobject/swfobject.js"></script>

<script type="text/javascript">
        var 
flashvars {};
        
flashvars.xml "{{skin url=""}}cu3er/config.xml";
        
flashvars.font "Arial";
        var 
attributes {};
        
attributes.wmode "transparent";
        
attributes.id "slider";
        
swfobject.embedSWF("{{skin url=""}}cu3er/cu3er.swf""cu3er-container""925""200""9""{{skin url=""}}cu3er/js/expressInstall.swf"flashvarsattributes);
</script>

<style type="text/css">
<!--
body { margin0autotext-align:center;}
#cu3er-container {width:925px; outline:0;}
-->
</
style>

<
div id="cu3er-container">
    <
a href="http://www.adobe.com/go/getflashplayer">
        <
img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
    </
a>
</
div>

and then I configured the config.xml file:

<?xml version="1.0" encoding="utf-8" ?>
<cu3er>
    <
settings>
        
        
            
    </
settings>    

    <
slides>
    
        <
slide>
            <
url>http://www.mysite.com/cu3er/images/slider1.jpg</url>
        
</slide>
        <!-- 
changing transition beetween first second slide -->
        <
transition num="3" slicing="vertical" direction="down"/>
        <
slide>
               <
url>http://www.mysite.com/cu3er/images/slider2.jpg</url>
        
</slide>        
        <!-- 
changing transition beetween second third slide -->
        <
transition num="4" direction="right" shader="flat" />
        <
slide>
            <
url>http://www.mysite.com/cu3er/images/slider3.jpg</url>
        
</slide>
        <
transition num="10" slicing="vertical" direction="down" duration=".6" delay=".3" shader="none" cube_color="0x333333" z_multiplier="4" />
        <!-- 
transitions properties defined in transitions template -->
        <
slide>
               <
url>http://www.mysite.com/cu3er/images/slider4.jpg</url>
        
</slide>
        <
transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" />
        <
slide>
               <
url>http://www.mysite.com/cu3er/images/slider5.jpg</url>
        
</slide>
        <
transition num="3" slicing="vertical" direction="down"/>
                <
slide>
               <
url>http://www.mysite.com/cu3er/images/slider6.jpg</url>
        
</slide>
        <
transition num="4" direction="right" shader="flat" />
        <
slide>
               <
url>http://www.mysite.com/cu3er/images/slider7.jpg</url>
        
</slide>
        <
transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" />
        <
slide>
               <
url>http://www.mysite.com/cu3er/images/slider8.jpg</url>
        
</slide>
        <
slide>
               <
url>http://www.mysite.com/cu3er/images/slider9.jpg</url>
        
</slide>
                
    </
slides>
</
cu3er>

I hope this is all clear,
you can then play around with the transitions by just changing the config.xml. I uploaded the cu3er directory structure to /skin/frontend/default/myskin/ folder making a cu3er folder in there, and to make it easier for me added it again in the root but you could just configure the xml for you skin folder.
But it works!! smile just click on my name and the my web url to see it in action smile it is pretty!
Sean

 
Magento Community Magento Community
Magento Community
Magento Community
 
sean14538
Member
 
Avatar
Total Posts:  32
Joined:  2009-11-04
Gouldsboro, PA
 

It’s possibly just my copy of firefox, could anyone verify this??
Sean

 
Magento Community Magento Community
Magento Community
Magento Community
 
Martin
Guru
 
Avatar
Total Posts:  445
Joined:  2007-08-31
Brno | London | Los Angeles
 

Win XP MUI + Firefox 3.5.5 => CU3ER on your web works with no problem ... wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
madsm
Member
 
Total Posts:  34
Joined:  2008-09-26
Copenhagen, Denmark
 

I tryed your method, but it doesnt work in firefox and explorer for me. So I did this: (what I have testet it works in safari, firefox, explorer, chrome)

I imported it into images/flash/cu3er/ - remember to change that! smile

<script type="text/javascript" src="{{skin url='images/flash/cu3er/js/swfobject/swfobject.js}}"></script>

<object classid="clsid:cu3er.swf" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="1000" height="300">
    <
param name=movie value="{{skin url='images/flash/cu3er/cu3er.swf'}}">
                <
param name=quality value=high>
                <
param name="wmode" value="transparent">
                <
param name="id" value="slider">
                <
param name="FlashVars " value="xml={{skin url='images/flash/cu3er/config.xml}}">
                <
embed src="{{skin url='images/flash/cu3er/cu3er.swf'}}" quality=high wmode="transparent" id="slider" FlashVars="xml={{skin url='images/flash/cu3er/config.xml}}" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="1000" height="300">
                </
embed
</
object>
 
Magento Community Magento Community
Magento Community
Magento Community
 
Otavio
Member
 
Total Posts:  70
Joined:  2008-09-12
 

Hey Guys!

Been trying to insert Cu3er to my home page, without success.
I literally copied every code, but even though, nothing seems to be loaded in my page.

Is there any block that i should put in the CMS page (not in the design)? Is that XML right?

Cu3er is at “root/cu3er” and also in “skin/frontend/default/myskin/cu3er”

 
Magento Community Magento Community
Magento Community
Magento Community
 
Otavio
Member
 
Total Posts:  70
Joined:  2008-09-12
 

found what missed:
In the content area of the CMS pu this code

{{block type="cms/block" block_id="cu3er"}}

thanks!!

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 5