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.
Related
I would like to implement that on my sidebar dropdowns but Liquid being pretty new to me, I don't seem to find a way to do it.
On JS I would have a for loop closing all the items that contains the 'open' class for example then add that class to the single item.
I wish I add tried more but I feel like I don't have the 'Liquid logic' yet..
<a href="{{ link.url }}"
class="mobile-nav__link mobile-nav__link--top-level"
id="Label-{{ child_list_handle }}"
{% if link.active %}data-active="true"{% endif %}>
{{ link.title }}
</a>
<div class="mobile-nav__toggle">
<button type="button"
aria-controls="Linklist-{{ child_list_handle }}"
{% if link.active or link.child_active %}aria-open="true"{% endif %}
class="collapsible-trigger collapsible--auto-height {% if link.active or link.child_active %}is-open{% endif %}">
{% include 'collapsible-icons' %}
</button>
The interesting parts are the {% if link.active %}
First, I'm not sure what's setting link.active to true,
Then I also don't know how I would select these dropdowns element to use them in a loop.
Now what I would like to do is to have a for loop that would set link.active to false on all dropdowns and then setting it to true on the single element.
You don't have to give me the total answer, just a way for me to figure out how to select all the elements and what causes link.active to be true.
Thanks in advance.
picture of said dropdowns
The code is written in Django-Python. The project is created using the models in Django and shown in navigation as dropdown menu.
The drop-down menu is shown using the Django-HTML as shown in following way:
This code works well for dropdown menu. but I want to open the different project url based on click.
I am not sure exactly how to assign id and use javascript to code do onclick bsed html loading !!
I have tried some javascript code, but I am novice.. so If I put here.. it would be more confusing.
<div class="dropdown-menu" id="navbarDropdown">
{% if project_records %}
{% for p in project_records %}
{{ p.pName }}
{% endfor %}
{% endif %}
</div>
I expect that projectB.html will be loaded if click projectB in dropdown menu in navigation bar.
Add the href attribute in anchor tag appropriately. Assuming http://someurl/ is the prefix and the project name is the suffix of your project URLs, you may form the target URL in a variable and use it. Here is your modified code:
<div class="dropdown-menu" id="navbarDropdown">
{% if project_records %}
{% for p in project_records %}
{% with project_url="http://someurl"|add:p.pName %}
{{ p.pName }}
{% endfor %}
{% endif %}
</div>
I am looking to customize a Twig template by making the display of an element (i.e. a url link) sensitive to the current date. As I'm fairly new to Twig, would Twig have any in-house ways to facilitate this, or would I most likely utilize some Javascript to achieve this?
Thanks for any leads.
You could use the date-filter and the special keyword NOW to achieve this
{% if "NOW"|date('U') > '2018-06-10'|date('U') %}
Show this
{% endif %}
{% if "NOW"|date('U') > '2029-06-10'|date('U') %}
Don't show this
{% endif %}
do note that you could just pass the date as a DateTime to your template to avoid the static code in the template`
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.
I have an html file which I am rendering with jinja2 in python, which has some div sections like
<div id="imdb">
{{imdb_output}}
</div>
Now even when the value of imdb_output variable is returned None from its function in python file, as expected HTML still displays the div section although with no content, but with its css!
But what do I need to do so that even the empty div section does not appear if imdb_output has no values to display?? Do I need to add some JS?
Please help!
Here is a screenshot of the problem:-
http://imgur.com/qVfk2
use this
{% if imdb_output %}
<div id="imdb">
{{imdb_output}}
</div>
{% endif %}
You should read jinja2 documentation for template designers
Just check if imdb_output is empty:
{% if imdb_output %}
<div id="imdb">
{{imdb_output}}
</div>
{% endif %}