Add previous I next buttons product page, Dawn version 15.2.0

[Ivikon]

Since the new update, my code is not working anymore to show Prev I Next on top right on my product page. Only the "I" separating line is being shown. 

I used the following steps: 

1. Go to Store Online-> theme -> edit code

2. Snippets/card-product.liquid

3. update all 'href="{{ card_product.url }}' to 'href="{{ card_product.url | within: collection | default: '#' }}'. NOTE: added "| within: collection | default: '#'

4.  Go to sections/main-product.liquid

5. Added code in line 77-88 code below to top of file:

———————————

<div class="grid grid--1-col grid--1-col-tablet">

    <div class="grid__item right">

      {% if collection.previous_product %}

        {{ '<< Previous' | link_to: collection.previous_product.url, 'Previous product' }}

      {% endif %}

            {{ '|' }}

      {% if collection.next_product %}

        {{ 'Next >>' | link_to: collection.next_product.url, 'Next product' }}

      {% endif %}

      </div>

  </div>

-------------------

What do I have to change? I saw in many other forums, people discussing the problems open their website with the password. Is that the way to go? Where do I do that so you can check? 

My website: https://ivanjphotography.store/products/lights

Thank you so much.

[rajweb]

Hi @Ivikon ,

Follow these steps:

• Go to Your Shopify Admin:

  • Log in to your Shopify account.

• Navigate to Online Store:

  • In the left-hand menu, click on Online Store.

• Access Preferences:

  • Click on Preferences under the Online Store section.

• Enable Password Protection:

  • Scroll down to the Password Protection section.
  • Check the box next to Enable password.
  • Enter a password in the provided field. This will be the password you’ll share with me.

• Save Changes:

  • Click the Save button at the bottom of the page to apply the changes.

[Ivikon]

Dear Rajweb,

The website is free to visit, its not restricted. Thank you very much for your help in advance. 

[EvinceDev]

Hello @Ivikon,
Since new update collection is not defined in section 'main-product.liquid'.
You need to again define or assign a collection need pass it to snippet 'card-product.liquid' as currently object collection is blank or not defined in 'main-product.liquid'.

[Ivikon]

Hi, thank you. could you please help me with the code, where should I paste my code from above? Another question 🙂 what do they use the card-product.liquid snippet? Thank you

[EvinceDev]

Your custom code 'Prev I Next' how did you set collection? And share code of 'main-product.liquid' and 'card-product.liquid'.

[Ivikon]

There is only one collection. The code of these are to long to be posted, can you access it through the website?

[EvinceDev]

Share collection link.

[Ivikon]

https://ivanjphotography.store/collections/all

The Previous I Next button should appear on the product page. 

[EvinceDev]

Hello @Ivikon ,
Use this updated code

<div class="grid grid--1-col grid--1-col-tablet">
  <div class="grid__item right">
    {% if collections['all'].previous_product %}
      {{ '<< Previous' | link_to: collections['all'].previous_product.url, 'Previous product' }}
    {% endif %}

    {{ '|' }}

    {% if collections['all'].next_product %}
      {{ 'Next >>' | link_to: collections['all'].next_product.url, 'Next product' }}
    {% endif %}
  </div>
</div>

[Ivikon]

Hi EvinceDev,

This code lets only appear the "I" line between the "Previous" and "Next" button. Maybe some addings?

[EvinceDev]

Hello @Ivikon ,
Try this code

<div class="grid grid--1-col grid--1-col-tablet">
  <div class="grid__item right">
    {% if product.collections.size > 0 %}
      {% if product.collections[0].previous_product %}
        {{ '<< Previous' | link_to: product.collections[0].previous_product.url, 'Previous product' }}
      {% endif %}

      {{ '|' }}

      {% if product.collections[0].next_product %}
        {{ 'Next >>' | link_to: product.collections[0].next_product.url, 'Next product' }}
      {% endif %}
    {% endif %}
  </div>
</div>

[Ivikon]

It didnt work. Not even the line is appearing. I included it once on top and the other time like the first code presented after line 77/after <div class="page-width"> in the "main-product.liquid". 

Should I try in 'card-product.liquid', someone mentioned:" Since new update collection is not defined in section 'main-product.liquid'.
You need to again define or assign a collection need pass it to snippet 'card-product.liquid' as currently object collection is blank or not defined in 'main-product.liquid'."

[Ivikon]

Maybe you have seen, at the moment, I dont have a collection defined, its simply products on the product page. Should I maybe define a collection? 

[EvinceDev]

Hello @Ivikon ,
Yes

[Ivikon]

Solution is the following (Use Chat GPT and edit a bit by yourself):

1.  add in card-product.liquid:

update all 'href="{{ card_product.url }}' to 'href="{{ card_product.url | within: collection | default: '#' }}'. NOTE: added "| within: collection | default: '#'

2. before the code: 

<div class="product product--{{ section.settings.media_size }} product--{{ section.settings.media_position }} product--{{ section.settings.gallery_layout }} product--mobile-{{ section.settings.mobile_thumbnails }} grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}">
<div class="grid__item product__media-wrapper">

you add in main-product.liquid:

{% assign all_products = collections.all.products %}
{% assign current_product_handle = product.handle %}
{% assign product_handles = all_products | map: 'handle' %}

{% comment %} Manual index calculation to debug {% endcomment %}
{% assign product_index = -1 %}
{% for handle in product_handles %}
{% if handle == current_product_handle %}
{% assign product_index = forloop.index0 %}
{% endif %}
{% endfor %}

{% assign previous_index = product_index | minus: 1 %}
{% assign next_index = product_index | plus: 1 %}

<div class="grid grid--1-col grid--1-col-tablet">
<div class="grid__item right" style="padding-right: 20px;"> <!-- Change px for more space to right -->
{% if previous_index >= 0 %}
{% assign previous_product_handle = product_handles[previous_index] %}
{% assign previous_product = all_products | where: 'handle', previous_product_handle | first %}
<a href="{{ previous_product.url }}" class="prev-product-btn"><< Previous</a>
{% else %}
<span class="disabled-nav"><< Previous</span>
{% endif %}

<span class="separator"> | </span>

{% if next_index < product_handles.size %}
{% assign next_product_handle = product_handles[next_index] %}
{% assign next_product = all_products | where: 'handle', next_product_handle | first %}
<a href="{{ next_product.url }}" class="next-product-btn">Next >> </a>
{% else %}
<span class="disabled-nav">Next >> </span>
{% endif %}
</div>
</div>