Adding Product Options With Pictures (and more)

bshomer
Topic Author
Offline

10 years 3 months ago - 10 years 3 months ago #245859 by bshomer

Adding Product Options With Pictures (and more) was created by bshomer

-- 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: 10 years 3 months ago by bshomer.

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

nicolas
Away

10 years 3 months ago #245866 by nicolas

Replied by nicolas on topic Adding Product Options With Pictures (and more)

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.

bshomer
Topic Author
Offline

10 years 3 months ago #245970 by bshomer

Replied by bshomer on topic Adding Product Options With Pictures (and more)

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.

Code:

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.

The following user(s) said Thank You: Kittisak112

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

soule
Offline

6 years 4 months ago #321382 by soule

Replied by soule on topic Adding Product Options With Pictures (and more)

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.

nicolas
Away

6 years 4 months ago #321417 by nicolas

Replied by nicolas on topic Adding Product Options With Pictures (and more)

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

Code:

[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.081 seconds