Can i apply a background on the notifications?

[codergab]

I am willing to collaborate on this project If the feature is not available.

We can have varieties of colors depending on the notification type.

Thanks.

[codebender828]

Hey @codergab !

Of course you can. Breadstick was made to be non-opinionated about how you style your Notifications. The default styles you see when you first install Breadstick are only just functional defaults for you to get get started with it.

Breadstick's real strength is that it gives you a flexible stacking, positioning and dismissal API for your notifications.

I've written a small gist for you here to explain how you can use Breadstick to render your own custom styled notification. I use this in a project I'm working on.

Example
https://gist.github.com/codebender828/72dbee93dc2d419c60a18c114adecca7

Result

[codebender828]

Will close this for now.

[rylanharper]

Hi @codebender828

Hopefully I can reopen this issue as the docs are lacking in this area..

I looked at that gist, but I am still having trouble with creating my own custom notifications. I have a specific use case where where I am using Breadstick to manage notifications (toasts) within a Shopify Vue app. I have three toast types: success, error, and warning with a different colored background for each one (green, red, yellow). My toasts work well on my local environment, but on live the breadstick component is not registered at all and has no styles.

My code looks something like this for most components:

methods: 

async addToCart() {
  const variant = this.currentVariant
  const payload = {
    path: this.product.path,
    qty: this.quantity,
    productTitle: this.product.title,
    variantTitle: variant.title,
    variantId: variant.id,
    price: variant.price.amount,
    image: variant.image
  }

  await this.$store.dispatch('addToCart', payload)

  // this.$breadstick.notify('This is a test!)

  this.$breadstick.notify(
    <a href="/cart" class="toast--success">
      <div>Product Added to Cart</div>
    </a>,
    {
      position: 'bottom',
      duration: 2500
    }
  )
},

Here is a video of the project on my local environment vs dev:

Screen.Recording.2021-05-06.at.3.31.09.PM.mov

However a normal breadstick notify does work:

this.$breadstick.notify('This is a test!)

So I am likely doing this wrong in terms of registering notification with custom styles.. Any help would be much appreciated!:)