Hoping somebody can provide a little insight into an issue I'm having with Nunjucks. Here's the scenario...
I'm trying to produce a single page that loads some data and an HTML file from a JSON Data file. I'm using a Macro to loop through the Data JSON. Within the macro I can say:
templates/elements/{{ title | lower | replace(" ", "-") }}.html
And it will output a relative URL to the HTML snippet I want - title comes from the JSON.
When I try to do the same thing as an include, I get parsing errors in Gulp.
{% include "../elements/" + {{ title | lower | replace(" ", "-") }} + ".njk" %}
My understanding is that this is an order of operations thing with Nunjucks. So how do I get around this? I need to load the HTML snippet for several files and it doesn't make sense to store it in the Data JSON.
Hopefully that makes sense!
Any thoughts are appreciated.
Thanks,
Brian
Related
Hi im having trouble trying to make an img src change number(sku) dynamically based on which product i have selected. - its a bit difficult when i dont have access to the base HTML and only liquid code and templates.
(see screenshot 1)
I need help with creating a codestring that makes the SKU=(number) dynamic - so that it changes the SKU based on what product i have selected on the website.
So that if i select product A it becomes sku=productA
and if i select product B it becomes sku=productB
I hope someone can help.
Kind Regards Alexander
I tried putting in all the SKU's with , in between. and that didnt work
If you are in the product page you should be able to use {{ current_variant.sku }} to dynamically show the SKU in the src.
I'm using Docusaurus to publish documentation for an open source library's API. The headings of my source markdown files correspond to the names of methods and properties for classes in the library. This all works fine.
However, the anchors that are created in the HTML are all lowercase. I want them to respect the capitalization used in the markdown file.
For example, this markdown header:
###.doSomething()
Generates the following HTML:
<h3>
<a aria-hidden="true" tabindex="-1" class="..." id="dosomething"></a>.
<code>.doSomething()</code>
<a class="..." href="#dosomething" title="...">#</a>
</h3>
As you can see, camelCase is transformed to lowercase. I would like to keep capitalization intact. Is it possible?
P.S. The markdown files are automatically generated from jsdoc comments. In jsdoc, links to a method or properties include capitalization.
TL;DR
Inside your project, navigate to the directory node_modules > github-slugger;
Open the index.js file;
Remove the line if (!maintainCase) string = string.toLowerCase()
The function will become something like this:
function slugger (string, maintainCase) {
if (typeof string !== 'string') return ''
// if (!maintainCase) string = string.toLowerCase() <-- remove this!
return string.trim()
.replace(specials, '')
.replace(emoji(), '')
.replace(whitespace, '-')
}
IMPORTANT!
If you update the docusaurus, you may need to apply this change again;
It may be necessary to edit the doc to see the changes, because of cache. Here I edited the doc file and it worked;
You must restart the docusaurus service after you make this change. And probably needs to clear the cache with npm cache clear --force;
Also, I think you should delete the folder .docusaurus to force the rebuild of all documents.
RESULT
The .md file:
---
id: intro
---
# Random title
### WriNTinG with CaSeS
test 1
### .doAnotherThink()
test 3
### .doCamelCaseWithSeveralLETTERS()
test 3
ROADMAP
I must say that this one was hard. First I tried to track down the anchor tags, then the description. Eventually I found about the github-slugger, and looked like that was the way.
But once I made the changes, nothing had happened to the document! So after hours trying, I gave up… Then, just for curiosity, I decide to see what the slug function did to the document, by adding a second header with the same name. And — luck! — it kept the original case.
It turns out that you can simply use explicit IDs to solve this issue: https://docusaurus.io/docs/next/markdown-features/headings#explicit-ids
How does one go about formatting a phone number in Shopify using Liquid? The shop.phone object seems to output in a way that is specific to shop settings.
Much can be accomplished with only a few Liquid filters.
For example, we wanted to make phone numbers clickable within email notifications. Below is how shop.phone outputs the number for our shop.
(555) 555-5555
Fortunately, the filter method outputs directly to the page so there is no need to assign a variable.
{{ shop.phone | remove: "(" | remove: ")" | replace: " ", "-" }}
Our finished snippet looked like this:
{{shop.phone}}
my variants title is “pack/4 bottles:4/PK”
“4/PK” is needed for shipping company to catch specific item.
However, it looks ugly when "4/PK" is displayed on page
Is there a way to hide it? Which liquid template should i touch?
Should I use
{{variant.title|move:'4/PK'}}
where should i put this code?
While this sounds more like something that should be assigned as an option for your variants instead of in the title, you can hide the part of the variants title that you don't want via using split and first
https://help.shopify.com/themes/liquid/filters/string-filters#split
split can be used to split a string (in this case your variant.title) into an array based on a set delimiter to divide it.
So you could do something only the lines of
{{variant.title | split: ':' | first }}
In your case, the output of the above would be: pack/4 bottles.
As for which liquid templates you will need to edit this into ... it will depend on your store. However some common areas would be:
product.liquid
cart.liquid
I highly recommend you read the the shopify liquid documents Here
Also, make sure to make a backup theme before doing any liquid changes in your theme that you are unsure of.
Hope this helps!
I'm trying to render out a plaintext string for emailing using the Jade view engine. I'm having trouble getting the right syntax for a plaintext output using a for each loop. Works fine with regular HTML, just not the plain text version:
| Bill to:
| #{customer.active_card.name}
|
- each lineitem in invoice.lines
= lineitem.description
Outputs
Bill to:
Freddy Mac
<p>Line item 1 description</p><p>Line item 2 description</p>
I can't figure out how to format the lineitem.description line so that I get a simple plaintext output so that it would look like this:
Bill to:
Freddy Mac
Line item 1 description
Line item 2 description
Any suggestions on how to tackle this ridiculously obscure edge case for Jade?
Many thanks!
Are you sure the <p> tag isn't really in the lineitem.description variable value itself? I tried your example and didn't get an unexpected <p> tag.
Second note that if you want plain text, you probably don't want jade's default HTML escaping, so use != instead of =.
For what it's worth, jade is really heavily focused on HTML specifically and using it for plain text is probably going to be annoying. Have you considered an alternate templating language like underscore templates?