Results 1 to 10 of 14

Hybrid View

  1. #1
    Join Date
    Jul 2008
    Posts
    23
    Plugin Contributions
    0

    Default 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

  2. #2
    Join Date
    Apr 2009
    Posts
    2,134
    Plugin Contributions
    3

    Default Re: Attribute Slider

    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.

  3. #3
    Join Date
    Jul 2008
    Posts
    23
    Plugin Contributions
    0

    Default Re: Attribute Slider

    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!

  4. #4
    Join Date
    Apr 2009
    Posts
    2,134
    Plugin Contributions
    3

    Default Re: Attribute Slider

    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:

    Code:
    $("#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.
    Last edited by niccol; 14 Dec 2011 at 12:31 AM.

  5. #5
    Join Date
    Jul 2008
    Posts
    23
    Plugin Contributions
    0

    Default Re: Attribute Slider

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

  6. #6
    Join Date
    Jul 2008
    Posts
    23
    Plugin Contributions
    0

    Default Re: Attribute Slider

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

    Code:
    $(".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

 

 

Similar Threads

  1. How do I move the define_main_page text from under the slider to above the slider?
    By huntleybill in forum Customization from the Admin
    Replies: 1
    Last Post: 2 Oct 2013, 03:08 AM
  2. Nivo slider?
    By munchie in forum All Other Contributions/Addons
    Replies: 5
    Last Post: 5 Oct 2012, 04:51 AM
  3. Vertical slider
    By mdivk in forum Templates, Stylesheets, Page Layout
    Replies: 11
    Last Post: 21 Feb 2012, 02:22 AM
  4. TM Slider
    By Banshee032 in forum Addon Templates
    Replies: 7
    Last Post: 17 Feb 2012, 04:17 PM
  5. Slider Images
    By Nuttshell in forum General Questions
    Replies: 2
    Last Post: 4 Jul 2011, 12:53 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR