custom wishlist button

-- url of the page with the problem -- : mywebsite.com/mypage
-- HikaShop version -- : x.x.x
-- Joomla version -- : x.x
-- PHP version -- : x.x.x
-- Browser(s) name and version -- : XXXXX x.x.x
-- Error-message(debug-mod must be tuned on) -- : Error_message

Goodmorning! Sorry for the banal question: how can I customize the wishlist button? I need to change the class of that button but where I can find this code?

<div id="hikashop_add_wishlist">
<a class="hikashop_cart_button" onclick="var field=document.getElementById('hikashop_product_quantity_field_1');if(hikashopCheckChangeForm('item','hikashop_product_form')){ return hikashopModifyQuantity('33',field,1,'hikashop_product_form','wishlist',0); } else { return false; }"

Hi,

You can find this button in the view "product / quantity" via the HikaShop menu Display > Views.

Goodmorning! Thanks for reply! I've seen in "product/quantity" page but there's nothing that talk about the "class" of that button. Can you explane me in whitch mode I have to change that button please? Thanks in advance.

Hello,

i have the same question, thank you for response

Hi,

Sorry I forgot a part of the explanation.
You have to add the desired place in the following code instead of "MYCLASS"

echo $this->cart->displayButton(JText::_('ADD_TO_WISHLIST'),$btnType,$this->params,$url,$wishlistAjax,'',$max,$min,' MYCLASS',false);

thank you Xavier,

but sorry, i don't understand ...

if i want a simple text sliceable instead off a button for "Add to wishilist", what i must to do ?

thank you very much

Thank you but I don't understand too...
Why you talk about "desired place" if all I want to do is to change the class?
Maybe I don't undersand...How can I change the class of the button?
thank you again!

Guys, Xavier told you everything you got to do to add your own classes to the button - which is what you've been asking for.

In the backend, go to > Display > Views, choose HikaShop, your template, frontend, then product, and scroll down to open the view "quantity" under "product". (More on that in the documentation.)

Then find the lines containing ADD_TO_WISHLIST, and/or ADD_TO_CART, depending on which button your after, or both. Follow Xavier's example to add your class name(s) to the code, and don't forget the space in front of it.
The software will save a new copy of the file, even if you screw up, you can delete it and start all over (see the trash can after saving? Ha!)

With your classes added, the button should turn into whatever your template is suggesting, or you use your own CSS to make it huge, pink and with flowers around, or just two words without anything: "cart, dammit!"

Have fun!

(a friendly user, just like you)

yes the same things with a different explanation! now it's all clear! thank you both!

sorry again...I've followed all the istructions and I've created a new button class named "buttona" but nothing change. the strange thing is that in the website code I see this on the whislist button

<a class="hikashop_cart_button .buttona" onclick="var field=document.getElementById

Remove the period . in the HTML, but make sure it's present in the CSS.

thank you very much for the help...

still the same...

<div id="hikashop_add_wishlist">
<a class="hikashop_cart_button buttona" onclick="var

If your template CSS has a class "buttona", then you should see a change. Eventually add " !important" in between the value of the property and the ;
Like for example

.buttona {
     color: #ffffff !important;
}

I understand what you have said and I don't want waste your time. I appreciate your help.

Maybe the problem is somewhere else because i've created in media\com_hikashop\css\frontend_default the class ".buttona"

Here it is:

.buttona {
    text-decoration:none;
	color: #FFFFFF !important;
	cursor: pointer;
	display: inline-block;
	line-height: 24px;
	margin: 5px;
	padding: 3px 8px;
	text-align: center;
	box-shadow:none !important;
	text-shadow:none !important;
	border:1px solid;
	border-color: #000000 #000000 #000000 #000000;
	border-radius:3px;
	background-color: #eee;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFB619), to(#619DD8));
	background: -webkit-linear-gradient(top, #FFB619, #619DD8);
	background: -moz-linear-gradient(top, #FFB619, #619DD8);
	background: -o-linear-gradient(top, #FFB619, #619DD8);
	background: linear-gradient(top, #FFB619, #619DD8);
	width: 146px;	
}

the problem is

<a class="hikashop_cart_button buttona"

First, you shouldn't use and edit the frontend_default.css. You should choose to use frontend_custom.css, and you can comfortably do so in the backend UI. Any changes you are making now will be overridden and void at the next software update.
And if you had ever created and selected a custom CSS file, that is then most likely the reason why you don't see changes happening you're making in the default file.

Another reason could be that you added your .buttona CSS BEFORE the original buttons CSS. Whatever is loaded last supersedes everything before. The !important prevents that, though, for the SAME class, that's why I mentioned it, but not for another. It's one of the reasons why HikaShop and others apply often more than one class to an element, it's "more compatible" and you have control without messing with code too much.

So, there are almost always multiple ways of doing things. You could have edited the original button's CSS without applying a new class. And, of course, alternatively you could/should have gotten rid of the original class in the HTML. Either way, but then again, they don't teach that in every school.

No worries, this way we learn.

Good luck from here onwards.

Thank you at all !!!!

it's ok for me