Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Collapsable Shopping Cart? 
 
ths_
Jr. Member
 
Total Posts:  13
Joined:  2008-06-24
 

So I have just gotten into customizing Magento for my needs and I thought it would be neat to have a collapsable shopping cart. Nothing really fancy, just a little “+” that the user clicks on to collapse it. The only problem I am having is figuring out how the objects on the pages are pulled and where they come from.

I have no problem writing the javascript to do a hide/show, but I am a little lost when it comes to inserting this into the shopping cart code. Any pointers to files where this code is handled woudl be much appreciated.

Thanks,

ths

P.S. also, can I just toss my JS into the top of the .phtml files that are used by magento or should I add it to the template js directory? If that’s the later of the two, how do I include the file on the pages? Thanks again.

 
Magento Community Magento Community
Magento Community
Magento Community
 
srinigenie
Guru
 
Avatar
Total Posts:  539
Joined:  2008-02-04
 

Just as brief overview of the jargons used and the overall UI architecture of Magento, Magento sees a page as a
STRUCTURE BLOCK - which broadly is the Header, footer, left, right and main content
CONTENT BLOCK - which is more detailed view of the STRUCTURE BLOCK as we zoom into the structure block and see its contents - like the components sitting on the right column would form a content block.
LAYOUT - XML files that define the Structure block
TEMPLATES - PHTML files that fill the content for structure blocks
-----------------------------------------------------------------------------------------------------------------------

On changes to the home page, I have split up as mentioned below -
1. Main Content - As you are already aware, this is modified from Admin - CMS->Manage Pages
2. Magento offers the flexibility of three columns on any page. Presently the home page is set to “Two columns with a right bar” layout. This if needed, can be changed in CMS->Manage Pages -> Edit Home page ->Custom Design -> Layout
3. Footer - CMS->Static Blocks on the admin login will help you alter the footer links
4. Header - which includes the logo and layout of header - this comes from
frontend\neoInterface\default\template\page/html/header.phtml
5. Search Bar on Header- The search bar comes from
frontend\neoInterface\default\template\catalogsearch/form.mini.phtml
6. Top Links - In the directory ‘app\design\frontend\neoInterface\default\layout’, there are a set of XML files. All those files that have the xml tag ‘<reference name="top.links">’ contribute to t he top links that we see. For example , My Account comes from ‘app\design\frontend\neoInterface\default\layout\customer.xml’
7. Right Column - When the home page is set to “two column with right side bar”, only the right side bar column is visible. By default all the XML tags that ‘<reference name="right">’ will contribute to the contents on the side bar. For example checkout.xml contributes the mini cart that we currently see. Inorder to add or remove any of the side bar contents, all we would need to do is to unset - For example if I wish to remove the “products viewed” from the side bar, I would update the home Page CMS (Admin -> CMS->Manage Pages -> Customer Design -> Layout Update XML)

<reference name="right">
<action method="unsetChild"><alias>right.reports.product.viewed</alias></action>
</reference>

I doubt if you can toss your JS into the top of the .phtml file as the .phtml would only form the content body of the web page.

BTW am interested in the collapsible shopping cart. Please let me in on a demo once you are done smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
ths_
Jr. Member
 
Total Posts:  13
Joined:  2008-06-24
 

I will keep you i the loop. I’m just trying to find where the mini cart .phtml file is. I figure that once I find that, i can edit it and then include my JS with the default theme and be finished.

 
Magento Community Magento Community
Magento Community
Magento Community
 
srinigenie
Guru
 
Avatar
Total Posts:  539
Joined:  2008-02-04
 

the .phtml for mini-cart is
app\design\frontend\default\default\template\checkout\cart\sidebar.phtml

 
Magento Community Magento Community
Magento Community
Magento Community
 
ths_
Jr. Member
 
Total Posts:  13
Joined:  2008-06-24
 

Thanks, I just found it also.

Now all I need to do is figure out how to include my javascript file and I should be in business. smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
ths_
Jr. Member
 
Total Posts:  13
Joined:  2008-06-24
 

Ok, it looks like the page.xml file loads the .js files but for some reason I can’t get it to load mine, even if I put it in the mage/ directory.

 
Magento Community Magento Community
Magento Community
Magento Community
 
ths_
Jr. Member
 
Total Posts:  13
Joined:  2008-06-24
 

Ok, got it working just fine. I have it locally on my machine and not uploaded onilne yet. Here is how you would accomplish it:

Open your /magento/app/design/frontent/default/templatename/template/checkout/cart/sidebar.phtml

edit it to look like this:

<?php if($this->getCanDisplayCart()): ?>
<div class="box base-mini mini-cart">
    <
div class="head">
        
<?php $_cartQty $this->getSummaryCount() ?>
        
<h4><?php echo $this->__('My Cart'?> <a href="#" onclick="showHide('recents')">[+]</a></h4>
        
<?php if ($_cartQty>0): ?>
            <?php 
if ($_cartQty==1): ?>
            <?php 
echo $this->__('There is <a href="%s"><strong>1 item</strong></a> in your cart.'$this->getUrl('checkout/cart')) ?>
            <?php 
else: ?>
            <?php 
echo $this->__('There are <a href="%s"><strong>%s items</strong></a> in your cart.'$this->getUrl('checkout/cart'), $_cartQty?>
            <?php 
endif ?>
           
<class="subtotal"><?php echo $this->__('Cart Subtotal:'?> <strong><?php echo Mage::helper('core')->currency($this->getSubtotal()) ?></strong></p>
        
<?php endif ?>
    
</div>
    
<?php $_items $this->getRecentItems() ?>
    <?php 
if(count($_items)): ?>
        
<div class="actions">
            <
button class="form-button" type="button" onclick="setLocation('<?php echo $this->getUrl('checkout/onepage') ?>')"><span><?php echo $this->__('Checkout'?></span></button>
        </
div>
    
<?php endif ?>
    <?php 
if(count($_items)): ?>
    
<div id="recents">
    <
h5><?php echo $this->__('Recently addedf item(s)'?></h5>
    <
ol id="cart-sidebar">
    
<?php foreach($_items as $_item): ?>
        
<li>
            <
div class="product-images">
                <
a href="<?php echo $_item->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item->getThumbnailObject(), 'thumbnail')->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->htmlEscape($_item->getProductName()) ?>" width="50" height="50" /></a>
            </
div>
            <
div class="product-details">
                <
a href="<?php echo $this->getRemoveItemUrl($_item) ?>" onclick="return confirm('<?php echo $this->__('Are you sure you would like to remove this item from the shopping cart?') ?>');" class="widget-btn"><img src="<?php echo $this->getSkinUrl('images/list_remove_btn.gif') ?>" alt="<?php echo $this->__('Remove Product') ?>" /></a>
                <
a href="<?php echo $_item->getProductUrl() ?>"><?php echo $_item->getProductName() ?></a>
                
<?php echo $_item->getProductDescription() ?>
                
<br /><strong><?php echo 1*$_item->getQty() ?></strongx <?php echo Mage::helper('core')->currency($_item->getPrice()) ?>
            
</div>
        </
li>
    
<?php endforeach; ?>
    
</ol>
    </
div>

I just have a “+”, but you can obviously change that to whatever you want.

Now I was having troubles having it include my javasciript file, so I just tossed my showHide() function onto the included cookies.js inside /magento/js/mage

function showHide(elementid){
if (document.getElementById(elementid).style.display == 'none'){
document
.getElementById(elementid).style.display '';
else {
document
.getElementById(elementid).style.display 'none';
}
}
 
Magento Community Magento Community
Magento Community
Magento Community
 
Jono
Member
 
Avatar
Total Posts:  36
Joined:  2008-05-04
Sydney
 

Have you got a working version online yet?

I would be very interested in this functionality, however would want to place the collapsable cart in the header. I believe that many others would be interested in this mod also

thanks in advance

jono

 
Magento Community Magento Community
Magento Community
Magento Community
 
himmelbub
Jr. Member
 
Total Posts:  3
Joined:  2007-08-31
 

Is anybody have it working ? I tried to move my cart to header but it seams to not working properly
look here in the right corner it’s not refresh itself after update the cart

Here is the code from my header_cart.phtml file :

<div class="box base-mini mini-cart">
    <
div class="head">
        
<?php $_cartQty $this->getSummaryCount() ?>
        
<h4><?php echo $this->__('My Cart'?></h4>
        
<?php if ($_cartQty>0): ?>
            <?php 
if ($_cartQty==1): ?>
            <?php 
echo $this->__('There is <a href="%s"><strong>1 item</strong></a> in your cart.'$this->getUrl('checkout/cart')) ?>
            <?php 
else: ?>
            <?php 
echo $this->__('There are <a href="%s"><strong>%s items</strong></a> in your cart.'$this->getUrl('checkout/cart'), $_cartQty?>
            <?php 
endif ?>
           
<class="subtotal"><?php echo $this->__('Cart Subtotal:'?> <strong><?php echo Mage::helper('core')->currency($this->getSubtotal()) ?></strong></p>
        
<?php endif ?>
    
</div>
    
<?php $_items $this->getRecentItems() ?>
    <?php 
if(count($_items)): ?>
        
<div class="actions">
            <
button class="form-button" type="button" onclick="setLocation('<?php echo $this->getUrl('checkout/onepage') ?>')"><span><?php echo $this->__('Checkout'?></span></button>
        </
div>
    
<?php endif ?>
    <?php 
if(count($_items)): ?>
    
<h5><?php echo $this->__('Recently added item(s)'?></h5>
    <
ol id="cart-sidebar">
    
<?php foreach($_items as $_item): ?>
        
<li>
            <
div class="product-images">
                <
a href="<?php echo $_item->getProductUrl() ?>"><img src="<?php echo $this->helper('catalog/image')->init($_item->getThumbnailObject(), 'thumbnail')->resize(50, 50)->setWatermarkSize('30x10'); ?>" alt="<?php echo $this->htmlEscape($_item->getProductName()) ?>" width="50" height="50" /></a>
            </
div>
            <
div class="product-details">
                <
a href="<?php echo $this->getRemoveItemUrl($_item) ?>" onclick="return confirm('<?php echo $this->__('Are you sure you would like to remove this item from the shopping cart?') ?>');" class="widget-btn"><img src="<?php echo $this->getSkinUrl('images/list_remove_btn.gif') ?>" alt="<?php echo $this->__('Remove Product') ?>" /></a>
                <
a href="<?php echo $_item->getProductUrl() ?>"><?php echo $_item->getProductName() ?></a>
                
<?php echo $_item->getProductDescription() ?>
                
<br /><strong><?php echo 1*$_item->getQty() ?></strongx <?php echo Mage::helper('core')->currency($_item->getPrice()) ?>
            
</div>
        </
li>
    
<?php endforeach; ?>
    
</ol>
    <
script type="text/javascript">decorateList('cart-sidebar')</script>
    <?php 
else: ?>
    
<div class="content"><p><?php echo $this->__('You have no items in your shopping cart.'?></p></div>
    
<?php endif ?>
</div>

Please guys help me !!! I dont know how to do that :(

Image Attachments
cart.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
AliciaAO
Jr. Member
 
Total Posts:  20
Joined:  2008-09-25
 

did you ever get this fixed and if so would you share how?

 
Magento Community Magento Community
Magento Community
Magento Community
 
rickygri
Jr. Member
 
Total Posts:  22
Joined:  2009-01-17
 

Hey I use it on 1.2.0.1 if anyone’s interested....

1. For the sake of ease, Include the javascript in the cookies.js file as ths_ explained.

2. inside the tag for the block title (such as <h4><?php echo $this->__('My Cart') ?></h4>), add:

<a href="#" onclick="showHide('putyouridhere')">+

where ‘putyouridhere’ means add your id tag here.

So as an example:

<h4><?php echo $this->__('My Cart') ?><a href="#" onclick="showHide(’putyouridhere’)">+</h4>

3. Anything wrapped in a div with the specified id will now collapse.

Rick

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top