shopifyvariants

Shopify Variants

Wondering if there is any way to assign variants to custom radio inputs? I'd like to set up tiered shipping with different rates for 2 Day, 3 Day and Standard shipping. I can do this with variants but the drop down won't work for me.I'd like to have date information and a datepicker in order to choose preferred shipping dates and have it all appear on a modal with the rest of the delivery options. Line item properties won't work because as far as I know they cannot affect price. So I wondered, if I created different variants for the different shipping rates, could I direct them to my own radio buttons? I've attached a screenshot of what I've got so far. The 3 radio buttons on the right are what I'd like to use rather than the built in Shopify drop down. Thanks in advance for your help.

enter image description here

Solution

  • I would suggest checking out this discussion on the Shopify wiki: Mixing dropdown and radio buttons on product page

    Caroline posted this answer:

    That's a difficult one, because you need to use option_selection.js to 'descramble' variants into options, and option_selection.js generates drop-downs, one for each option. Personally, I would keep that.

    You can add radio buttons for your colors — while keeping your Color drop-down on the page and hide it with CSS — then update the selected option in the drop-down when a radio button is checked.

    In the following example, anchor elements are used instead of radio buttons, but the method is the same: http://wiki.shopify.com/Color_swatches_made_easy_in_Shopify

    The lastest version of that color swatch tutorial is available on the Shopify Wiki here, and I've used it before with success (although only with the default code, not radio buttons).

    If that doesn't work for you, I think you're looking at a much more complicated thing to implement... See these other discussions about using radio buttons for variants I found on the Shopify wiki:

    EDIT:

    In comments below:

    ...still unsure if I can assign the buttons to custom variant titles using javascript elements.

    I had a play around with this idea, and I'm not sure if this is exactly what you are after, but it might give you some ideas on where to start.

    My variants are:

    I added a span below the variants in product.liquid where I display the estimated delivery date, and some jQuery that updates the estimated delivery date text in the span depending on the shipping date selected in the datepicker.

    Shopify variants as radio buttons

    I used the code from Caroline Schnapp in this discussion to create radio buttons for the variants (the same as you did). I modified the code slightly by adding a Line Item Property in a hidden input field just before the end of the form:

    <input type="hidden" id="delivery-date" name="properties[DeliveryDate]" />

    And added 2 lines to the end of this jQuery function to update the hidden line item property when a radio button is clicked:

    jQuery("input[type='radio']").click(function() {
  var variant_price = jQuery(this).attr("data-price");
  jQuery(".price-field span").html(variant_price);
  var variant_compare_at_price = jQuery(this).attr("data-compare-at-price") || '';
  jQuery(".price-field del").html(variant_compare_at_price);

  var delivery_date = jQuery("ul li input[type='radio']:checked").siblings("span").html();
  jQuery("#delivery-date").val(delivery_date);
});

    Then when the user clicks the Purchase button to add the item to their cart, it shows the variant and line item property something like this:

    Shopify cart with line item properties

    Not sure if that's exactly what you're after, but hopefully some of it is helpful!

    EDIT 2:

    Here's the gist: https://gist.github.com/stephsharp/6865599