Build an Alert Component Using Custom Elements

Show and tell
,
1

Hello everyone,
I am a huge fan of the custom element, I build multiple custom element in the past using js, svelte ( JS Framework ), Stencil JS (Custom element compiler).

All my examples code are in Github .

Anyway, I am here to show an Alert component that build using Svelte.

Svelte JS is a compiler to build SPA(Single Page Application) other words Website. We can also use it to build custom element

The code is Open source with MIT license

[GitHub - Salman2301/wix-alert-component: Show a small alert box at any corner of screen.](license
GitHub - Salman2301/wix-alert-component: Show a small alert box at any corner of screen.

You)

Example
Site: https://www.test.salman2301.com/alert-web-component

How to Install
Easy way is to use Custom elment in Wix site is by using with Wix Block. It provide some level of IDE support.

  1. Click on this link . Follow the step to Install the Wix Block on any Wix site.

  2. Drag and Drop the Widget or Wix Block.

  3. Change the element Id to widgetAlert via the properties panel.

  4. Drag and Drop a Custom element under Add Element/Embed/Custom Element and change the Id to CustomAlert via properties panel.

  5. Click on the Custom element and select Change source.

  6. Select Server URL paste this URL https://cdn.jsdelivr.net/gh/salman2301/wix-alert-component@master/dist/index.js

  7. Set the Tag Name to alerts-component

  8. Add the following code in the page sections.

// page code.js
$w.onReady(function () {
  // This step is needed to let the Wix Block select the Custom element
	$w('#widgetAlert').setCustomElement($w('#CustomAlert'));
  
  // This will show Warning Alert 
	$w('#widgetAlert').alert("This is a warning message." )
});

Note: for the alert method, You can pass a string or object

  // using string
	$w('#widgetAlert').alert("This is a alert message." )

Is same as this

  // using object
	$w('#widgetAlert').alert({ message: "This is a alert message." })

You can also pass more options like title, type of alert, wait time, style using the object method
Checkout below attribute new alert

  $w('#widgetAlert').alert({ title: "Hello", message: "Welcome to the site." })

If you are not comfortable with Wix Block. You can just directly copy and paste the code in the public JS file
To learn more check the Github Doc

11 Likes
2

We have an example now
Click on the edit now to checkout codes and start playing with it using editor

3

Very nice I’ve used it on my site. Thanks. I’ve bookmarked your page.

4

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 !

5

Hi, I’m having an error with the link to install Wix Block, it opens the Wix Market with the message: “You’re Invited to Try. To check out this app, add it to your Wix site.” And a button “Add to site”. When I click it and select my website, it throws me an error: “Seems That Something Is Wrong . The redirect url doesn’t match the one defined in your app configuration. Double check that it starts with https.” Any guesses?

6

The installer links for development apps can sometimes expire or become inactive. Also my friend Salman had moved on to other pastures since then.

If you’re looking for a simple Custom Elements alert component, I have one under development I can share with you

7

Thanks, Chris! If you could show me the Custom Alert it would be awesome!