Shadows 1.0 CSS Mini-basket Icon Challenge

[lesliekirk]

I've tweaked the Wish List, and Mini-basket icons to use something slightly different. For the Wish List, I used the class "u-icon-heart-empty". For the mini-basket, I used the class "u-icon-bag-empty". Now for the help I need. The store owner would like the basket count to appear inside that empty icon.

Fbix1z.png

I have the Default code next to the empty basket icon so I can try different things

<span class="u-icon-bag-empty" data-hook="open-mini-basket"></span>
<span class="u-color-white t-site-header__basket-link-quantity" data-hook="open-mini-basket mini-basket-count">&mvte:global_minibasket:basket_count;</span>

I have tried

<span class="u-icon-bag-empty" data-hook="open-mini-basket">&mvte:global_minibasket:basket_count;</span>

I got this interesting result

t7FLvO.png

then I tried this

<span class="u-icon-bag-empty" data-hook="open-mini-basket mini-basket-count">&mvte:global_minibasket:basket_count;</span>

same result as the last image.

If I add something to the basket, there is a change

cprgzE.png


I don't want to this that this isn't doable - can the icon be a background? Suggestions are welcome.

[Matt Zimmermann]

Hi Leslie,

You are probably going to need to use positioning and maybe use the icon SPAN as a wrapper for the quantity SPAN.

[RTHOMASDESIGN]

Ya, just set the count style to position:absolute, and position it accordingly. E.g.
.YouCartCountClass {
position: absolute;
width: 100%;
top: 0;
left: 0;
text-align: center;
}
You may have to define the width/height/positioning (relative) of the parent element.

<span class="u-icon-bag-empty" data-hook="open-mini-basket mini-basket-count"><span class="YouCartCountClass">&mvte:global_minibasket: basket_count;</span></span>

[lesliekirk]

Ya, just set the count style to position:absolute, and position it accordingly. E.g.
.YouCartCountClass {
position: absolute;
width: 100%;
top: 0;
left: 0;
text-align: center;
}
You may have to define the width/height/positioning (relative) of the parent element.

<span class="u-icon-bag-empty" data-hook="open-mini-basket mini-basket-count"><span class="YouCartCountClass">&mvte:global_minibasket: basket_count;</span></span>

Matt Zimmermann and RTHOMASDESIGN - the "wheel within a wheel" makes sense but I don't think it was well-received

bi7lhU.png
The entire header now looks like an Egyptian display

<span class="u-icon-bag-empty" data-hook="open-mini-basket mini-basket-count"><span class="cartCount">&mvte:global_minibasket: basket_count;</span></span>

plus I did style it


.cartCount {
position: absolute;
width: 100%;
top: 0;
left: 0;
text-align: center;
}

[RTHOMASDESIGN]

Haha wow. Looks like you need to wrap both & take the count out of the icon element.
<span class="CountContainer"><span class="u-icon-bag-empty" data-hook="open-mini-basket mini-basket-count"></span><span class="cartCount">&mvte:global_minibasket: basket_count;</span></span>

**make sure that the container has the style "position: relative;"

[lesliekirk]

Another try (maybe there was junk in the original) - now what is supposed to be the number is the down arrow above the search bar


Hmwj3M.png



It seems that if I do the span tag inside the span tag - there is an issue with the number displaying. It seems to be getting interrupted as an icon code.

[lesliekirk]

Haha wow. Looks like you need to wrap both & take the count out of the icon element.
<span class="CountContainer"><span class="u-icon-bag-empty" data-hook="open-mini-basket mini-basket-count"></span><span class="cartCount">&mvte:global_minibasket: basket_count;</span></span>

**make sure that the container has the style "position: relative;"

LOL Ryan, I hadn't finished my "thoughts" and just posted this after you had made your post.

[lesliekirk]

I'm thinking the "wheel within a wheel" idea just doesn't want to work...it seems that the class of the icon span is being passed onto the count span when I try to do that. The third "container" span doesn't seem to do what we all think it should.

[Matt Zimmermann]

Hi Leslie,

Try wrapping both of the original SPANs with another SPAN, set it to position: relative, set the quantity SPAN to position: absolute, and adjust the positioning accordingly.

[lesliekirk]

Hi Leslie,

Try wrapping both of the original SPANs with another SPAN, set it to position: relative, set the quantity SPAN to position: absolute, and adjust the positioning accordingly.

I've worked through a few issues and now have the count close to centered until someone adds 10 or more items

6TwNGA.png

<a class="u-color-white u-text-uppercase t-site-header__basket-link" data-hook="open-mini-basket" href="&mvte:urls:BASK:auto;">
<span class="CountContainer"><span class="u-icon-bag-empty"></span><span class="cartCount" data-hook="open-mini-basket mini-basket-count">&mvte:global_minibasket:basket_count;</span></span>
</a>

using this for style

.cartCount {
top: 25%;
left: 25%;
text-align: center;
position: absolute;
}
.CountContainer{position: absolute;}

As you can see there are two styling issues. Is there any way to get the count to automatically center as the count gets higher? Also the use of .CountContainer{position: absolute;} causes the icon/count to be lower than the other two icons

Suggestions? Many thanks!!

[Matt Zimmermann]

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?

[RTHOMASDESIGN]

Why not assign another class or style based on the number of items in the cart? Should be able to do that with a simple if statement. Could even throw something like "transform: scale(2,1.0);" to adjust the width when the cart has over 100 items in it.

[cpp-dev]

What if you made the icon an SVG, and then it could adapt to the width of the number of items in the cart?

[lesliekirk]

I love the ideas from RTHOMASDESIGN and cpp-dev - my weakness would be implementation. I had wondered about making the icon some sort of background - would that be similar to using an SVG?

[cpp-dev]

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