shopify add engraving to product and change price if used

1
votes

as in the title. I want to add engraving to the product. and add 10$ for example if the user requested engraving. I used the line items property to get the engraving details but I don't know how to add the 10$ to the price!

also tried the variant + JQyery to show hide the input but I don't know the value to check for in jQuery! and it is always shown.

      // Toggle monogram text box.
  jQuery('.single-option-selector:eq({{ product.options.size | minus: 1}})').change(function() {
    if (jQuery(this).val() === 'With Engraving') {
      jQuery('#monogram-wrapper').removeClass('hidden').fadeTo(200,1);
      jQuery('#monogram-wrapper input').removeAttr('disabled').removeClass('disabled');
    }
    else {
      jQuery('#monogram-wrapper').fadeTo(200,0).addClass('hidden');
      jQuery('#monogram-wrapper input').addClass('disabled').attr('disabled', 'disabled'); 
    }
  });
1
jqueryshopify

1 Answers

1
votes

I found the solution... I added a variant called engraving with two options (with engraving, without engraving). and used the following jquery code to do the work. 

jQuery(function(){
$('#productSelect-option-0').change(function(){

if($("#productSelect-option-0 option:selected" ).text() == 'with engraving'){ 
    $('#monogram-wrapper').show();
  }
  else{
    $('#monogram-wrapper').hide();
  }
});

});