Rich-text Reply

Price Testing

peacecorp 10-12-14

Price Testing

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>

michaelwei 10-14-14
 

Re: Price Testing

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

Optimizely
peacecorp 10-15-14
 

Re: Price Testing

@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! 

michaelwei 10-17-14
 

Re: Price Testing

[ Edited ]

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

Optimizely
peacecorp 10-17-14
 

Re: Price Testing

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

michaelwei 10-17-14
 

Re: Price Testing

Sure! It would just be something like this:

 

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

Optimizely