[Bundys Educational Supplies]

Hi, I want to customize my Minicart and I was wondering how you access the number of items in the bag and the total amount?

For example say I wanted this to be my "minicart" (From a html website):

<div id="cart">
<div class="left"></div>
<div class="icon"><img src="images/icon_cart.png" width="33" height="31" alt="Cart" /></div>
<ul class="text">
<li><a href="#">0 items</a> <span class="white">|</span></li>
<li><a href="#">$0.00</a> <span class="white">|</span></li>
<li><a href="#">Checkout</a></li>
</ul>
<div class="right"></div>
</div>

How would i get it to have the correct amout of items and the total amount displayed? Thanks

[Bundys Educational Supplies]

Hi,

I was wondering if there was a way to get the total number of items in the shopping bag/cart? Say I had this line: <p> 0 Items | $0.00 | Checkout </p> - How would i get the number of items in the cart and the total amount?? Also how do i link to the checkout? (I dont want to use the mini-view version of the cart).

Thanks in advance,

Kim.

[Maya]

Originally Posted by KimIB

Hi,

I was wondering if there was a way to get the total number of items in the shopping bag/cart? Say I had this line: <p> 0 Items | $0.00 | Checkout </p> - How would i get the number of items in the cart and the total amount?? Also how do i link to the checkout? (I dont want to use the mini-view version of the cart).

Thanks in advance,

Kim.

Hello Kim,

Currently, Ecwid allows to display number of items in the cart, subtotal and link to the cart page using Minicart widget in "Mini" view only. Please, refer to this article for details: http://kb.ecwid.com/w/page/31295033/...20a%20minicart

Unfortunately, there is no easy way to get the information about number of items in the cart and subtotal now. However, we are currently working on the modification of Javascript API that will allow you to get all information about cart contents. It will be added to Ecwid in one of upcoming releases. Stay turn!

As for now, you can customize the Minicart appearance using custom CSS theme. Could you give me sketch, which illustrate how this information should look? I will try to help you with this.

[Bundys Educational Supplies]

Originally Posted by Maya

As for now, you can customize the Minicart appearance using custom CSS theme. Could you give me sketch, which illustrate how this information should look? I will try to help you with this.

Hi, thanks for the reply!

Ideally i'd like the cart to look something like this:

[Maya]

Originally Posted by KimIB

Hi, thanks for the reply!

Ideally i'd like the cart to look something like this:

Thank you for provided screenshot.

Please, use following code in your custom CSS theme in order to get minicart with following styles:

div.ecwid-minicart-mini-rolloverContainer {
 display: block;
}

div.ecwid-minicart-mini-rollover {
  background: #F5C505 url(http://example.com/images/minicart_bg.gif) left top no-repeat;
  border: 0 none;
padding-right: 115px;
height: 20px;
padding-top: 10px;
}
a.ecwid-minicart-mini-link {
  position: absolute;
  right: 20px;
  top: 9px;
  color: #000000;
  font-size: 12px;
  padding-left: 10px;
  text-decoration: none;
 border-left: solid 1px #fff;
}
div.ecwid-minicart-mini-total {
margin-top: -15px;
margin-left: 60px;
border-left: solid 1px #fff;
padding-left: 10px;
}
div.ecwid-minicart-mini-total span.ecwid-minicart-mini-total-label { 
   display: none;
}
.ecwid-minicart-mini-overlay-count, 
.ecwid-minicart-mini-items, div.ecwid-minicart-mini-total {
font-size: 12px;
color: #000;
}
div.ecwid-minicart-mini {
visibility: hidden;
}

change "http://example.com/images/minicart_bg.gif" to the absolute path to the minicart background image. You can also change other elements' styles, if it is needed.

[Bundys Educational Supplies]

Originally Posted by Maya

Thank you for provided screenshot.

Please, use following code in your custom CSS theme in order to get minicart with following styles:
//Code removed\\
change "http://example.com/images/minicart_bg.gif" to the absolute path to the minicart background image. You can also change other elements' styles, if it is needed.

Woah, thank you so much! Looks great, works great! Except one minor issue, the string " | Shopping cart" shows in the top right of the screen, see the screen shot to see what i mean.

EDIT: It shows in the correct spot but it also shows in the top-right of the screen

[Maya]

Originally Posted by KimIB

Woah, thank you so much! Looks great, works great! Except one minor issue, the string " | Shopping cart" shows in the top right of the screen, see the screen shot to see what i mean.

EDIT: It shows in the correct spot but it also shows in the top-right of the screen

Could you give me the link to the page, where your store is installed? It is hardly difficult to investigate this problem using screenshot =)

[Bundys Educational Supplies]

Originally Posted by Maya

Could you give me the link to the page, where your store is installed? It is hardly difficult to investigate this problem using screenshot =)

My site is not live yet, still designing it and working on it. However i tracked the problem back to the css code that you provided. Are you able to reproduct it on another store?

[Oggy G]

Hello KimIB,

Did you found a solution about the doubled "Shopping cart" string ?
Please help me with the same problem if you can

Kind Regards,

Oggy G

[Maya]

Originally Posted by KimIB

My site is not live yet, still designing it and working on it. However i tracked the problem back to the css code that you provided. Are you able to reproduct it on another store?

In order to fix this problem, please, add following code in the end of your CSS theme:

div.ecwid-minicart-mini {
visibility: hidden;
}

I'm sorry for any probable inconvenience.