We need a Facet API Display Widget that can list fancy attributes (like colors) as clickable facets in the search results.

Reference: http://www.drupalcommerce.org/questions/7388/color-fancy-attributes-face...

CommentFileSizeAuthor
#8 commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-8.patch5.78 KBjsacksick
#7 commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-7.patch11.65 KBjsacksick
#6 commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-6.patch11.67 KBjsacksick
#5 Screen Shot 2013-03-15 at 12.46.04 PM.png8.08 KBjoshmiller
#4 commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-4.patch5.37 KBjsacksick
#3 fancycolor-sketch.png2.05 KBjoshmiller
#2 commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-2.patch5.28 KBjsacksick
#1 commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-1.patch0 bytesjsacksick
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented
Status: Active » Needs review
FileSize
commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-1.patch0 bytes

This patch creates a facetapi display widget that inherit from FacetapiWidgetLinks, you just need to select the display widget and it will work if you use commerce_fancy_attributes for your taxonomy vocabulary. I added an option that allows you to choose whether or not you want to display the facet count.

jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented
FileSize
commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-2.patch5.28 KB

better with a non empty patch :)

joshmiller’s picture

joshmiller
he/him
Primary language English
Location Indianapolis, Indiana, USA
CreditAttribution: joshmiller commented
FileSize
fancycolor-sketch.png2.05 KB

jsacksick,

I've not had a chance to actually take the code for a run, but what follows are two minor comments that you can take or leave.

+++ b/commerce_search_api.cssundefined
@@ -0,0 +1,20 @@
+.commerce-search-api-fancy-attributes-color {
+  border: 1px solid black;
+  color: white;
+  display: block;
+  height: 28px;
+  line-height: 35px;
+  padding: 2px;
+  text-align: center;
+  text-shadow: black 0.1em 0.1em 0.2em;

Perhaps the text-shadow is enough. Or perhaps we could do something more like the following:

fancycolor-sketch.png

It would require more advanced markup output to achieve the above with css.

+++ b/includes/facetapi/widget_fancy_attributes.incundefined
@@ -0,0 +1,65 @@
+  /**
+   * Overrides FacetapiWidget:Links:settingsForm().
+   */
+  function settingsForm(&$form, &$form_state) {
+    parent::settingsForm($form, $form_state);
+    $form['widget']['widget_settings']['links'][$this->id]['display_count'] = array(
+      '#type' => 'checkbox',
+      '#title' => t('Display count?'),
+      '#default_value' => !empty($this->settings->settings['display_count']) ? $this->settings->settings['display_count'] : FALSE,
+      '#description' => t('Display or not the facet count.'),
+    );
+  }

I would recommend a different #description ... perhaps, "If checked, the number of matching products will be output with the color square.

jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented
FileSize
commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-4.patch5.37 KB

Attached patch has an updated description and wrap the facet count into a span to help theming.

joshmiller’s picture

joshmiller
he/him
Primary language English
Location Indianapolis, Indiana, USA
CreditAttribution: joshmiller commented
FileSize
Screen Shot 2013-03-15 at 12.46.04 PM.png8.08 KB

This is the code that will make it look pretty :D

Screen Shot 2013-03-15 at 12.46.04 PM.png

ul.facetapi-commerce-search-api-fancy li {
  display: block;
  float: left;
  margin: 0 10px 5px 0;
  border: 1px solid #c0c0c0;
}
ul.facetapi-commerce-search-api-fancy li.last {
  margin-right: 0;
}
.commerce-search-api-fancy-attributes-color {
  border: 3px solid #FFF;
  color: white;
  display: block;
  height: 28px;
  line-height: 35px;
  padding: 2px;
  text-align: center;
  width: 28px;
  position: relative;
}
.commerce-search-api-fancy-attributes-color span {
  position: absolute;
  line-height: normal;
  background: #000;
  padding: 1px 4px;
  border-radius: 5px;
  top: -6px;
  left: -6px;
  font-size: 80%;
}

And this is the HTML I was working with...

<ul class="facetapi-commerce-search-api-fancy">
  <li><a href="#"><span class="commerce-search-api-fancy-attributes-color" style="background-color:#FFF"><span>1</span></span></a></li>
  <li><a href="#"><span class="commerce-search-api-fancy-attributes-color" style="background-color:grey"><span>55</span></span></a></li>
  <li><a href="#"><span class="commerce-search-api-fancy-attributes-color" style="background-color:red"><span>88</span></span></a></li>
  <li class="last"><a href="#"><span class="commerce-search-api-fancy-attributes-color" style="background-color:green"><span>999</span></span></a></li>
</ul>
jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented
FileSize
commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-6.patch11.67 KB

Thanks a lot for your contribution josh ! I updated the css and I'm displaying the facets count on hover :).

jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented
FileSize
commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-7.patch11.65 KB

Add a newline at the end of the css file.

jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented
FileSize
commerce_search_api-add-fancy-attributes-facetapi-display-widget-1943150-8.patch5.78 KB

The 7 patch includes in the diff a previous patch by mistake...

jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented
Status: Needs review » Fixed

I committed the patch to dev.

heyyo’s picture

heyyo CreditAttribution: heyyo commented

After I applyed the patch from #8 I don't see any new display widget on my facet display configuration.
Is there any thing to do before seeing it ?

jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented

Did you clear the cache ?

heyyo’s picture

heyyo CreditAttribution: heyyo commented

Yes I did clear the cache. I tried it on a fresh kickstart.

jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented

Well then you either didn't apply the patch correctly (Switch to the dev version) or you're trying to update the display widget on a wrong facet. I tried the patch on Kickstart, you should see "Fancy attributes" in the list.

heyyo’s picture

heyyo CreditAttribution: heyyo commented

Sorry not sure to understand,
I have to apply the patch Commerce Kickstart Dev too ? Commerce Kickstart 7.x-2.4 is ok too ?
To update the facet i'm using the link from the all products page.

jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented

No you have to either apply the patch to Commerce Search api 1.0 or switch to the dev version of Commerce Search API.

heyyo’s picture

heyyo CreditAttribution: heyyo commented

Strange I tried both. I will check again.

heyyo’s picture

heyyo CreditAttribution: heyyo commented

Now it's working by applying the patch, I really don't know why it wasn't the case before.
Could this patch could also work with a color field(http://drupal.org/project/colorfield) in addition to the regular text field provided by Kickstart ?

jsacksick’s picture

jsacksick CreditAttribution: jsacksick commented

Not for now, Commerce Fancy attributes will rely soon on Colorfield, at this point I will modify the code, but I follow Commerce Fancy attributes.

heyyo’s picture

heyyo CreditAttribution: heyyo commented

I finally did it by replacing the type 'commerce_fancy_attributes_color' by 'colorfield_color_swatch' and ['value'] by ['rgb']

foreach (field_info_instances('taxonomy_term', $bundle) as $field_name => $instance) {
        if ($instance['display']['add_to_cart_form']['type'] != 'colorfield_color_swatch') {
          continue;
        }
        $found = TRUE;
      }
      // Check if we should display the facet count.
      $display_count = !empty($this->settings->settings['display_count']);
      // If we've found at least one field that uses the fancy attributes formatter.
      if (!empty($found)) {
        drupal_add_css(drupal_get_path('module', 'commerce_search_api') . '/commerce_search_api.css');
        foreach ($build as $value => &$item) {
          $item['#html'] = TRUE;
          $variables['hex'] = $terms[$value]->{$field_name}[LANGUAGE_NONE][0]['rgb'];
          if ($display_count) {
            $variables['title'] = $item['#count'];
          }
          $item['#markup'] = theme('commerce_search_api_fancy_attributes_color', $variables);
          $item['#count'] = NULL;
        }
      }

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

oscar_arnulfo’s picture

oscar_arnulfo CreditAttribution: oscar_arnulfo commented

I can't get it work, can someone help me, i tried everything and nothing.
When i select Fancy attribute in display the color block it shows the HEX color text and the count but not the color on facet, when i click it throws this error

SQLSTATE[21000]: Cardinality violation: 1241 Operand should contain 1 column(s)