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

Design help Custom code
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>
1 Like
2

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

1 Like
3

Hi there! I make a solution for this.
Previous and Next Button for CMS Collection pages and Ecommerce pages.

  • Create a previous and next button with a link block with a text block inside
  • Put id´s that you will use in the code, in this case #next_button and #previous_button

Untitled
image

  • Creat a Collection with a list of the items, in this case products. Put and id in this case #product_list.

  • Inside the Collection put a link block and a text block

image

  • The link need to redirect to the Current Link of the collection

image

  • The text get the inner text from the name of the CMS Item

image

  • If you wanna override the previous text put the id #previous_title for the text element

image

  • If you wanna override the next text put the id #next_title for the text element

image

  • Put this code before the end of the body tag. Change the id’s for you decide in the previous steps.
<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');
   	var next_title = $('#product_list .w--current').parent().next().find('a').text();
		var previous_title = $('#product_list .w--current').parent().prev().find('a').text()
   
    //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);
    
    $('#next_title').text(next_title);
    $('#previous_title').text(previous_title);
    
  });
</script>

Have a great day my friends.

Richard