–I figured this out, I have a new question on post 6–
First off, I really have no clue what I am doing, but I am pretty good at looking at code and messing with things and making it work.
I am trying to create a detail page that lets you configure your product. I only need to do this for a couple product so I don’t mind if I have to hard code some things. I want a tab box for the different steps, and I would love to have an accordion for each category in each step. I got an accordion working a while ago but the product didn’t update when an option was clicked - this is my last priority anyway. I also want to just show the images for the options, not the select box/radio box (I made it not automatically change the option icon size). Ideally I would use the configurator, but I really want to have the image update when different options are clicked, so I am sticking with a normal product with a bunch of options. Now, I have everything working, except the option icons only depress on the first tab. The other tabs work and update the image and all the information, but the icons’ id doesn’t change to “whatever it is”-selected. This is a problem since I am only using images, so it is important to know what is clicked.
Here are a couple images of what I am doing (they contain nude dolls so it might be nsfw). If anyone thinks they can help and wants to see my site I’ll give you the pass code. Oh, and the doll image in this is not mine, I am just using it as place holders. A lot of the style needs editing but you can get a general idea.
Picture 1
Picture 2
I made the tabs show different options basically by just calling up all the option codes in each tab and hiding the options that don’t belong to the category using the css. My problem, again, is the option icons only show they are selected for this first instance of the option codes (the first tab). If you click something in another tab, it updates the main image and price, and when you go back to the first tab the new icons are selected (I put them in everything to check). The other tabs only show the first options for everything.
Anyway, any help would be much appreciated! Or, if anyone can think of a better way to accomplish this that would be great too.
Okay, I understand my question is probably hard to understand let alone figure out a solution to.
I am pretty sure the image shows selected when $var.variant_id = $selected_variant. But, I guess this doesn’t update in the other tabs. Is there a way to force this to update? All my tabs have the exact same code.
Edit:
I am trying to figure out how to only do the code in the tab if that tab is selected. I have no experience with smarty or javascript so I am not sure how to do this. I see $active_tab but I am not sure how that code works.
Perhaps something like the Product Configurator might get you going in the right direction:
[url]CS-Cart Documentation — CS-Cart 4.15.x documentation
Unfortunately, the product configurator does not support “options” or “quantity” of the products selected for configuration (major shortfall of the product configurator). It assumes that configurable products are composed on 1ea of a product that has no options…
It was committed to be fixed in 2.0.13 but has yet to make it into the standard product. I spent a huge amount of time trying to figure out the JS for supporting quantities and options of updated products but I was not able to figure out a solution. But JS and Jquery is not my strength.
So the product configurator will not solve her problem with the current implementation. However, it “should” be able to do so.
Yes, I really wish the Configurator worked the way I want it to. I messed with it a while ago but I was having much less luck for something like this than just normal options. It would probably help if I knew javascript but right now I am just trying to learn from all the code itself.
The second and third tab seem to be working like mirrors… when I click an option the first tab changes, which changes the image/price, and stops there, not allowing the option images to get that -selected in their class for the other tabs. It is probably bad code to call the options 3 times… but I am not sure how else to handle it. Is there a way to tell if a tab is open, so I can only do all the code in the tab if that tab is open? I don’t know if that would mess up the options themselves though. Currently, if you add it to your cart it shows the right options.
I have a lot more work to do but if it helps you can view it here:
[url]404 Not Found
I’ll keep this open for a bit:
[url]404 Not Found
And pleases note that none of these images are mine. I care a lot about copyright, but since I don’t have pictures of my own yet I am using them as place holders.
I started working on my site again. I actually solved my previous problem (though in a pretty round about and messy way - I am sure I did something “bad” but it works). Now I am trying to figure out if this is possible.
I want to break up each option into part of an accordion. I am only using this layout for 1 item so I don’t care if I have to hard code some things.
Here is my design. Right now I have everything like my design except the options actually in the accordion.
The way this is working now, I have the tabs hard coded into a template. In the product template I am calling up a different option template 5 separate time (1 for the colors at the bottom and 4 for each tab). The options are called in each tab content. The option templates are all the same as the normal option template except for an if statement in there to only bring up the options I want for each tab. I control this with position (1 for the colors, 100-200 for the first tab, 200-300 for the second, etc.).
I tried using a simple javascript accordion I found online but it broke the functionality of the options.
I would also like to be able to scroll nicely though the variant images (this doesn’t need to be in the accordion, just for my “heads” which is its own tab). Here is my design (with the black bars on the sides controlling the scrolling - I didn’t put the arrows in yet). A horizontal scroll bar would be just as good, but I would like a custom one like this as opposed to just setting the div to scroll.
Any help would be very much appreciated!!! Thanks!
Anyone? If anyone has a custom accordion or custom scroll bar/buttons that work that would be great to get me started. Everything I tried that I found online either didn’t work or broke the functionality of my options when used there. I don’t know enough about JavaScript to try and make my own. Thanks!
Hey, I’m actually about to start the process of something similar your trying to do. However for me itll be custom jewelry instead. Like choose the pieces step by step. and have end product. I would be more than happy to work with you. PM if you like to work together and figure this out I think we can figure it out. I’m also a beginner -intermediate coder.