最新消息:Excel无乱码转CSV,由于工作原因很少更新博客和回复大家的评论,非常抱歉。

Magento 服装颜色添加到分层导航(分类左侧过滤属性)

我最近碰到一个问题,我想在Magento的分层导航色样的属性,而不是颜色的名称。默认情况下,分层导航显示的属性的名称。在这种情况下,我商店的衬衫颜色让它显示成我设置的颜色图片或色卡。

首先,Magento商店需要安装一个ColorSwatch和缩放插件。您还可以在后台根据类别设置分层导航为“是”。
hicoogle_magento_layered_navigation_color_swatch_1
这是分层的导航选项,Magento的后台管理面板,为每个类别。

一旦你有你的颜色显示在侧边栏的属性,它就会变成色你设定的色卡。
hicoogle_magento_layered_navigation_color_swatch_2
颜色色在Magento后台插件的设置选项。

我试图做到这一点,我上传在Colorswatch插件,使用PHP在filter.phtml文件的调用GIF,但还是决定去了不同的路线,而不是通过使用CSS样式的的样本背景的匹配我们的属性,我们上传的图像后端。虽然这个插件不错,但有缺点,每次添加一个新的属性编辑CSS背景颜色。

如下:

编辑分层的导航模板
你要编辑filter.phtml,位于app/design/frontend/default/YOUR_THEME_NAME/template/catalog/layer/filter.phtml,
如果你的主题没有这个文件,你将需要复制从核心位置,到你的主题文件夹。位于app/design/frontend/base/default/template/catalog/layer/filter.phtml

同样,永远不要编辑核心的Magento文件。您应该复制该文件到你的主题目录(见上面的位置),它会覆盖你的核心文件。这样一来,被升级的Magento时,您的编辑不会被覆盖。

编辑filter.phtml
为了能够针对每一个分层导航中显示的颜色属性列表项的,我们就必须设置一个ID。这个id是唯一的每个列表项的颜色。我们将他们能够为我们的每一个颜色属性设置造型。继承人的代码从我的filter.phtml文件。

<ol>
<?php foreach ($this->getItems() as $_item): ?>
<li>
<?php if ($_item->getCount() > 0): ?>
<a href="<?php echo $this->urlEscape($_item->getUrl()) ?>" id="a-<?php echo $_item->getValueString() ?>"><?php echo $_item->getLabel() ?></a>
<?php else: echo $_item->getLabel() ?>
<?php endif; ?>
<?php if ($this->shouldDisplayProductCount()): ?>
(<?php echo $_item->getCount() ?>)
<?php endif; ?>
</li>
<?php endforeach ?>
</ol>

测试代码
在前端,如果您查看源代码,你会看到每个列表项的锚,现在有一类ID。此ID是Magento的唯一的ID给每个输入的属性,我们在后端。

现在,我们只需要给

    列表项添加一些CSS样式。

    分层导航
    hicoogle magento layered navigation color swatch
    在Firebug中查看分层导航色卡的最终源代码。

    我禁用的属性计数,因此它是不显示的属性在前端旁边的数字。如果你保持你的项目数,将需要额外的CSS。

    下面我说:“文本缩进:-9999px;”,你会发现在我的CSS。这是隐藏属性的文本(白,黑,绿等),因为我们只是想表明的样本。

    现在,我们将针对我们的属性设置宽度和高度,浮离开,然后针对每个类ID列表项。找到我的主题下的style.css(skin/frontend/default/YOUR_THEME_NAME/css/styles.css)文件,CSS样式:

    .block-layered-nav dd.color ol li a{
    text-decoration:none;
    color:#333;
    border:1px solid #C3C3C3;
    height: 25px;
    width:25px;
    border-radius:2px;
    float:left;
    text-indent: -9999px;
    margin-right: 6px;
    margin-bottom: 10px;
    }

    /* Black */
    .block-layered-nav dd.color ol li #a-100{
    background-color: #000;
    }

    /* Brown */
    .block-layered-nav dd.color ol li #a-101{
    background-color: #6B3A20;
    }

    /* White and Red */
    .block-layered-nav dd.color ol li #a-102{
    background: url("/media/colorswatch/image/image_base/144/127/30x30/white_red.gif") no-repeat scroll 0 -5px transparent;
    }

    最终效果
    hicoogle_magento_layered_navigation_color_swatch_3
    您将要调整的CSS,你的颜色相匹配。您还可以看到我添加了一个GIF图像使用相同的图像链接到样式属性。

    以上内容用google翻译而来,可能阅读理解有点困难。我也是在国外的一个博客上看到的,我觉得内容不错,也正是我的一个项目中所需要的功能,所以我就把它翻译过来。如果你有更好的方法,请在本文下方评论处给你的意见。

转载请注明:嗨酷哥,有你更酷! » Magento 服装颜色添加到分层导航(分类左侧过滤属性)

与本文相关文章

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项

网友评论1条  本站回复1

  1. 你好,这个插件在那里下载的。能发给我一份不。谢谢了。我的邮箱:xie-825@foxmail.com

    yang2013-03-11 03:02 回复
    • 这个插件我也没有,我也在找这个免费的插件。

      hicoogle2013-03-11 09:40 回复