Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Ok I have created a JSFIDDLE that will give you an idea about what to do. <a href="http://jsfiddle.net/Q5sAK/1/" rel="nofollow">http://jsfiddle.net/Q5sAK/1/</a></p> <p>For this I used the jquery UI slider but this should work for your own slider you just need to call the $.each() function when you are ready.</p> <p>So we know that your percentage is in the h2 tag with the class coupontitle of all of you products.</p> <p>First we are going to start by modifying that h2 to have a span tag at the end that we will use to hold the computed savings:</p> <pre><code>&lt;h2 class="coupontitle"&gt; &lt;a href="&lt;?php echo $link; ?&gt;" title="&lt;?php the_title_attribute(); ?&gt;" &lt;?php if($GLOBALS['premiumpress']['analytics_tracking'] =="yes"){ ?&gt;onclick="pageTracker._trackEvent('COUPON CLICK', 'TITLE CLICK', '&lt;?php the_title(); ?&gt;');"&lt;?php } ?&gt; &lt;?php if(is_single()){ ?&gt; target="_blank"&lt;?php } ?&gt;&gt; &lt;?php the_title(); ?&gt; &lt;/a&gt; &lt;span&gt;&lt;span&gt; &lt;/h2&gt; </code></pre> <p>Then we need to add the javascript that will calculate the savings.</p> <pre><code>function updateSlider(){ //Get the value of the slider. var curentSliderAmount = $('#sliderId').val(); //Loop over all of the titles $.each($('.coupontitle'),function(index,coupObj){ //This will create the variable from the regex search that will have all of the parts for the percent we need var percent = $(coupObj).text().match(/(\d+)\%/i); //We will then take the 2nd part which is just the number without the % sign and make it a percent then multiply that by the slider value and then fix it to a 2 decimal value so it can be used a curency. var savings = ((percent[1]*.01) * curentSliderAmount ).toFixed(2); //We then set the span html content = to our newly calculated value. $('span',coupObj).html('Save: $'+savings); }); } //Run this when the page starts $(document).ready(function(){ updateSlider() }); </code></pre> <p>Then you just need to call updateSlider() when ever the slider updates.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload