Hiding dropdown selectors on certain products

Hello all!

I'm using Foxy with Webflow and I'm a little stuck. I've added some product options (Colour and Size) which are working fine if both are needed.

Some items in the CMS have just size as an option, and a lot have no need for an option. How do I hide these selectors?
This is the code I'm currently using on the product page. (The Values are Webflow dynamic fields)
Example product page (in development) here: https://www.just-jonah.co.uk/item/crab-romper

<form action="https://just-jonah.foxycart.com/cart" method="post" accept-charset="utf-8">
<input type="hidden" name="name" value="{{wf {&quot;path&quot;:&quot;name&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}" />
<input type="hidden" name="price" value="{{wf {&quot;path&quot;:&quot;price-in-gbp&quot;,&quot;type&quot;:&quot;Number&quot;\} }}" />

<div>
<select name="Size" class="w-select size" required>
</select>
</div>

<div>
<select name="Color" class="w-select color" required>
</select>
</div>

<input class="big-addtocart" type="submit" value="Add To Cart" />
</form>


I'm also a little lost when it comes to the live updating of the price.

Many thanks!
Comments
  • fc_joshfc_josh FoxyCart Team
    Hi @MagicMark.
    Thank you for getting in touch. I have responded to your questions below:

    Hiding Empty Select Field
    To conditionally hide variants that don't have any options, please follow these instructions:

    1) In your html embed, add a containing div to each dropdown, with corresponding class name, like this: https://d.pr/i/YixZLy

    2) In your Item Collection Template (in the closing BODY code section, in between the script tags) add the following:

    <script>
    if ($('.size-container select').has('option').length == 0) {
    $('.size-container').remove();
    }

    if ($('.color-container select').has('option').length == 0) {
    $('.color-container').remove();
    }
    </script>
    Ensure the class names match what you put in your html embed.

    Real-time Pricing
    It looks like there were some steps missed from the instructions. Please refer to these steps: https://wiki.foxycart.com/v/2.0/snippets/updating_total_price_with_option_modifers Let us know if you run into any issues.

    Thanks,
    Josh



  • Thank you Josh,

    The hiding of the selectors is now working perfectly.
    The live update of the pricing is working too. I'd set the price in the code to £0.00 and then after a nights sleep realised it should be the dynamic price.

    I just have two minor issues now, one is that my decimal is set at 1.00 and the price shows correctly everywhere else except in the live price. If the price is £21.20, the live price shows £21.2 and drops the last zero.
    example: https://www.just-jonah.co.uk/item/bug-romper

    The other minor thing, is although I've styled the submit button on the Add to Cart, on iOS it displays the button as rounded with a gradient and is quite ugly. Is this a webflow issue or something you could help with too?

    Highly appreciate your help!
  • fc_joshfc_josh FoxyCart Team
    Hi Mark.
    Glad those issues are resolved now. For the price (with dropped zero) this seems to be caused by Webflow. Here is a screenshot of the price displayed in Webflow's Designer before Foxy does anything with it: https://d.pr/i/tSRFp1 I recommend changing the number format to "Any format" like this: https://d.pr/i/MdGQQY Lets see if that fixes things. If not, you will want to reach out to Webflow's support.

    For the add to cart button mobile styling, browsers can sometimes have their own overrides or defaults. You may need to add some mobile-specific styling in Webflow's Designer.

    Thanks,
    Josh

  • I'll reach out on the Webflow forums then.

    Thanks again!
Sign In or Register to comment.