[Rowan Henseleit1]

Hi,

I am looking to have a custom shopping cart widget using an image I have made. I would prefer to do this using the simple method you have already provided with the

data-custom-icon-url="img/Icons/CartIcon.png"

css code however my site has custom JS meaning this needs to be able to be dragged and not have a 'ghost image' which is normally fixed by putting

draggable="false" in the <img> holder.

My JavaScript can be found here

<script type="text/javascript">
		dragElement(document.getElementById(("Icon")));

	function dragElement(elmnt) {
	  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
	  if (document.getElementById(elmnt.id + "drag")) {
	    /* if present, the header is where you move the DIV from:*/
	    document.getElementById(elmnt.id + "drag").onmousedown = dragMouseDown;
	  } else {
	    /* otherwise, move the DIV from anywhere inside the DIV:*/
	    elmnt.onmousedown = dragMouseDown;
	  }

	  function dragMouseDown(e) {
	    e = e || window.event;
	    // get the mouse cursor position at startup:
	    pos3 = e.clientX;
	    pos4 = e.clientY;
	    document.onmouseup = closeDragElement;
	    // call a function whenever the cursor moves:
	    document.onmousemove = elementDrag;
	  }

	  function elementDrag(e) {
	    e = e || window.event;
	    // calculate the new cursor position:
	    pos1 = pos3 - e.clientX;
	    pos2 = pos4 - e.clientY;
	    pos3 = e.clientX;
	    pos4 = e.clientY;
	    // set the element's new position:
	    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
	    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
	  }

	  function closeDragElement() {
	    /* stop moving when mouse button is released:*/
	    document.onmouseup = null;
	    document.onmousemove = null;
	  }
	}
</script>

I have tried using developer tools to get appropriate class names and also searched for people trying to do similar things but none of the fixes work for me.

I would also like to know how to remove the item number counter which comes up on the widget when an item is added to the bag.



Thanks,
Rowan

[Kenga Ecwid]

Hi Rowan!

I'm Kenga from Ecwid Team. Thanks for your message.

You need to replace this line of your code:

dragElement(document.getElementById(("Icon")));

with this one:

dragElement(document.querySelector('.ec-minicart')

In order to hide the counter, add this CSS code in your custom CSS theme in Ecwid Control panel > Design:

.ec-minicart.ec-minicart--pill.ec-minicart--s .ec-minicart__counter, 
.ec-minicart.ec-minicart--pill.ec-minicart--m .ec-minicart__counter, 
.ec-minicart.ec-minicart--pill.ec-minicart--l .ec-minicart__counter, 
.ec-minicart.ec-minicart--pill.ec-minicart--xl .ec-minicart__counter, 
.ec-minicart.ec-minicart--pill.ec-minicart--xxl .ec-minicart__counter {
    display: none;
}

Check this guide on how to add the CSS codes in your Ecwid store:

• Adding CSS codes to your store

Try this out and let us know the results. It will be cool if you share the link to the published page where we can see how the scripts and CSS codes are executed.

Have a nice day!

[Rowan Henseleit1]

Thanks for the response!

The counter on the cart widget has not gone though with that fix

[Emma C.]

Originally Posted by Rowan Henseleit1

Thanks for the response!

The counter on the cart widget has not gone though with that fix

Hi Rowan!

Thanks for your response.

I have checked your Ecwid account and I see that you use the Instant site right now which is available via https://store17796921.ecwid.com

From what I see, the code Kenga gave hides the counter from minicart there, please refer to my screenshot: https://ecwid.d.pr/DhKi6l

It might be that once you checked the minicart, the previous look of your Instant site was in the cache of your browser. So clearing your cache and cookies can help to see the changes.

If you have added your store to your own website, please share the link with us, we will check the minicart counter there.

Thanks!

[Rowan Henseleit1]

I do use the instant store however I am not using a shopping cart widget inside that store. I am using the separate - go to cart - button (shown in attachment) as a shortcut for the theme of this site

Appreciate the help!

Thank you,
Rowan

[Edward M.]

Hi!

I'm Edward from the Ecwid Team.

Thank you for your reply.

I've checked your screenshot, and I see that you have a custom HTML page where you added the code for the cart widget. So this page you test it on is not related to the Ecwid Instant site, thus the code sent for the Instant site doesn't work.

Therefore, please replace the current code you use for hiding the counter with the following one:

.ec-minicart .ec-minicart__counter {
display: none;
}

It will do the trick.

If it still doesn't work as you intend it, we need to inspect the live page. So please publish your site and send us a link to it so we can take a look.