Commit b122930e authored by Matt Glaman's avatar Matt Glaman

Merge pull request #138 from mglaman/2411435-facet-mobile-not-working

Issue #2411435 by mglaman, lsolesen: Facet drop-down lists do not wor…
parents 24777661 06f88aa9
......@@ -229,4 +229,31 @@ class FeatureContext extends RawDrupalContext implements SnippetAcceptingContext
$this->getDrupal();
variable_set('commerce_kickstart_user_breadcrumbs', TRUE);
}
/**
* @When I resize the browser to mobile
*/
public function iResizeTheBrowserToMobile() {
$this->getSession()->resizeWindow(200, 600, 'current');
}
/**
* @BeforeScenario
*/
public function beforeScenario()
{
if (!$this->running_javascript()) {
return;
}
$this->getSession()->resizeWindow(1440, 900, 'current');
}
/**
* Returns whether the scenario is running in a browser that can run Javascript or not.
*
* @return boolean
*/
protected function running_javascript() {
return get_class($this->getSession()->getDriver()) !== 'Behat\Mink\Driver\GoutteDriver';
}
}
Feature: Responsive product facet search api
In order to have a better view of product search on mobile
As any user
I should see concise search facets
@javascript @demo
Scenario: Search facets should be presented as select lists
When I go to "/products"
And I click "To wear (12)"
Then I should see "There are 12 search results"
When I click "(-) "
And I resize the browser to mobile
# Facets don't react on resize
And I reload the page
When I select "Select a collection..." from "selectnav3"
When I select "To wear (12)" from "selectnav3"
......@@ -30,27 +30,25 @@
// Switch list elements to select lists on faceted blocks.
Drupal.behaviors.commerce_kickstart_theme_custom_search = {
attach: function(context, settings) {
$('body').bind('responsivelayout', function(e, d) {
$('body', context).bind('responsivelayout', function(e, d) {
if($(this).hasClass("responsive-layout-mobile")) {
$('.block-facetapi', context).each(function(index) {
$('.facetapi-checkbox').remove();
$('.element-invisible').remove();
var $facetBlock = $(this);
// Clean up <li> children so select list looks okay.
$facetBlock.find('label.element-invisible', context).remove();
$facetBlock.find('span.element-invisible', context).remove();
$facetBlock.find('input.facetapi-checkbox', context).remove();
// Get block title.
var list_title;
$(this).find('.block-title').each(function() {
list_title = $(this).text().toLowerCase();
});
var list_title = $facetBlock.find('.block-title', context).text().toLowerCase();
// Get list elements.
var list_element;
$(this).find('ul').each(function() {
list_element = $(this).attr('id');
$(this).addClass('facetapi-lists');
});
var $list_element = $facetBlock.find('ul', context);
$list_element.addClass('facetapi-lists');
if(list_element != 'undefined') {
selectnav(list_element, {
if(typeof $list_element !== 'undefined') {
selectnav($list_element.attr('id'), {
label: 'Select a ' + list_title + '...',
activeclass: 'false'
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment