Discount Ninja
Search
K

Announcement bar

Attributes

animation-on-cycle (string)
  • none: [default] no animation
  • fade: causes the message that is replaced to fade out (cf. fadeOut in https://animate.style/) and the new message to be faded in (cf. fadeIn in https://animate.style/).
  • slide: causes the message that is replaced to slide out (cf. slideOutRight / slideOutLeft in https://animate.style/) and the new message to slide in (cf. slideInLeft / slideInRight in https://animate.style/). The script applies the right or left logic depending on whether the bar cycles forward (next message) or backward (previous message).

Methods

render: renders the announcement bar based on the messages received
  • Parameters:
    • messages (object[]):
      • message (string) [required]: the message to be displayed in text or HTML
      • token (string) [required]: the token of the associated Discount Ninja offer
      • icon ("none" | "shipping" | "discount" | "gift"): the icon to be displayed, this property is optional, "none" is assumed if the property is missing Note: icon and image are mutually exclusive
      • image (string): the url for the image to be displayed, if the property is missing the message does not have an image Note: icon and image are mutually exclusive
  • Example:
[
{
"message": "Sample message one",
"token": "ABCD"
},
{
"message": "Sample message <b>two</b>",
"token": "EFGH",
"icon": "gift"
},
{
"message": "<p>Sample message three</p>",
"token": "IJKL",
"image": "https://domain.com/image.png"
}
]
start
  • This method starts the process of cycling. If the attribute cycle is set to true then this method is automatically called when the component is rendered.
stop
  • This method stops the process of cycling.
previous
  • This method stops the process of cycling and instructs the bar to show the previous message.
next
  • This method stops the process of cycling and instructs the bar to show the next message.
showMessage(token: string)
  • This method navigates to the message that has the provided token.

Events

la:dn:drawer-cart-announcement-bar:render
  • Executes the render method.
la:dn:drawer-cart-announcement-bar:start
  • Executes the startmethod.
la:dn:drawer-cart-announcement-bar:stop
  • Executes the stopmethod.
la:dn:drawer-cart-announcement-bar:previous
  • Executes the previous method.
la:dn:drawer-cart-announcement-bar:next
  • Executes the next method.
Last modified 8mo ago