Drop Down Filter by Attribute in Products List toolbar
friends, I create custom pages for mobile Products list.
I added a filter in the form of drop down on the top toolbar, there is Filter by Category, Filter by Attribute and Sort By (Position, Name, Price, and Brand).
I've successful create a drop down Filter by Category and Sort by, and functioning properly.
I'm adding Filter by Category and Sort by in appdesignfrontendandiphonetemplatecatalogproductlistctoolbar.phtml
Filter by Attribute, I have not managed to make his drop down.
Here's what I do to display the Filter by Attribute in toolbar :
Go into catalog.xml and in delete left thing
Put this after the line with product_list name:
<block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>
Then in list.phtml call :
<?php echo $this->getChildHtml('filter_by_attributes'); ?>
My View.phtml to call the Filter Attribute (appdesignfrontendandiphonetemplatecataloglayerview.phtml) :
<?php if($this->canShowBlock()): ?>
<?php echo $this->__('Filter') ?>
<div class="block-layered-nav">
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
<script type="text/javascript">
//<![CDATA[
var _used_filter = ;
<?php foreach ($_filters as $_filter): ?>
_used_filter.push('<?php echo $_filter->getRequestVar() ?>');
<?php endforeach; ?>
//]]>
</script>
<?php endif; ?>
then the main question is
how to make the dropdown Filter by Attribute based on cataloglayerview.phtml?attributes filter dropdown-attribute toolbar
add a comment |
friends, I create custom pages for mobile Products list.
I added a filter in the form of drop down on the top toolbar, there is Filter by Category, Filter by Attribute and Sort By (Position, Name, Price, and Brand).
I've successful create a drop down Filter by Category and Sort by, and functioning properly.
I'm adding Filter by Category and Sort by in appdesignfrontendandiphonetemplatecatalogproductlistctoolbar.phtml
Filter by Attribute, I have not managed to make his drop down.
Here's what I do to display the Filter by Attribute in toolbar :
Go into catalog.xml and in delete left thing
Put this after the line with product_list name:
<block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>
Then in list.phtml call :
<?php echo $this->getChildHtml('filter_by_attributes'); ?>
My View.phtml to call the Filter Attribute (appdesignfrontendandiphonetemplatecataloglayerview.phtml) :
<?php if($this->canShowBlock()): ?>
<?php echo $this->__('Filter') ?>
<div class="block-layered-nav">
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
<script type="text/javascript">
//<![CDATA[
var _used_filter = ;
<?php foreach ($_filters as $_filter): ?>
_used_filter.push('<?php echo $_filter->getRequestVar() ?>');
<?php endforeach; ?>
//]]>
</script>
<?php endif; ?>
then the main question is
how to make the dropdown Filter by Attribute based on cataloglayerview.phtml?attributes filter dropdown-attribute toolbar
add a comment |
friends, I create custom pages for mobile Products list.
I added a filter in the form of drop down on the top toolbar, there is Filter by Category, Filter by Attribute and Sort By (Position, Name, Price, and Brand).
I've successful create a drop down Filter by Category and Sort by, and functioning properly.
I'm adding Filter by Category and Sort by in appdesignfrontendandiphonetemplatecatalogproductlistctoolbar.phtml
Filter by Attribute, I have not managed to make his drop down.
Here's what I do to display the Filter by Attribute in toolbar :
Go into catalog.xml and in delete left thing
Put this after the line with product_list name:
<block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>
Then in list.phtml call :
<?php echo $this->getChildHtml('filter_by_attributes'); ?>
My View.phtml to call the Filter Attribute (appdesignfrontendandiphonetemplatecataloglayerview.phtml) :
<?php if($this->canShowBlock()): ?>
<?php echo $this->__('Filter') ?>
<div class="block-layered-nav">
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
<script type="text/javascript">
//<![CDATA[
var _used_filter = ;
<?php foreach ($_filters as $_filter): ?>
_used_filter.push('<?php echo $_filter->getRequestVar() ?>');
<?php endforeach; ?>
//]]>
</script>
<?php endif; ?>
then the main question is
how to make the dropdown Filter by Attribute based on cataloglayerview.phtml?attributes filter dropdown-attribute toolbar
friends, I create custom pages for mobile Products list.
I added a filter in the form of drop down on the top toolbar, there is Filter by Category, Filter by Attribute and Sort By (Position, Name, Price, and Brand).
I've successful create a drop down Filter by Category and Sort by, and functioning properly.
I'm adding Filter by Category and Sort by in appdesignfrontendandiphonetemplatecatalogproductlistctoolbar.phtml
Filter by Attribute, I have not managed to make his drop down.
Here's what I do to display the Filter by Attribute in toolbar :
Go into catalog.xml and in delete left thing
Put this after the line with product_list name:
<block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>
Then in list.phtml call :
<?php echo $this->getChildHtml('filter_by_attributes'); ?>
My View.phtml to call the Filter Attribute (appdesignfrontendandiphonetemplatecataloglayerview.phtml) :
<?php if($this->canShowBlock()): ?>
<?php echo $this->__('Filter') ?>
<div class="block-layered-nav">
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
<script type="text/javascript">
//<![CDATA[
var _used_filter = ;
<?php foreach ($_filters as $_filter): ?>
_used_filter.push('<?php echo $_filter->getRequestVar() ?>');
<?php endforeach; ?>
//]]>
</script>
<?php endif; ?>
then the main question is
how to make the dropdown Filter by Attribute based on cataloglayerview.phtml?attributes filter dropdown-attribute toolbar
attributes filter dropdown-attribute toolbar
edited 14 mins ago
Utsav Gupta
16213
16213
asked Jul 9 '15 at 6:24
Andhi IrawanAndhi Irawan
3711620
3711620
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
i found the solution.
Adding
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
inside <catalog_category_layered>
in catalog.xml :<!--Category layered Navigation Layout-->
<catalog_category_layered>
<reference name="content">
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
<block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>
<block type="catalog/product_list_ctoolbar" name="product_list_ctoolbar" template="catalog/product/list/ctoolbar.phtml">
</block>
<action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
</block>
</block>
</reference>
</catalog_category_layered>
adding javascript in cataloglayerview.phtml :
<button onclick="showAttribute()"><?php echo $this->__('Filter') ?></button>
<?php if($this->canShowBlock()): ?>
<div class="block-layered-nav" style="display: none;">
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
</div>
<script type="text/javascript">
//<![CDATA[
var _used_filter = ;
<?php foreach ($_filters as $_filter): ?>
_used_filter.push('<?php echo $_filter->getRequestVar() ?>');
<?php endforeach; ?>
function showAttribute() {
if(jQuery(".block-layered-nav").is(":visible"))
jQuery(".block-layered-nav").hide();
else
jQuery(".block-layered-nav").show();
}
//]]>
</script>
<?php endif; ?>
modify templatecataloglayerattribute.phtml :
<div class="filter-box-container">
<select class="filter-atts" id="filter-atts" name="<?php echo $this->getRequestVar()?>">
<option><?php echo $this->__('%s', $this->getTitle()) ?></option>
<?php foreach ($this->getItems() as $_item):?>
<option onchange="doFilter()" value="<?php echo $_item->getValue()?>" <?php echo $_item->getIsSelected() ? 'selected':''?>>
<?php echo $_item->getLabel() ?>
</option>
<?php endforeach ?>
</select>
and the rest is resolved with css
add a comment |
This is function of shop by option that often show on sidebar. You can use a custom extension to do this. Please search "Layer Navigation" on magento connect to find a good extension.
I've been looking at magento connect but did not find the filter by the attribute's in the toolbar (not sidebar) / could not find a suitable extension.
– Andhi Irawan
Jul 9 '15 at 7:15
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f73759%2fdrop-down-filter-by-attribute-in-products-list-toolbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
i found the solution.
Adding
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
inside <catalog_category_layered>
in catalog.xml :<!--Category layered Navigation Layout-->
<catalog_category_layered>
<reference name="content">
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
<block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>
<block type="catalog/product_list_ctoolbar" name="product_list_ctoolbar" template="catalog/product/list/ctoolbar.phtml">
</block>
<action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
</block>
</block>
</reference>
</catalog_category_layered>
adding javascript in cataloglayerview.phtml :
<button onclick="showAttribute()"><?php echo $this->__('Filter') ?></button>
<?php if($this->canShowBlock()): ?>
<div class="block-layered-nav" style="display: none;">
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
</div>
<script type="text/javascript">
//<![CDATA[
var _used_filter = ;
<?php foreach ($_filters as $_filter): ?>
_used_filter.push('<?php echo $_filter->getRequestVar() ?>');
<?php endforeach; ?>
function showAttribute() {
if(jQuery(".block-layered-nav").is(":visible"))
jQuery(".block-layered-nav").hide();
else
jQuery(".block-layered-nav").show();
}
//]]>
</script>
<?php endif; ?>
modify templatecataloglayerattribute.phtml :
<div class="filter-box-container">
<select class="filter-atts" id="filter-atts" name="<?php echo $this->getRequestVar()?>">
<option><?php echo $this->__('%s', $this->getTitle()) ?></option>
<?php foreach ($this->getItems() as $_item):?>
<option onchange="doFilter()" value="<?php echo $_item->getValue()?>" <?php echo $_item->getIsSelected() ? 'selected':''?>>
<?php echo $_item->getLabel() ?>
</option>
<?php endforeach ?>
</select>
and the rest is resolved with css
add a comment |
i found the solution.
Adding
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
inside <catalog_category_layered>
in catalog.xml :<!--Category layered Navigation Layout-->
<catalog_category_layered>
<reference name="content">
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
<block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>
<block type="catalog/product_list_ctoolbar" name="product_list_ctoolbar" template="catalog/product/list/ctoolbar.phtml">
</block>
<action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
</block>
</block>
</reference>
</catalog_category_layered>
adding javascript in cataloglayerview.phtml :
<button onclick="showAttribute()"><?php echo $this->__('Filter') ?></button>
<?php if($this->canShowBlock()): ?>
<div class="block-layered-nav" style="display: none;">
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
</div>
<script type="text/javascript">
//<![CDATA[
var _used_filter = ;
<?php foreach ($_filters as $_filter): ?>
_used_filter.push('<?php echo $_filter->getRequestVar() ?>');
<?php endforeach; ?>
function showAttribute() {
if(jQuery(".block-layered-nav").is(":visible"))
jQuery(".block-layered-nav").hide();
else
jQuery(".block-layered-nav").show();
}
//]]>
</script>
<?php endif; ?>
modify templatecataloglayerattribute.phtml :
<div class="filter-box-container">
<select class="filter-atts" id="filter-atts" name="<?php echo $this->getRequestVar()?>">
<option><?php echo $this->__('%s', $this->getTitle()) ?></option>
<?php foreach ($this->getItems() as $_item):?>
<option onchange="doFilter()" value="<?php echo $_item->getValue()?>" <?php echo $_item->getIsSelected() ? 'selected':''?>>
<?php echo $_item->getLabel() ?>
</option>
<?php endforeach ?>
</select>
and the rest is resolved with css
add a comment |
i found the solution.
Adding
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
inside <catalog_category_layered>
in catalog.xml :<!--Category layered Navigation Layout-->
<catalog_category_layered>
<reference name="content">
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
<block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>
<block type="catalog/product_list_ctoolbar" name="product_list_ctoolbar" template="catalog/product/list/ctoolbar.phtml">
</block>
<action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
</block>
</block>
</reference>
</catalog_category_layered>
adding javascript in cataloglayerview.phtml :
<button onclick="showAttribute()"><?php echo $this->__('Filter') ?></button>
<?php if($this->canShowBlock()): ?>
<div class="block-layered-nav" style="display: none;">
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
</div>
<script type="text/javascript">
//<![CDATA[
var _used_filter = ;
<?php foreach ($_filters as $_filter): ?>
_used_filter.push('<?php echo $_filter->getRequestVar() ?>');
<?php endforeach; ?>
function showAttribute() {
if(jQuery(".block-layered-nav").is(":visible"))
jQuery(".block-layered-nav").hide();
else
jQuery(".block-layered-nav").show();
}
//]]>
</script>
<?php endif; ?>
modify templatecataloglayerattribute.phtml :
<div class="filter-box-container">
<select class="filter-atts" id="filter-atts" name="<?php echo $this->getRequestVar()?>">
<option><?php echo $this->__('%s', $this->getTitle()) ?></option>
<?php foreach ($this->getItems() as $_item):?>
<option onchange="doFilter()" value="<?php echo $_item->getValue()?>" <?php echo $_item->getIsSelected() ? 'selected':''?>>
<?php echo $_item->getLabel() ?>
</option>
<?php endforeach ?>
</select>
and the rest is resolved with css
i found the solution.
Adding
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
inside <catalog_category_layered>
in catalog.xml :<!--Category layered Navigation Layout-->
<catalog_category_layered>
<reference name="content">
<block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
<block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
<block type="catalog/layer_view" name="filter_by_attributes" template="catalog/layer/view.phtml"/>
<block type="catalog/product_list_ctoolbar" name="product_list_ctoolbar" template="catalog/product/list/ctoolbar.phtml">
</block>
<action method="setToolbarBlockName"><name>product_list_toolbar</name></action>
</block>
</block>
</reference>
</catalog_category_layered>
adding javascript in cataloglayerview.phtml :
<button onclick="showAttribute()"><?php echo $this->__('Filter') ?></button>
<?php if($this->canShowBlock()): ?>
<div class="block-layered-nav" style="display: none;">
<dl id="narrow-by-list">
<?php $_filters = $this->getFilters() ?>
<?php foreach ($_filters as $_filter): ?>
<?php echo $_filter->setTitle($_filter->getName())->getHtml() ?>
<?php endforeach; ?>
</dl>
<script type="text/javascript">decorateDataList('narrow-by-list')</script>
</div>
<script type="text/javascript">
//<![CDATA[
var _used_filter = ;
<?php foreach ($_filters as $_filter): ?>
_used_filter.push('<?php echo $_filter->getRequestVar() ?>');
<?php endforeach; ?>
function showAttribute() {
if(jQuery(".block-layered-nav").is(":visible"))
jQuery(".block-layered-nav").hide();
else
jQuery(".block-layered-nav").show();
}
//]]>
</script>
<?php endif; ?>
modify templatecataloglayerattribute.phtml :
<div class="filter-box-container">
<select class="filter-atts" id="filter-atts" name="<?php echo $this->getRequestVar()?>">
<option><?php echo $this->__('%s', $this->getTitle()) ?></option>
<?php foreach ($this->getItems() as $_item):?>
<option onchange="doFilter()" value="<?php echo $_item->getValue()?>" <?php echo $_item->getIsSelected() ? 'selected':''?>>
<?php echo $_item->getLabel() ?>
</option>
<?php endforeach ?>
</select>
and the rest is resolved with css
edited Jul 14 '15 at 8:04
answered Jul 14 '15 at 4:54
Andhi IrawanAndhi Irawan
3711620
3711620
add a comment |
add a comment |
This is function of shop by option that often show on sidebar. You can use a custom extension to do this. Please search "Layer Navigation" on magento connect to find a good extension.
I've been looking at magento connect but did not find the filter by the attribute's in the toolbar (not sidebar) / could not find a suitable extension.
– Andhi Irawan
Jul 9 '15 at 7:15
add a comment |
This is function of shop by option that often show on sidebar. You can use a custom extension to do this. Please search "Layer Navigation" on magento connect to find a good extension.
I've been looking at magento connect but did not find the filter by the attribute's in the toolbar (not sidebar) / could not find a suitable extension.
– Andhi Irawan
Jul 9 '15 at 7:15
add a comment |
This is function of shop by option that often show on sidebar. You can use a custom extension to do this. Please search "Layer Navigation" on magento connect to find a good extension.
This is function of shop by option that often show on sidebar. You can use a custom extension to do this. Please search "Layer Navigation" on magento connect to find a good extension.
answered Jul 9 '15 at 6:51
BlankaBlanka
91
91
I've been looking at magento connect but did not find the filter by the attribute's in the toolbar (not sidebar) / could not find a suitable extension.
– Andhi Irawan
Jul 9 '15 at 7:15
add a comment |
I've been looking at magento connect but did not find the filter by the attribute's in the toolbar (not sidebar) / could not find a suitable extension.
– Andhi Irawan
Jul 9 '15 at 7:15
I've been looking at magento connect but did not find the filter by the attribute's in the toolbar (not sidebar) / could not find a suitable extension.
– Andhi Irawan
Jul 9 '15 at 7:15
I've been looking at magento connect but did not find the filter by the attribute's in the toolbar (not sidebar) / could not find a suitable extension.
– Andhi Irawan
Jul 9 '15 at 7:15
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f73759%2fdrop-down-filter-by-attribute-in-products-list-toolbar%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown