Modifiable pagination on Shopify Collection - pagination

I was wondering if there was any way to make pagination user modifiable on the front-end? I've been searching for a solution, but can't find anything similar that addresses this specific problem.
I'm aware that at present, you can assign a limit to the pagination, for example:
{% paginate collection.products by 12 %}
What I'm trying to achieve here is the ability for the user to change the number of products viewable, per page, from a dropdown menu. So for example, the user chooses 24, the page refreshes with the revised pagination limit active on the page.
Any help getting started here would be greatly appreciated. Thanks!

You could create 2 alternate templates called 12 collection.12.liquid and 24 collection.24.liquid which would paginate by 12 and 24, respectively. All your templates will be below:
collection.liquid:
{% paginate collection.products by 20 %}
{% include ‘collection-template’ %}
{% endpaginate %}
collection.12.liquid:
{% paginate collection.products by 12 %}
{% include ‘collection-template’ %}
{% endpaginate %}
collection.24.liquid:
{% paginate collection.products by 24 %}
{% include ‘collection-template’ %}
{% endpaginate %}
Then you could create links to those other templates using the view parameter.
<a href=”http://myshop.com/collections/shirts?view=12”>12 per page</a>
<a href=”http://myshop.com/collections/shirts?view=24”>24 per page</a>
More detail, please refer this link here

Related

Render a link field inside a paragraph template drupal 8

I have a paragraph called link. In this paragraph there is a single link field that allows multiple values. In the paragraph-link.html.twig file I want to render all of the links added to the paragraph. Instead I get the same link duplicated as many times as the number of link values. So if I add two links, it renders the first link twice. I also need it to work with external and internal links. Currently it only renders the external links properly (but only ever renders the first one).
{% for item in paragraph.field_link %}
{{ paragraph.field_link.title }}
{% endfor %}
Thanks for the comments, the following is working for external links but not internal ones. Internal link URI renders as "internal:/"
{% for item in paragraph.field_link %}
{{ item.title }}
{% endfor %}
With the help of the comments I was able to get this working as I wanted within the paragraph template. Below is the working code for a Link field that allows multiple values within a paragraph field.
{% for item in paragraph.field_link %}
{{ item.title }}
{% endfor %}

Dump(item) not working in Twig template drupal

I have twig template for default view
{% for item in items %}
{{ item.content }}
{% endfor %}
{{ item.content }} have values but when I tried to print the whole array like
{% for item in items %}
{{ item }}
{% endfor %}
It is not working. I have enabled (service.yml)
debug true
cache false
autoload true
but it's not working. Any help would be appreciated
Try and install the Devel plugin with its Kint extension. Once you have both running you could use: {{kint(item.content)}} to get a full list of all items within the content array.
Below an example of the kint() output.
As both are development plugins, they should only be used for debugging and not be installed on a production website.

Paginate Shopify blog with offset? (Liquid)

I'm trying to figure out how to paginate a blog starting at a specific offset. For example, the first page features posts 5-8, the second page 9-12, third page 13-16, and so on. This doesn't seem to work, but I'm looking for something along these lines -
{% paginate blog.articles offset:4 by 4 %}
{% for article in blog.articles
...
{% endfor %}
{% endpaginate %}
Are there any workarounds here?
I was trying to see if there's any way I could find a decent workaround in Liquid but there isn't, since you're offsetting a full page; it'd be perfectly possible to show 5-8 on the first page, but you'd need to show 9-16 on second page and so on and so forth. I'm afraid Shopify paginate won't help you here.
There could be specific workarounds for your situation; please give us more detail and we'll see. For example, if you always want to show the four latest blog articles on every page, and leave pagination handle the rest, a possible way would be to do something as per the following:
{% for article in blogs.news.articles limit: 4 %}
{{ article.title }}
{% endfor %}
{% paginate blog.articles by 4 %}
{% unless paginate.current_page == 1 %}
{% for article in blog.articles %}
{{ article.title }}
{% endfor %}
{% endunless %}
{% include 'pagination' %}
{% endpaginate %}
So outside of any pagination go through the handle to obtain the latest 4 to feature them, and if you're not on page 1, use pagination to print 4 more articles on each page.
If not, this is one of the scenarios where you should consider exposing your own service that internally calls and retrieves articles from the Shopify API as per your needs.
The offset should be specified in your loop parameters, not in pagination.

Overcome limit of 50 in for loop in shopify

I have paginated a product list over a limit of 50 to fit in the whole page (index.liquid).
But the if condition within for loop doesn't apply over whole paginated items as for loop is limited to 50 items. Any help would be appreciated.
{% paginate collections.all.products by 1000 %}
{% for product in collections.all.products %}
{% if product.metafields.spr.reviews %}
{{ product.metafields.spr.reviews }}
{% endif %}
{% endfor %}
{% endpaginate %}
The 50 items limit per page should be correct and it is documented. Except for the fact that... It is not. Actually, you can circumvent that limit in Shopify by establishing a higher limit of up to 1000 items per page. Just being redundant, here is a sample code:
{% paginate mycollection.products by 250 %}
{% for product in mycollection.products %}
{% include 'my-product-template' %}
{% endfor %}
{% endpaginate %}
Also answered here.
No, you cannot overcome it, You can query up to 50 product per page, Shopify won't allow more than 50 products, in order to maintain server load balance.
quote from shopify documentation : http://docs.shopify.com/manual/configuration/store-customization/page-specific/collections/add-view-all-to-collection-pages
Don't ever paginate a collection by more than 50, that's how many products maximum you should query per page. Be respectful of Shopify's app servers. If you are not using any paginate tags, pagination does kick in behind the scene and you will only receive the first 50 products in said collection.

Combining optional block with element in twig

In defining a base template in twig, I want to reserve an area for special notifications, using a block. It could be an extra sidebar that may contain all kinds of things (calendar, or some extra information, whatever.) The default should be emtpy, but any child template may extend and fill it.
Now I want to have all those extensions be included in a <div class='special-sidebar'> if the block is extended, and not show anything if it is not included. Is there any way to define the containing element in the base template?
{# Base template #}
Content etc...
{% block special %} {# may be overridden by child template #}{% endblock %}
{# child template #}
{% block special %} Here, the special sidebar is filled! {% endblock %}
The base page should show just the content:
// base template:
Content etc...
And the child page:
// child template
Content etc...
<div class"special-sidebar"> Here, the special sidebar is filled! </div>
Where and how do I put the html for this? I could define it in every child, but that means you have to remember to use the correct html each time, I'd rather set this in the base template and not bother with it. But I don't want empty elements in my page if the block is not overridden.
You can solve it like this, if you want to display a certain block only if it has content. Hope, this is what you're looking for.
Example index.html.twig
{% set _block = block('dynamic') %}
{% if _block is not empty %}
{{ _block|raw }}
{% endif %}
Example part.html.twig
{% extends "index.html.twig" %}
{% block dynamic %}
Block content goes here.
{% endblock %}
Source: How to check if a block exists in a twig template - Symfony2

Resources