β–Ό
Streaming live at 10am (PST)

Automatic NEXT/PREVIOUS product button for ecommerce with CMS Dynamic list


#1

Hi,

I'm having a hard time trying to make this @hammerhouse solution to work in my ecommerce project Native linking to previous and next post or page using CMS @hammerhouse has a working website here -->> http://www.hammerhouse.io/post/jonathanroy

I'm trying to setup "previous and next buttons" so you can change products as if it was a "slider style" solution, but I can't make it work... I can't make the links to work :sweat:

Please could someone help me out? :bow:

Thank you...

Read-only Link: Preview Link Elena SuΓ‘rez & Co.

Header Tag Code:

<style>#product_list{display: block;}</style>

<script>
  var Webflow = Webflow || [];
  Webflow.push(function () { 
    
    var next_href = $('#product_list .w--current').parent().next().find('a').attr('href');
    var previous_href = $('#product_list .w--current').parent().prev().find('a').attr('href');
    
    //if last post in list
    if(next_href == undefined) {
      next_href = $('#product_list').children().children().first().find('a').attr('href');
      $('#next_button').fadeOut(); //optional - remove if you want to loop to beginning
    }
    
    //if first post in list
    if(previous_href == undefined) {
      previous_href = $('#product_list').children().children().last().find('a').attr('href');
      $('#previous_button').fadeOut();  //optional - remove if you want to loop to end
    }
    
    //apply hrefs to next / previous buttons
    $('#next_button').attr('href', next_href);
    $('#previous_button').attr('href', previous_href);
    
  });
</script>

#2

Strange that nobody wants to answer this question for YEARS. Anyone please answer?? A proper custom code snip would be grand.