Change add to cart from input to button

[gringo211985]

Hi there,

I want to use bootstrap font-awesome icons and there is no :before class for input items. So rather than using an image and making my site slow I want to change the add to cart class to "button"

Let me show you example,

When "inspect element" with chrome I see the code below for the "add to cart" button. (see attachment)

<input type="submit" name="addtocart" class="addtocart-button" value="Add to Cart" title="Add to Cart">

I want to change this so when I "inspect element" with chrome I see.

<button type="submit" name="addtocart" class="addtocart-button" value="Add to Cart" title="Add to Cart">Add to Cart</button>

The problem I'm having is finding the corresponding php file so I can create my override. Please can anyone help me with this?

VM3.09 is version I'm using

Thanks,
Richard

[Studio 42]

Hi,
Currently, you don't have a real overide.
code is in shopfunctionf
   

Code Select Expand

static public function getAddToCartButton ($orderable) {

if($orderable) {
$html = '<input type="submit" name="addtocart" class="addtocart-button" value="'.vmText::_( 'COM_VIRTUEMART_CART_ADD_TO' ).'" title="'.vmText::_( 'COM_VIRTUEMART_CART_ADD_TO' ).'" />';
} else {
$html = '<span name="addtocart" class="addtocart-button-disabled" title="'.vmText::_( 'COM_VIRTUEMART_ADDTOCART_CHOOSE_VARIANT' ).'" >'.vmText::_( 'COM_VIRTUEMART_ADDTOCART_CHOOSE_VARIANT' ).'</span>';
}
return $html;
}

i think in your case you have to remove the call to getAddToCartButton in sublayout and use directly the code from function :
change in YOURSITE\components\com_virtuemart\sublayouts\addtocartbar.php:

Code Select Expand


if(!VmConfig::get('use_as_catalog', 0)){
if(!$product->addToCartButton and $product->addToCartButton!==''){
$addtoCartButton = shopFunctionsF::getAddToCartButton ($product->orderable);
} else {
$addtoCartButton = $product->addToCartButton;
}

}
to

Code Select Expand


if(!VmConfig::get('use_as_catalog', 0)){
if(!$product->addToCartButton and $product->addToCartButton!==''){
if($product->orderable) {
$addtoCartButton = '<button type="submit" name="addtocart" class="addtocart-button" title="'.vmText::_( 'COM_VIRTUEMART_CART_ADD_TO' ).'" />'.vmText::_( 'COM_VIRTUEMART_CART_ADD_TO' ).'</button>';
} else {
$addtoCartButton = '<span name="addtocart" class="addtocart-button-disabled" title="'.vmText::_( 'COM_VIRTUEMART_ADDTOCART_CHOOSE_VARIANT' ).'" >'.vmText::_( 'COM_VIRTUEMART_ADDTOCART_CHOOSE_VARIANT' ).'</span>';
}
} else {
$addtoCartButton = $product->addToCartButton;
}

}


This is very better, when you need to add a font icon
Note: Check the code, i write it from scratch !

Patrick

[gringo211985]

Hi there,

Thank you so much!!! It has worked perfectly with a little tweak to the code you sent (see attachment for results using font-awesome rather than image icon)

Thanks again,
Richard

[gringo211985]

Hi Studio42,

There seems to be a problem when using product variants and I switch between them (my instance is colours) so when I select a colour option the "add to cart" button breaks (see attachments)

While inspecting element on chrome I noticed that my "i class" is broken (see 2nd attachment) It's like it's broken the iclass out of the button element. Below is how the php is in my override for "addtocartbar.php"

'<button type="submit" name="addtocart" class="btn-cart" /><i class="fa fa-shopping-cart"></i> &nbsp;'.vmText::_( 'COM_VIRTUEMART_CART_ADD_TO' ).'</button>';

But when using variants the code seems to remove the iclass like

'<button type="submit" name="addtocart" class="btn-cart" /> &nbsp;'.vmText::_( 'COM_VIRTUEMART_CART_ADD_TO' ).'</button>';<i class="fa fa-shopping-cart"></i>

Which breaks the layout 

Please could you help me fix this?

Thanks,
Richard

[Studio 42]

Check your ajax response and the VM javascript. I don't have really time today, but i know that VM dynupdate.js javascript break many sites (i had to remove it in some sites)
CHange perhaps the addtocart in vmprice.js search:

Code Select Expand

        addtocart = cart.find('button[name="addtocart"], input[name="addtocart"], a[name="addtocart"]');

[gringo211985]

Hi Studio42,

Disabling ajax in the VM config fixes the error, however reloading the page isn't great so I was wondering if you know of a way I could fix this? I appreciate you're very busy and thank you for all your help.

Thanks,
Richard