Improve the admin UX for a product's "Available On" field #2704

benjaminwil · 2018-04-17T23:22:47Z

In the solidus_backend interface, a product's "Available On" field should be used set to a date.

If available_on is not set, then the product is not displayed on the storefront.

Because it's not technically a required field, it might not be clear to an admin why their new product does not appear on the storefront after it's been created. (The reason is because available_on has no value.)

This PR addresses the "Available On" UX in the following ways:

It improves the admin UX by making it clear that the "Available On" field is a date picker.
the "Available On" field now has placeholder text that clearly states "Hey, this is a date picker that sets the availability date for the product."
Lastly, there was a SASS variable called $input-placeholder-color that wasn't being set anywhere, so I set it. This is the color that is now used for any <input> tags placeholder text across the admin now.

tvdeyen

The tests fail because of the usage if the deprecated icon helper. I think we can improve the UX even more by adding required: true to the available_on field.

tvdeyen · 2018-04-18T05:27:00Z

backend/app/views/spree/admin/shared/_datepicker.html.erb

+<div class="input-group">
+  <div class="input-group-prepend">
+    <span class="input-group-text">
+      <%= icon('fa fa-calendar') %>


icon is deprecated (deprecations let tests fail), please use solidus_icon.

tvdeyen · 2018-04-18T05:27:38Z

backend/app/views/spree/admin/shared/_datepicker.html.erb

+      <%= icon('fa fa-calendar') %>
+    </span>
+  </div>
+  <%= f.text_field date_attr, value: datepicker_field_value(f.object.public_send(date_attr)), class: 'form-control datepicker', placeholder: placeholder_attr %>


Could we add an option to set the required attribute?

Would making "Available On" input required complicate the product creation process in other ways?

I was hesitant to suggest this for this PR as I think it is another can of worms.

tvdeyen · 2018-04-18T05:28:31Z

backend/app/views/spree/admin/products/_form.html.erb

@@ -64,8 +64,10 @@
      <div data-hook="admin_product_form_available_on">
        <%= f.field_container :available_on do %>
          <%= f.label :available_on %>
+
+          <%= render "spree/admin/shared/datepicker", f: f, date_attr: :available_on, placeholder_attr: t('spree.available_on_placeholder') %>


Would be great to have an option to set the required attribute.

benjaminwil · 2018-04-18T18:18:52Z

@tvdeyen Thank you for the comments.

I wonder if a required attribute would complicate product creation and product imports? While I agree that it would improve the admin UX it might be a bigger issue than this PR should address.

tvdeyen

I wonder if a required attribute would complicate product creation and product imports? While I agree that it would improve the admin UX it might be a bigger issue than this PR should address.

@benjaminwil it won't complicate imports because the required attribute would only affect the form field not the database or model itself. But, this could complicate the form in that it now forces the user to choose a available on date. I like the idea, but others may see this differently. Let's keep it like it is now and decide that later on. Thanks for the contribution.

kennyadsl

I find very useful to improve the UX of that field but I think the implementation can be done better.

The placeholder attribute should not be used to describe what that field will do if it will be populated but more as an example of the format of the data that can be entered, as described here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder.

I'd rather use a more descriptive tooltip there, we already have those in our backend and users should already be used to understand their purpose.

Maybe we can still use the placeholder to show the expected format (even if maybe with a datepicker it's not so useful) but I think we should change its color to make it super clear that it's not the default (pre-filled) value and will not be saved with the rest of the data entered by the user.

benjaminwil · 2018-05-01T15:29:14Z

@kennyadsl Thank you for pointing this out.

I am not sure what the best way to deal with placeholder text should be. It may be confusing to use a standard date like 01-01-1985. The placeholder text would also have to account for different date formats if the user is using a format like MM.DD.YY instead. For now, I have just removed the placeholder all together.

I have instead added a more descriptive tooltip.

kennyadsl · 2018-05-02T10:21:02Z

I think it's much better now, can you please remove the following commits:

Create i18n string for "Available On" placeholder
Add placeholder for "Available On" field

which are now useless?

Also this one Explicitly set placeholder colors for inputs should probably be part of another PR, if still useful. Thanks!

This adds a generic datepicker component that has a calendar icon.

This commit makes the "Available On" field in product views clearer by prepending a calendar icon to the field. It no longer looks like a plain old text input.

benjaminwil · 2018-05-02T15:49:21Z

@kennyadsl Thanks for your patience – I should dropped those changes before.

I've now dropped those older commits entirely.

kennyadsl

Thanks @benjaminwil !

tvdeyen · 2018-05-03T11:15:33Z

Thanks, Ben

tvdeyen requested changes Apr 18, 2018

View reviewed changes

gmacdougall added the documentation label Apr 18, 2018

benjaminwil force-pushed the available_on_datepicker branch from 0143a5f to b36d104 Compare April 18, 2018 17:40

benjaminwil force-pushed the available_on_datepicker branch from b36d104 to 7eb2c15 Compare April 18, 2018 18:19

tvdeyen approved these changes Apr 20, 2018

View reviewed changes

kennyadsl requested changes May 1, 2018

View reviewed changes

kennyadsl removed the documentation label May 2, 2018

benjaminwil added 3 commits May 2, 2018 08:28

Add initial datepicker component

9ecd5ba

This adds a generic datepicker component that has a calendar icon.

Use datepicker in for product "Available On" field

874f054

This commit makes the "Available On" field in product views clearer by prepending a calendar icon to the field. It no longer looks like a plain old text input.

Use hint for product form's "Available On" field

945bbba

benjaminwil force-pushed the available_on_datepicker branch from 1f11f94 to 945bbba Compare May 2, 2018 15:47

kennyadsl approved these changes May 2, 2018

View reviewed changes

tvdeyen merged commit 28482f1 into solidusio:master May 3, 2018

benjaminwil deleted the available_on_datepicker branch May 3, 2018 20:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve the admin UX for a product's "Available On" field #2704

Improve the admin UX for a product's "Available On" field #2704

benjaminwil commented Apr 17, 2018 •

edited

Loading

tvdeyen left a comment

tvdeyen Apr 18, 2018

tvdeyen Apr 18, 2018

benjaminwil Apr 18, 2018

tvdeyen Apr 18, 2018

benjaminwil commented Apr 18, 2018

tvdeyen left a comment

kennyadsl left a comment

benjaminwil commented May 1, 2018

kennyadsl commented May 2, 2018 •

edited

Loading

benjaminwil commented May 2, 2018

kennyadsl left a comment

tvdeyen commented May 3, 2018

Improve the admin UX for a product's "Available On" field #2704

Improve the admin UX for a product's "Available On" field #2704

Conversation

benjaminwil commented Apr 17, 2018 • edited Loading

tvdeyen left a comment

Choose a reason for hiding this comment

tvdeyen Apr 18, 2018

Choose a reason for hiding this comment

tvdeyen Apr 18, 2018

Choose a reason for hiding this comment

benjaminwil Apr 18, 2018

Choose a reason for hiding this comment

tvdeyen Apr 18, 2018

Choose a reason for hiding this comment

benjaminwil commented Apr 18, 2018

tvdeyen left a comment

Choose a reason for hiding this comment

kennyadsl left a comment

Choose a reason for hiding this comment

benjaminwil commented May 1, 2018

kennyadsl commented May 2, 2018 • edited Loading

benjaminwil commented May 2, 2018

kennyadsl left a comment

Choose a reason for hiding this comment

tvdeyen commented May 3, 2018

benjaminwil commented Apr 17, 2018 •

edited

Loading

kennyadsl commented May 2, 2018 •

edited

Loading