1

I've coded up a quick toggle switch which 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 (amasty shopby) which we run on the site...

Specifically the "display: none" is not 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 non existent 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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.