I've added custom tags to my collection pages with help from this support forum: https://ecommerce.shopify.com/c/ecommerce-design/t/change-order-in-which-tags-are-displayed-on-collection-page-179468
The tags that appear on the collection pages are defined by linklists in the navigation. There is more about this in the discussion forum I posted above.
The snippet of code I inserted into collection-template.liquid just below the header is:
{% capture collection_taglist %}{{ collection.handle | append: "-tags" }}{% endcapture %}
{% if linklists[collection_taglist] %}
<ul class="tags tags--collection inline-list">
{% for link in linklists[collection_taglist].links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
{% endif %}
Everything is working as intended, however I cannot get the active tag to be highlighted using CSS styling. I also tried some Javascript (see below) but that does not seem to be working either.
jQuery(".tags").find("a[href='"+window .location .href+"']").each(function() {
jQuery(this).addClass("active");
});
See here: http://shopsexologyinstitute.com/collections/women (you can enter using the password 'eaclim')
Any help would be greatly appreciated!
Many thanks :)
I run into this in all sorts of circumstances. Running the following in the console outlines the issue:
jQuery(".tags").find('a').each(function(){ console.log(this.href);});
The host in the urls is not the host of the site.
You'll need to extract the pathname for comparison. There are various ways to do that but run the following in Chrome or Firefox to get the idea. URL is not widely supported so for production you'd need a different way to parse the link urls:
(function(){
var path = location.pathname;
return jQuery(".tags").find('a').filter(function(){
console.log('checking: '+ this.getAttribute('href'));
var href = new URL(this.getAttribute('href'), location.href);
console.log(href.pathname +' vs '+ path);
return href.pathname == path;
});
})();
Related
When I have an error in my custom WordPress theme I would like to output the webmaster email address which would be webmaster#mydomainname.com but I am a bit baffled on how to do this in Twig/Timber in the most straightforward way: <p class="text-danger fw-bold">PAGE ERROR - Please contact Webmaster at webmaster#{{ #notsure# }}</p>
webmaster#{{ site.url }} just outputs: webmaster#https://mywordpress.local which obviously won't work.
UPDATED: To get by I am using webmaster#{{ site.url[8 :] }} as that strips away the https:// and outputs webmaster#mywordpress.local but seems there should be a cleaner way somehow?
There are two ways to do this:
You can use Advanced custom field. Make a email field and then print that value inside the twig file. Inside advanced custom field, you can add any email you have no need to extract a domain name. For more information follow this reference: https://timber.github.io/docs/guides/acf-cookbook/
Second method is the way you doing is correct but you need to split domain name from site.url using slice method:
{% set website = "https://mywordpress.local" %} //
//calcualting length of string
{% set lengthOfWebsite = website|length %}
//using length here to split the string accordingly. 8is for split "https://" from actual domain name.
{% set domainName = website|slice(8,lengthOfWebsite) %}
webmaster#{{domainName}}
For the first line of code in your case will be:
{% set website = site.url %}
For the last line
webmaster#{{domainName}}
can also be replaced by:
{% set actualDomainName = 'webmaster#' ~ domainName %}
{{actualDomainName}}
I am new to drupal and I tried to add a simple image as static in the html.html.twig page.
To display this image in the home page only I added this condition
{% if is_front %}
{% endif %}
What is the condition to add it in another specific page example /contact/
I tried this code inside the page but it does not work, should I wrap it with some codes?
if(drupal_valid_path('contacts') == 1) //this exists
{
print_r('Exists!');
}
Please help! Many thanks.
Your question is mixing twig with a drupal 7 function. I suppose anyway you're on D8/D9.
I also suppose the "contacts" page is a node. If it is somethings else - e.g. a view page - instead of checking for the node, you may have to check the route.
There are various approach, two possible would be:
A hook preprocess where you load the node if exists
function hook_preprocess_html(&$variables) {
$node = \Drupal::routeMatch()->getParameter('node');
if ($node instanceof \Drupal\node\NodeInterface) {
$variables['node'] = $node;
}
}
And the in the twig check the id of the node is the right one
override the html.html.twig for the specific node, e.g. html--node--10.html.twig. In this case I'd suggest not to duplicate all the content of the base html.html.twig, but to use the embed tag to override only the appropriate block.
I want to display S1 only instead of season 1. Thus I need to truncate season and put only 1 and add "S" at the front.
<a href="{% url 'season_detail' slug=all_episode.season.slug %}">
{{ all_episode.season}}
</a>
How do I truncate the word "season"?
Edit:
Here's what I did again
I created templatetag folder inside my app
then added init.py and seasonify.py
and inside seasonify.py I added
from django import template
register = template.Library()
#register.filter
def seasonify(value):
return value.replace('season', 'S')
then inside my template
I added
{% load seasonify %}
and {% episode.season|seasonify %}
Your best bet is to write a custom template filter. The logic is simple:
#register.filter
def seasonify(value):
return value.replace('season', 'S')
then simply use it in your templates:
{{ all_episode.season | seasonify }}
See Django docs for details on where to put this code.
I have a content type with a field field_gallery that has multiple images.
I would like to get all these images printed in my twig file: page--front.html.twig. So i want to get these images in my frontpage and not only in their nodes. So far i could get them in their nodes with
{{ file_url(node.field_image.entity.fileuri) }}
but not somewhere else (of course since its using node). Is this possible?
Should i create a preprocessor function for page? Any guidance for this?
Yes, This is possible. This question is have two sub tasks :
1) Creating page--front.html.twig file
For creation of this twig file, you'll have to clone file i.e. page.html.twig and rename it with page--front.html.twig
2) Fetch Raw values of Image fields
You need to update code in my .theme file:
function THEMENAME_preprocess_node(&$variables) {
if ($variables['node']->field_image->entity) {
$variables['image_url'] = $url = entity_load('image_style', 'medium')->buildUrl($variables['node']->field_image->entity->getFileUri());
}
}
Then in page--front.html.twig file I have this:
{% for item in image_url %}
<div class="featured-thumb">
<img src="{{ item }}"/>
</div>
{% endfor %}
I have this code in my Twig template:
{% for entity in entities %}
<ul>
<li>{{ entity.getName }} | Editar - Eliminar
{{ render(controller('ProductBundle:DetailGroup:index', { 'parent_id': entity.getId })) }}
</li>
</ul>
{% endfor %}
<dl class="sub-nav">
<dd>Add new</dd>
</dl>
<script>
$(function() {
$("#detail_group_create").click(function() {
loadCenterLayout(Routing.generate('detail_group_new'));
});
});
</script>
Because I'm calling this {{ render(controller('ProductBundle:DetailGroup:index', { 'parent_id': entity.getId })) }} I get the Add new link twice. I don't want to create a new function to handle the same, how did yours deal with this? Any tips or advice?
If I understood you correctly, you want to have index with dynamic center part of the layout. You either have to have:
separate controller functions or
single controller function but some GET/POST parameter and big IF/ELSE branching.
In second case you must not rely on #Template annotation (in case you use them) but rather on manually calling appropriate template render based on which branch you're in.
Did I get your issue right?