Custom button triggers the add to cart

Solved
Valentinlako
Tourist
4 1 0

Hey there, I added a custom button for product page. It's a popup modal for sizing guide because I had bad experiences with apps.

Now, if I press on the sizing guide button I created, it triggers the add to cart and automatically forwards me to the cart page.

Here is the button's code:

<style>
 
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  
}
 
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s;
  height: 70%;
  overflow: scroll;
  
}
 
/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
 
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
 
/* The Close Button */
.close {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
 
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
 
.modal-header {
text-align: center;
  padding: 2px 16px;
  background-color: #000;
  color: white;
}
 
.modal-body {padding: 2px 16px;}
 
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
.btnsizguide {
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  box-sizing: border-box;
  color: #121212;
  cursor: pointer;
  display: block;
  flex: 1 1 auto;
  font-family: Inter,sans-serif;
  font-size: 1.0rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  margin: 0 auto;
  outline: none;
  padding: 1rem 1.2rem;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s,-webkit-box-shadow .2s;
  white-space: nowrap;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  box-shadow: transparent 0 0 0 2px,rgba(0, 0, 0, .1) 0 6px 20px;
 
}
 
</style>
</head>
<body>
 
<!-- Trigger/Open The Modal -->
<button id="myBtn" class="btnsizguide">Sizing Guide</button>
 
<!-- The Modal -->
<div id="myModal" class="modal">
 
  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times; </span>
      <h2>Sizing Guide</h2>
    </div>
    <div class="modal-body">
      <p style="text-align: center;"><strong>Taking that not all designs have a 1:1 ratio we are using "length" as a reference.</strong></p>
<p style="text-align: center;"><strong><br></strong></p>
<p style="text-align: center;">For example, we have a vertical image&nbsp;and an horizontal image</p>
<p style="text-align: center;"><strong><br><img src="https://cdn.shopify.com/s/files/1/0595/7782/7527/files/LENGTH.jpg?v=1634289871?alt=media&amp;token=d..." alt="Uploaded Image" style="width: 285px; height: 285px;"><img src="https://cdn.shopify.com/s/files/1/0595/7782/7527/files/LENGTH2.jpg?v=1634289882" alt="Uploaded Image" style="width: 271px; height: 271px;"></strong></p>
<p style="text-align: center;"><strong><br></strong></p>
<p style="text-align: center;"><strong>When you're placing your order, imagine your product's size by the "longest" element of your design.</strong></p>
<p style="text-align: center;"><strong>"Small" =&nbsp;</strong>40cm length</p>
<p style="text-align: center;"><strong>"Medium"</strong> =&nbsp;80cm length</p>
<p style="text-align: center;"><strong>"Large"</strong> =&nbsp;120cm length</p>
<p style="text-align: center;"><strong>"ExtraLarge"</strong> =&nbsp;160cm length</p>
<p style="text-align: center;"><strong>"Custom Size"</strong> <br>Please leave us a note when you are finishing your order.</p>
<p style="text-align: center;"><br></p>
    </div>
  </div>
 
</div>
 
<script>
// Get the modal
var modal = document.getElementById("myModal");
 
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
 
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
 
// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}
 
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
 
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

 

Accepted Solution (1)

Accepted Solutions
LitExtension
Shopify Partner
1935 316 391

This is an accepted solution.

Hi @Valentinlako,

You want to turn this off? That means when clicking the button it will show the modal instead of adding to cart?

Please change:

<button id="myBtn" class="btnsizguide">Sizing Guide</button>
=>
<button id="myBtn" class="btnsizguide" type="button">Sizing Guide</button>

Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Replies 2 (2)
LitExtension
Shopify Partner
1935 316 391

This is an accepted solution.

Hi @Valentinlako,

You want to turn this off? That means when clicking the button it will show the modal instead of adding to cart?

Please change:

<button id="myBtn" class="btnsizguide">Sizing Guide</button>
=>
<button id="myBtn" class="btnsizguide" type="button">Sizing Guide</button>

Hope it helps!

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Valentinlako
Tourist
4 1 0

I don't know how I missed this! Thank you very much.