Quick Order Form scaffolding #3062
Open
+977
−48
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sofiamatulis
force-pushed
the
quick-order-form
branch
from
35599cf
to
4fb2bc5
Compare
* Quick Order Form scaffolding * [Refactoring] Replace loading spinner with snippet (#2996) * Change spinner for main-cart-items * Change spinner for cart-drawer * remove extra div and change classes * Replace spinner with snippet for pdp and fead prod * Remove unnecessary classes * Add comment for snippet * Change naming for files and css classes * Put back deleted elements * Remove unused classes * Put back loading-overlay for cases when no spinner * Chnage loading-overlay--error name * Minor change in CSS * Move loading-overlay styles to template-collection * Rename component-loading-overlay * Fix bug with overlay and spinner for facets * Remove component-loading-spinner import from files * Use spinner snippet for predictive search * Hide product count when loading for drawer filters * Address feedback. Clean-up. * Minor changes to address feedback * Fix spinner conflict with cart drawer * Address feedabck * Add missing whitespace for if tag * Quick Order Form scaffolding * Add styles to make form look according to Figma * Make sure QOL works properly * Styles for images * Remove price from product * Adjust css styles for the quick order form * Update section settings * Add filtering and search mockup * Remove settings for search and picking collections * Prevent being to added to all templates. Limit numer of the sections to 1. * Remove filter * Fix typo * Remove unnecessary styles and change px to rem * Simplify product title row * Roll back changes for quick-order-list-row * Add display flex to variant column for QOL * Remove empty row * Fix global settings for media * Add link to product title * Prevent border going over image size * Refactoring. Add hover effect while focusing. * Remove shadow from total bar * Fix visible empty space and outline for no-media * Remove unnecessary parameters for snippet * Minor changes in css * Remove hardcoded text * Update total bar count items and price * Change Product total to Subtotal. Add currency code. Fix shadow. * Change ID for quick-order-form search. Re order templates for enabled_on. --------- Co-authored-by: Sofia Matulis <[email protected]>
![translation-platform[bot]](https://avatars.githubusercontent.com/in/7649?s=60&v=4){kind=small}
| "label": "Show variant images" | ||
| }, | ||
| "show_sku": { | ||
| "label": "Show SKUs" |
There was a problem hiding this comment.
Localization quality issue found
The following issues may affect the quality of localized translations if they are not addressed:
- The value
Show SKUsfor keysections.quick-order-form.settings.show_sku.labelis very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
Please look out for other instances of this issue in your PR and fix them as well if possible.
Questions about these messages? Hop in the #help-localization Slack channel.
* Quick Order Form scaffolding * [Refactoring] Replace loading spinner with snippet (#2996) * Change spinner for main-cart-items * Change spinner for cart-drawer * remove extra div and change classes * Replace spinner with snippet for pdp and fead prod * Remove unnecessary classes * Add comment for snippet * Change naming for files and css classes * Put back deleted elements * Remove unused classes * Put back loading-overlay for cases when no spinner * Chnage loading-overlay--error name * Minor change in CSS * Move loading-overlay styles to template-collection * Rename component-loading-overlay * Fix bug with overlay and spinner for facets * Remove component-loading-spinner import from files * Use spinner snippet for predictive search * Hide product count when loading for drawer filters * Address feedback. Clean-up. * Minor changes to address feedback * Fix spinner conflict with cart drawer * Address feedabck * Add missing whitespace for if tag * Quick Order Form scaffolding * Add styles to make form look according to Figma * Make sure QOL works properly * Styles for images * Remove price from product * Adjust css styles for the quick order form * Update section settings * Add filtering and search mockup * Remove settings for search and picking collections * Prevent being to added to all templates. Limit numer of the sections to 1. * Remove filter * Fix typo * Remove unnecessary styles and change px to rem * Simplify product title row * Roll back changes for quick-order-list-row * Add display flex to variant column for QOL * Remove empty row * Fix global settings for media * Add link to product title * Prevent border going over image size * Refactoring. Add hover effect while focusing. * Remove shadow from total bar * Fix visible empty space and outline for no-media * Remove unnecessary parameters for snippet * Minor changes in css * Remove hardcoded text * Update total bar count items and price * Change Product total to Subtotal. Add currency code. Fix shadow. * Build mobile UI. Adjust desktop UI. * Quick Order Form: Follow Figma designs (#3072) * Quick Order Form scaffolding * [Refactoring] Replace loading spinner with snippet (#2996) * Change spinner for main-cart-items * Change spinner for cart-drawer * remove extra div and change classes * Replace spinner with snippet for pdp and fead prod * Remove unnecessary classes * Add comment for snippet * Change naming for files and css classes * Put back deleted elements * Remove unused classes * Put back loading-overlay for cases when no spinner * Chnage loading-overlay--error name * Minor change in CSS * Move loading-overlay styles to template-collection * Rename component-loading-overlay * Fix bug with overlay and spinner for facets * Remove component-loading-spinner import from files * Use spinner snippet for predictive search * Hide product count when loading for drawer filters * Address feedback. Clean-up. * Minor changes to address feedback * Fix spinner conflict with cart drawer * Address feedabck * Add missing whitespace for if tag * Quick Order Form scaffolding * Add styles to make form look according to Figma * Make sure QOL works properly * Styles for images * Remove price from product * Adjust css styles for the quick order form * Update section settings * Add filtering and search mockup * Remove settings for search and picking collections * Prevent being to added to all templates. Limit numer of the sections to 1. * Remove filter * Fix typo * Remove unnecessary styles and change px to rem * Simplify product title row * Roll back changes for quick-order-list-row * Add display flex to variant column for QOL * Remove empty row * Fix global settings for media * Add link to product title * Prevent border going over image size * Refactoring. Add hover effect while focusing. * Remove shadow from total bar * Fix visible empty space and outline for no-media * Remove unnecessary parameters for snippet * Minor changes in css * Remove hardcoded text * Update total bar count items and price * Change Product total to Subtotal. Add currency code. Fix shadow. * Change ID for quick-order-form search. Re order templates for enabled_on. --------- Co-authored-by: Sofia Matulis <[email protected]> * Add styles to make form look according to Figma * Make sure QOL works properly * Styles for images * Update section settings * Add filtering and search mockup * Remove settings for search and picking collections * Remove filter * Refactoring. Add hover effect while focusing. * Remove settings duplicate * Align spinner * Adjust indentation * Open product link in a new tab * Add theme check for filter * Prevent border going over image size * Adjust padding for the total bar * Minor adjustment for variable name * Remove theme-check-disable * Rename item_price to total_item_price_in_cart * Rename class for active state * Don't pass is_variant to snippet * Add if condition for image on product row * Change generic class name for more specific. * Change thumbnails sizes * Add accessibility message --------- Co-authored-by: Sofia Matulis <[email protected]>
| "quick_order_form": { | ||
| "search": "Search by product, variant or SKU", | ||
| "search_number_items": "{{ count }} items", | ||
| "line_total": "Line total", |
There was a problem hiding this comment.
Localization quality issue found
The following issues may affect the quality of localized translations if they are not addressed:
- The value
Line totalfor keysections.quick_order_form.line_totalis very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
Please look out for other instances of this issue in your PR and fix them as well if possible.
Questions about these messages? Hop in the #help-localization Slack channel.
| "search": "Search by product, variant or SKU", | ||
| "search_number_items": "{{ count }} items", | ||
| "line_total": "Line total", | ||
| "total": "Subtotal" |
There was a problem hiding this comment.
Localization quality issue found
The following issues may affect the quality of localized translations if they are not addressed:
- The value
Subtotalfor keysections.quick_order_form.totalis very short. Short strings are more likely to be misunderstood by translators without context. Please provide additional context for the translators if possible.
Please look out for other instances of this issue in your PR and fix them as well if possible.
Questions about these messages? Hop in the #help-localization Slack channel.
* Adjust font-size for compare at price * Adjust price font-size for mobile * Change soldout font-size. Remove hover on TAB. * Temporary change a product * Prevent hover on input container for the QOF * Add hover/highlighted state for error rows * Fix border bug in Safari * Fix hover state for error rows with CSS only * Change a product for rendering
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
PR Summary:
Scaffolding of the new section Quick Order Form
Figma: https://www.figma.com/file/CruV4wCdMmlovbE3GEs6WZ/Quick-order-form?type=design&node-id=971-19517&mode=design&t=XKCmQDFA85AmKwZq-0
Not to forget to address
We had a discussion about repetitive translations here. For now we have two strings that already exist in the Dawn:
Editor: https://admin.shopify.com/store/os2-demo/themes/157803020310/editor