Shadows 1.0 CSS Mini-basket Icon Challenge

[lesliekirk]

lesliekirk Yes, similar. The thing about SVG that's kinda neat is that it's a document in unto itself. So you can target it with scripting and CSS. It also has actual text in it, so if you wanted to update the numbers they could be actual numbers not just an image. To be fair, with SVG being an actual document this can lead to some complication, but not too much.

Are you saying the each number would have to have an image or that numbers (text) can overlay the image?

[lesliekirk]

lesliekirk Yes, similar. The thing about SVG that's kinda neat is that it's a document in unto itself. So you can target it with scripting and CSS. It also has actual text in it, so if you wanted to update the numbers they could be actual numbers not just an image. To be fair, with SVG being an actual document this can lead to some complication, but not too much.

Here's some really good resources on SVG:

- https://css-tricks.com/using-svg/ -- A high level overview
- https://svgontheweb.com/ -- A Practical Guide to SVG on the Web
- https://svgpocketguide.com/book/ -- A little more in depth, still very practical.
- https://www.sarasoueidan.com/tags/svg/ -- LOTS to dig into here, Sara is one of the authorities on SVG

Thanks for leads. This may help me with another issue that can be resolved using an SVG for the icon.

[lesliekirk]

Hi Leslie,

This will probably come down to some flex settings as well as some positioning tweaks. The biggest issue I think you might have is what happens if you have a three digit quantity in your cart?

I have a question about the Iconography used. The docs reference IcoMoon - is there where the icons are from? I'm trying to find the u-icon-bag-empty icon out in the wild but I'm not having much luck finding that specific one.

[Matt Zimmermann]

Hi Leslie,

Yes, that is where the icons came from. I am working on an updated icon system for a future release as well.

[lesliekirk]

Thanks Matt - for the life of me (or I am just blind) I cannot find the icon that matches what is used. But I did add ReadyTheme.ttf to my system and am doing battle with it in my aging Photoshop - the icon is slightly different there too.

[lesliekirk]

I think I'm failing background images 101. I'm wondering if I should put the background image as the container background. I tried changing out the icon and using the background there. It's not displaying (but the image is available). I change the class "u-icon-bag-empty" to "bag"

.bag {
background: url(graphics/00000001/icon.png) no-repeat top left;
background-size: contain;
}

I'm using a PNG file first to make I'm mastering the background. FWIW - I've done background images using CSS but this one is beating me up.

[cpp-dev]

Are you saying the each number would have to have an image or that numbers (text) can overlay the image?

Not quite either.

The styles that are defined within the SVG are scoped to the SVG. So really it's that you have a text element, and it has a set of it's own styles that define how it looks w/in its context.

The SVG format is based on XML so many of the techniques that are familiar to HTML are also available to SVG, like IDs and Classes, this is how you can single out the text element for updating from outside of the SVG file. And since the style is defined by the document, when the content of the tag gets updated so does the "image".

Does that answer your question?

[lesliekirk]

Circling back to this - I really, really like how the Suivant mini-basket works. It's absolutely perfect for what I need - I can position the mini-basket count dead center over the icon, the count stays centered, but my problem is getting the icon itself. I can't use the class u-icon-bag-empty because it applies itself to the numbers too.

Is there a way to use a "data-rt-icon"?

<div class="mini-basket">
<a href="&mvte:urls:BASK:auto;" data-hook="open-mini-basket">
<span data-rt-icon="&#x65;" class="bg-sky white">
<span data-hook="open-mini-basket mini-basket-count" class="notification bg-red white basket-count">&mvte:global_minibasket:basket_count;</span></span></a>
</div>

[Matt Zimmermann]

Hi Leslie,

The legacy icon font is not included in Shadows. You might try setting the font-family for the basket quantity back to the original.

[lesliekirk]

I think I'm getting closer to what I want. It's a combination of the background image using the coding / CSS from Suivant. I need to do the multi-browser test (I was told by the store owner there are overall layout issues with Edge)