The functionality of the offcanvas button is not working correctly

I am currently utilizing the newest Bootstrap version of Offcanvas. Interestingly, there seems to be an issue with the close button functionality. When I click the "Add to Cart" button, the offcanvas displays properly. However, the "Add to Cart" button itself appears lighter, and remains clickable (which should not be the case as it is meant to be disabled). When clicked, it behaves as a close button, causing the canvas to close unintentionally. How can I address this issue?

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3835352e292e283b2a1a6f74697468">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="product-button-group">
  <a class="product-like-icon" href="#">
    <i class="fas fa-heart"></i>
  </a>
  <button class="add-to-cart" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
      <i class="fa fa-shopping-bag"></i>ADD TO CART
    </button>

  <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">

    <div class="offcanvas-header">
      <h3 class="offcanvas-title">
        <i class="fa-solid fa-bag-shopping"></i> Shopping Cart
      </h3>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <div class="offcanvas-body">
      <div class="col-sm-12">
        <div class="row">
          <div class="col-sm-3">
            <img src="" alt="mutlu cat shop" width="100px" />
          </div>
          <div class="col-sm-9">
            <h6>Zanies® Twice as Nice Mice</h6>
            <div class="price"><span>$30.00</span> $20.00</div>
            <input class="product-qty" type="number" name="product-qty" min="0" max="10" value="1">
          </div>
        </div>
      </div>
      <hr class="hr-cart">
      <a class="complete-shopping position-absolute bottom-0 end-0" href="#">   Complete shopping</a>
    </div>

  </div>
  <a class="product-compare-icon" href="#"><i class="fas fa-random"></i></a>
</div>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a4a9a9b2b5b2b4a7b686f3e8f5e8f4">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

htmlcsstwitter-bootstrapbuttonbootstrap-5

Answer №1

Consider including a script tag at the beginning or end of your webpage:

<script>
document.querySelector('.add-to-cart').addEventListener('click', function(event) {
    event.preventDefault(); // Stop default link behavior
    // Add your custom code here if needed
});
</script>


document.querySelector('.add-to-cart')
targets the button by its unique ID

The script snippet above adds an event listener to the "Add to cart" button, preventing the default link behavior on click. This ensures that the offcanvas does not open automatically.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve a value from a database and display it in a radio

Can you help me figure out how to implement this functionality? I have a database with a "boolean" field that stores 0 or 1 values. On an HTML page, there is a radioButton with options for OK or NO. I need to dynamically load the boolean value from the dat ...

javascriptphphtmlmysqldatabase

Tips on transitioning between two tables

Recently, I created an HTML page entirely in French. Now, I am attempting to incorporate a language translation feature on the website that allows users to switch between French and English (represented by two flag icons). My concept involves using a tabl ...

javascriptjqueryhtml

The Flutter image blurs into a striking combination of red and black as the screen dimensions are altered

https://i.stack.imgur.com/YeZa6.png Hello everyone, we are facing an issue with Flutter web. Here's what's happening: When we use flutter run -d chrome --web-renderer canvaskit and flutter run -d chrome --web-renderer html, nothing changes. If ...

htmlfluttergoogle-chromeresponsiveflutter-web

PHP Multiple Filter Options

Currently, I am developing a filtering system for a mySQL database that utilizes dropdown menus. While the system functions correctly when using one filter, I am encountering difficulties in stacking multiple filters. To achieve this, I am retrieving the c ...

phphtmlmysqldatabasefilter

What is the best way to utilize mysql for storing user state in order to restrict them from taking a particular action more than once per day?

< button type="button" id="daily-reward-button">Claim</button> 1) When a user clicks this button, it should be disabled which will result in the user being banned in the MYSQL database and unable to click the button again. 2) The button shoul ...

javaphphtmlmysqlwordpress

Guide on integrating an HTML and CSS register form in Django

I have successfully created a responsive register and login using HTML and CSS. Instead of utilizing the standard register form and login provided by Django upon configuration, I want to apply my own custom template. To summarize, while I am familiar with ...

javascriptpythonhtmlcssdjango

Tips for adding CSS attributes to a <style> tag in Internet Explorer

My current issue involves an ajax web application that loads all parts on a single page, specifically index.html. The inner parts being loaded in index.html have exceeded 32 pages (html, js, css). Now I am facing difficulties with the CSS files that need ...

javascriptjqueryhtmlcssinternet-explorer

Issue with customizing Bootstrap5 table colors based on themes

In my latest project, I decided to customize Bootstrap 5.1.3 using Sass in order to introduce some new color themes to the panels. I quickly realized that customizing Bootstrap 5.1.3 is not as straightforward as it was with Bootstrap 4. After updating my ...

csssassbootstrap-5bootstrap-themes

How can I set a minimum height for a table on my website?

Is there a way to make a table that is at least 50px in size, but can still enlarge if there is a lot of text inside? I'm not sure if this even makes sense, but any help would be appreciated. Thank you! ...

css

Is there a method to retrieve the subdirectories and files currently present on a given URL?

Picture having a file on your system with the following URL: I am curious if there is any software, command, or script that can retrieve subfolders/files based on a given URL. For instance: Input parameter: http://my.page/folder_1/ Output: http://my.p ...

javascripthtmlbashwebnetworking

Tips for converting text from an HTML input field to a JSON file

After designing a form with four text fields and a submit button, my goal is to save the data into a JSON file upon submission. Additionally, I am looking for a way to display all of the JSON data on my webpage. ...

javascripthtmlcssjsonajax

What is the best way to ensure that the question text will wrap onto a new line if it becomes too lengthy

I am currently working on developing ASP.NET MVC applications. However, I am facing a design issue with the HTML, CSS, and Bootstrap elements on one of my pages. The problem arises when Question 8 exceeds the border and does not wrap to a new line as inte ...

htmlcssasp.net-mvcbootstrap-4html-helper

Is there a way to include individual Facebook comments for each image within a jQuery lightbox?

After completing my own version of a lightbox using HTML5, CSS, and jQuery, I encountered an issue with the comments feature. While each image in the gallery should have separate comments, Facebook's comment system only records comments for the entire ...

jqueryhtmlfacebooklightboxfacebook-comments

Is it possible to make nested HTML list items align to the left?

Is it possible to align nested HTML list items to the left? For example: Bat Cat Ratonetwothree Mat <ul> <li>Bat</li> <li>Cat</li> <li>Rat<ul><li>one</li><li>two< ...

javascriptjqueryhtmlcss

Checkbox label covering checkbox

I've been trying to enhance a login page with checkboxes by implementing code from react-bootstrap.github.io The issue I'm facing is that the checkboxes are overlapping their corresponding labels. Below is the snippet from my register.js file: ...

htmlcssreactjstwitter-bootstrap

choosing a specific element with jQuery to be used for future purposes

I'm having some trouble with the following code snippet: var star = $("._container > favorite"); var symbol = $(star.parentNode.parentNode).attr("symbol"); var exchange = $(star.parentNode.parentNode).attr("exchange"); After running ...

javascriptjqueryhtml

Decrease the amount of empty space when adjusting the window size

Struggling to make a section of my website responsive and encountering an issue that's proving difficult to solve. The current setup involves 3 rectangular inline-block divs per "row" with a margin-right of 100px in a wrapper, all dynamically added. ...

htmlcss

Find and Scroll Dropdown Menu with Bootstrap Framework

Access the jsfiddle for more information. Have a look at these questions: In my dropdown menu, I have included a search box and multiple sub-menus. However, the search box only filters the first dropdown menu and does not work with the sub-menus. How ca ...

javascriptjqueryhtmlcsstwitter-bootstrap

Leveraging PHP to dynamically insert image file names into a directory for populating the HTML img src attribute in a Bootstrap

I am trying to dynamically populate a Bootstrap carousel with images from a folder by using PHP to scan the image files. However, instead of displaying the images in the carousel, only the names of the images are being listed. Below is my code, and I have ...

phphtmltwitter-bootstraptwitter-bootstrap-3php-7

Template for developing projects using JavaScript, HTML5, and CSS3 in Visual Studio 2013

After recently downloading Visual Studio 2013 Express for Web, I am struggling to figure out how to deploy projects that only consist of JavaScript, HTML5, and CSS3. Despite searching online for JavaScript templates and even trying to download Visual Stu ...

javascripthtmlvisual-studiocssvisual-studio-2013