fix: added barcode-svg #10242
fix: added barcode-svg #10242
Conversation
github-actions
bot
added
Product Page
Template::Toolkit
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #10242 +/- ##
==========================================
+ Coverage 49.54% 49.68% +0.13%
==========================================
Files 67 71 +4
Lines 20650 20982 +332
Branches 4980 5026 +46
==========================================
+ Hits 10231 10424 +193
- Misses 9131 9270 +139
Partials 1288 1288 ☔ View full report in Codecov by Sentry. |
github-actions
bot
added
the
dependencies
| //init barcode SVGs if exist on the page | ||
| let barcode_svg_elements = document.getElementsByClassName("barcode-svg"); | ||
| if(barcode_svg_elements.length!=0){ | ||
| JsBarcode(".barcode-svg").init(); |
There was a problem hiding this comment.
Since you already have the array, this should be enough:
| JsBarcode(".barcode-svg").init(); | |
| JsBarcode(barcode_svg_elements).init(); |
JsBarcode seems to do the same by calling getRenderProperties internally. Might save some ms by not running the selector again
| @@ -490,6 +490,14 @@ <h3 class="title-5 text-medium">[% lang('footer_discover_the_project') %]</h3> | |||
| [% END %] | |||
|
|
|||
| </body> | |||
| <script src="[% static_subdomain %]/js/dist/JsBarcode.all.min.js"></script> | |||
| <script> | |||
| //init barcode SVGs if exist on the page | |||
There was a problem hiding this comment.
I'm not sure what the best place for this snippet is, but in general, we tried to remove most direct JS from the templates in the last few months. Maybe display-product.js? cc @alexgarel @stephanegigandet
There was a problem hiding this comment.
display-product.js would be the right place I think, we don't need to load this script on every page, just product pages.
In fact we probably want to display the barcode only on desktop (not mobile), as on mobile it takes a lot of space for little added value. On desktop it's very useful so that it can be scanned with a mobile app (like ours, or others).
I'm not sure if we could load the script conditionnaly if the screen is big enough though.
| </p> | ||
| <svg class="barcode-svg" |
There was a problem hiding this comment.
Nice!
Could you change the display so that it is displayed only on desktop, and at the right of the barcode number, so that we don't lose vertical space? The barcode is very nice to have in order to be able to scan it with a mobile app, but we don't want to push the real content too much down.
e.g. something like that:
|
After many tryings: My proposal: Screenshots: |
There was a problem hiding this comment.
Thanks @bazylevnik0, this is great.
Moving to _off.scss seems the only remaining item to me !
| <style> | ||
| #barcode_div_code,#barcode_div_svg{ | ||
| display: inline-block; | ||
| vertical-align: top; | ||
| } | ||
| @media only screen and (max-width: 600px) { | ||
| #barcode_div_svg,#barcode_br { | ||
| display: none; | ||
| } | ||
| } | ||
| </style> |
There was a problem hiding this comment.
we should put it in the main _off.scss file.
There was a problem hiding this comment.
Fixed. But I moved styles to _product-page.scss.
I think it is more reasonable because script is also only on the product page template.
|
What
Added support of the barcode SVGs in the page
Screenshot
Related issue(s) and discussion