spotstv wrote: Yeah, that's the bit I was looking at, You seem to have a pretty simple solution.
Okay, I felt like I may have hijacked the thread from before.
The hikashop cart module can be placed anywhere you want the icon/badge to show up. On my projects I place it at the top right corner. In fact I create a special module position for it now.
In the module, I create a custom class suffix to help control the positioning and layout and make it float right.
For the Hikashop module settings I have:
Data display: mini cart = yes, product quantities = yes, and hide if empty = custom ("0") --all other options No.
Price data display: display price = no
Display: all set to yes, but can be anything ... I like it showing up all of the time
Then change the language strings as mentioned before to control what is displayed by the module. If you don't use font awesome for the cart icon, you'll need to change this to include the image you plan on using.
X_ITEM and X_ITEMS language overrides:
<span id="cart-icon" class="fa-stack fa-fw has-badge" data-count="%s"> <i class="fa fa-shopping-cart fa-stack-2x fa-fw"></i> </span>
I create a second instance of the Hikashop cart module and place it in a hidden position and then use a pop-up to control the display of the cart's contents itself (I use Engage box). That way when you click on the cart icon, the user gets a pop-up of the cart contents and the ability to proceed to checkout. You could do this with any javascript/onclick action.
here is the css customization I use. This creates the cart item count as a badge to the cart icon. So in the cart icon module, I use a module suffix of top-cart-badge, so my css looks like:
//shopping cart icon/badge
#g-top .top-cart-badge {
text-align: right;
top: 0;
right: 0;
z-index: 99;
position: absolute;
float: right;
padding: 10px 16px;
margin-right: 2px;
}
.top-cart-badge #cart-icon {
width: 2em;
padding-top: 0;
margin-top: 0;
}
.top-cart-badge .fa-stack[data-count]:after {
position: absolute;
right: -40%;
top: -10%;
content: attr(data-count);
font-size: 65%;
padding: .1em 0;
border-radius: 999px;
line-height: 1.35em;
color: $accent-color-1;
background: $white;
text-align: center;
min-width: 2.5em;
}