CODEWITHSUNDEEP
jquerypositionalert
susan
susan

Reputation: 382

Reposition jQuery alert

Wondering how to reposition a jQuery alert in form below. Currently it pops up at the very top of the browser, just under the address bar. It would be nice to have it closer to the center of the screen if at all possible. I am very inexperienced with jQuery so your help would be very much appreciated.

Thank you in advance! Susan

{% if template contains 'product' and product.available %}
<script>
jQuery('form[action^="/cart/add"]').submit(function() {
  var product = {{ product | json }},
    cannotAddThisQuantity = false,
    message = 'So Sorry! You must have gotten the last one!  We do not have any more %t in stock.',
    selectedVariantId = jQuery(this).find('[name="id"]').val(),
    quantityToAdd = parseInt(jQuery(this).find('[name="quantity"]').val(), 10) || 1,
    quantityInCart = 0,
    title = '';
    inventoryLimited = false,
    inventory = 0;      
 for (var i=0; i<product.variants.length; i++) {
   if (product.variants[i].id == selectedVariantId) {
     var variant = product.variants[i];;
     title = product.title;
     if (product.variants.length > 1) title += ' - ' + variant.title; 
     if (variant.inventory_management && variant.inventory_policy == 'deny') {
     inventoryLimited = true;
     inventory = product.variants[i].inventory_quantity;
   }
  }     
 }
 if (inventoryLimited) {
   {% if cart.item_count > 0 %}
   var cart = {{ cart | json }};
   for (var i=0; i<cart.items.length; i++) {
     if (cart.items[i].id == selectedVariantId) {
       quantityInCart = cart.items[i].quantity;
    }     
  }
  {% endif %}
  if ((inventory - quantityInCart) < quantityToAdd) {
    message = message.replace('%q', quantityToAdd).replace('%t', title);
    if (quantityToAdd > 1) message.replace('item', 'items');
    cannotAddThisQuantity = true;
   }
  }
  if (cannotAddThisQuantity) {
    alert(message);
    return false;
  }
  else {
    return true;
}
});    
</script>

Upvotes: 2

Views: 1614

Answers (1)

Pat Dobson
Pat Dobson

Reputation: 3299

Instead of using alert(), put the 'message' into a custom div and then you can position that wherever you want

jQuery

if (cannotAddThisQuantity) {
  $('.myAlertDiv').html(message).fadeIn();
  return false;
}

CSS

.myAlertDiv{
  position: absolute;
  top: 100px;
  left: 100px;
  display: none;
  *etc...*
}

Obviously change the CSS to whatever you want . . .

Upvotes: 4

Related Questions