1

I've coded up a quick toggle switch that will change the price display between Including and Excluding tax using "display: none" with jQuery hide and show but I'm having problems with an Ajax continuous scroll extension (amnesty shop by) which we run on the site...

Specifically, the "display: none" is being appended to the products that are loaded after using Ajax infinite scroll so both prices including and excluding tax are then shown overriding my code.

My javascript knowledge is pretty basic to nonexistent so I'm not really sure where, to begin with, this now, hopefully, someone can point me in the right direction.

Here is my code so far:

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #999999;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #f7933d;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(55px);
  -ms-transform: translateX(55px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.on
{
  display: none;
}

.on, .off
{
  color: white;
  position: absolute;
  transform: translate(-50%,-50%);
  top: 50%;
  left: 65%;
  font-size: 14px;
}

input:checked+ .slider .on
{display: block; left: 35%;}

input:checked + .slider .off
{display: none;}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;}
</style>

<div class="tax-selector">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<span class="price-including-tax">Prices <?php echo $this->helper('tax')->__('Incl. Tax') ?></span>
<span class="price-excluding-tax">Prices <?php echo $this->helper('tax')->__('Excl. Tax') ?></span>

<label class="switch">
    <input type="checkbox" id="togBtn">
    <div class="slider round"><!--ADDED HTML -->
        <?php
            if(isset($_COOKIE['VATMODE']) && $_COOKIE['VATMODE']== "INC" ) {
             echo '
                 <span class="on">'.$this->__('Incl.').'</span>
                 <span class="off">'.$this->__('Excl.').'</span>
             ';
             }
             else {
              echo '
                  <span class="off">'.$this->__('Excl.').'</span>
                  <span class="on">'.$this->__('Incl.').'</span>
              ';
             }
        ?>
    </div>
</div>
<?php endif; ?>


</label>

<script type="text/javascript">
        (function($){

$(function(){

    ShowPrices();

    $('input#togBtn').click(function(){
        if($.cookie('VATMODE') == "INC"){
            $.cookie('VATMODE', 'EX');
        } else {
             $.cookie('VATMODE', 'INC')
        }
        ShowPrices();
        //return false
    });
});


function ShowPrices(){
    if($.cookie('VATMODE') == "INC"){
        $('.price-including-tax').show();
        $('.price-excluding-tax').hide();
    } else {
        $('.price-including-tax').hide();
        $('.price-excluding-tax').show();
    }
}
        })(jQuery);

</script>

<script type="text/javascript">

function App() {}

App.prototype.setState = function(state) {
  localStorage.setItem('checked', state);
}

App.prototype.getState = function() {
  return localStorage.getItem('checked');
}

function init() {
  var app = new App();
  var state = app.getState();
  var checkbox = document.querySelector('#togBtn');

  if (state == 'true') {
    checkbox.checked = true;
  }

  checkbox.addEventListener('click', function() {
      app.setState(checkbox.checked);
  });
}

init();
</script>
</div>

1 Answer 1

0

did you work this out in the end? Could you share the solution please.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.