Skip to content

Add product page spotlight tour #33268

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
chihsuan merged 20 commits into from
Jun 9, 2022
Merged

Add product page spotlight tour #33268

chihsuan merged 20 commits into from
Jun 9, 2022

Conversation

@chihsuan
Copy link
Member

@chihsuan chihsuan commented May 31, 2022 •
edited
Loading

All Submissions:

Changes proposed in this Pull Request:

Closes #32421.

Acceptance criteria:

  • New walkthrough available for users that select the physical product template
  • Enable the spotlight for each step
  • Replace the "Add product" button right close to the title "Edit product" with the "Enable guided mode" button.

To be done in follow-up PRs:

  • The next button is disabled till the action is completed.
  • Enable the focus state to nudge the user to interact and take action

How to test the changes in this Pull Request:

  1. Run pnpm install
  2. Run pnpm nx start woocommerce-admin
  3. Enable experimental-product-tour feature flag via WooCommerce Admin Test Helper
  4. Go to Woocommerce > Home
  5. Click Add my products task
  6. Select "Start with a template"
  7. Select "Physical product"
  8. Confirm spotlight tour is shown with the following features.
  • The number of steps is always visible.
  • The number of steps is reduced to 8.
  • The page scrolls up and down automatically based on the information highlighted.
  1. Complete the step tour
  2. Click the "Enable guided mode" button
  3. Observe that the tour is shown again.
  4. Create another product with another product type
  5. Observe that the "Enable guided mode" button is NOT displayed.

design: cJQeyyhx9PraQrY3YAtCGM-fi-1104%3A127916

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you successfully run tests with your changes locally?
  • Have you created a changelog file for each project being changed, ie pnpm nx changelog <project>?

FOR PR REVIEWER ONLY:

  • I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

@github-actions github-actions bot added focus: react admin package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin. labels May 31, 2022
@chihsuan chihsuan changed the base branch from trunk to add/tour-kit May 31, 2022 07:11
@chihsuan chihsuan changed the title Add product tour Add product page spotlight tour May 31, 2022
@github-actions github-actions bot removed the package: @woocommerce/components issues related to @woocommerce/components label Jun 1, 2022
@chihsuan chihsuan mentioned this pull request Jun 1, 2022
Closed
8 tasks
@chihsuan chihsuan force-pushed the add/product-tour branch from 4ebe1d5 to a87fac9 Compare June 2, 2022 06:25
@chihsuan chihsuan force-pushed the add/product-tour branch from 37b2f65 to d8747dd Compare June 2, 2022 07:15
@moon0326 moon0326 force-pushed the add/product-tour branch from 3e76178 to d8747dd Compare June 3, 2022 01:37
@chihsuan chihsuan force-pushed the add/product-tour branch from eb92b43 to 3c4aff8 Compare June 8, 2022 02:00
@github-actions github-actions bot added the package: @woocommerce/components issues related to @woocommerce/components label Jun 8, 2022
@chihsuan chihsuan force-pushed the add/product-tour branch from 71df711 to 2d4a28c Compare June 8, 2022 02:21
@github-actions github-actions bot removed the package: @woocommerce/components issues related to @woocommerce/components label Jun 8, 2022
@botwoo
Copy link
Collaborator

botwoo commented Jun 8, 2022 •
edited
Loading

📊 Test reports for this pull request have been published and are accessible through the following links:

Latest commit referenced in the reports: Refactor product-tour and support html editor focus style 225ba85
This comment will automatically be updated with the latest referenced commit when you push new changes to this pull request.

Visit the WooCommerce Test Reports homepage to view all published reports. See the FAQs page if you're having problems accessing them.

@chihsuan chihsuan mentioned this pull request Jun 8, 2022
Closed
2 tasks
@chihsuan chihsuan marked this pull request as ready for review June 8, 2022 02:42
@chihsuan chihsuan requested a review from a team June 8, 2022 02:42
@chihsuan chihsuan self-assigned this Jun 8, 2022
ilyasfoo
ilyasfoo suggested changes Jun 8, 2022
View reviewed changes
Copy link
Contributor

@ilyasfoo ilyasfoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the excellently crafted PR, @chihsuan!

I've tested "digital product" and it seems to also trigger spotlight. I think historically we're using tutorial=true query for the old guide, I think it's better to use a different query parameter for spotlight, perhaps additional one. Maybe combination of tutorial=true and spotlight=true for now? If we decide to deploy after the experiment, we can just remove spotlight parameter and enable spotlight by default.

@chihsuan chihsuan force-pushed the add/product-tour branch from 7016169 to 1028f4f Compare June 8, 2022 04:58
@chihsuan
Copy link
Member Author

chihsuan commented Jun 8, 2022

Thanks for the excellently crafted PR, @chihsuan!

I've tested "digital product" and it seems to also trigger spotlight. I think historically we're using tutorial=true query for the old guide, I think it's better to use a different query parameter for spotlight, perhaps additional one. Maybe combination of tutorial=true and spotlight=true for now? If we decide to deploy after the experiment, we can just remove spotlight parameter and enable spotlight by default.

Thanks @ilyasfoo Sounds good to me! Updated in 6700aba.

I also added the auto-focus feature in 1028f4f. (I found we could directly implement it in our component.)

@ilyasfoo ilyasfoo self-requested a review June 8, 2022 07:13
ilyasfoo
ilyasfoo reviewed Jun 8, 2022
View reviewed changes
Copy link
Contributor

@ilyasfoo ilyasfoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @ilyasfoo Sounds good to me! Updated in 6700aba.

Thanks, works well!

I also added the auto-focus feature in 1028f4f. (I found we could directly implement it in our component.)

Nice! I've tested this, worked with everything except for the product description & short description.

@chihsuan
Copy link
Member Author

chihsuan commented Jun 8, 2022

Nice! I've tested this, worked with everything except for the product description & short description.

Good catch. It's a bit tricky because editors are in iframes (we cannot use focus-within) and they don't have a blue border when it gets focused.

I have to use JS to control it. Updated in a571be9

Screen Shot 2022-06-08 at 16 23 56

Base automatically changed from add/tour-kit to trunk June 8, 2022 09:16
chihsuan and others added 20 commits June 9, 2022 11:44
@chihsuan
Add product-tour admin script
e428ed9
@chihsuan
Update class-wc-admin-pointers.php to show experimental product tour
6c5e9be
@chihsuan
Remove unnecessary window.onload
3f050d8
@chihsuan
Replace add new button with Enable guided mode button for product edi…
fca061a 
…ting
@chihsuan
Show tour when tutorial query = true
2a375bb
@chihsuan
Add logic to show new tour only when a user select the physical produ…
b938972 
…ct template
@chihsuan
Update product tour last step button text
eaf0da2
@chihsuan
Add auto-scroll effect
c9b79eb
@chihsuan
Fix i18n text
ad37cca
@chihsuan
Use bottom-start placement and align the arrow to the left
c7bcc95
@chihsuan
Update pnpm-lock.yaml
7423847
@chihsuan
Update product tour effects
5d4489c
@chihsuan
Add changelog
38554fc
@chihsuan
Add doc comments & check for tour-kit
ef7de77
@chihsuan
Add focus elements to product tour and wait initial element for tour …
b4fecac 
…showup
@chihsuan
Use spotlight query param to toggle new product tour feature
138f3c5
@chihsuan
Update wait seconds
ba0bc65
@chihsuan
Update border style for product description & short description when …
150f0d3 
…editor is focused
@chihsuan
Add experimental-product-tour feature flag
8f504cd
@chihsuan
Refactor product-tour and support html editor focus style
225ba85
@chihsuan chihsuan force-pushed the add/product-tour branch from 68969cf to 225ba85 Compare June 9, 2022 03:44
@chihsuan
Copy link
Member Author

chihsuan commented Jun 9, 2022

@ilyasfoo I've added focus support for the HTML text editor. I also refactored the code since it has too many lines. It should work fine now.

product-tour-editor-focus-fixed.mov

ilyasfoo
ilyasfoo approved these changes Jun 9, 2022
View reviewed changes
Copy link
Contributor

@ilyasfoo ilyasfoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Excellent find, @chihsuan! I've tested this, LGTM! 🚢 🚢

@ilyasfoo
Copy link
Contributor

ilyasfoo commented Jun 9, 2022 •
edited
Loading

e2e is failing but seemingly unrelated issue

@chihsuan
Copy link
Member Author

chihsuan commented Jun 9, 2022

e2e is failing but seemingly unrelated issue

I re-ran the tests and it passed this time. 😃

@chihsuan chihsuan merged commit 04a763d into trunk Jun 9, 2022
@chihsuan chihsuan deleted the add/product-tour branch June 9, 2022 05:02
@github-actions github-actions bot added this to the 6.7.0 milestone Jun 9, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Jun 9, 2022

Hi @chihsuan, thanks for merging this pull request. Please take a look at these follow-up tasks you may need to perform:

  • Add the release: add testing instructions label

@rjchow rjchow mentioned this pull request Jun 16, 2022
Merged
8 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@ilyasfoo ilyasfoo ilyasfoo approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@chihsuan chihsuan

Labels

plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

6.7.0

Development

Successfully merging this pull request may close these issues.

Store setup - Product page: Interactive walkthrough

5 participants

@chihsuan @botwoo @ilyasfoo @ObliviousHarmony