Shopify, boutons avant et arrière via une liste de produits filtrée

Question

J'essaye de réaliser des boutons avant et arrière qui seront affichés sur la page produit de la page collection. Lorsqu'un filtre est sélectionné sur la page de collection, puis que l'on clique sur un produit, j'aimerais créer des boutons qui avancent et reculent dans les produits répertoriés en fonction du filtre sélectionné par l'utilisateur. Mes boutons avancent et reculent uniquement sur toute la page de collection. Comment puis-je réécrire le code ci-dessous pour gérer les produits répertoriés en fonction d'un filtre ?

{%- liquid
    assign previous_product = collection.previous_product
    assign next_product = collection.next_product
       assign backFunc = 
    if previous_product or next_product
    else
        assign collectionList = product.collections[0].handle
        assign previous_product = nil
        assign next_product = nil
        assign last = collections[collectionList].products_count
        for p in collections[collectionList].products
            if p.handle == product.handle
                assign prev = forloop.index | minus: 2
                assign next = forloop.index
                if prev >= 0
                  assign previous_product = collections[collectionList].products[prev].handle
                endif
                if last >= next
                  assign next_product = collections[collectionList].products[next].handle
                endif
                break
            endif
        endfor
    endif
-%} 



{%- if previous_product -%}
            <a class="next-prev-icon prev-icon" href="{{ previous_product }}">
              Prev
            </a>
        {%- endif -%}
        {%- if next_product -%}
            <a class="next-prev-icon next-icon" href="{{ next_product }}">
                Next
            </a>
        {%- endif -%}

J'ai cherché sur Internet mais je n'ai trouvé aucun résultat.

Answer 1

Retournez sur cet ancien article Shopify : Obtenez les articles les plus chers de votre collection pour obtenir des conseils.

Fondamentalement, vous utiliseriez un script pour détecter le filtre à partir des paramètres de recherche du document.referrer de la page, puis réexécuteriez ce filtre via le script. Faites défiler les produits filtrés et lorsque vous trouvez un produit, vous pouvez reconstruire les boutons précédent et suivant côté client pour pointer vers le bon produit.

Vous pouvez mettre en cache les filtres scriptés dans l'ordre en utilisant les window.sessionStorageID de produit afin que lorsqu'une nouvelle page se charge, vous puissiez vérifier le cache (dont la clé est le paramètre de filtre actuel) et si vous trouvez votre produit, vous pouvez ignorer la recherche.

Si vous utilisez le routage du cache, vous devrez également définir une sorte de critère d'obsolescence.