What is the best way to implement a fadeout or timeout for success and warning alerts in OpenCart 2.2?

Is there a way to set a timeout for alert boxes in Opencart 2.2 so that they disappear after a few seconds? I've tried the code below, but it didn't work out. Alternatively, is it possible to make the popup disappear when clicking anywhere on the page? Any help would be appreciated.

+function ($) {
  'use strict';

  // ALERT CLASS DEFINITION
  // ======================

  var dismiss = '[data-dismiss="alert"]'
  var Alert   = function (el) {
    $(el).on('click', dismiss, this.close)
  }

  Alert.VERSION = '3.3.5'

  Alert.TRANSITION_DURATION = 150

  Alert.prototype.close = function (e) {
    var $this    = $(this)
    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
    }

    var $parent = $(selector)

    if (e) e.preventDefault()

    if (!$parent.length) {
      $parent = $this.closest('.alert')
    }

    $parent.trigger(e = $.Event('close.bs.alert'))

    if (e.isDefaultPrevented()) return

    $parent.removeClass('in')

    function removeElement() {
      // detach from parent, fire event then clean up data
      $parent.detach().trigger('closed.bs.alert').remove()
    }

    $.support.transition && $parent.hasClass('fade') ?
      $parent
        .one('bsTransitionEnd', removeElement)
        .emulateTransitionEnd(Alert.TRANSITION_DURATION) :
      removeElement()
  }


  // ALERT PLUGIN DEFINITION
  // =======================

  function Plugin(option) {
    return this.each(function () {
      var $this = $(this)
      var data  = $this.data('bs.alert')

      if (!data) $this.data('bs.alert', (data = new Alert(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  var old = $.fn.alert

  $.fn.alert             = Plugin
  $.fn.alert.Constructor = Alert


  // ALERT NO CONFLICT
  // =================

  $.fn.alert.noConflict = function () {
    $.fn.alert = old
    return this
  }


  // ALERT DATA-API
  // ==============

  $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)

}(jQuery);

Thank you in advance.

Answer №1

alert is the designated class in opencart for displaying messages such as error or success message. To implement this, navigate to

catalog/view/javascript/common.js
.

Once there, simply append the following code snippet at the end:

setTimeout(function(){ $('.alert').fadeOut() }, 5000);

Please note that you have the flexibility to adjust the time parameter to fit your specific needs.

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

The AJAX request is neither failing nor accomplishing its intended purpose

After making an AJAX call, the error function is being triggered but I am unable to pinpoint the issue. My debugging efforts indicate that the GET method is functioning properly. Could there be something crucial that I am overlooking here? I feel comfort ...

Learn how to incorporate the dynamic array index value into an Angular HTML page

Exploring Angular and facing a challenge with adding dynamic array index values in an HTML page. Despite trying different solutions, the answer remains elusive, as no errors are being thrown. In TypeScript, I've initialized an array named `months` wh ...

What are the steps to achieve consistent response behavior in POSTMAN that matches that of a web browser?

Below is an example of my code: const express = require('express'); const app = express(); app.get('/', function (req, res) { res.setHeader('Content-Type', 'text/html'); res.write("First \n"); set ...

"Utilizing jQuery, Ajax, and the powerful REDIRECT_QUERY_STRING feature

Recently, I decided to revamp a small website consisting of three or four pages using a minimalist MVC framework (which might be excessive, but I wanted to experiment). The site is configured with an .htaccess file: RewriteEngine on RewriteCond %{REQUE ...

The price filter slider is experiencing issues with the onresize function not functioning properly

I am facing an issue with a price filter I developed for my project. Despite having coded it, the filter is not functioning properly. <div class="price_range_caption"> <span class="currency_from">Rs.</span><span id="price_range_f ...

Problem with responsive design on iPhone

I'm currently working on developing a responsive chatbot using CSS Bootstrap. However, I've encountered an issue where the header and footer are not fixed when I open the app on an iPhone. The keyboard header is also moving up the screen, which s ...

There seems to be an issue with the p:fileUpload component not functioning properly when rendered by

I am puzzled by the fact that the component p:fileUpload does not trigger the fileUploadListener when the component is displayed by the p:ajax. It works perfectly fine when I place it outside the panelGrids or remove them altogether. What's not worki ...

The functionality of the rendered attribute in JSF Ajax is not functioning properly

I am perplexed as to why partial rendering for PrimeFaces is not functioning properly. Although POST requests are being sent, the rerendering does not occur. <?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3 ...

The backbone module is experiencing formatting issues

I'm new to learning backbone.js. I've created the example below, but unfortunately, it's not functioning properly. Can someone please help me understand why? The goal is to simply display the name within my div element. (function($) { ...

When using Ajax in Jquery and expecting data of type JSON, the response always seems

Looking to create a basic jQuery Ajax script that checks a user's discount code when the "Check Discount Code" button is clicked? Check out this prototype: <script> jQuery(function($) { $("#btn-check-discount").click(function() { c ...

Utilizing Angular 2's *ngFor to conditionally wrap elements can be compared to organizing a layout with three columns in a Bootstrap row, then starting a

Currently I am facing a challenge with using *ngFor and it has me puzzled. My goal is to incorporate UIkit, but the same concept would apply to Bootstrap as well. <div *ngFor="let device of devices" > <div class="uk-child-width-expand@s uk-te ...

Limit the usage of Lightning Web Component instances to only one per user

Is there a way to restrict users in Salesforce to using only one instance of a Lightning Web Component? I am new to Salesforce Lightning Web Components and looking for a solution to limit the number of instances a user can create through either permission ...

"Enhance your HTML table by selecting and copying cell values with a simple click and CTRL +

I stumbled upon a fantastic script for highlighting HTML table rows and it's working perfectly: I decided to modify the onclick event to onmouseover and included additional code to select a cell by clicking on it. Now I can select, check which one is ...

What is the best way to update the type = date values with my "SearchDate" parameter in a Python template?

I have the variable search_date in my view and I need to display this data in a template. How can I achieve this? In the object, the date is set as "2020-09-01". I tried to write the following code but it did not work as expected: {% extends 'bas ...

What is the best method for choosing an element that has been dynamically loaded through ajax

Wanting to streamline the editing process, I am looking for a way to load certain elements of a webpage dynamically, such as a sidebar and navbar, so that changes only need to be made in one place. Additionally, once these elements are loaded, I would like ...

What is the best way to calculate the number of items in your mongoose reference with a specific field?

I am trying to calculate the number of active Workers that belong to a specific company. Here is an example scenario: const workerSchema = new Schema( { userId: { type: Types.ObjectId, ref: 'User', ...

Even after hitting ctrl+z, Node.js continues to listen on the port

I've been exploring some features of Node on Ubuntu, and I encountered an issue where even after pressing ctrl+z in my console to stop the server (to update my code changes), Node would still be listening on port 3000. This meant that every time I nee ...

Is there a way to execute a script during every npm install process?

Is it possible to set up pre-push hooks for Git with each npm install action? Are there any alternative solutions that do not involve installing tools like Gulp, and instead rely solely on npm? ...

Error: PHP script does not respond to Ajax request

I've been struggling with an issue for the past couple of days that's really starting to frustrate me. I just can't seem to get my AJAX call functioning properly. I have a basic form where I'm trying to send parameters to a PHP script, ...

Data within object not recognized by TableCell Material UI element

I am currently facing an issue where the content of an object is not being displayed within the Material UI component TableCell. Interestingly, I have used the same approach with the Title component and it shows the content without any problems. function ...