0

I have a product page with images and product description that all loads dynamically from a json file. Everything works perfectly except for the owl carousel when I click on either the prev/next arrows. The main image and the data updates as it should, but the carousel does not.

I logged the new image urls and they are being updated properly.

I tried using this everywhere in the code

$("#owl-focus").trigger('refresh.owl.carousel');

This is the javascript for the page

// ========== Compile Product Data =======================================
$.getJSON("../../json/guitars.json", function(data) {
  var jsonLength = data.length

  // -------  Parse & Returns URL Parameters -----------------------------
  function getUrlVars(guitar) {
    var vars = {}
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
      vars[key] = value;
    })
    return vars
  }

  // ------------ Append Clicked Image -------------------------------------
  var guitar = parseInt(getUrlVars()["product"], 10)

  loadGuitar(guitar)

  function loadGuitar(guitar) {
    // Images
    var image1 = data[guitar].img1
    var image2 = data[guitar].img2
    var image3 = data[guitar].img3
    var image4 = data[guitar].img4
    var alt = data[guitar].alt

    // description
    var title = data[guitar].title
    var brand = data[guitar].brand
    var code = data[guitar].code
    var price = data[guitar].price
    var description = data[guitar].description
    var specs = data[guitar].specs

    $('#clickImg').attr({src: `../${image1}`, alt: `${alt}`})
    $('#img1').attr({src: `../${image1}`, alt: `${alt}`})
    $('#img2').attr({src: `../${image2}`, alt: `${alt}`})
    $('#img3').attr({src: `../${image3}`, alt: `${alt}`})
    $('#img4').attr({src: `../${image4}`, alt: `${alt}`})

    $('#title').html(title)
    $('#brand').html(brand)
    $('#variant-sku').html(code)
    $('#price').html(price)
    $('#description').html(description)

    $('#specs').empty();

    specs.forEach(spec => {
      $("#specs"). append(`<li>${spec}</li>`)
    })
  }

  // -------------- Owl Carousel -------------------------------------------
  $(document).ready(function () {
    $('#owl-focus').owlCarousel({
      loop: true,
      margin: 10,
      nav: true,
      navText: [$('.owl-navigation .owl-nav-prev'), $('.owl-navigation .owl-nav-next')],
      responsiveClass: true,
      responsive: {
        0: {
            items: 3,
        },
        1050: {
            items: 4,
        }
      }
    })
  })

  // -------- Next / Previous Arrows -------------------------------------
  $("#prev-btn").click(function() {
    if (guitar === 0) {
      guitar = jsonLength - 1
    } else {
      guitar = guitar - 1
    }
    loadGuitar(guitar)
    onPageChg()
  })

  $("#next-btn").click(function() {
    if (guitar === jsonLength - 1) {
      guitar = 0
    } else {
      guitar = guitar + 1
    }
    loadGuitar(guitar)
    onPageChg()
  })

})
// ========== Compile Product Data End ===================================
Jeff S
  • 109
  • 2
  • 13
  • 1
    Does this answer your question? [Replace current items using Owl Carousel 2](https://stackoverflow.com/questions/48033248/replace-current-items-using-owl-carousel-2) – 2pha Dec 27 '19 at 23:19
  • Thanks for the link. If there's a way to make it work I cannot figure out how to incorporate this into my code. I'm only changing the src and alt attributes, which my code already does. I just can seem to get owl to cooperate – Jeff S Dec 28 '19 at 01:53

1 Answers1

0

Figured it out. Instead of trying to reload owl I reloaded the page as I should have with new data. Similar functions that take me to that product page in the first place with a few adjustments.

$("#prev-btn").on("click", function(e) {
    $.getJSON("../../json/guitars.json", function(json) {
      if (guitar === 0) {
        new_id = jsonLength - 1
      } else {
        new_id = guitar - 1
      }
      window.location.href = "product.html?product=" + new_id
    })
  })

  $("#next-btn").on("click", function(e) {
    $.getJSON("../../json/guitars.json", function(json) {
      if (guitar === jsonLength - 1) {
        new_id = 0
      } else {
        new_id = guitar + 1
      }
      window.location.href = "product.html?product=" + new_id
    })
  })

Before I was just changing the attributes on the photos, description, etc

Jeff S
  • 109
  • 2
  • 13