How to load http://example.myshopify.com/collections/all content
to my shopify frontpage http://example.myshopify.com/
I figured out a way that I hardcode <script>window.location.href='collections/all'</script> on index.liquid, but I'm pretty sure thats' not a clean way.
and I try to copy whole collection.liquid's code to index.liquid, but it prompt me Liquid error: Array 'collection.all.products' is not paginateable. error and no product showing the index.liquid page.
Any idea how to load collections/all on shopify's front page?
I'm using Timber Framework as people recommend to start to build a theme
inside
In the Timber framework, you could change this line in index.liquid:
{% for product in collections.frontpage.products limit:4 %}
to:
{% for product in collections.all.products %}
Depending on how many products you have, you probably still want to limit how many are displayed, or paginate the output.
E.g.
{% paginate collections.all.products by 12 %}
{% for product in collections.all.products %}
...
{% endfor %}
{{ paginate | default_pagination }}
{% endpaginate %}
You include this:
{% for product in collections.all.products %}
// here you have access to each product
{% endfor %}
This will loop all of your products.
You can review http://cheat.markdunkley.com/ what product variables you have access to in that loop.
Related
I have a lot of plots on my page and I don't want them to fire all on page load, but trigger them as the user scrolls down, or after a while.
I use the components module, so I'm unsure where to put a setTimeout or something like that.
in Django view I have:
from bokeh.resources import CDN
from bokeh.embed import components
script, div = components(plot.make_box_plot(), CDN)
and then in tag:
{% if div %}
{{ div | safe }}
{% endif %}
{% if script %}
{{ script | safe }}
{% endif %}
Does bokeh have some api for this?
This doesn't work as I get a js syntax error:
<script>
window.plot_script = {{ script }}; // and then use it in a js file inside setTimeout
</script>
I am trying to show blog posts on product pages by matching their tags. I have this code, but the problem is it's fetching only the latest 50 posts. How can I loop through all articles?
{% for article in blogs.news.articles %}
{% for tag in product.tags %}
{% if article.tags contains tag %}
{{ article.title }}
{% endif %}
{% endfor %}
{% endfor %}
Shopify have a limit of 50 items per loop for collections and blogs. This means that you can't go outside those limitations.
This limitation is set in order to keep the requests to their server as small as possible.
So the short answer is that you can't loop more than 50 articles or products.
I am trying to merge JS files together in 1 file, however I need to set conditions using the if statements within the js file.
I have created file.js.liquid but it does not seem to working; I added a test for example:
{% if template contains 'index' %}
console.log('homepage loaded');
{% endif %}
Example of what i am trying to do, of course have plenty i need to do.
{% if settings.the_simpsons_enabled and settings.simpsons_video_enable %}
// video popup
$(".video-popup").videoPopup();
{% endif %}
The conditional statements are also not working within scss.liquid files either:
{% if template contains 'index' or template contains 'collection' or template contains 'product' %}
#import url("{{ 'owl.carousel.scss' | asset_url }}");
{% endif %}
Any ideas why if would not be working or if its even possible? I assume it is being a liquid file.
The Liquid extension on such files like CSS or JS allows use of Liquid variables but not statements.
So {{ write_my_liquid_var_here }} will work. {% if liquid_statement %}do something{% endif %} won't.
Regarding Shopify and SASS
The following won't work as you can't use #import in Shopify's SASS files.
#import url("{{ 'owl.carousel.scss' | asset_url }}"); //This will not work
Regarding using conditional liquid statements in .js.liquid files
I don't know everything about this subject, but I do know the following two things.
1) Check out this thread and you'll see that this type of statement won't work because js files are parsed independent of normal liquid templates, so it would have no idea which template you're viewing.
{% if template contains 'index' %} //This will not work
A better place to put the above logic would be at the bottom of your theme.liquid file above the </body> tag. However this won't help you with what seems to be your goal of reducing HTTP requests by using one JavaScript fie.
2) However, you can access values in your settings_data.json file
{% if settings.the_simpsons_enabled and settings.simpsons_video_enable %} //This will work
I hope this helps
thanks for checking out my question.
The problem I am having is with Shopify, Liquid, JQuery and Javascript.
I have a JQuery / Liquid slider that has four different categories. NBA, NHL, MLB and MLS. When the page loads..
jQuery(document).ready(function ($) {
$(".ncaa-carousel-filter").addClass("active");
$("#ncaa-carousel").toggle();
This makes it so that no matter what section of the site you are on, (NBA, NHL, etc..) you will still see the NCAA carousel until you click on the appropriate toggle.
var carousel = "-carousel";
var carouselFilter = "-carousel-filter";
$("#carousel-filters").on("click", ".ncaa-carousel-filter", function() {
$("[class*="+carouselFilter+"]").removeClass("active");
$(this).addClass("active");
$("[id*="+carousel+"]").hide();
$("#ncaa-carousel").toggle();
});
I have broken out the sliders and trying to use Liquid to display them.
{% if collection.current_type or collection.handle contains "mlb" %}
{% include 'mlb-slider' %}
{% elsif collection.current_type or collection.handle contains "nba" %}
{% include 'nba-slider' %}
{% elsif collection.current_type or collection.handle contains "mls" %}
{% include 'mls-slider' %}
{% elsif collection.current_type or collection.handle contains "nhl" %}
{% include 'nhl-slider' %}
{% else %}
{% include 'ncaa-slider' %}
{% endif %}
I believe the problem is that the sliders are set to display: none until toggled. So when I go to include them, they aren't showing as they are set to display: none.
If I remove that CSS I end up with 4 sliders on my page as they are all showing.
I think this is a question of how I have it set up, I need some help on the logic.
This fiddle shows most of the code I am working with. http://jsfiddle.net/asx90842/
Maybe I can remove the display: none CSS and use the Liquid if statement I've developed in place of the HTML code you see in the fiddle?
Any help would be great!!
Thanks so much!
First, instead of toggling ncaa at page load, why don't you just set it to active in your html templates? Simply put a .active class and in your stylesheets do .active{display:block} or whatever you like. If you can use data-* attributes in your buttons it will be even better since you will not have to use regex to get a corresponding id.
So your html will be like this
<button class="ncaa-carousel-filter active" data-target="ncaa-carousel">College</button>
<div style="margin-bottom:10px;" class="teams-carousel clearfix active" id="ncaa-carousel">
Second, all five carousel button/div all share the same logic so you can just write one listener for all of them:
$("#carousel-filters").on("click", "button", function() {
$("#carousel-filters button").removeClass("active");
$(this).addClass("active");
$(".teams-carousel").hide();
// Use data attributes to get corresponding div id
var id = $(this).data('target');
$(id).toggle();
});
Lastly, I am not very familiar with ruby/liquid but I bet there's a for loop structure that you can use to write just one block and iterate over it with different values.
One way to approach this would be to assign a liquid variable which could be re-used in the Javascript class/id selectors. I would include the following liquid near the top of the page.
{% if collection.current_type or collection.handle contains "mlb" %}
{% assign sport_league 'mlb' %}
{% elsif collection.current_type or collection.handle contains "nba" %}
{% assign sport_league 'nba' %}
{% elsif collection.current_type or collection.handle contains "mls" %}
{% assign sport_league 'mls' %}
{% elsif collection.current_type or collection.handle contains "nhl" %}
{% assign sport_league 'nhl' %}
{% else %}
{% assign sport_league 'ncaa' %}
{% endif %}
With that included, you'll have a new variable, sport_league representing the common string of characters used to represent any particular sport / carousel. For example, you'll now be able to write the following at the end of your Javascript to display just the carousel that's wanted.
$('#{{ sport_league }}-carousel').show();
This is simply javascript that executes once, using the variable sport_league to negate the display: none CSS and show the appropriate carousel.
On my django app I display a list of the user's facebook friend, using django-facebook.
The friends are sorted depending on there "activity" (if they are active or not).
I would like to refresh this list on my page without refreshing the whole page.
Here is my view:
class fb_friend(request)
if request.user.userprofile.facebook_id:
# Get Friends
profile = request.user.get_profile()
idle_friends = profile.get_idle_facebook_friends()
active_friends = profile.get_active_facebook_friends()
offline_friends = profile.get_inactive_facebook_friends()
friend_groups = (active_friends, idle_friends, offline_friends)
In my template:
<div>
{% for group in friend_groups %}
{% for friend in group %}
<p>{{ friend.name }} ({{ friend.online_presence }})</p>
{% endfor %}
{% endfor %}
</div>
My idea would be to put the content of my view in an other view, and then use a JQuery request with a setInterval.
But the problem is that I only know how to get one element of a page with a JQuery request.
So my question is how can I get the whole div with a JQuery get request and display it in my template?
Thank you for your help!