Price Testing

[#1]

Our company is trying to do price testing with 4 variations (including the original) using Wordpress and a plugin that interacts with Stripe. There is only one form that redirects to a receipt upon submission. Changing the html works for a quick visual change of the price- however, when the first option is selected a second time, the change does not stay. We greatly appreciate your help! The experiment ID is: 2086030825

Could you please help me to change both the data-option and the data-amount, so that the form can add the total? 

Here are the prices we would like to use:

1) Buy Now at the Special Price of 29.99 plus FREE S/H

<select name="package" id="package">

<option value="A" data-amount="2999" data-options="#packageA">1 Planner- $29.99</option>

<option value="B" data-amount="5899" data-options="#packageB">2 Planners- $58.99</option>

<option value="c" data-amount="8797" data-options="#packageC">3 Planners- $87.97</option>

2) Buy Now at the Special Price of 29.99 plus $4.99 S/H

<select name="package" id="package">

<option value="A" data-amount="3498" data-options="#packageA">1 Planner- $34.98</option>

<option value="B" data-amount="6996" data-options="#packageB">2 Planners- $69.96</option>

<option value="c" data-amount="10494" data-options="#packageC">3 Planners- $104.94</option>

3) Buy Now at the Special Price of 34.99 plus FREE S/H

<select name="package" id="package">

<option value="A" data-amount="3499" data-options="#packageA">1 Planner- $34.99</option>

<option value="B" data-amount="6898" data-options="#packageB">2 Planners- $68.98</option>

<option value="c" data-amount="10497" data-options="#packageC">3 Planners- $104.97</option>

4) Buy Now at the Special Price of $34.99 + 4.99 S&H</strong>"]

<option value="A" data-amount="3998" data-options="#packageA">1 Planner- $39.98</option>

<option value="B" data-amount="7696" data-options="#packageB">2 Planners- $76.96</option>

<option value="c" data-amount="11994" data-options="#packageC">3 Planners- $119.94</option>

(Below is the script the plugin is using)

<script type='text/javascript'>

(function($){

$(document).ready(function(){

$('#package').change(function(){

var option = $(this).find(':selected');

var sel = option.data('options');

$('.options').hide();

$(sel).show();

calculateTotal();

});

$('.options input[type=checkbox]').change(function(){

calculateTotal();

});

calculateTotal();

});

function calculateTotal(){

var base = $('#package').find(':selected').data('amount');

var visibleOptions = $('.options:visible');

var checkedOptions = visibleOptions.find('input:checked');

var options = 0;

checkedOptions.each(function(){

options += $(this).data('amount');

});

var totalCents = parseInt(base + options);

$('#amount').val(totalCents);

var totalDollars = totalCents/100;

$('#amountShown').val(totalDollars);

}

})(jQuery);

</script>

[#2]

Hi peacecorp,

Hmm I see what you mean. A few things to check:

1. I noticed the Optimizely snippet is added twice. This could potentially cause issues. Would you be able to remove the second one (the one with https:// as part of the URL)

2. On Variation #1, the code inside the setInterval doesn't seem to set the packageA data-amount attribute.

3. The #amount field doesn't seem to be updating properly. This could be because of one of the above two reasons, or because we'll need to re-trigger a function that updates this field.

Try looking into the first two issues, and then we'll go from there!

Best,

Michael

[#3]

@michaelwei - Thank you! I appreciate your response. I have addressed the first two issues, removing one of the snippets and adding the data-amount. If you could help me retrigger a function (maybe in #amountShown) it would be a huge help! 

[#4]

Hi peacecorp,

Upon closer inspection, the change is actually not happening because the "data-amount" field is a custom data attribute, not a regular HTML element. Basically, your browser sees this and constructs a data object from these "data-amount" elements. After the browser does this, it no longer references the element on the DOM, thus changing it via the .attr method doesn't have an effect.

Try changing the amounts this way:

$("#package > option[data-options='#packageA']").data('amount', 3498);

One thing to note is that the value at the end of that code snippet is not a string, it's a number. Also, since the #amountShown field is generated on page load, you'll have to add another jQuery line that changes that value initially.

Hope that makes sense!

Best,

Michael

[#5]

@michaelwei - It does! Thank you- could you please help me add another jQuery line that changes that value initially? 

[#6]

Sure! It would just be something like this:

$('#amountShown').val('34.98');