Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding Custom Cart to Navigation bar


clarson1229

Question

Hello, 

I am trying to add an Ecwid Cart to the navigation bar of my website.  Next to the facebook logo in the screenshot below.

image.png.e10bf48a768258fbeea91afee9bc0d49.png

I have a provided div from Ecwid. 

<div class='ec-cart-widget'></div>

I have tried putting that into the header of code injection but it does not show up. I saw in another post something about adding that div to the footer in code injection and then using Jquery '.appendTo' but it does not seem to be working. Not sure if I wrote it wrong or if that is not supported. 

Any help would be appreciated. 

 

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

4 answers to this question

Recommended Posts

  • 0
Posted (edited)

Well I figured it after several hours of trial and error. I hope I can make someones day who comes searching in the future. 

Put the following code into the header section of code injection 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
$( document ).ready(function() {
	$( ".header-actions-action.header-actions-action--social" ).append("<div class='ec-cart-widget'></div>");
});
</script>

and then a bit of css to make the bag the same size as the other icons and change the color to be the same. 

.ec-minicart--no-shape{
  padding: 0px !important; 
}
.ec-minicart__icon{
  height: 30px !important;
  width: 30px !important;
}
.ec-minicart__icon .icon-default path[stroke], .ec-minicart__icon .icon-default circle[stroke]{
  stroke: #(color code you want) !important;
}

 

Edited by clarson1229
Link to post
  • 0

@tuanphan 

 

Do you know what the if statement is so that my jquery will run in desktop view vs in mobile view. 

PJqOYmu.png

Currently both statements run in mobile and i only want 1 cart not two. works fine in desktop view though. 

 

<---  Desktop view ---> 
<script>
$( document ).ready(function() {
	$( ".header-actions-action.header-actions-action--social" ).append("<div class='ec-cart-widget icon'></div>");
	
});
</script>
<---  mobile view ---> 
<--- Some sort of if so that this only runs in mobile view --->
<script>
$( document ).ready(function() {
	$( ".header-menu-actions-action.header-menu-actions-action--social" ).append("<div class='ec-cart-widget icon'></div>");  
	
});
</script>

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...