How Can I Change Text Content Of default_pagination PREV and NEXT Buttons

Solved
dannyelo
Excursionist
18 1 1

Hello,

I'm trying to change the text content of the default_pagination Previous and Next buttons with javascript, but I can't even target the elements.

First I tried this:

  const prevBtn = document.querySelector('#pagination .prev a');
  const nextBtn = document.querySelector('#pagination .next a');
  prevBtn.textContent = '<';
  nextBtn.textContent = '>';

And also this:

window.addEventListener('DOMContentLoaded', () => {
  const prevBtn = document.querySelector('#pagination .prev a');
  const nextBtn = document.querySelector('#pagination .next a');
  prevBtn.textContent = '<';
  nextBtn.textContent = '>';
});

The content isn't changing and if I type prevBtn or nextBtn in the chrome dev console I got this error:

Uncaught ReferenceError: prevBtn is not defined
at <anonymous>:1:1

If I querySelect the elements in the chrome dev console, it works.

Thanks,

0 Likes
ChoosiZon
Navigator
314 54 84

Can see your url?We learn more seeing your url.

 

Create
Launch
Donate
0 Likes
dannyelo
Excursionist
18 1 1

Hello ChoosiZon,

Of course, here is the temporary link, because the site is still unpublished. You have to click on "Catalogo" button in the header and go down to the pagination.

LINK: https://46nqegue3yzbof9p-22560845.shopifypreview.com

Thanks!

0 Likes
ChoosiZon
Navigator
314 54 84

You can try out this :

  let prevBtn = document.querySelector("#pagination > span.prev > a");
  let nextBtn = document.querySelector("#pagination > span.next > a");
  prevBtn.textContent = '<';
  nextBtn.textContent = '>';

 

but i think better way is to edit the html instead.

Create
Launch
Donate
0 Likes
ChoosiZon
Navigator
314 54 84

This is an accepted solution.

You can try this :

  let prevBtn = document.querySelector("#pagination > span.next > a");
  let nextBtn = document.querySelector("#pagination > span.prev > a");
  prevBtn.textContent = '<';
  nextBtn.textContent = '>';

but i think better way is to edit the html.

Create
Launch
Donate
0 Likes
dannyelo
Excursionist
18 1 1

Hey ChoosiZon,

The code you gave me works great. Thank you!

I can't change the html because I'm using the default_pagination from shopify liquid. And that is injecting the code. That's why I'm trying to use javascript instead.

    <div id="pagination">
      {{ paginate | default_pagination }}
    </div>

 

0 Likes