Adding Product Options With Pictures (and more)

  • Posts: 29
  • Thank you received: 0
4 years 2 weeks ago #245859

-- url of the page with the problem -- : drbensppc.com/index.php/en/hikashop-menu...uct/jimmyjane-form-2
-- HikaShop version -- : 2.6.3
-- Joomla version -- : 3.5.1 Stable
-- PHP version -- : 5.4.45
-- Browser(s) name and version -- : Firefox 43.0.3 on Fedora 23 MATE

Hi,

I have an option for all my products for a Gift Wrap.
I have three types of gift wraps (so I have a picture of each wrap).
So in total, I have 4 options:
* No gift wrap, with price 0.
* Three gift wraps for an additional price.

Questions:
=========
1. When "No Gift Wrap" is selected, it is added to the chopping cart, although it is actually an empty variant.
Can I avoid it through a Hikashop option rather than messing up with PHP?
If not - Can you show me where to modify so that if no gift wrap is selected it will not be added to the cart?

2. I would really like to present the gift wraps as radio buttons (just as I display colors), so users may select them with a picture icon rather than text.
For this, I thought of adding them as characteristics rather than options, but then, the price per wrap is fixed rather than added on top of the product price - not good.
Can I do this somehow?
(When I created the gift wrap characteristics, I selected "Characteristics selection method" as "Radio Buttons" but it doesn't help).

3. How can I add to the gift wrap option (rather than just an independent option), a text field for a greeting?

Thanks a lot.

Last edit: 4 years 2 weeks ago by bshomer.

Please Log in or Create an account to join the conversation.

  • Posts: 70141
  • Thank you received: 10500
  • MODERATOR
4 years 2 weeks ago #245866

Hi,

1. It will require a small modification of the option view and the removal of the "no" variant:
hikashop.com/forum/product-category-disp...t-option.html#138030

2. Options only have one display mode for now.
You can try changing the text genericlist to radiolist in the "option" view file, but I'm not sure the javascript code handling the refresh of the code will still work with radios. It might require further and more complex modifications.

The following user(s) said Thank You: bshomer

Please Log in or Create an account to join the conversation.

  • Posts: 29
  • Thank you received: 0
4 years 2 weeks ago #245970

Yeeepie..... ;)

1. Works like charm. Thanks.

2. Actually no need for anything complex. It works very simply with css.
Here is the code snippet for anyone wishing to achieve the same...
To obtain the right values (hikashop_product_option number and the values of the options) use Firebug.

select.inputbox{
	height: 2em;
}
select.inputbox option {
	background-repeat:no-repeat;
	background-position:bottom left;
	padding-left:60px;
	display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
select#hikashop_product_option_0 option[value="0"] {
	height:2em;
}
select#hikashop_product_option_0 option[value="7"] {
	background-image:url(/images/giftWrap_general_ico.jpg);
	height:64px;
}
select#hikashop_product_option_0 option[value="8"] {
	background-image:url(/images/giftWrap_Anniversary_ico.jpg);
	height:64px;
}
select#hikashop_product_option_0 option[value="9"] {
	background-image:url(/images/giftWrap_Birthday_ico.jpg);
	height:64px;
}

The display calls are for the vertical alignment of the text.

This displays the potions with images next to the selections and it works great.

Please Log in or Create an account to join the conversation.

  • Posts: 33
  • Thank you received: 1
  • Hikamarket Multivendor Hikashop Business
1 month 1 week ago #321382

Thank you for sharing this code!

I tired it but unfortunately it didn't work for me: I couldn't see the images!
Is it probably because recent updates in the Hikashop package?

Best,
Saad

Please Log in or Create an account to join the conversation.

  • Posts: 70141
  • Thank you received: 10500
  • MODERATOR
1 month 6 days ago #321417

Hi,

This CSS code is still ok.
However, please note that you need to adapt it to your needs.
hikashop_product_option_0 targets the first option on the product details pages. If you have several options, you'll have to adapt that.
Also you need to change the xxx in

[value="xxx"]
of the CSS to use the values that you have on your end (it's the id of the products / variants).
And finally, you need to change the background-image url to use the images you have on your end.

Please Log in or Create an account to join the conversation.

Time to create page: 0.067 seconds
Powered by Kunena Forum