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

Comments

jsacksick’s picture

jsacksick commented
Status: Active » Needs review
StatusFileSize
new 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 commented
StatusFileSize
new 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
commented
StatusFileSize
new 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 commented
StatusFileSize
new 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
commented
StatusFileSize
new 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 commented
StatusFileSize
new 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 commented
StatusFileSize
new 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 commented
StatusFileSize
new 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 commented
Status: Needs review » Fixed

I committed the patch to dev.

heyyo’s picture

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 commented

Did you clear the cache ?

heyyo’s picture

heyyo commented

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

jsacksick’s picture

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 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 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 commented

Strange I tried both. I will check again.

heyyo’s picture

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 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 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 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)