Attribute Slider

Hi everyone,

I'm designing a site for a client who makes stickers/decals and would like customers to choose their sticker size using a slider.

I have set up the various sizes as attributes but can only choose from dropdown, radio button, check box etc as the option type so was wondering if anyone had had a go at designing a slider before and if so what is the best way to go about it?

Any help anyone can offer would be hugely appreciated,

Cheers
Josh

Never done it but in principle you've started in the right place by setting up the attributes.

Then you are going to have to write a javascript script ( probably using jQuery or some similar framework ) that hides the existing radio buttons and replaces it with a nice slider. Then the script needs to write the information gathered from the slider to the radio buttons so that the information is passed through the Zen Cart system.

If that makes no sense then perhaps you might need to get a bit of help with that bit of the project.

Cheers niccol, I should be fine setting up a slider using jquery it's just passing the data onto zen cart that I'm not sure about. I'll have a mess around this week and see what I can come up with.

I'm also going to have to set up something similar for colour attributes, the client wants to be able to click a swatch instead of having radio buttons or a dropdown.

If I come up with something half decent I'll post it back here as I'm sure someone might be able to find a use for it!

If you are OK with jQuery then it should be no big deal.

Basically just hide the dropdown. I usually just adapt tpl_modules_attributes.php a bit so it gives each block of attributes its own ID based on the attribute name. That just makes it easier to target the correct lot of attributes.

Then either hide to one that you are concerned with using jQuery. If you do it in the jQuery then at least if javascript is not enabled the original dropdown will still show.

Then as part of the jQuery that is triggered when the slider moves ( or actually stops moving ) you just need to set the right option value to be selected. How exactly you do that will depend a bit on if you use radio buttons or dropdowns or whatever in the original attributes. But with dropdowns you can simply set the value of the <select> element with something like:

$("#mySelect").val('2');

So, again having done your groundwork in tpl_modules_attributes.php allows you to target that <select> more easily.

The other thing that is worth mentioning is that the replacement and other stuff will happen in a document.ready section probably. There are two things to note here:

1. You may get a flash of the original dropdown during page load which is an argument for doing the 'hiding' in the css.

2. It is worth considering carefully how you load the scripts. Basically all the scripts should only be loaded if the attribute actually exists on the page. So you just want to have an if statement that checks that the attribute ID ( which you have created in tpl_modules_attributes.php) exists on the page. If it does then you can load the rest of the script.

Thanks Nick that is a huge help. I'm going to have a play this week and hopefully shouldn't have too many problems!

I'm having a little trouble getting this slider to work, I'm using a similar jquery code to this example:

$(".question").each(function() {
    var radios = $(this).find(":radio").hide();
    $("<div></div>").slider({
      min: parseInt(radios.first().val(), 10),
      max: parseInt(radios.last().val(), 10),
      slide: function(event, ui) {
        radios.filter("[value=" + ui.value + "]").click();
      }
    }).appendTo(this);
});

However I'm not sure how to edit tpl_modules_attributes.php as you suggested to be able to target the attribute. As far as I can see its the within the div class "back" that creates the actual radio buttons/dropdown but I've been messing with it all evening and haven't gotten anywhere!

Any tips on where I'm going wrong?

Thanks
Josh

Sorry for the double post, but after working on it last night I've now got the slider working perfectly, however because I haven't been able to set up the attribute ID's it is now creating a slider for my other radio button attributes!

Any chance of a nudge in the right direction for setting up the tpl_modules_attributes.php correctly?

you are looking for this:

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

it is inside a loop which creates the attribute layout for each attribute.

change to something like:

<?php 
$new_class = str_replace(' ','',$options_name[$i]);
?>
<div  id = "attr-<?php echo $new_class;?>" class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
<br class="clearBoth" />
</div>

you'll see that I have taken the spaces out of the attribute name with str_replace. You may want to 'sanitise the new class name more than that.

Sorry, I am writing this off the top of my head and so there may be typos.

That worked an absolute treat! The slider is all set up and working perfectly! Huge huge thanks for your help!

Now on to the colour selectors!

Good to hear.

Please post as complete a description of your solution as you can. Then other people can benefit from your experience too :smile:

I've now succesfully created a slider for the width of a decal (and then outputted a height for the customer to see) I've also now built a colour/texture/vinyl type menu which I'm quite happy with!

Just need to tidy up the code and get it to play nice with the dynamic price updater mod and then it should be ready to go online.

As soon as I've done that I'll update this thread with the code!

Thanks Nick, I definitely needed your guidance to set me off in the right direction! :D

Sounds good, I'm looking forward to seeing the completed code.

snave:

That worked an absolute treat! The slider is all set up and working perfectly! Huge huge thanks for your help!

Now on to the colour selectors!

Are you able to post step by step how you did the slider? That's exactly what I was hoping to do instead of a drop down menu.

Thank you!
Justin

Yes, please post this how you did it I would love to have some sliders on my page.