Blog

{% section 'sales-popup-notifications' %}

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
<style>
  div.toastify {
  	display: flex !important;
    justify-content: space-between;
    flex-direction: row-reverse;
    border-radius: 5px;
    padding-left: 15px;
    padding-right: 15px;
  }
  img.toastify-avatar {
    width: auto;
    height: 80px;
  }
  .toast-close {
    margin-bottom: auto;
    color: black;
  }
  @media only screen and (max-width: 800px) {
    div.toastify {
      max-width: calc(98% - 20px);
    }

  }
</style>
{%- capture varNameArray -%}
{%- for block in section.blocks -%}
	{%- assign product = block.settings.selectedProduct -%}
	{%- assign varName = product.handle | truncate: 8, "" | replace: '-', '_' -%}
	{{ '' | append: varName | append: ','}}
{%- endfor -%}
{%- endcapture -%}
{% for block in section.blocks %}
	{% assign product = block.settings.selectedProduct %}
<script>
  {% assign varName = product.handle | truncate: 8, "" | replace: '-', '_' %}
  let _{{ varName }} = Toastify({
    text: "<p>Someone bought <b>{{ product.title | truncate: 25 }}</b></p>",
    duration: 3000,
    destination: "",
    newWindow: true,
    avatar: "{{ product.featured_image | img_url: 'medium'}}",
    close: true,
    gravity: "bottom",
    position: "left",
    backgroundColor: "white",
    style: {width: "400px", color: "black"},
    stopOnFocus: true,
    escapeMarkup: false
  });
</script>
{% endfor %}
<script>
  var names = "{{ varNameArray | strip | strip_newlines }}";
  let arrayNames = names.split(",");
  arrayNames.pop();
</script>
<script>
  let timer = Math.random() * ({{ section.settings.maximumTime }} - {{ section.settings.minimumTime }}) - {{ section.settings.minimumTime }};
  function showProductSale() {
  	timer = Math.random() * ({{ section.settings.maximumTime }} - {{ section.settings.minimumTime }}) - {{ section.settings.minimumTime }};
    eval("_" + arrayNames[Math.floor(Math.random() * (arrayNames.length - 0) - 0)] + ".showToast()");
    setTimeout(showProductSale, timer);
  }
  setTimeout(showProductSale, timer);
</script>
{% schema %}
  {
    "name": "Sales Popup Notifications",
    "settings": [
		{
			"type": "number",
			"id": "maximumTime",
			"default": 10000,
			"label": "Max Time"
		},
		{
			"type": "number",
			"id": "minimumTime",
			"default": 0,
			"label": "Min Time"
		}
	],
	"blocks": [
		{
			"name": "Product",
			"type": "sales-product-popup",
			"settings": [
				{
					"type": "product",
					"id": "selectedProduct",
					"label": "Product"
				}
			]
		}
	]
  }
{% endschema %}