[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

[TG Data Service]

Originally Posted by Maya

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.

Hi Maya!
I was just wondering if you might have a general timeframe for when the Javascript API might be updated to get the info about cart contents? Thanks!

[Maya]

Originally Posted by TG Data Service

Hi Maya!
I was just wondering if you might have a general timeframe for when the Javascript API might be updated to get the info about cart contents? Thanks!

I'm sorry, but I don't have ETA of this feature yet. However, this feature is completed already and on the testing stage now.

It will be added in Ecwid with next release expected in a month.

[Cody Atkinson]

Hi Maya,

I have referenced the code that you had in the previous post of this thread. I have got close but I haven't quite got it to where I want and some of it is lining up weird. Do you think you could help me tweak the code to get what I want?

Here is what I have:


This is what I want:


Here is the code:

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

div.ecwid-minicart-mini-rollover {
  background: #131315;
  border: 0 none;
padding-right: 115px;
height: 20px;
padding-top: 10px;
}
a.ecwid-minicart-mini-link {
  position: absolute;
  display: none;
  right: 20px;
  top: 9px;
  color: #C70202;
  font-size: 14px;
  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: 16px;
color: #C70202;
text-transform: uppercase;
}

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

What I am having trouble with

• I would like the 0 Item / $0.00 text to be underlined
• I would like the separator to be display just like in the picture 0 Items / $0.00 - Not with the | between the two
• I would like this to be clickable to the cart if possible, but I do not want the "checkout text"
• I have set the checkout text to display; none but the minicart is still as wide as before.
• This is going to be placed in a nav bar so I need the height of the minicart to be about the size of the text so it doesn't look off set with the rest of the nav bar.
  
  
  Thanks in advance!!

[nippnwaffle]

Originally Posted by Maya

I'm sorry, but I don't have ETA of this feature yet. However, this feature is completed already and on the testing stage now.

It will be added in Ecwid with next release expected in a month.

Hello Maya:
I am just wondering if there has any API(s) now is released from ECWID that allows us get minicart contents out to other sites? if so, can you advise where we can find it?