The Standalone Announcement component displays an HTML formatted message defined by the Producer in Vinoshipper Producer Admin UI. Producers can include a Markdown blob of text at Products-> Announcement. Upon saving, the component will render that announcement in HTML.

HTML Element

Insert the following HTML to include the Announcement component:

<div class="vs-announcement"></div>

Behavior

When the producer defines an announcement, Injector will add a child <div class="vs-announcement-stage"> and render the content. This content will be sanitized and rendered in HTML, allowing your site's style to apply to the announcement.

If the producer does not have an announcement, Injector will not insert the content and not include the HTML <div class="vs-announcement-stage">.

See Styling for more information on options for styling this component.

Use with Product Catalog

If you are using the Product Catalog along with the Standalone Announcement, it is highly recommended you turn off including Announcement in Product Catalogs. Otherwise you may see the announcement more than once.

Global Setting (Recommended)

The easiest way is to set productCatalogAnnouncement: false in the Injector's init() call as outlined below:

window.document.addEventListener('vinoshipper:loaded', () => {
  window.Vinoshipper.init(000, {
    productCatalogAnnouncement: false,
  })
})

This will turn off automatically including the Announcement component in all Product Catalogs.

Per Catalog

You can also add the attribute data-vs-announcement="false" to the HTML. This will overwrite the global setting for the particular instance of the Product Catalog.

<div class="vs-product-catalog" data-vs-announcement="false"></div>