Magento 1.9トップメニューにミニカートを表示するには？

Question

Magento 1.9を初めて使用しています。私はカスタムテーマを持っています。トップメニューに機能的なミニカートを表示する必要があります。今私はこれを達成する方法がわからないのですか？

Answer 1

私は自分の問題をステップバイステップガイドで見つけました。将来の参照のためにリンクをここに共有してください。

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

ミニカートがサイドバーミニカートに依存し、このヘッダ、作ることが有効だと確信しで：表示ショッピングカート用 Magentoの管理/システム/設定/販売/チェックアウト/ショッピングカートのサイドバー を選択し、「YES」サイドバー。

はcheckout.xmlに内部コードの下に追加します。

パス：あなたのテンプレート\あなたのパッケージ\アプリ\設計\フロントエンドを\レイアウト\の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> 

は、新しいファイルcartheaderを作成します。以下のようにチェックアウト/カートの下PHTMLし、その中に以下のコードを追加します。

パス：あなたのテンプレート\あなたのパッケージ\アプリ\設計\フロントエンドを\テンプレート\チェックアウト\カートの\ 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> 

さて、次のようにチェックアウト/カート/ cartheaderの下に新しいファイルdefault.phtmlを作成し、次のコードを追加します。

パス：あなたのテンプレート\テンプレート\チェックアウト\カート\あなたのパッケージ\アプリ\設計\フロントエンド\ 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> 

オープンテンプレートページ/ HTML/header.phtml、及び底部または

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

は、今、私たちはJavascriptが上下ミニカートをスライドする必要があり、適切な場所に次のコードを追加します（sライドトグル）。上記含めるには、あなたのテンプレート\あなたのパッケージ\皮膚\フロントエンドを\ 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(); 
    }); 
}); 

：そのトグル効果を達成するために

パスcf.jsという名前の新しいJavaScriptのファイルに次のコードを追加しますセクションのファイルは、jqueryインクルード後にpage.xmlに次の行を追加します。

パス：今、あなたのテンプレート\あなたのパッケージ\アプリ\設計\フロントエンドを\レイアウト\の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> 

タブのCSSのための時間：あなたはあなたの必要性として修正して画像を交換する必要があります。

/*---*/ 
.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; 
} 
/*===*/