Author Topic: Add to cart button do not support tags inside element  (Read 1106 times)

Studio 42

  • Contributing Developer
  • Sr. Member
  • *
  • Posts: 4227
  • Joomla & Virtuemart developper
    • Studio 42 - Virtuemart & Joomla extentions
  • VirtueMart Version: 2.6 & 3
Add to cart button do not support tags inside element
« on: November 18, 2016, 23:44:32 pm »
VM 3.0.18. chrome browser Version 54.0.2840.99 m
 file > vmprices.js
Adding a <span> inside a button stop the button to work.
eg:
Code: [Select]
echo '<button type="submit" name="addtocart" class="addtocart-button" title="'.vmText::_( 'COM_VIRTUEMART_CART_ADD_TO' ).'"><span class="visible-phone"><i class="icon-shopping-cart"></i> <i class="icon-plus"></i></span><span class="hidden-phone">'.vmText::_( 'COM_VIRTUEMART_CART_ADD_TO' ).'</span></button>';
WHen you click in the <span> element this fails:
Code: [Select]
    if (jQuery(targ).prop("type") == "submit" ||  jQuery(targ).prop("type") == "image" ) {
        Virtuemart.sendtocart(e.data.cart);
        return false;
    }
I think if you know a little how it work "targ" is no anymore the submit button but the span inside. so prop type, do not exist !

I fixed this on removing this code.
Code: [Select]
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
But because this is a jquery element, i dont know why this code is here ?
And why checking for this type ? We have already a selector for addtocart button.
If i check on the debuger this lines :

Code: [Select]
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;

e.target is the right target(the button) so the Safari bug fix break if you need to add an icon or a span inside the button in chrome browser and perhaps other borwsers.

Studio 42

  • Contributing Developer
  • Sr. Member
  • *
  • Posts: 4227
  • Joomla & Virtuemart developper
    • Studio 42 - Virtuemart & Joomla extentions
  • VirtueMart Version: 2.6 & 3
Re: Add to cart button do not support tags inside element
« Reply #1 on: November 18, 2016, 23:48:15 pm »
Note:
using
Code: [Select]
Virtuemart.addtocart = function (e){
    e.preventDefault();


        Virtuemart.sendtocart(e.data.cart);
        return false;
};

works for me

Milbo

  • Virtuemart Projectleader
  • Administrator
  • Super Hero
  • *
  • Posts: 10018
  • VM3.2 Cached and Optimized
    • VM3 Extensions
  • VirtueMart Version: VirtueMart 3 on joomla 3
Re: Add to cart button do not support tags inside element
« Reply #2 on: November 22, 2016, 09:26:49 am »
I think it is actually enough to remove

if (jQuery(targ).prop("type") == "submit" ||  jQuery(targ).prop("type") == "image" ) {

or to add span here. I just wonder myself why it makes sense to check the dom type. It secures nothing, it just blocks anything which is not an image or submit. Please try this way

Code: [Select]
Virtuemart.addtocart = function (e){

    var targ;
    if (!e) e = window.event;
    e.preventDefault();

    if(!Virtuemart.quantityErrorAlert(e)){
        return false;
    }

    if(e.hasOwnProperty('stopSendtocart') && e.stopSendtocart == true){
        return false;
    }
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;


        Virtuemart.sendtocart(e.data.cart);
        return false;

};
I should fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/

Milbo

  • Virtuemart Projectleader
  • Administrator
  • Super Hero
  • *
  • Posts: 10018
  • VM3.2 Cached and Optimized
    • VM3 Extensions
  • VirtueMart Version: VirtueMart 3 on joomla 3
I should fix your bug, please support the VirtueMart project and become a member
______________________________________
Extensions approved by the core team: http://extensions.virtuemart.net/