Adding an option field to selected products when using MODx

UPUP Member
in Help edited July 2011
I'm using Foxycart + MODx (Revo 2.1.2) and want to be able for my client to be able to add product colour as an option when this is appropriate. Not all products have a colour option and my question is how do I make this work without there being an empty options box when there is no colour option?

Hope that makes sense.

Many thanks in advance.

Matt
Comments
  • lancelance Member, Community Support Member
    Matt,

    Do you mean that you want your client to be able to specify colors in the MODx Manager? Or do you mean that there needs to be an option for customers to select a color when there are color options already available as specified in the Manager? Either of these are achievable, but in any case, these are more MODx support questions than FoxyCart. Thankfully, we're a friendly bunch and like to help out as much as possible, so if you can just clarify what, specifically, you need, I think I can help at least get you pointed in the right direction.

    Lance
  • UPUP Member
    hi Lance

    Sorry that my question wasn't clear. I want to be able to add the option for customers to select the colour of the product (for purchase) where that product comes in a variety of colours. I've previously used Foxycart to do this when it's hardcoded, through different values in the form script, but I'm confused as to how I incorporate this functionality when using it with MODx. I've tried the MODx community boards, but with no luck so far.

    I can achieve this when creating a Template Variable in MODx and putting this TV into the value field of the FC script, but when a product doesn't have a colour option, the drop down box, which normally contains the colour option, is still present but empty, because a colour won't have been specified in the TV by my client.

    I hope that's clear! Many thanks for your help. I headed here because I know Brett uses MODx very successfully with FC.

    Cheers
    Matt
  • lancelance Member, Community Support Member
    Matt,

    There are a two main options that come to mind right away.

    One, in your template, you could conditionally display the dropdown. If there are no colors to display, don't display the dropdown. You might need to write a snippet of your own to do the check and return the dropdown elements or nothing, since I don't think you can use conditionals directly in MODx templates. At least I know you couldn't in Evo, but my Revo experience is more limited so maybe that's changed.

    A second option would be to leave the template as it is and conditionally hide the dropdown using jQuery. If you can send me a link to your store and a product without any options, I can whip up the jQuery that you would use to accomplish this.

    Lance
  • lancelance Member, Community Support Member
    Matt (in response to whispers),

    This example assumes you have a select formed like this:
    <select name="colour" id="colour" style="display: none;">
    	<option value="red">Red</option>
    	<option value="blue">Blue</option>
    </select>
    
    In this case, the select box with the id "colour" has 2 children, red and blue, and is hidden by default on the page load. You can then use a JavaScript like this to show it:
    	<script type="text/javascript">
    		$(document).ready(function() {
    			if($('#colour').children().length != 0) {
    				$('#colour').show();
    			}
    		});
    	</script>
    
    If your select box looked like this:
    <select name="colour" id="colour" style="display: none;">
    </select>
    
    it would remain hidden.

    Does this help?

    Lance
  • UPUP Member
    Hi Lance

    Thanks very much for that. I've implemented it, using MODx, using a Template Variable in place of the hard coded option values for the colours. My code in MODx looks like this:

    <input type="hidden" name="name" value="*pbrand *pname" />
    <input type="hidden" name="price" value="*pprice" />
    <select name="colour" id="colour" style="display: none;">
    <option value="*colour1">*colour1</option>
    <option value="*colour2">*colour2</option>
    </select>
    <input type="submit" name="Add to Basket" value="Add to Basket" class="submit" />

    It is generating the correct code (to my eyes) when viewing the outputted source code, but the options box isn't appearing.

    The page I'm using to test this is http://www.urbanehoylake.co.uk/2/joseph-joseph-hands-on-salad-bowl.html

    Can you see anything in the code which looks incorrect, stopping the options box appearing?

    Thanks again for your help.

    Matt
  • lukeluke FoxyCart Team
    Try changing $ to jQuery. I pretty much always use jQuery because you never know if someone is using it in noConflict mode.
    Error: $ is not defined
    Source File: http://www.urbanehoylake.co.uk/assets/script.js
    Line: 1
    
    So it would be this instead:
    <script type="text/javascript">
    jQuery(document).ready(function() {
    if(jQuery('#colour').children().length != 0) {
    jQuery('#colour').show();
    }
    });
    </script>
    
  • UPUP Member
    Hmm, still not working. Wonder what I've done wrong?
  • fc_adamfc_adam FoxyCart Team
    @UP,

    You're actually including your javascript that relies on jQuery before you're including jQuery.

    Moving the three FoxyCart includes above this line should fix it for you:
    <script src="assets/script.js"></script>
    
  • UPUP Member
    Hi Adam

    Thanks for your help. That makes the colour option box appear when a value is entered for 'colour', but it also still appears when the field is blank. Any ideas?

    Many thanks
    Matt
  • fc_adamfc_adam FoxyCart Team
    Try this:

    <script type="text/javascript">
    jQuery(document).ready(function() {
    if(jQuery('#colour').children().length != 0 &&
    jQuery('#colour').children(":first").val() != "") {
    jQuery('#colour').show();
    }
    });
    </script>
  • UPUP Member
    Superb, thanks Adam, worked a treat.

    Matt
Sign In or Register to comment.