Dans Magento 1.9 Comment afficher mini-panier dans le menu principal?

Question

Je suis nouveau sur Magento 1.9. J'ai un thème personnalisé. J'ai besoin d'afficher un mini-panier fonctionnel dans le menu supérieur. En ce moment je ne suis pas sûr de savoir comment y parvenir?

Answer 1

J'ai trouvé un guide étape par étape à mon problème. Lien de partage ici pour référence future.

http://dltr.org/blog/magento/118/Magento-add-sidebar-mini-cart-on-the-header

cet en-tête mini-panier dépend de la barre latérale mini-panier, assurez-vous qu'il est actif à: magento admin/système/configuration/Ventes/Commander/Panier Barre latérale Sélectionnez « OUI » pour l'affichage Panier Barre latérale

AJOUTZ code à l'intérieur sur checkout.xml:

chemin: app \ conception \ frontend \ votre-paquet \ votre-modèle \ layout \ checkout.xml

<reference name="header"> 
    <block type="checkout/cart_sidebar" name="cart_cartheader" template="checkout/cart/cartheader.phtml" before="-"> 
     <action method="addItemRender"><type>simple</type><block>checkout/cart_item_renderer</block><template>checkout/cart/cartheader/default.phtml</template></action> 
     <action method="addItemRender"><type>grouped</type><block>checkout/cart_item_renderer_grouped</block><template>checkout/cart/cartheader/default.phtml</template></action> 
     <action method="addItemRender"><type>configurable</type><block>checkout/cart_item_renderer_configurable</block><template>checkout/cart/cartheader/default.phtml</template></action> 

     <block type="core/text_list" name="cart_cartheader.extra_actions" as="extra_actions" translate="label" module="checkout"> 
      <label>Shopping Cart Cartheader Extra Actions</label> 
     </block> 
    </block> 
</reference> 

Créer un nouveau cartheader de fichier. phtml sous la caisse/panier ci-dessous et ajoutez le code ci-dessous il:

chemin: app \ conception \ frontend \ votre-paquet \ votre-modèle \ template \ caisse \ panier \ cartheader.phtml

<div class="mini-cart-layer"> 
    <?php if ($this->getIsNeedToDisplaySideBar()):?> 
     <div class="top-cart"> 
      <?php $_cartQty = $this->getSummaryCount() ?> 
      <?php if ($_cartQty > 0): ?> 
       <?php $_myCart = $this->__('Shopping Cart (%s items)', $_cartQty) ?> 
      <?php else: ?> 
       <?php $_myCart = $this->__('Shopping Cart (0 item)') ?> 
      <?php endif ?> 

      <?php if ($this->getIsLinkMode() || !$this->getIsNeedToDisplaySideBar()):?> 
       <div class="block-title no-items"> 
        <ul class="links cart-link"> 
         <li ><a href="<?php echo $this->getUrl('checkout/cart'); ?>" rel="nofollow"><?php echo $_myCart ?></a> </li> 
        </ul> 
       </div> 
      <?php else:?> 
       <div class="block-title<?php if(!$_cartQty) { echo (' no-items'); } ?>"> 
        <span id="cartHeader"><?php echo $_myCart ?></span> 
       </div> 
       <div id="topCartContent" class="block-content" style="display:none"> 
        <div class="inner-wrapper"><?php /*extra div to smooth slideUp and slideDown*/ ?> 
         <?php $_items = $this->getRecentItems() ?> 
         <?php if(count($_items)): ?> 
          <p class="block-subtitle"> 
           <span onclick="toggleTopCart();" class="close-btn"><?php echo $this->__('Close'); ?></span> 
           <?php echo $this->__('Recently added item(s)') ?> 
          </p> 
          <ol id="mini-cart" class="mini-products-list"> 
           <?php foreach($_items as $_item): ?> 
            <?php echo $this->getItemHtml($_item) ?> 
           <?php endforeach; ?> 
          </ol> 
          <script type="text/javascript">decorateList('mini-cart', 'none-recursive')</script> 
         <?php else: ?> 
          <p class="block-subtitle"> 
           <span onclick="toggleTopCart()" class="close-btn"><?php echo $this->__('Close'); ?></span> 
            <?php echo $this->__('Recently added item(s)') ?> 
          </p> 
          <p class="cart-empty"> 
           <?php echo $this->__('You have no items in your shopping cart.') ?> 
          </p> 
         <?php endif ?> 
         <?php if($_cartQty && $this->isPossibleOnepageCheckout()): ?> 
          <div class="actions"> 
           <a href="<?php echo $this->getUrl('checkout/cart'); ?>" rel="nofollow"><?php echo $this->__('Go to Shopping Cart') ?></a> 
           <button class="button" type="button" onclick="setLocation('<?php echo $this->getCheckoutUrl() ?>')"><span><span><?php echo $this->__('Checkout') ?></span></span></button> 
          </div> 
         <?php endif ?> 
        </div> 
       </div> 
      <?php endif;?> 
     </div> 
    <?php endif;?> 
</div> 

maintenant créer un nouveau fichier default.phtml sous la caisse/panier/cartheader comme ci-dessous et ajoutez le code suivant:

chemin: app \ conception \ frontend \ votre-paquet \ votre-modèle \ template \ caisse \ panier \ cartheader \ default.phtml

<?php 
$_item = $this->getItem(); 
$isVisibleProduct = $_item->getProduct()->isVisibleInSiteVisibility(); 
//$canApplyMsrp = Mage::helper('catalog')->canApplyMsrp($_item->getProduct(),  Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type::TYPE_BEFORE_ORDER_CONFIRM ); 
?> 
<li class="item"> 
    <?php if ($this->hasProductUrl()): ?> 
     <a href="<?php echo $this->getProductUrl()?>" title="<?php echo  $this->htmlEscape($this->getProductName()) ?>" class="product-image"><img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" width="50" height="50" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" /></a> 
    <?php else: ?> 
     <span class="product-image"><img src="<?php echo $this->getProductThumbnail()->resize(50, 50)->setWatermarkSize('30x10'); ?>" width="50" height="50" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" /></span> 
    <?php endif; ?> 
    <div class="product-details"> 
     <p class="product-name"> 
      <?php if ($this->hasProductUrl()): ?> 
       <a href="<?php echo $this->getProductUrl() ?>"> 
      <?php endif; ?> 
       <?php echo $this->htmlEscape($this->getProductName()) ?> 
      <?php if ($this->hasProductUrl()): ?> 
       </a> 
      <?php endif; ?> 
     </p> 
     <a href="<?php echo $this->getDeleteUrl() ?>" title="<?php echo $this->__('Remove This Item') ?>" onclick="return confirm('<?php echo $this->__('Are you sure you would like to remove this item from the shopping cart?') ?>');" class="top-btn-remove"> 
      <?php echo $this->__('Remove This Item') ?> 
     </a> 
    </div> 
</li> 

page Ouvrir un modèle/html/header.phtml et ajoutez le code suivant à l'endroit approprié ou bas

<?php echo $this->getChildHtml('cart_cartheader') ?> 

maintenant, nous avons besoin de Javascript pour glisser mini panier et vers le bas (s) lide toggle). Pour atteindre cet effet de bascule ajoutez le code suivant le nouveau fichier javascript nommé cf.js

chemin: la peau \ frontend \ votre paquetage \ votre-modèle \ js \ cf.js

/** 

function slideUp() 
{ 
    jQuery('#topCartContent:visible').slideUp(1000); 
    jQuery('.mini-cart-layer').addClass('mini-cart-layer-up'); 
    jQuery('.mini-cart-layer').removeClass('mini-cart-layer-down'); 
} 

function slideDown() 
{ 
    jQuery('#topCartContent:hidden').slideDown(1000); 
    /*startTimer()*/ /* optional*/ 
    jQuery('.mini-cart-layer').addClass('mini-cart-layer-down'); 
    jQuery('.mini-cart-layer').removeClass('mini-cart-layer-up'); 
} 

function toggleTopCart() 
{ 
if(jQuery('#topCartContent').is(':visible')) 
    { 
     slideUp(); 
    } else { 
     slideDown(); 
    } 
} 

var timer; 
function startTimer() 
{ 
    timer = setTimeout(function(){ 
     slideUp(); 
    }, 5000); 
} 

jQuery(document).ready(function(){ 
    jQuery('.mini-cart-layer .top-cart .block-title #cartHeader').click(function(){ 
     toggleTopCart(); 
    }); 

    jQuery('.mini-cart-layer .top-cart .block-title   #cartHeader').mouseover(function(){ 
     clearTimeout(timer); 
    }).mouseout(function(){ 
     startTimer(); 
    }); 

    jQuery("#topCartContent").mouseover(function() { 
     clearTimeout(timer); 
    }).mouseout(function(){ 
     startTimer(); 
    }); 
}); 

Pour inclure ci-dessus fichier sur la section ajouter la ligne ci-dessous sur page.xml après l'inclusion de jquery.

chemin: app \ conception \ frontend \ votre-paquet \ votre-modèle \ layout \ page.xml

<action method="addItem"><type>skin_js</type><name>js/jquery.js</name><params/></action> 
<action method="addItem"><type>skin_js</type><name>js/cf.js</name><params/></action> 

maintenant temps pour CSS pour les onglets: Vous devez modifier comme votre besoin et remplacer les images .

/*---*/ 
.clear:after { 
clear: both; 
content: "."; 
display: block; 
height: 0; 
visibility: hidden; 
} 
div.mini-cart-layer { 
background: url("../images/view_shopping_cart.jpg") no-repeat scroll 0 0 transparent; 
height: 26px; 
padding: 0; 
position: absolute; 
right: 0; 
top: 9px; 
width: 165px; 
z-index: 99; 
} 
.top-cart .top-btn-remove { 
background: url("../images/btn_remove.gif") no-repeat scroll 0 0 transparent; 
display: block; 
font-size: 11px; 
height: 15px; 
line-height: 11px; 
margin: 0 0 3px; 
overflow: hidden; 
padding: 0 0 0 15px; 
} 
div.mini-cart-layer-up{} 
div.mini-cart-layer-down{background-position: 0 bottom;} 
.mini-cart-layer span#cartHeader { 
display: block; 
height: 26px; 
overflow: hidden; 
text-align: left; 
text-indent: -99999px; 
width: 165px; 
} 
.top-cart { 
float: left; 
position: relative; 
} 
.top-cart .block-title { 
white-space: nowrap; 
cursor: pointer; 
} 
.top-cart .block-title.expanded { 
background-position: 0 3px !important; 
} 
.top-cart .block-title.expanded span { 
background-position: 100% -126px !important; 
} 
.top-cart .block-content { 
background: none repeat scroll 0 0 #FDFDFD; 
font-size: 11px; 
position: absolute; 
right: 0; 
text-align: left; 
top: 20px; 
width: 267px; 
} 
.top-cart .block-content ol { 
margin: 0; 
padding: 0; 
list-style: none outside none; 
} 
.top-cart .inner-wrapper { 
border: 4px solid #DB4C6A; 
} 
.top-cart .block-content .block-subtitle { 
background: #DB4C6A; 
font-size: 10px; 
font-weight: bold; 
color: #fff; 
line-height: 12px; 
padding: 3px 10px 4px; 
} 
.top-cart .block-content .block-subtitle .close-btn { 
float: right; 
width: 13px; 
height: 0; 
padding-top: 12px; 
text-align: left; 
overflow: hidden; 
cursor: pointer; 
background: url(../images/btn_remove.gif) no-repeat 0 0; 
position: relative; 
z-index: 1; 
} 
.top-cart .cart-empty .close-btn { 
float: right; 
width: 13px; 
height: 0; 
padding-top: 12px; 
text-align: left; 
overflow: hidden; 
cursor: pointer; 
background: url(../images/btn_remove.gif) no-repeat 0 0; 
position: relative; 
z-index: 1; 
} 
.top-cart .cart-empty { 
padding: 10px 10px 10px 20px; 
color: #666; 
} 
.top-cart .block-content .item { 
padding: 8px 5px 8px 11px; 
border-bottom: 1px solid #DDD; 
margin: 0 5px; 
} 
.top-cart .block-content .last { 
border-bottom: none; 
} 
.top-cart .block-content .item .product-name { 
font-size: 11px; 
height: 30px; 
line-height: 14px; 
margin: 0 0 5px; 
overflow: hidden; 
} 
.top-cart .block-content .item .product-name a { 
font-size: 11px; 
text-decoration: none; 
color: #444; 
} 
.top-cart .block-content table { 
margin: 5px 0 0 0; 
} 
.top-cart .block-content table th { 
padding: 1px 8px; 
color: #8f8f8f; 
text-align: right; 
} 
.top-cart .block-content table td { 
text-align: left; 
padding: 1px 0; 
} 
.top-cart .block-content .subtotal { 
padding: 2px 5px; 
text-align: center; 
color: #666; 
} 
.top-cart .actions { 
background-color: #DB4C6A; 
color: #FFFFFF; 
padding: 5px 11px; 
text-align: right; 
z-index: 999; 
} 
.top-cart .actions a { 
float: left; 
line-height: 23px; 
} 
.top-cart .actions button { 
float: none; 
color: #FFF; 
padding-top: 3px; 
} 
div.top-cart { 
float: none; 
} 
div.top-cart .block-title { 
color: #000000; 
display: block; 
float: none; 
font-family: arial; 
font-size: 12px; 
font-weight: bold; 
padding: 0; 
} 
div.top-cart .block-content { 
top: 26px; 
} 
div.top-cart .block-content ol li { 
display: block; 
float: none; 
} 
/*===*/