salman2301(1) - Copy.png
salman2301 logo transparent.png
  • Home

  • Services

  • Testimonials

  • Get a Quote

  • Forum

  • My theme

  • Examples

    • Suggest an app
    • Custom Menu bar
    • Multiple Filter
    • Print page
    • Horizontal scrolling
    • Wix Code Style
    • Wix video player code
    • Multiple Uploads
  • More

    Use tab to navigate through the menu items.

    {Salman}

    • Grey Facebook Icon
    • Grey Instagram Icon
    salman2301 logo transparent.png
    • Home

    • Services

    • Testimonials

    • Get a Quote

    • Forum

    • My theme

    • Examples

      • Suggest an app
      • Custom Menu bar
      • Multiple Filter
      • Print page
      • Horizontal scrolling
      • Wix Code Style
      • Wix video player code
      • Multiple Uploads
    • More

      Use tab to navigate through the menu items.
      To see this working, head to your live site.
      • Categories
      • All Posts
      • My Posts
      Salman2301
      Jun 12, 2020

      Wix Alert Web App

      in Wix code Advance

      This post is to demo, how to add a alert at the side of the screen?


      Prerequisite

      1. This only work in domain connected premium wix site


      To test the app live goto https://www.test.salman2301.com/alert-web-component Check the video to quick demo


      For now the alert can only be trigger via code


      You can trigger the alert, in just few lines.


      Three steps

      1) Add a Custom element

      2) Add the Alert wix block to the site

      3) Use code to trigger the app


      1) Add a Custom element


      1. Click on the add icon

      2. Select Embed

      3. Drag and Drop Custom element





      Setup custom element

      1. Click on the Custom element

      2. Select Choose Source

      3. Select Server URL for "Add your script file with:"

      4. Copy and paste the below URL for Server URL https://cdn.jsdelivr.net/gh/salman2301/wix-alert-component@master/dist/index.js

      5. Copy and paste "alerts-component" Tag Name

      6. Change the Custom element id to "CustomAlert"


       

      2) Add the Alert wix block to the site


      1) Click on this link -> http://wix.to/QcCAC7M

      2) It will redirect to select the website to add, Select the site (see image below)

      3) Select "I Understand" checkbox and click on "Confirm and Install"(see image below)

      4) Now you can add from (+) > my Widget > "alertBySalman2301"(see image below)

      5) Once the element is added to the page, Change the element ID to "widgetAlert" from propert panel





       


      3) Use code to trigger the app :

      We Use code to trigger the alert


      to show a default alert

      // show alert
      $w('#widgetAlert').alert("Your Alert message here!" )

      If you want to customise it, you can pass the Object {} instead of string

      //alert option, see below for more options
      let alertOption = {
        title: "Form failed",
        message: "Form didn't submit please try again"
      }
      // pass the alert options
      $w('#widgetAlert').alert(alertOption);

      Available Alert options, not only message is required property

        {
          //  required field, message display in the alert
         message : "Alert message!.",
      
         // set color of  alert based on success
         type:"success", // "error" | "info" | "warn"|"success"
      
         // if it's false, user need to click on the close button
         autoClose : true,
      
         // you can also use any word e.g: "ACTION"| "Yes"|"No"
         closeLabel : "X",
      
         // wait for 8 sec before autoClose, if it's set to true
         wait : 8,
      
         // custom css style
         style:"",
      
         // callback function trigger on autoClose or button click
         onClose: function(){},
      
         // callback function trigger on button click
         onAction: function(){},
      
      
         // brandColor set any hex, rgb color, refeclt the border
         brandColor:"#4BB543",
      
         // redirect url on title or message clicked!
         knowMoreUrl: "https://salman2301.com"
        }

      You can goto the below URL to test the app https://www.test.salman2301.com/alert-web-component



      // You can either pass string or object
      // you can call any of the following property to show the alert
      // if you want to customise it, set more time or call for action
      // instead of string pass the object with the configuration
      $w('#widgetAlert').alert("your alert message"); 
      $w('#widgetAlert').alertError("your alert message");
      $w('#widgetAlert').alertWarn("your alert message");
      $w('#widgetAlert').alertInfo("your alert message");
      $w('#widgetAlert').alertSuccess("your alert message");


      Note :

      to Use Alert up you need to select and set the custom element Just add this line to set the custom element on page ready

      $w('#widgetAlert').setCustomElement($w('#CustomAlert'));

       

      Demo Code snippet :

      Let's show an warning on button click

      // wait for page ready
      $w.onReady(function () {
          // connect the web component with wix block
          $w('#widgetAlert').setCustomElement($w('#CustomAlert'));
      
          // add a button
          $w('#button2').onClick(()=>{
              // show alert warning with message on click
              $w('#widgetAlert').alertWarn("Warning button is clicked!!" )
          });
      });

      So, with just two line of code you can show the alert message



      Protip :

      If you are gonna use the alert app in multiple pages

      Right click the web component and select show on all page switch

      Also do the same for the Custom element.


      Now on the site page, connect the wix block and site element

      // wait for page ready
      $w.onReady(function () { 
          // connect the web component with wix block
          $w('#widgetAlert').setCustomElement($w('#CustomAlert'));
      });

      and on any page code call call the method ( alert | alertError | alertWarn | alertSuccess ) with the string or object

      $w('#widgetAlert').alert("Alert message here!!" )


       

      Links

      • Test Link - https://www.test.salman2301.com/alert-web-component

      • Github Link - https://github.com/Salman2301/wix-alert-component

      • Custom element - https://www.wix.com/corvid/reference/$w.CustomElement.html


      That's it, if you encounter any issue feel free to message me

      via salmanhammed77@gmail.com


      Happy Coding!


      3 comments
      0
      3 Comments
      paul
      Feb 20

      Any help ?

      Like

      paul
      Feb 14

      Hi. I'm unable to get the onAction event to run the function.



       

      $w("#cealerts").setAttribute("newalert",JSON.stringify({title: "Confirm Buy Order", message: "Click button to confirm.", type: "info", closeLabel: "Confirm", onAction: handleAction}))


      function handleAction(e) { /* e => {reason : reason, message: message,id: id} */ console.log(e.message) }

       

      The alert opens, but when I click the 'Confirm' button, the handleAction function does not trigger.


      Please help haha.


      Apart from that I like it !


      Like

      I
      Ian Kamau
      Mar 04, 2021

      Wow this is great

      Like
      3 comments

      © Copyright 2021 Salman2301. All rights reserved.