Latest News: (loading..)
kymation

[Addon] Options with Images Module for Modular Product Page (Responsive)

32 posts in this topic

This addon display a pulldown for the product options with optional images included. It is intended for color or pattern samples, but can be used with anything you can make an image of. The added images make it easier for the customer to visualize and select the option that they want.

 

Screenshot:  http://www.kymation.com/pub/options_pulldown_screenshot.jpg

 

This module requires the Modular Products Info Page Addon. Install that first.

 

I've included a modified version of the admin Products Attributes page to add the images. I intend to add a better admin page later, perhaps the AJAX Attribute Manager. If you have a favorite, reply here and tell me why it's better. I may be persuaded to change my mind.

 

Get it here on the Addons page.

 

Regards

Jim

Edited by kymation

Share this post


Link to post
Share on other sites

This would be a very nice stand alone addon. For people that have done already customizations to their products page installing your modular product page is not an option.

Just my 2 cents.

Share this post


Link to post
Share on other sites

@@Tsimi  It wouldn't be all that hard to do. I don't think there are that many people who would be interested, but I will provide the code if asked.

 

Regards

Jim

Share this post


Link to post
Share on other sites

@@kymation

 

Thanks for your very quick reply.

I tried to install only the necessary files like the two ht_ modules and only transfer the necessary files to get the option images to work but I failed.

Then again I might have not tried hard enough. I try to makes your option images work with the option types addon because I like how yours lists the images next to the name inside the dropdown.

 

I will give it a few more tries and see where I get from there and if all should fail I would like to ask for your guidance if that is OK with you.

Share this post


Link to post
Share on other sites
  1. Get the product_info.php class file from the Modular Products Page addon and drop it in includes/classes.
  2. Add this code near the top of your /product_info.php file, just after the include for application_top.php.
            require_once DIR_WS_CLASSES . 'product_info.php' ;
            $product_info = new product_info( (int) $_GET['products_id'] );
    
  3. Add this code to your /product_info.php, wherever you want the options pulldown(s) to show:
        <?php echo $oscTemplate->getContent('product_info'); ?>
    

There are other ways to do this, so feel free to experiment.

 

Regards

Jim

Tsimi likes this

Share this post


Link to post
Share on other sites

@@kymation

 

Hi Jim

 

I was just working on this addon again and was trying to get it to work. Not done yet, working on some error messages.... BUT

I was wondering if the following is something that happens because I try to install this without the modular pages addon or is it because you forgot to add it.

When adding a Product Attribute with image it tells me that it can't find the field option_images and sort_order inside the products_attributes table.

Are those fields suppose to be added automatically somewhere during the "correct" install process or is this something that needs to be added into the modules install feature ( public function install() { )

Maybe something like this

     tep_db_query("
     ALTER TABLE `products_attributes` ADD (
	  `option_image` varchar(128) NULL DEFAULT NULL,
	  `sort_order` int(5) NULL
     );
     ");

similar would be needed for the public function remove() { function so that it would delete those fields when uninstalling the module.

 

 

Then something else, this is more a preference thing.

Different path for better image handling?

Add new folder named option_images inside the images folder.

 

Then in admin/products_attributes.php (Line 66 and 128)

change this

 $option_image->set_destination( DIR_FS_CATALOG_IMAGES );

to this maybe

 $option_image->set_destination( DIR_FS_CATALOG_IMAGES . 'option_images/' );

inside cm_pi_options_images.php around line 127

change this

$field .= ' data-content="<img alt=\'' . $option_name . '\' src=\'' . DIR_WS_IMAGES . $values[$i]['image'] . '\' /> ' . $option_name . '"';

to this

$field .= ' data-content="<img alt=\'' . $option_name . '\' src=\'' . DIR_WS_IMAGES . 'option_images/' . $values[$i]['image'] . '\' /> ' . $option_name . '"';

Now something I need to quickly ask you

I get this error message

 

Fatal error: Cannot use object of type product_info as array in D:\xampp\htdocs\demo11\product_info.php on line 188

 

That is the line where the products attributes database queries start in the normal, unchanged product_info file. In my case the beginning of the Option Types part in the product page.

I guess he cannot output that because hes trying to read that query stuff from there?

Anyways, I will keep fiddling around maybe I get lucky.

 

Thanks and regards

Lambros

Share this post


Link to post
Share on other sites

You are right about the missing database field code. I added that in testing but then forgot to upload that version of the file to my master. Oops. I'll fix that bug and update the Addons page.

 

I thought about putting the images in a separate directory, but that means that new directory must be created and assigned the correct permissions. I decided to avoid that can of worms and just use the default images directory. Feel free to change the code if you want to use a subdirectory.

 

The last bug you are seeing is because I used the variable $product_info for my product info class, and your old version of product_info.php uses that variable for something else. You'll need to change one or the other to some other variable name. This is probably a good reason not to try mixing the two page styles.

 

Regards

Jim

Tsimi likes this

Share this post


Link to post
Share on other sites

I've uploaded a new version that automatically adds the image field to the database. Please replace the module with the one from this package and uninstall and reinstall the module. Also, please read the installation section of the manual if you want to use the Sort Order feature.

 

Regards

Jim

Tsimi likes this

Share this post


Link to post
Share on other sites

I am attempting to develop a paint shop using OSCBS.

 

Most grateful for the excellent "options with images" mod for colour selection.

 

Never satisfied - I wonder what would be the best method for getting customer text input on the product info page would be.

 

Ideally three or four short text fields used for make, model, reg of vehicle, that would carry through to shopping cart

 

I've previously used "option types" on an OSC 2.3 which done the job.

 

In fact started to install the BS version when I realised product_info.php was not quite the same once the "modular product page" is installed.

 

It's possible something already exists that does this, if so - a point in the right direction would be appreciated.

Edited by fatjack

Share this post


Link to post
Share on other sites

I was just going to suggest using Option Types, but it will need to be modified to use the product options module. I don't have the time to look at that right now, but it shooudn't be too hard to do.

 

Regards

Jim

Share this post


Link to post
Share on other sites

Hi @@fatjack

 

I recommend Option Types v2 for that purpose. It works really great, and also have some other features very interesting.

Works perfectly in my 2.3.4 BS Gold.

 

Regards

Share this post


Link to post
Share on other sites
Thanks TIT04

 

I agree, option Types v2 (BS) is a useful add-on but I don't have the chops to make it work with modular product page.

 

Thanks Jim,

 

I reckon you have the chops - hope you have time soon.

 

All the best

 

Jack

Share this post


Link to post
Share on other sites

No, it requires the products class and the module system from the Modular Products Page, and that's all responsive code.

 

Regards

Jim

Share this post


Link to post
Share on other sites

@@kymation

 

Jim, would it be good to have a "module" extension for Option Types BS?

So that people that use your Modular Product Page can simply install a module in the admin area and then be able to use the Option Types BS features. That way no one needs to amend your options module.

Of course the other manual, core code changes for the Option Types BS need to be applied though.

Share this post


Link to post
Share on other sites

It would certainly be good to have a module for Option Types, but I don't have the time to write one. If you want to do it, go for it.

 

Regards

Jim

Share this post


Link to post
Share on other sites

Hi

 

Thanks for your great contributions. I am trying to start moving my old heavily modified store from a very old version of OSC and this module (along with several of your others)  is perfect.

 

I note from the instructions it says it is best to have the image 40 px or less. I really need a slightly larger height image. I have tried uploading one and it does work however the larger drop down box does cover part of the next one or two lines down. Is there a way to force it to clear that or is this the reason for the 40px limit?

 

Many thanks.

 

Olly

Share this post


Link to post
Share on other sites

That was part of the reason. You may need to add some custom CSS to make that work. Maybe set a bottom margin on your pulldown or use clear.

 

Regards

Jim

Share this post


Link to post
Share on other sites

Thanks Jim

 

Will give it a go or if I cannot solve it - will stick with the suggested sizes!

Share this post


Link to post
Share on other sites

Posted (edited)

@@kymation

 

Man 1 year has past since I last looked at this. Time passing too quick...

 

I finally did it!  (w00t)  *rockheadbang* 

When I still had a shop and was a more active member here I always wanted to have small thumbnails inside the dropdown.

I failed multiple times to implement your code into a regular osC BS GOLD and EDGE shop without using the Modular Product Page.

Well I have no idea what hit me but I did it. I just gave it another try and after XX hours I finally got all bits and pieces together.

 

So here it is...

 

Options Images BS v1.0 by Tsimi.zip

Edited by Tsimi
raiwa likes this

Share this post


Link to post
Share on other sites

I'm glad to hear you got this working. While I think that the product class will make my version run a bit faster, there's no reason you should have to use it if you don't want to.

 

Please put this up as an Addon for others to enjoy..

 

Regards

Jim

Share this post


Link to post
Share on other sites
On 23/4/2017 at 3:05 AM, Tsimi said:

Done!

Fixed some smaller typos and uploaded it to the addons area.

Thanks again for your great work Jim.

http://addons.oscommerce.com/info/9565

Hello @tsimi. I gave it a try and works great.

I found a mod to use the "tep_image" function within the "tep_draw_pull_down_menu_options".

Like this it is compatible with kiss it image thumbnailer and a 40px thumb is used instead of the full image size.

        if( tep_not_null( $values[$i]['image'] ) ) {
          $field .= ' data-content=\'' . tep_image('images/options/' . $values[$i]['image'], $option_name, '40', '40', null, 'false') . $option_name . '\'';
        }

 

Another issue:

Didn't find a way to remove the option image once it is added, other than in the database.

Couldn't there be a button "Remove Image" be added in admin/product_attributes.php to do this?

 

rgds

Rainer

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now