Create two different styles for the Add to cart Button -Category&Productdetails

[dorex]

Hi everyone,

Is there a way to create two different styles for the "Add to cart Button"?

I already used "addtocart-button" class for the "Add to cart button" that appears in the category-view page and I need another class for the Add to cart button in the productdetails page.

Now I created "addtocart-button2" class for the "Add to cart button" that appears in the productdetails page. 

01.
In this file:   "myTemplate"/html/com_virtuemart/productdetails/default_addtocart.php   I replaced the "addtocart-button" class with my new class ("addtocart-button2") like this:

Code Select Expand


<span class="addtocart-button2">
<?php echo shopFunctionsF::getAddToCartButton ($this->product->orderable); ?>

</span>
Unfortunately, the output was not changing "addtocart-button" class into "addtocart-button2" class:

Code Select Expand

<span class="addtocart-button2">
<input class="addtocart-button" type="submit" title="" value="" name="addtocart">
</span>

This means that the <input class="addtocart-button" ........... >  is created by  <?php echo shopFunctionsF::getAddToCartButton ($this->product->orderable); ?>

02.
I edited this file: public_html/components/com_virtuemart/helpers/shopfunctionsf.php    by inserting the following code at the very end:

Code Select Expand

class shopFunctionsF2 {
static public function getAddToCartButton2($orderable){

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

return $html;
}
}
than I edited again this file:   "myTemplate"/html/com_virtuemart/productdetails/default_addtocart.php    like this:

Code Select Expand

<span class="addtocart-button2">
<?php echo shopFunctionsF2::getAddToCartButton2 ($this->product->orderable); ?>

</span>
The result is a disaster, with a broken template.

03.
I edited this file: public_html/components/com_virtuemart/helpers/shopfunctionsf.php    by inserting the following code at the very end:

Code Select Expand

class shopFunctionsF2 {
static public function getAddToCartButton($orderable){

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

return $html;
}
}
than I edited again this file:   "myTemplate"/html/com_virtuemart/productdetails/default_addtocart.php    like this:

Code Select Expand

<span class="addtocart-button2">
<?php echo shopFunctionsF2::getAddToCartButton ($this->product->orderable); ?>

</span>
The result of the third try presented here was as close as I can get to what I want to achieve, since it is the first time when the class was changing. Here is the result:
<span class="addtocart-button2">
<input class="addtocart-button2" type="submit" title="" value="" name="addtocart">
</span>

The problem is now that this new styled "Add to cart button" does not work. Instead of adding products to cart and pop-up the Continue/Checkout question, it takes me to the cart page, without adding any products in cart.

Can anyone tell me what I did wrong? ... or show me a working solution of having two different styled AddToCart Buttons?

Thank you in advance.

[K&K media production]

use css with this:

span.addtocart-button > input.addtocart-button {
your styles for button 1
}
span.addtocart-button2 > input.addtocart-button {
your styles for button 2
}

[dorex]

use css with this:

span.addtocart-button > input.addtocart-button {
your styles for button 1
}
span.addtocart-button2 > input.addtocart-button {
your styles for button 2
}

That worked like a charm. Thank you.