Setting Shopify List Links Active - hyperlink

I am trying to set an active state on a link that sits within a list as the dropdown anchor. I have all the links within the drop-down menu working with active states on the LI's and a class name of highlight on the links themselves.
See code below.
<ul class="nav">
{% for link in linklists[section.settings.main_nav].links %}
{% if link.links != blank %}
<li class="dropdown has_sub_menu" aria-haspopup="true" aria-expanded="false">
<a class="dlink" href="{{ link.url }}">{{ link.title | escape }}</a>
<ul class="submenu">
{% for sub_link in link.links %}
{% if sub_link.links != blank %}
<li class="nest has_sub_menu {% if sub_link.active %}active{% if sub_link.child_active %}child-active{% endif %}{% endif %}" aria-haspopup="true" aria-expanded="false">
<a href="{{ sub_link.url }}" {% if sub_link.current %}class="highlight"{% endif %}>{{ sub_link.title | escape }}</a>
<ul class="nested">
{% for sub_sub_link in sub_link.links %}
<li {% if sub_sub_link.active %}class="active {% if sub_sub_link.child_active %}child-active{% endif %}"{% endif %}>
<a href="{{ sub_sub_link.url }}" {% if sub_sub_link.current %}class="highlight"{% endif %}>{{ sub_sub_link.title }}</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li {% if sub_link.active %}class="active {% if sub_link.child_active %}child-active{% endif %}"{% endif %}>
<a href="{{ sub_link.url }}" {% if sub_link.current %}class="highlight"{% endif %}>
{{ sub_link.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li {% if link.active %}class="active {% if link.child_active %}child-active{% endif %}"{% endif %}>
<a href="{{ link.url }}" {% if link.current %}class="highlight"{% endif %}>
{{ link.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
There is a link with a class name of dlink.
<a class="dlink" href="{{ link.url }}">{{ link.title | escape }}</a>
This is the link I need to highlight when a link from the 'submenu' aka sub_links is active.
As you can see, I have tried various if statements throughout, but on that one link, these if statements do not seem to work.
Thanks in advance for any help.

Have you tried this?
<a class="dlink{% if link.active or link.child_active %} active{% endif %}" href="{{ link.url }}">{{ link.title | escape }}</a>

Related

How can I eliminate whitespace showing up above a w3.css sidebar?

I am building a website using Jekyll and the W3.CSS Framework. I have a sidebar for navigation on large screens which collapses on smaller screens. The problem occurs on large screens. When content in the main div scrolls, the sidebar doesn't scroll with it. This leaves a white rectangle on top of the sidebar where the page header normally would be (the header scrolls up with the content).
I would like for the sidebar to scroll along with the content, or somehow hide the empty space. So far I've tried using the w3-top class, which anchors the sidebar to the top of the screen but covers up the header. I tried wrapping the sidebar and content divs with another div, which had no effect. I tried changing the background color of the sidebar which also had no effect. Here is my page layout:
<div class="w3-container w3-sidebar w3-bar-block w3-collapse w3-theme-light" style="width:250px" id="site-toc">
<button class="w3-button w3-large w3-hide-large w3-right" onclick="w3_close()">×</button>
<h4>Contents</h4>
{% assign section = site.data.contents[page.category] %}
{% for article in section.articles %}
{% if article.url == page.url %}
{% assign cls = "w3-bar-item w3-button w3-theme-l1" %}
{% else %}
{% assign cls = "w3-bar-item w3-button" %}
{% endif %}
{{ article.link-text }}
{% endfor %}
</div>
<article class="w3-container w3-main w3-theme-light" style="margin-left:250px">
<header">
<button class="w3-button w3-large w3-hide-large" onclick="w3_open()">☰</button>
<h2 style="color:#fff">{{ page.title }}</h2>
</header>
<section class="w3-text-theme">
{% if page.image %}
<img src="{{page.image}}" alt="{{ page.alt-text }}" class="w3-image" style="float:left;margin-right:16px;">
{% endif %}
{{ content }}
</section>
</article>
Any suggestions on how to fix this? This is my first web project in a decade and my javascript skills are non-existent at this point.
I decided to ditch the collapsible sidebar and try a different approach. I used the w3 fluid grid inside of a w3-row, which solved the scrolling problem.
---
layout: default
---
<div class="w3-row w3-theme-light">
<div class="w3-col l3 w3-hide-small w3-hide-medium" id="site-toc">
<div class="w3-bar-block w3-container">
<h4>Contents</h4>
{% assign section = site.data.contents[page.category] %}
{% for article in section.articles %}
{% if article.url == page.url %}
{% assign cls = "w3-bar-item w3-button w3-theme-l1" %}
{% else %}
{% assign cls = "w3-bar-item w3-button" %}
{% endif %}
{{ article.link-text }}
{% endfor %}
</div>
</div>
<div class="w3-col l6 w3-border">
<div class="w3-container w3-text-theme">
{{ content }}
</div>
</div>
<div class="w3-col l3 w3-hide-small w3-hide-medium">
<p></p>
</div>
</div>

Klaviyo Form shows twice on homepage

I embedded a klaviyo form on shopify and it showed twice on the homepage of the shop I'm working on. I'm quite new to shopify development but know django and a little rails but still get confused on reading codes.
<div class="homepage-page {{ section.settings.homepage_page_color }}" data-section-id="{{ section.id }}" data-section-type="index-page">
<!-- form -->
<div id="shopify-section-1538847772051" class="shopify-section adjust--white">
<div class="klaviyo-form-LLvHeC"></div>
</div>
{% for block in section.blocks %}
<div class="wrapper">
<div class="grid">
{% case block.type %}
{% when 'page' %}
{% if block.settings.home_page_content != blank %}
{% assign page = pages[block.settings.home_page_content] %}
{% assign page_src = page.content | escape %}
{% if page_src contains '<img' %}
{% assign homepage_page_grid = 'one-whole' %}
{% else %}
{% assign homepage_page_grid = 'large--five-sixths push--large--one-twelfth' %}
{% endif %}
<div class="grid__item {{ homepage_page_grid }}">
{% if block.settings.home_page_show_title %}
<h4 class="home__subtitle">{{ page.title }}</h4>
{% endif %}
<div class="rte homepage-page__content">
{% unless page == blank or page.empty? %}
{{ page.content }}
{% else %}
{{ 'home_page.onboarding.no_content' | t }}
{% endunless %}
</div>
</div>
{% endif %}
{% when 'text' %}
<div class="grid__item large--five-sixths push--large--one-twelfth">
<div class="rte homepage-page__content">
{% if block.settings.home_page_richtext != blank %}
{{ block.settings.home_page_richtext }}
{% else %}
{{ 'home_page.onboarding.no_content' | t }}
{% endif %}
</div>
</div>
{% else %}
{% endcase %}
</div>
</div>
{% endfor %}
{% if section.blocks.size == 0 %}
<div class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="rte homepage-page__content">
{{ 'home_page.onboarding.no_content' | t }}
</div>
</div>
</div>
</div>
{% endif %}
</div>
{% schema %}
Which part of this piece of code is the one showing the second form?
This is the form on top
This is the form that I do not need which is near the footer
You have not added the full code for the section, but as you are adding it on homepage I am sure it is a dynamic section. You can read more about Sections and their types on Shopify Docs about Theme Sections.
In you particular scenario, it looks like you are using 2 different instances of same type of section. So for 2 instances, your section code is included and rendered twice, thus the multiple forms.
I don't know the exact use case, but you can fix it by adding another block type specifically for adding klaviyo form code or moving klaviyo form code in some other file included on homepage.
This code is included anytime that you are using that type of section. If you add another section of that type , you would see 3 forms.
<div id="shopify-section-1538847772051" class="shopify-section adjust--white">
<div class="klaviyo-form-LLvHeC"></div>
</div>
The solution is to move this code outside of the section, like in some code snippet or add it as a separate block so that it is only rendered where added.

How to display bootstrap carousel with 3 items per slide using Liquid Shopify

I am trying to create a bootstrap carousel that displays 3 items per slide using Liquid.
This is my sample code
<div class="item active">
{% for course in courses %}
{% if forloop.index >= 1 and forloop.index <= 3 %}
<div class="col-md-4">
{% include "courses/box", course: course %}
</div>
{% endif %}
{% endfor %}
</div>
<div class="item">
{% for course in courses %}
{% if forloop.index >= 4 and forloop.index <= 6 %}
<div class="col-md-4">
{% include "courses/box", course: course %}
</div>
{% endif %}
{% endfor %}
</div>
At the moment, this code works but it is not dynamic. I would have to repeat the code for each loop and this becomes difficult when there are lot of courses/items that needs to be displayed.
I am wondering how I can somehow increment the forloop so it only displays 3 items/courses per slide. Kindly let me know if you need more information or code samples.
There might be a better options but this is what I figured.
<div class="item active">
{% for course in courses %}
{%- assign module = forloop.index | modulo: 3 -%}
{%- if module == 1 -%}
{%- unless forloop.first -%}
<div class="item">
{% endunless %}
{%- endif -%}
<div class="col-md-4">
{% include "courses/box", course: course %}
</div>
{%- if module == 0 -%}
{%- unless forloop.last -%}
</div>
{%- endunless -%}
{%- endif -%}
{% endfor %}
</div>
To break it down.
I wrap the whole logic in the <div class="item active"> and close it at the bottom.
I loop all of the courses
I assign a module variable which returns the module of 3 from the current forloop.index. So if you are on 3,6,9 etc.. index it will return 0.
I check if the module is 1 and if it's not the first loop ( this is because we already create the <div class="item active"> and we don't need another one and the if will be true when you are on the 4th loop, 7th loop and so on, a.k.a the place we need to put a new <div class="item"> )
I add the <div class="col-md-4">{% include "courses/box", course: course %}</div>
Finally I check if the module is equal to 0 or if this is the last loop ( because if it's the last loop we will have two </div> at the end ) and add the closing <div>.

Form twig customize style

i have a problem with customization of my form's style..
I extend the form widget in this normal way:
{{ form_label(form.tipi) }}
{{ form_errors(form.tipi) }}
{{ form_widget(form.tipi) }}
But i receive this bad HTML:
<div id="requests_tipi" class="form-control scroll-select">
<input type="checkbox" id="requests_tipi_1" name="requests[tipi][]" value="1" checked="checked">
<label for="requests_tipi_1">Appartamento</label>
<input type="checkbox" id="requests_tipi_2" name="requests[tipi][]" value="2" checked="checked">
<label for="requests_tipi_2">Casa Colonica</label>
<input type="checkbox" id="requests_tipi_3" name="requests[tipi][]" value="3" checked="checked">
<label for="requests_tipi_3">Garage</label>
<input type="checkbox" id="requests_tipi_4" name="requests[tipi][]" value="4">
<label for="requests_tipi_4">Loft</label>
</div>
I would a list like this:
<ul>
<li><label for="requests_tipi_1">Appartamento</label><input type="checkbox" id="requests_tipi_1" name="requests[tipi][]" value="1" checked="checked"></li>
...
</ul>
How can i do for customize my Symfony Form???
Thanks
This is how you customize rendering for individual field (tipi in your case):
http://symfony.com/doc/current/cookbook/form/form_customization.html#how-to-customize-an-individual-field
and this is where original formatting is defined (and where you can take an "inspiration" :) :
https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig#L45
So, something like this could work (please note i have not tested, it might be needed to be adjusted), just put following code somewhere at the top of the template file:
{% form_theme form _self %}
{% block _requests_tipi_widget %}
<ul {{ block('widget_container_attributes') }}>
{% for child in form %}
<li>
{{ form_label(child, null, {translation_domain: choice_translation_domain}) }}
{{ form_widget(child) }}
</li>
{% endfor %}
</ul>
{% endblock _requests_tipi_widget %}

Master/application layouts with Erlydtl

What's a nice way to do master/application layouts with Erlydtl? With master/application layout I mean separating the main page layout template from template with the pagecontent, but rendering them as one. Think Ruby on Rails application layouts or ASP.NET Master Pages.
Are you trying to achieve something like:
main.dtl
<html>
<head></head>
<body>
<div id="menu">Menu</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</body>
</html>
page.dtl
{% extends "main.dtl" %}
{% block content %}
Here's my content
{% endblock %}

Resources