Skip to content
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

feat: add CSS class to variation buttons for tracking #1989

Merged
merged 2 commits into from
Dec 6, 2024
Merged

feat: add CSS class to variation buttons for tracking #1989

merged 2 commits into from
Dec 6, 2024

Conversation

laurelfulford
Copy link
Contributor

@laurelfulford laurelfulford commented Dec 6, 2024 •
edited
Loading

All Submissions:

Changes proposed in this Pull Request:

This PR adds a unique CSS class only used by variation picker buttons in the modal checkout to make them easier to apply tracking to. (I am ABSOLUTELY open to feedback on the name since we won't want to change it!!)

See: 1207817176293825-as-1208919248362608

How to test the changes in this Pull Request:

  1. Apply this PR.
  2. Set up a checkout button block for a product with variations.
  3. Run through the checkout and inspect the buttons on the first step; make sure they have the CSS class newspack-modal-variation-selection.

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 ran tests with your changes locally?

@laurelfulford laurelfulford requested a review from a team as a code owner December 6, 2024 20:52
chickenn00dle
chickenn00dle approved these changes Dec 6, 2024
View reviewed changes
Copy link
Contributor

@chickenn00dle chickenn00dle left a comment

Choose a reason for hiding this comment

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

Looks good!

My only two non-blocking suggestion would be if we want to ensure this is unique, let's make it an id instead of a class and maybe go with newspack-modal-checkout-vairaion-selection

@laurelfulford
Copy link
Contributor Author

Thanks @chickenn00dle! I updated the class to newspack-modal-checkout-variation-selection.

The downside with using an ID is that there will be multiples of these together in a modal -- they won't actually be unique from each other. The class should be enough so conversion tracking for Parsely and others won't need to rely on the parent elements to select these buttons, just this class 🙂

@laurelfulford laurelfulford merged commit 910e6b1 into trunk Dec 6, 2024
5 of 7 checks passed
@laurelfulford laurelfulford deleted the feat/add-css-class-to-variations branch December 6, 2024 21:57
@github-actions GitHub Actions
Copy link

github-actions bot commented Dec 6, 2024

Hey @laurelfulford, good job getting this PR merged! 🎉

Now, the needs-changelog label has been added to it.

Please check if this PR needs to be included in the "Upcoming Changes" and "Release Notes" doc. If it doesn't, simply remove the label.

If it does, please add an entry to our shared document, with screenshots and testing instructions if applicable, then remove the label.

Thank you! ❤️

matticbot pushed a commit that referenced this pull request Dec 6, 2024
@semantic-release-bot
chore(release): 4.5.0-alpha.3 [skip ci]
bbc3955 
# [4.5.0-alpha.3](v4.5.0-alpha.2...v4.5.0-alpha.3) (2024-12-06)

### Bug Fixes

* **modal-checkout:** allow all gateway assets ([#1988](#1988)) ([e371e30](e371e30))
* **modal-checkout:** handle paypal ([#1985](#1985)) ([9bb2b8c](9bb2b8c))

### Features

* add CSS class to variation buttons for tracking ([#1989](#1989)) ([910e6b1](910e6b1))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 4.5.0-alpha.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

matticbot pushed a commit that referenced this pull request Dec 9, 2024
@semantic-release-bot
chore(release): 4.5.0 [skip ci]
175c966 
# [4.5.0](v4.4.0...v4.5.0) (2024-12-09)

### Bug Fixes

* also search for coauthor posts by term slug ([#1954](#1954)) ([49357ff](49357ff))
* **modal-checkout:** allow all gateway assets ([#1988](#1988)) ([e371e30](e371e30))
* **modal-checkout:** handle paypal ([#1985](#1985)) ([9bb2b8c](9bb2b8c))
* **ras-acc:** correct spacing issue around saved credit cards ([#1980](#1980)) ([52a5c57](52a5c57))
* **ras-acc:** fix display issues with Additional Fields ([#1979](#1979)) ([b9390ef](b9390ef))
* **ras-acc:** remove space caused by empty divs ([#1978](#1978)) ([8cb6ead](8cb6ead))
* remove reCaptcha for WooCommere code from modal checkout ([#1984](#1984)) ([8e250eb](8e250eb))

### Features

* add Bluesky support to the Author Profile, List blocks ([#1969](#1969)) ([d26a7e4](d26a7e4))
* add CSS class to variation buttons for tracking ([#1989](#1989)) ([910e6b1](910e6b1))
* add support for Newspack Guest Contributor in HPP blocks ([#1934](#1934)) ([c16849e](c16849e))
* merge RAS-ACC work into trunk ([#1977](#1977)) ([2eeaa89](2eeaa89))
@matticbot
Copy link
Contributor

🎉 This PR is included in version 4.5.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@chickenn00dle chickenn00dle chickenn00dle approved these changes

Assignees
No one assigned
Labels
ras-acc testing released on @alpha released [Status] Approved
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@laurelfulford @matticbot @chickenn00dle @leogermani