I'm trying to display the full 50 products that Shopify allows per page call, but in my search results only 10 items are displayed and the pagination links lead to the same 10 products for each page.
I've read through the documentation and even used the template from Caroline Schnapp's skeleton theme here: https://github.com/Shopify/skeleton-theme/blob/master/templates/search.liquid, I get the same results no matter what I try.
To summarise, I'd like to display 50 products and pagination links on my search results page.
Can anyone shed any light on this please?
Here's the contents of my search.liquid template:
{% paginate search.results by 50 %}
{% if search.results_count == 0 %}
<div class="search-noresults">
<h2 class="no-results">Nothing found for <span class="search-terms">{{ search.terms }}</span></h2>
<p class="search-again">try searching again</p>
</div>
{% else %}
<section class="search-grid clearfix">
<h2 class="results-for">Results for <span class="search-terms">{{ search.terms }}</span></h2>
{% for product in search.results %}
<section class="collection-grid ">
<div class="product-box" href="{{product.url}}">
<img src="{{ product.featured_image | product_img_url: 'large'}}" alt="{{ product.description | strip_html | truncate: 75 }} click for more information" />
<hr class="collection-hr"><span class="grid-title">{{product.title}}</span><br/><span class="grid-price">{{ product.price | divided_by: 100 | replace: '.',' ' | truncatewords: 1 | remove: '...' }} £</span>
</div>
</section>
{% endfor %}
</section>
{% if search.results_count > 50 %}
<div id="pagination">
{{ paginate | default_pagination }}
</div>
{% endif %}
{% endif %}
{% endpaginate %}
So it turns out that all I needed to do was to activate the shop and the pagination worked as normal, when the shop is in dev mode pagination doesn't work as expected. Hopefully this helps someone else out there as I didn't find any of that in the documentation.
Related
I am trying to create multiple dynamic load more oob buttons using Sprig plugin in Craft CMS and they are appearing properly. But the issue comes up when one button is due to be swapped with the hidden one, it results to all the load more buttons disappearing.
Here is the for loop code that I have tested:
{% for city in cities %}
{% set articleOffset = articleOffset ?? 0 %}
{% set articlesQuery = cityArticles[loop.index0].offset(articleOffset).limit(articleLimit) %}
{% set articles = articlesQuery.all() %}
<div class="filtered-bookmark mb-5">
<span> {{ city.title }}</span>
<div class="row" id="container-{{ city.slug }}">
{% for article in articles %}
{% set featureImage = article.articleFeaturedImage.one().url ?? "" %}
{% set categorySlug = article.channelsCategory.one().channel.one().slug %}
<section class="col-12 col-sm-6 col-xl-4 mb-4">
{#article card template here#}
</section>
{% endfor %}
</div>
{% if articlesQuery.count() > articles|length + articleOffset %}
<button id="{{city.slug}}-oob" sprig
s-val:articleOffset="{{ articleOffset + articleLimit }}"
s-target="#container-{{ city.slug }}"
s-select="#container-{{ city.slug }} section"
s-swap="beforeend"
{{ sprig.trigger == city.slug ~ '-oob' ? 's-swap-oob="true"' }}> View More </button>
{% else %}
<button id="{{ city.slug }}-oob" s-swap-oob="true" style="display: none"></button>
{% endif %}
</div>
{% endfor %}
Asked the question on PutYourLightsOn's Sprig GitHub and got a response. This did the trick:
<button id="{{ city.slug }}-oob" {{ sprig.trigger == city.slug ~ '-oob' ? 's-swap-oob="true"' }} style="display: none"></button>
GitHub link for reference:
https://github.com/putyourlightson/craft-sprig/issues/247
I am developing a site on Shopify and I need to know how to change color of selected menu items. When a user clicks on any menu items, the color will change and remove once another menu item is selected.
I have tried to solve this problem many times now by using CSS and JQuery, but nothing I do seems to work.
Here is the code for the megamenu liquid file in Shopify.
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-
top="197">
<div class="container">
<div class="mega-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="nav navbar-nav" id="navbar">
{% assign meagemenu_lists = settings.Megamenu-list %}
{% for link in linklists[meagemenu_lists].links %}
{% assign item = link.title | downcase %}
<li class="level1 dropdown">
<a class="megamenu_icon{% increment count %} a1" href="{{ link.url }}"
title="{{link.title}}">{{ link.title }}</a>
{% for i in (2..5) %}
{%capture Megamenu%}megamenu_{{i}}_parent{%endcapture%}
{% if settings[Megamenu] == item %}
<div class="sub-menu dropdown-menu">
<div class="top-sub-menu">
<div class="item">
{% if settings.service-megamenu-icon1 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon1']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title1'] }}</h3>
<p>{{ settings['service-megamenu-subtitle1'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon2 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon2']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title2'] }}</h3>
<p>{{ settings['service-megamenu-subtitle2'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon3 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon3']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title3'] }}</h3>
<p>{{ settings['service-megamenu-subtitle3'] }}</p>
</div>
</div>
<!-- End item -->
</div>
<ul class="menu-level-1">
{% for j in (1..3) %}
{% capture mega_title %}megamenu_{{ i }}_column_{{ j }}_title{%
endcapture %}
{% capture mega_col %}megamenu_{{ i }}_column_{{ j }}_menu{%
endcapture %}
<li class="level2"><h4>{{ settings[mega_title] }}</h4>
<ul class="menu-level-2">
{% for link in linklists[settings[mega_col]].links %}
<li class="level3"><a href="{{ link.url }}" title="{{
link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
{% capture _image1 %}megamenu_{{ i }}_image1.jpg{% endcapture %}
{% capture _image2 %}megamenu_{{ i }}_image2.jpg{% endcapture %}
<li class="level2">
<img src="{{ _image1 | asset_url }}" alt="Sub-Menu" />
</li>
<li class="level2">
<img src="{{ _image2 | asset_url }}" alt="Sub-Menu" />
</li>
</ul>
<div class="bottom-sub-menu">
<p>{{ settings['Megamenu-description'] }}</p>
</div>
</div>
{% endif %}
{% endfor %}
<!-- End Dropdow Menu -->
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
There will be a CSS class somewhere in the menu HTML which applies a CSS rule to color the active item. Across different e-commerce themes and platforms, this class is generally 'active', 'open', 'nav-open'. This class may be added via JavaScript after page load, so you may not see it in the HTML file.
I recommend using the inspect element tool to find the rule being applied to the item.
I have a page whose structure is somewhat like this
---
layout: contents
title: contents
description: Contents of the posts.
permalink: contents/
---
<ul class="posts">
{% for post in site.posts %}
{% if post.categories != "tips" %}
<h2><a class="post-heading" href="{{ post.url }}">{{ post.title }}</a></h2>
<p> {{ post.description }} </p>
<p class="date">{{ post.date | date_to_string }}</p>
<hr class="hr-color"></hr>
{% endif %}
{% endfor %}
</ul >
Currently the URL of this page is set according to permalinks(BASE_URL/contents). I want that when a user clicks on an option( Android,Java,Web are the options) in the previous page, i get the URL of this page as BASE_URL/android or BASE_URL/Java and also display the contents of that category.
Is this possible using jekyll?
Two solutions :
1 - Using a plugin
You can use this category archive generator
2 - Using hand crafted pages
If you cannot use plugin (gh-pages) you can make a page per category, like this :
android.html
---
layout: category
title: Android
permalink: android/
---
_layouts/category.hmtl
---
layout: default
---
<ul class="posts">
{% for post in site.posts %}
{% if post.categories contains page.title %}
<h2><a class="post-heading" href="{{ post.url }}">{{ post.title }}</a></h2>
<p> {{ post.description }} </p>
<p class="date">{{ post.date | date_to_string }}</p>
<hr class="hr-color"></hr>
{% endif %}
{% endfor %}
</ul >
I'd love some help with this.
On the Cart page, when the "use my stores Layout" is selected, when customers click "Check Out", it just keeps cycling on the page and won't proceed to checkout. This is a known issue with the Luna theme for Bigcartel.
The solution I found says you need to uncheck it, but when you do, you get the error message:
"You must include {{ head_content }} inside the <head> tag of your content"
This means there's no page formatting in the code. I'm not big on the code, though I've tried for a bit to get this to work, stealing code for other pages in the theme, and failed. (it's been years since I've messed with code, so any help would be a big one).
Thank you
Here's the code for the page:
<header class="product_header page_header">
<h1>Cart</h1>
<span class="dash"></span>
</header>
{% if cart.items != blank %}
<form id="cart-form" {% unless cart.shipping.enabled or cart.discount.enabled %}class="no_options"{% endunless %} method="post" action="/cart" accept-charset="utf8">
<input type="hidden" name="utf8" value='✓'>
<div id="cart_description">
<section id="cart_items">
<ul>
{% for item in cart.items %}
<li class="cart_item {% unless item.product.has_default_option %}with_option{% endunless %}" id="item-{{ item.id }}">
<div class="item_image"><img src="{{ item.product.image | product_image_url: "thumb" }}" alt="Photo of {{ item.name }}"></div>
<dl>
<dt>{{ item.product.name }}</dt>
<dd class="item_price">{{ item.unit_price | money_with_sign }}{% if item.quantity > 1 %}<span class="item_quantity">(x{{ item.quantity }})</span>{% endif %}</dd>
<dd class="quantity_input">{{ item | item_quantity_input }}</dd>
{% unless item.product.has_default_option %}<dd class="item_option">{{ item.option.name }}</dd>{% endunless %}
</dl>
Remove item
</li>
{% endfor %}
</ul>
</section>
{% if cart.shipping.enabled or cart.discount.enabled %}
<section id="cart_options">
<ul>
{% if cart.shipping.enabled %}
{% if cart.shipping.strict %}
<li id="shipping_option">
<label for="country">Shipping</label>
{{ store.country | country_select }}
{% if cart.shipping.pending %}
{% if cart.country %}
<span class="no_shipping">We don't ship to {{ cart.country.name }}</span>
{% endif %}
{% endif %}
</li>
{% endif %}
{% endif %}
{% if cart.discount.enabled %}
<li id="cart_discount" class="cart_item">
{% if cart.discount.pending %}
<label id="cart_discount_label" for="cart_discount_code">Discount</label>
{{ cart.discount | discount_code_input }}
{% elsif cart.discount.free_shipping %}
<label for="cart_discount_code">Discount</label>
<p>{{ cart.discount.name }}</p>
{% else %}
<label for="cart_discount_code">Discount</label>
<p>{{ cart.discount.name }}</p>
{% endif %}
</li>
{% endif %}
</ul>
<div class="cart-update">
<button id="update-btn-footer" class="update-btn button disabled" name="update" type="submit" title="Update your cart total"><span>Update total</span></button>
</div>
</section>
{% else %}
<section id="cart_options" class="solo_update">
<div class="cart-update">
<button id="update-btn-footer" class="update-btn button disabled" name="update" type="submit" title="Update your cart total"><span>Update total</span></button>
</div>
</section>
{% endif %}
</div>
<section id="cart_summary">
<ul>
<li>
<h3>Items</h3>
<span>{{ cart.subtotal | money_with_sign }}</span>
</li>
{% if cart.shipping.enabled %}
<li id="cart-shipping-tax">
<h3>Shipping</h3>
{% if cart.shipping.pending %}
{% if cart.country %}
<span class="shipping-amount">Select another country</span>
{% else %}
<span class="shipping-amount">Select country</span>
{% endif %}
{% else %}
<span class="shipping-amount">{{ cart.shipping.amount | money_with_sign }}</span>
{% endif %}
</li>
{% else %}
<li id="cart-shipping-tax" class="not_set">
<h3>Shipping</h3>
<span>Applicable fees apply</span>
</li>
{% endif %}
{% if cart.discount.enabled %}
{% if cart.discount.pending %}
{% elsif cart.discount.free_shipping %}
<li>
<h3>Discount</h3>
<span>Free shipping!</span>
</li>
{% else %}
<li>
<h3>Discount</h3>
<span>-{{ cart.discount.amount | money_with_sign }}</span>
</li>
{% endif %}
{% endif %}
<li id="cart_total">
<h3>Total</h3>
<h2>{{ cart.total | money_with_sign }}</h2>
</li>
</ul>
<button id="checkout-btn" class="button" type="submit" title="Checkout">Checkout</button>
</section>
</form>
{% else %}
<div id="cart_empty">
<p>Your cart is empty! Sounds like a good time to start shopping.</p>
</div>
{% endif %}
Thanks!
There's not any known issues with the Luna theme code that prevents customers from being able to check out - you shouldn't need to edit any settings or change any code.
It sounds like your custom domain might be setup incorrectly with an IFRAME though, as this is known to cause problems with the cart page redirecting to the checkout. You can test this by using your storename.bigcartel.com URL vs. the custom domain to see if this is the case.
Since this isn't related specifically to your theme, you'll want to get in touch with Big Cartel support directly and they should be able to help troubleshoot further.
I'm using Jekyll for a static site and I'm trying to generate the blog as a subdirectory/subfolder:
http://example.com/blog
In the directory structure before running jekyll, this is blog/index.html.
I tried adding pagination by adding "paginate: 5" to _config.yml, but the generated url's were of the form:
http://example.com/page2/
i.e. no "/blog". This is fixed by:
paginate_path: /blog/page/:num
in _config.yml.
But the resulting generated pages at:
http://example.com/blog/page/2/
don't use blog/index.html as their layout. They use the root index.html. What's the point in even having the paginate_path option, then?
How do I get my blog at example.com/blog, with pagination, using Jekyll?
Use the destination key in your _config.yml file to set the base path where you want the output to be published to. For example,
paginate: 5
destination: _site/blog
Note that assuming your site is setup to server its root (e.g. "http://example.com/") from "_site" jekyll won't produce and "index.html" page at that location. Everything that jekyll builds will be under the "blog" directory, but that sounds like what you are after.
I found a fix via this page Basically it involves a bit of a hack to figure out if you are on the nth page of the blog and then includes a file that pulls in you blog section.
Create a file in _includes/custom/ called pagination. In that have your pagination code
<!-- This loops through the paginated posts -->
{% for post in paginator.posts %}
<h1>{{ post.title }}</h1>
<p class="author">
<span class="date">{{ post.date }}</span>
</p>
<div class="content">
{{ post.content }}
</div>
{% endfor %}
<!-- Pagination links -->
<div class="pagination">
{% if paginator.previous_page %}
Previous
{% else %}
<span class="previous">Previous</span>
{% endif %}
<span class="page_number ">Page: {{ paginator.page }} of {{ paginator.total_pages }}</span>
{% if paginator.next_page %}
Next
{% else %}
<span class="next ">Next</span>
{% endif %}
</div>
Now in your _layout/index.html add
{% if paginator.page != 1 %}
{% include custom/pagination %}
{% else %}
The original content of index
{% endif %}