Php 带有产品缩略图的导航菜单Magento_Php_Html_Magento_Css

Php 带有产品缩略图的导航菜单Magento

php html magento css

Php 带有产品缩略图的导航菜单Magento,php,html,magento,css,Php,Html,Magento,Css,大家好，我正在尝试将CSS3 Mashmenu集成到我的Magento商店中 <div id="pageContainer"> <div class="mashmenu"> <div class="fnav"><a href="#" class="flink"><?php echo $this->__('BROWSE PRODUCTS'); ?>+</a> <div class="al

大家好，我正在尝试将CSS3 Mashmenu集成到我的Magento商店中

<div id="pageContainer">
  <div class="mashmenu">
    <div class="fnav"><a href="#" class="flink"><?php echo $this->__('BROWSE PRODUCTS'); ?>+</a>
        <div class="allContent">
          <?php foreach ($_categories as $_category): ?>
            <?php if($_category->getIsActive()): ?>
                <div class="snav"><a href="#" class="slink">
                  <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="current"<?php endif; ?>><?php echo $this->htmlEscape($_category->getName()) ?></a> (<?php echo $_category->getProductCount() ?>)</a>
                  <?php $collection = $_category->getProductCollection()->addAttributeToSort('name', 'asc'); ?>
                  <?php foreach ($collection as $_product) : ?>
                    <div class="insideContent"> 
                      <a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(75) ?>" width="75" height="75" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                      </a> 
                      <span>  <?php $sdesc = $_product->getShortDescription();
                      $sdesc = trim($sdesc);
                      $limit = 170;
                      if (strlen($sdesc) > $limit) {
                        $sdesc = substr($sdesc, 0, strrpos(substr($sdesc, 0, $limit), ' '));
                      } ?>
                      <?php echo $sdesc."..."; ?></span> 
                    </div>
                  <?php endforeach; ?> 
                </div>
            <?php endif; ?>
          <?php endforeach; ?>
          <!-- end insideContent -->
        </div>
      </div>
    </div>
  </div>
  <script>
    $j(document).ready(function(){
      $j('div.mashmenu img').css({"width":"100px","height":"60px"});
      $j('div.mashmenu').find('.allContent').css({"top":"38px"});

      $j('div.mashmenu').mouseleave(function(){
        $j('div.mashmenu .allContent').show('50');
        $j('div.mashmenu .insideContent').fadeOut('50');
      }); 

      $j('.flink').mouseenter(function(){
        $j('div.mashmenu .allContent').show('50');
        $j(this).parent('.fnav').children('.allContent').show(200);
      });

      $j('.slink').mouseenter(function(){
        if($j(this).parent('.snav').children('.insideContent').find('a').size() != 0 )
          $j(this).parents('.allContent').css({"width":"640px","height":"500px"});
        else $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
          $j('div.mashmenu .insideContent').fadeOut('50');
        $j(this).parent('.snav').children('.insideContent').fadeIn(200);
      });

      $j('.snav').mouseleave(function(){
        $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
      });

      $j('.snav').mouseenter(function(){
        $j(this).children('.insideContent').css({"display":"block","position":"absolute","width":"auto","height":"450px"});
      });
    });
  </script>
<?php endif; ?>

我想设置菜单来显示产品类别，当鼠标悬停在上面时，会显示该类别中每个产品的简短描述的产品缩略图

<div id="pageContainer">
  <div class="mashmenu">
    <div class="fnav"><a href="#" class="flink"><?php echo $this->__('BROWSE PRODUCTS'); ?>+</a>
        <div class="allContent">
          <?php foreach ($_categories as $_category): ?>
            <?php if($_category->getIsActive()): ?>
                <div class="snav"><a href="#" class="slink">
                  <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="current"<?php endif; ?>><?php echo $this->htmlEscape($_category->getName()) ?></a> (<?php echo $_category->getProductCount() ?>)</a>
                  <?php $collection = $_category->getProductCollection()->addAttributeToSort('name', 'asc'); ?>
                  <?php foreach ($collection as $_product) : ?>
                    <div class="insideContent"> 
                      <a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(75) ?>" width="75" height="75" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                      </a> 
                      <span>  <?php $sdesc = $_product->getShortDescription();
                      $sdesc = trim($sdesc);
                      $limit = 170;
                      if (strlen($sdesc) > $limit) {
                        $sdesc = substr($sdesc, 0, strrpos(substr($sdesc, 0, $limit), ' '));
                      } ?>
                      <?php echo $sdesc."..."; ?></span> 
                    </div>
                  <?php endforeach; ?> 
                </div>
            <?php endif; ?>
          <?php endforeach; ?>
          <!-- end insideContent -->
        </div>
      </div>
    </div>
  </div>
  <script>
    $j(document).ready(function(){
      $j('div.mashmenu img').css({"width":"100px","height":"60px"});
      $j('div.mashmenu').find('.allContent').css({"top":"38px"});

      $j('div.mashmenu').mouseleave(function(){
        $j('div.mashmenu .allContent').show('50');
        $j('div.mashmenu .insideContent').fadeOut('50');
      }); 

      $j('.flink').mouseenter(function(){
        $j('div.mashmenu .allContent').show('50');
        $j(this).parent('.fnav').children('.allContent').show(200);
      });

      $j('.slink').mouseenter(function(){
        if($j(this).parent('.snav').children('.insideContent').find('a').size() != 0 )
          $j(this).parents('.allContent').css({"width":"640px","height":"500px"});
        else $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
          $j('div.mashmenu .insideContent').fadeOut('50');
        $j(this).parent('.snav').children('.insideContent').fadeIn(200);
      });

      $j('.snav').mouseleave(function(){
        $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
      });

      $j('.snav').mouseenter(function(){
        $j(this).children('.insideContent').css({"display":"block","position":"absolute","width":"auto","height":"450px"});
      });
    });
  </script>
<?php endif; ?>

我的问题是设置这个，所以它是动态的，因为我更喜欢通过管理员控制菜单

<div id="pageContainer">
  <div class="mashmenu">
    <div class="fnav"><a href="#" class="flink"><?php echo $this->__('BROWSE PRODUCTS'); ?>+</a>
        <div class="allContent">
          <?php foreach ($_categories as $_category): ?>
            <?php if($_category->getIsActive()): ?>
                <div class="snav"><a href="#" class="slink">
                  <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="current"<?php endif; ?>><?php echo $this->htmlEscape($_category->getName()) ?></a> (<?php echo $_category->getProductCount() ?>)</a>
                  <?php $collection = $_category->getProductCollection()->addAttributeToSort('name', 'asc'); ?>
                  <?php foreach ($collection as $_product) : ?>
                    <div class="insideContent"> 
                      <a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(75) ?>" width="75" height="75" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                      </a> 
                      <span>  <?php $sdesc = $_product->getShortDescription();
                      $sdesc = trim($sdesc);
                      $limit = 170;
                      if (strlen($sdesc) > $limit) {
                        $sdesc = substr($sdesc, 0, strrpos(substr($sdesc, 0, $limit), ' '));
                      } ?>
                      <?php echo $sdesc."..."; ?></span> 
                    </div>
                  <?php endforeach; ?> 
                </div>
            <?php endif; ?>
          <?php endforeach; ?>
          <!-- end insideContent -->
        </div>
      </div>
    </div>
  </div>
  <script>
    $j(document).ready(function(){
      $j('div.mashmenu img').css({"width":"100px","height":"60px"});
      $j('div.mashmenu').find('.allContent').css({"top":"38px"});

      $j('div.mashmenu').mouseleave(function(){
        $j('div.mashmenu .allContent').show('50');
        $j('div.mashmenu .insideContent').fadeOut('50');
      }); 

      $j('.flink').mouseenter(function(){
        $j('div.mashmenu .allContent').show('50');
        $j(this).parent('.fnav').children('.allContent').show(200);
      });

      $j('.slink').mouseenter(function(){
        if($j(this).parent('.snav').children('.insideContent').find('a').size() != 0 )
          $j(this).parents('.allContent').css({"width":"640px","height":"500px"});
        else $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
          $j('div.mashmenu .insideContent').fadeOut('50');
        $j(this).parent('.snav').children('.insideContent').fadeIn(200);
      });

      $j('.snav').mouseleave(function(){
        $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
      });

      $j('.snav').mouseenter(function(){
        $j(this).children('.insideContent').css({"display":"block","position":"absolute","width":"auto","height":"450px"});
      });
    });
  </script>
<?php endif; ?>

如果有人能告诉我哪里出了问题，我会非常感激，因为当前的代码不起作用

<div id="pageContainer">
  <div class="mashmenu">
    <div class="fnav"><a href="#" class="flink"><?php echo $this->__('BROWSE PRODUCTS'); ?>+</a>
        <div class="allContent">
          <?php foreach ($_categories as $_category): ?>
            <?php if($_category->getIsActive()): ?>
                <div class="snav"><a href="#" class="slink">
                  <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="current"<?php endif; ?>><?php echo $this->htmlEscape($_category->getName()) ?></a> (<?php echo $_category->getProductCount() ?>)</a>
                  <?php $collection = $_category->getProductCollection()->addAttributeToSort('name', 'asc'); ?>
                  <?php foreach ($collection as $_product) : ?>
                    <div class="insideContent"> 
                      <a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(75) ?>" width="75" height="75" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                      </a> 
                      <span>  <?php $sdesc = $_product->getShortDescription();
                      $sdesc = trim($sdesc);
                      $limit = 170;
                      if (strlen($sdesc) > $limit) {
                        $sdesc = substr($sdesc, 0, strrpos(substr($sdesc, 0, $limit), ' '));
                      } ?>
                      <?php echo $sdesc."..."; ?></span> 
                    </div>
                  <?php endforeach; ?> 
                </div>
            <?php endif; ?>
          <?php endforeach; ?>
          <!-- end insideContent -->
        </div>
      </div>
    </div>
  </div>
  <script>
    $j(document).ready(function(){
      $j('div.mashmenu img').css({"width":"100px","height":"60px"});
      $j('div.mashmenu').find('.allContent').css({"top":"38px"});

      $j('div.mashmenu').mouseleave(function(){
        $j('div.mashmenu .allContent').show('50');
        $j('div.mashmenu .insideContent').fadeOut('50');
      }); 

      $j('.flink').mouseenter(function(){
        $j('div.mashmenu .allContent').show('50');
        $j(this).parent('.fnav').children('.allContent').show(200);
      });

      $j('.slink').mouseenter(function(){
        if($j(this).parent('.snav').children('.insideContent').find('a').size() != 0 )
          $j(this).parents('.allContent').css({"width":"640px","height":"500px"});
        else $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
          $j('div.mashmenu .insideContent').fadeOut('50');
        $j(this).parent('.snav').children('.insideContent').fadeIn(200);
      });

      $j('.snav').mouseleave(function(){
        $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
      });

      $j('.snav').mouseenter(function(){
        $j(this).children('.insideContent').css({"display":"block","position":"absolute","width":"auto","height":"450px"});
      });
    });
  </script>
<?php endif; ?>


()
$j（文档）.ready（函数（）{
$j（'div.mashsmenu img'）.css（{“宽度”：“100px”，“高度”：“60px”}）；
$j（'div.mashmenu'）.find（'.allContent'）.css（{“top”：“38px”}）；
$j（'div.mashmenu'）.mouseleave（函数（）{
$j（'div.mashmenu.allContent'）.show（'50'）；
$j（'div.mashmenu.insideContent'）。淡出（'50'）；
}); 
$j（'.flink'）.mouseenter（函数（）{
$j（'div.mashmenu.allContent'）.show（'50'）；
$j（this）.parent（'.fnav'）.children（'.allContent'）.show（200）；
});
$j（'.slink'）.mouseenter（函数（）{
if（$j（this）.parent（'.snav'）.children（'.insideContent'）.find（'a'）.size（）！=0）
$j（this）.parents（'.allContent'）.css（{“宽度”：“640px”，“高度”：“500px”}）；
else$j（this）.parents（'.allContent'）.css（{“宽度”：“自动”，“高度”：“自动”}）；
$j（'div.mashmenu.insideContent'）。淡出（'50'）；
$j（this）.parent（'.snav'）。children（'.insideContent'）。fadeIn（200）；
});
$j（'.snav'）.mouseleave（函数（）{
$j（this）.parents（'.allContent'）.css（{“宽度”：“自动”，“高度”：“自动”}）；
});
$j（'.snav'）.mouseenter（函数（）{
$j（this）.children（'.insideContent'）.css（{“display”：“block”，“position”：“绝对”，“width”：“auto”，“height”：“450px”}）；
});
});

您的$\u产品在这里没有定义，而且每个类别只有一个产品，所以要显示哪一个

<div id="pageContainer">
  <div class="mashmenu">
    <div class="fnav"><a href="#" class="flink"><?php echo $this->__('BROWSE PRODUCTS'); ?>+</a>
        <div class="allContent">
          <?php foreach ($_categories as $_category): ?>
            <?php if($_category->getIsActive()): ?>
                <div class="snav"><a href="#" class="slink">
                  <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="current"<?php endif; ?>><?php echo $this->htmlEscape($_category->getName()) ?></a> (<?php echo $_category->getProductCount() ?>)</a>
                  <?php $collection = $_category->getProductCollection()->addAttributeToSort('name', 'asc'); ?>
                  <?php foreach ($collection as $_product) : ?>
                    <div class="insideContent"> 
                      <a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(75) ?>" width="75" height="75" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                      </a> 
                      <span>  <?php $sdesc = $_product->getShortDescription();
                      $sdesc = trim($sdesc);
                      $limit = 170;
                      if (strlen($sdesc) > $limit) {
                        $sdesc = substr($sdesc, 0, strrpos(substr($sdesc, 0, $limit), ' '));
                      } ?>
                      <?php echo $sdesc."..."; ?></span> 
                    </div>
                  <?php endforeach; ?> 
                </div>
            <?php endif; ?>
          <?php endforeach; ?>
          <!-- end insideContent -->
        </div>
      </div>
    </div>
  </div>
  <script>
    $j(document).ready(function(){
      $j('div.mashmenu img').css({"width":"100px","height":"60px"});
      $j('div.mashmenu').find('.allContent').css({"top":"38px"});

      $j('div.mashmenu').mouseleave(function(){
        $j('div.mashmenu .allContent').show('50');
        $j('div.mashmenu .insideContent').fadeOut('50');
      }); 

      $j('.flink').mouseenter(function(){
        $j('div.mashmenu .allContent').show('50');
        $j(this).parent('.fnav').children('.allContent').show(200);
      });

      $j('.slink').mouseenter(function(){
        if($j(this).parent('.snav').children('.insideContent').find('a').size() != 0 )
          $j(this).parents('.allContent').css({"width":"640px","height":"500px"});
        else $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
          $j('div.mashmenu .insideContent').fadeOut('50');
        $j(this).parent('.snav').children('.insideContent').fadeIn(200);
      });

      $j('.snav').mouseleave(function(){
        $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
      });

      $j('.snav').mouseenter(function(){
        $j(this).children('.insideContent').css({"display":"block","position":"absolute","width":"auto","height":"450px"});
      });
    });
  </script>
<?php endif; ?>

将其替换为以下内容：

<div id="pageContainer">
  <div class="mashmenu">
    <div class="fnav"><a href="#" class="flink"><?php echo $this->__('BROWSE PRODUCTS'); ?>+</a>
        <div class="allContent">
          <?php foreach ($_categories as $_category): ?>
            <?php if($_category->getIsActive()): ?>
                <div class="snav"><a href="#" class="slink">
                  <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="current"<?php endif; ?>><?php echo $this->htmlEscape($_category->getName()) ?></a> (<?php echo $_category->getProductCount() ?>)</a>
                  <?php $collection = $_category->getProductCollection()->addAttributeToSort('name', 'asc'); ?>
                  <?php foreach ($collection as $_product) : ?>
                    <div class="insideContent"> 
                      <a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(75) ?>" width="75" height="75" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                      </a> 
                      <span>  <?php $sdesc = $_product->getShortDescription();
                      $sdesc = trim($sdesc);
                      $limit = 170;
                      if (strlen($sdesc) > $limit) {
                        $sdesc = substr($sdesc, 0, strrpos(substr($sdesc, 0, $limit), ' '));
                      } ?>
                      <?php echo $sdesc."..."; ?></span> 
                    </div>
                  <?php endforeach; ?> 
                </div>
            <?php endif; ?>
          <?php endforeach; ?>
          <!-- end insideContent -->
        </div>
      </div>
    </div>
  </div>
  <script>
    $j(document).ready(function(){
      $j('div.mashmenu img').css({"width":"100px","height":"60px"});
      $j('div.mashmenu').find('.allContent').css({"top":"38px"});

      $j('div.mashmenu').mouseleave(function(){
        $j('div.mashmenu .allContent').show('50');
        $j('div.mashmenu .insideContent').fadeOut('50');
      }); 

      $j('.flink').mouseenter(function(){
        $j('div.mashmenu .allContent').show('50');
        $j(this).parent('.fnav').children('.allContent').show(200);
      });

      $j('.slink').mouseenter(function(){
        if($j(this).parent('.snav').children('.insideContent').find('a').size() != 0 )
          $j(this).parents('.allContent').css({"width":"640px","height":"500px"});
        else $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
          $j('div.mashmenu .insideContent').fadeOut('50');
        $j(this).parent('.snav').children('.insideContent').fadeIn(200);
      });

      $j('.snav').mouseleave(function(){
        $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
      });

      $j('.snav').mouseenter(function(){
        $j(this).children('.insideContent').css({"display":"block","position":"absolute","width":"auto","height":"450px"});
      });
    });
  </script>
<?php endif; ?>

<?php $collection =   Mage::getModel('catalog/product')->getCollection()->addCategoryFilter($_category)->setPageSize(4);
<div class="insideContent"> 
<?php foreach ($collection as $_product)  { ?>
//Your product here, copy your code
<?php } /*end foreach*/ ?>
</div>


//您的产品在这里，复制您的代码

这样应该会更好。

谢谢您的回复，这非常有帮助。我已经更改了代码（请参见上面的^edit），但我现在在第27行得到一个错误：解析错误：语法错误，在/Applications/MAMP/htdocs/mysite/app/design/frontend/bootstrapped/default/template/vertnav/left.phtml中出现意外的'endforeach'（T_endforeach），我已经修复了错误，请参见上面的^code。。。但是navmenu不再显示…在尝试完成上述任务后，我发现Magento不允许在nav menu中显示产品缩略图。相反，我应该使用类别缩略图

<div id="pageContainer">
  <div class="mashmenu">
    <div class="fnav"><a href="#" class="flink"><?php echo $this->__('BROWSE PRODUCTS'); ?>+</a>
        <div class="allContent">
          <?php foreach ($_categories as $_category): ?>
            <?php if($_category->getIsActive()): ?>
                <div class="snav"><a href="#" class="slink">
                  <a href="<?php echo $this->getCategoryUrl($_category) ?>"<?php if ($this->isCategoryActive($_category)): ?> class="current"<?php endif; ?>><?php echo $this->htmlEscape($_category->getName()) ?></a> (<?php echo $_category->getProductCount() ?>)</a>
                  <?php $collection = $_category->getProductCollection()->addAttributeToSort('name', 'asc'); ?>
                  <?php foreach ($collection as $_product) : ?>
                    <div class="insideContent"> 
                      <a href="<?php echo $this->getProductUrl($_product) ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(75) ?>" width="75" height="75" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                      </a> 
                      <span>  <?php $sdesc = $_product->getShortDescription();
                      $sdesc = trim($sdesc);
                      $limit = 170;
                      if (strlen($sdesc) > $limit) {
                        $sdesc = substr($sdesc, 0, strrpos(substr($sdesc, 0, $limit), ' '));
                      } ?>
                      <?php echo $sdesc."..."; ?></span> 
                    </div>
                  <?php endforeach; ?> 
                </div>
            <?php endif; ?>
          <?php endforeach; ?>
          <!-- end insideContent -->
        </div>
      </div>
    </div>
  </div>
  <script>
    $j(document).ready(function(){
      $j('div.mashmenu img').css({"width":"100px","height":"60px"});
      $j('div.mashmenu').find('.allContent').css({"top":"38px"});

      $j('div.mashmenu').mouseleave(function(){
        $j('div.mashmenu .allContent').show('50');
        $j('div.mashmenu .insideContent').fadeOut('50');
      }); 

      $j('.flink').mouseenter(function(){
        $j('div.mashmenu .allContent').show('50');
        $j(this).parent('.fnav').children('.allContent').show(200);
      });

      $j('.slink').mouseenter(function(){
        if($j(this).parent('.snav').children('.insideContent').find('a').size() != 0 )
          $j(this).parents('.allContent').css({"width":"640px","height":"500px"});
        else $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
          $j('div.mashmenu .insideContent').fadeOut('50');
        $j(this).parent('.snav').children('.insideContent').fadeIn(200);
      });

      $j('.snav').mouseleave(function(){
        $j(this).parents('.allContent').css({"width":"auto","height":"auto"});
      });

      $j('.snav').mouseenter(function(){
        $j(this).children('.insideContent').css({"display":"block","position":"absolute","width":"auto","height":"450px"});
      });
    });
  </script>
<?php endif; ?>