PhotoDune

Pagination issue in Shopify

367 posts
  • Bought between 10 and 49 items
  • Denmark
  • Exclusive Author
  • Has been a member for 3-4 years
  • Microlancer Beta Tester
UI20 says

Hey guys, since it is very hard to get any help on the Shopify forums (low activity) I hope maybe you guys can have a look at my problem. I suspect it is a general problem and not a big one.

The problem is this: I needed a different style for “current” (current page = the number navigation) and the 3 little dots ”...” that also show up in the navigation.

As you can see in the following link the 3 dots and the current page have the same style.

http://murray-bauch-and-altenwerth3713.myshopify.com/collections/all

The problem is that these 2 elements both the same part element and can only be styled differently by making a conditional statement like here:

{% if part.title == '…' %}
    <span class="deco">{{ part.title }}</span>
{% else %}
    <span class="paginate-shared-style current page">{{ part.title }}</span>
{% endif %}

I got the help to make this from: http://wiki.shopify.com/Paginate

My guess is that those 3 little dots can not be recognized for some reason. I copy-pasted directly from the wiki example and I also tried with normal punctuation for the dots but to no avail.

Below is the full code:
{% if paginate.pages > 1 %}
<!-- START PAGINATE -->
<div id="paginate">
     {% if paginate.previous %}
    <span class="paginate-shared-style-link prev">{{ paginate.previous.title | link_to: paginate.previous.url }}</span>
  {% endif %}
  {% for part in paginate.parts %}
    {% if part.is_link %}
      <span class="paginate-shared-style-link page">{{ part.title | link_to: part.url }}</span>
    {% else %}
      {% if part.title == '…' %}
       <span class="deco">{{ part.title }}</span>
      {% else %}
       <span class="paginate-shared-style current page">{{ part.title }}</span>
      {% endif %}     
    {% endif %}        
  {% endfor %}      
  {% if paginate.next %}
    <span class="paginate-shared-style-link next">{{ paginate.next.title | link_to: paginate.next.url }}</span>
  {% endif %}
</div>
<!-- END PAGINATE -->{% endif %}{% endpaginate %}
#paginate {
    position:absolute;
    left:0px;
    bottom:-33px;
        z-index: 10;
}

#paginate a {
    text-decoration:none;
}

.paginate-shared-style {
    display:block;
    padding: 3px 8px;
    border-width:1px;
        border-style:solid;
    margin-right:3px;
    float:left;       
}

.paginate-shared-style-link a {
    display:block;
    padding: 3px 8px;
    border-width:1px;
        border-style:solid;
    margin-right:3px;
    float:left;       
}

.deco  {
        background-color: white;

}
.current  {
        background-color: black;

}

I know this is a lot to go through but I hope you can spare the time. I suspect the issue is not a big one. I am just too novice in programming to see it right away.

Thanks in advance.

by
by
by
by
by