Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

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


kymation

Recommended Posts

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

See my profile for a list of my addons and ways to get support.

Link to comment
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.

Link to comment
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

See my profile for a list of my addons and ways to get support.

Link to comment
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.

Link to comment
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

See my profile for a list of my addons and ways to get support.

Link to comment
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

Link to comment
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

See my profile for a list of my addons and ways to get support.

Link to comment
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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

  • 1 month later...

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
Link to comment
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

See my profile for a list of my addons and ways to get support.

Link to comment
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

Link to comment
Share on other sites

  • 1 month later...
  • 3 weeks later...

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

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
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.

Link to comment
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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

  • 7 months later...

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

Link to comment
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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

  • 1 month later...

@@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
Link to comment
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

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

  • 1 month later...
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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...