I rely on template inheritance system to insert extra_css and/or extra_js into my pages:
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Core CSS -->
{% block extra_css %}
{# Override this in templates to add extra stylesheets #}
{% endblock %}
</head>
<body>
{% block content %}{% endblock content %}
<!-- Core JS -->
{% block extra_js %}
{# Override this in templates to add extra javascript #}
{% endblock extra_js %}
</body>
</html>
page.html:
{% extends "base.html" %}
{% block extra_css %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
{% endblock %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block content %}
<div class="blog-post">
<!-- Custom HTML -->
{% block content %}
{% include_block page.body %}
{% endblock %}
</div><!-- /.blog-post -->
{% endblock %}
{% block extra_js %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script type="text/javascript">
// Custom JavaScript
</script>
{% endblock extra_js %}
This works great, thus extra css/js is indeed inserted where it belongs.
The problem arise if I need to use streamfield where one of its block templates need custom css/js. In this case custom resources are inserted along with the block, but not in the specified locations in the base.html.
For instance if extra_js from the page.html in the example above has been added to the block template instead, then select2 would complain about jquery not being present and it would be totally right, because it's inserted with the block, but not as intended after the Core JS libraries.
Loading jquery twice leads to other issues: https://stackoverflow.com/a/25782679/2146346
Other option is to load all block dependencies into the page, but it would fill pages with redundant resources as not every block from the streamfield might be used on the page.
Are there other options?
UPDATE: here’s a much better way that uses JavaScript to only load libraries once: https://github.com/FlipperPA/wagtailcodeblock/blob/main/wagtailcodeblock/templates/wagtailcodeblock/code_block.html#L6
I haven't come up with a way I like of doing this yet. The tools for doing this on the Wagtail editor side are nice. However, here's what I do for WagtailCodeBlock:
{% load static wagtailcodeblock_tags %}
{% spaceless %}
{# This is ugly, as it'll inject this code for each block, but browsers are smart enough to not load each time. #}
<script src="{% static 'wagtailcodeblock/js/prism.min.js' %}" type='text/javascript'></script>
<link href="{% static 'wagtailcodeblock/css/prism.min.css' %}" rel="stylesheet">
{% load_prism_theme %}
{% for key, val in self.items %}
{% if key == "language" %}
<script>
language_class_name = 'language-{{ val }}';
</script>
{% endif %}
{% if key == "code" %}
<pre class="line-numbers">
<code id="target-element-current">{{ val }}</code>
</pre>
<script>
var block_num = (typeof block_num === 'undefined') ? 0 : block_num;
block_num++;
document.getElementById('target-element-current').className = language_class_name;
document.getElementById('target-element-current').id = 'target-element-' + block_num;
</script>
{% endif %}
{% endfor %}
{% endspaceless %}
In this example, I load the JS/CSS assets in each, and let the browser settle it out. It also assumed jQuery is loaded at the parent level. However, it is also possible to use the JavaScript context to ensure things are only loaded once, which is my next step. For now, it isn't pretty but it works.
On the Wagtail editor side, there's the #property media. I wish there was something analogous on the rendered side:
class CodeBlock(StructBlock):
"""
Code Highlighting Block
"""
WCB_LANGUAGES = get_language_choices()
off_languages = ['html', 'mathml', 'svg', 'xml']
language = ChoiceBlock(choices=WCB_LANGUAGES, help_text=_('Coding language'), label=_('Language'))
code = TextBlock(label=_('Code'))
#property
def media(self):
theme = get_theme()
prism_version = get_prism_version()
if theme:
prism_theme = '-{}'.format(theme)
else:
prism_theme = ""
js_list = [
"https://cdnjs.cloudflare.com/ajax/libs/prism/{}/prism.min.js".format(
prism_version,
),
]
for lang_code, lang_name in self.WCB_LANGUAGES:
# Review: https://github.com/PrismJS/prism/blob/gh-pages/prism.js#L602
if lang_code not in self.off_languages:
js_list.append(
"https://cdnjs.cloudflare.com/ajax/libs/prism/{}/components/prism-{}.min.js".format(
prism_version,
lang_code,
)
)
return Media(
js=js_list,
css={
'all': [
"https://cdnjs.cloudflare.com/ajax/libs/prism/{}/themes/prism{}.min.css".format(
prism_version, prism_theme
),
]
}
)
class Meta:
icon = 'code'
template = 'wagtailcodeblock/code_block.html'
form_classname = 'code-block struct-block'
form_template = 'wagtailcodeblock/code_block_form.html'
I hope this gives you some ideas, and I'm all ears if you come up with a better way. Good luck.
Could you create another js block that you only add into the streamfield block template? So in base.html you'll have extra_js block as well as streamblock_js. You can have your jquery in extra_js and the extra dependency for the streamblock in streamblock_js. And if you have multiple custom css/js per streamblock on one page, you could add as many extra blocks in the base.html template to load all the dependencies. I'm not sure if this will work, but that's my idea.
Related
What I want to do:
Capture two variables {{section.settings.{{title}}_modal_title}}
Context:
The links in the linklist are not really used as links, but purely so user can reorganize it in their Shopify portal.
External javascript file creates elements (modals) on click event, value from section.settings.XXX_modal_title is supposed to be used in the created modals.
The linklist:
<ul class="menu">
{% for link in linklists.main-menu.links %}
<li data-menu="{{ link.title | upcase }}" class="menu-link">
<p class="menu-title">[{{ link.title | upcase }}]</p> <-- Click event
</li>
{% endfor %}
</ul>
What I tried:
My first try was adding the liquid tag itself with .insertAdjacentHTML('afterbegin', {{section.settings.${attLowerCase}_modal_title}}) when the element is created, but soon realized that liquid renders the values first. The output of doing this is literally "{{ }}"
My second try was to capture two variables and put it in a hidden input.
{% assign title = link.title | downcase %}
{% capture section_title_variable %}
{{section.settings.{{title}}_modal_settings}}
{% endcapture %}
<hr class="item-line">
<p class="ueq-menu-title">[{{ link.title | upcase }}]</p>
<input type="hidden" id="about_modal_title" value="{{section_title_variable}}">
In depth example:
section.settings
{
"type": "text",
"id": "about_modal_title",
"label": "About window title",
"default": "ABOUT"
},
User clicks on link ABOUT
<ul class="menu">
{% for link in linklists.ueq-menu.links %}
<li data-menu="{{ link.title | upcase }}" class="menu-link"> <-- "ABOUT"
{% assign title = link.title | downcase %} <-- downcase to "about"
{% capture section_title_variable %}
{{section.settings.{{title}}_modal_title}}
{% endcapture %}
<hr class="item-line">
<p class="menu-title">[{{ link.title | upcase }}]</p>
<input type="hidden" id="about_modal_title" value="{{section_title_variable}}"> <-- captured should look like this {{section.settings.about_modal_title}}
</li>
{% endfor %}
</ul>
on click event, get the value from hidden input, and use it when creating elements.
"Why not use {% javascript %}?"
I prefer to do it this way, since most of my script files are external. I like to keep it that way.
"Why capture it like that?"
The links in the linklist are already known, this was in the design. Thats why in sechema one of them is called "about_modal_title". Since this is used inside a for loop, this was the only way I could come up with to connect the title and schema settings with each other.
If someone knows a better way to do this instead of putting it in a hidden input, please let me know :)
In proper Liquid syntax, curly-brackets are never embedded inside curly-brackets
The syntax {{ something_{{ you }}_want }} is illegal Liquid syntax - once an expression is started, using either {{ or {%, everything up to the next }} or %} is evaluated as one template command.
In your example, you're looking to combine two strings in order to get the name of a setting that you want to access. In a dedicated programming language, we would expect there to be nice shortcuts for something like this. Liquid, however, is first and foremost a templating language, and doesn't have such shortcuts. Instead, we will need to accomplish our goal in two steps.
The first thing we need to know is that we can access properties in two ways: {{ settings.fieldname }} is equivalent to {{ settings['fieldname'] }}
Thanks to that second syntax, we can access an arbitrary setting using a variable:
{% assign field = 'fieldname' %}
{{ settings[fieldname] }}
So to do something more complicated, we just need to use assign (or capture - just be aware that capture includes whitespace as well!) to get a variable that contains the name of the field we want to access, then pass that in to the square brackets:
{% assign title_field = link.title | downcase | append: '_modal_title' %}
{{ section.settings[title_field] }}
I have the following string:
“Title
Content
Title
Content”
I want to extract each title and each content.
I have been trying to use Shopify remove operator but it’s getting really long and I’m not sure if there is a easier solution?
Using split filter might be the answer here!
However for this use case to work you need to add custom separators between each title/content block, if you do have access to the content, it would look something like this:
<!-- Let's assume this content is coming from page.content -->
<h2>Title 1</h2><!-- inner-split --><p>content 1</p>
<!-- outer-split -->
<h2>Title 2</h2><!-- inner-split --><p>content 2</p>
<!-- this split the content into title/content blocks -->
{% assign content_blocks = page.content | split: '<!-- outer-split -->' %}
<!-- Loop through all blocks to split then extract title/content -->
{% for block in content_blocks %}
{% assign title_content = block | split: '<!-- inner-split -->' %}
<!-- title -->
{{ title_content[0] }}
<!-- content -->
{{ title_content[1] }}
{% endfor %}
Please help me to resolve this code. I have some % off discount to show based on the variant choose, its not getting changed on clicking on pack of 2 and pack of 3, as we have different % in discounts. This is my shopify product url https://us.buywow.com/products/wow-apple-cider-shampoo-cocounut-oil-conditioner-set-500ml
Callback function is written, but I am not understanding why its not changing
Product.liquid
<!-- /templates/product.liquid -->
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
.
.
.
.
{% comment %}
------ Product Price ------
{% endcomment %}
<div class="product_prices">
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<h4 id="ProductPrice" class="product-regular-price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</h4>
<span class="old-price">{{ current_variant.compare_at_price | money }}</span>
{% if on_sale %}
<div class="save_money_block">
<span class="save_off">
{% if current_variant.compare_at_price > current_variant.price %}
{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 |
divided_by: current_variant.compare_at_price | money_without_currency | times: 100
| replace: '.0', ''}}% OFF{% endif %}
</span>
</div>
{% endif %}
</div>
.
.
.
.
.
<script>
(function(s3d) {
if (!s3d) {
console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
return;
}
{% for variant in product.variants %}
s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
{% endfor %}
})(window.Shopify3d);
</script>
<script>
var selectCallback = function(variant, selector) {
timber.productPage({
money_format: "{{ shop.money_format }}",
variant: variant,
selector: selector
});
};
</script>
On selecting Pack Of 3 - 60% OFF should be the resultant.
that is not happening auto refresh.
Remember that Liquid is compiled server-side before the document is sent to the client's browser, so the result is not dynamic and will not be able to automatically update when a variant is selected.
In order to make the percent-off part change appropriately when the selections change, you will need to add javascript code that will run whenever the variant selection changes. Fortunately, you already have a function that will do that, in your theme it happens to be called selectCallback, which then calls a function called timber.productPage to do all the heavy lifting.
You will want to update either selectCallback or timber.productPage with the javascript code needed to update your percent-off field. (The latter is probably the better option in your case, as that would keep all of the relevant price-display-updating code close together.) The variant parameter will either be the currently-selected variant or undefined if the current option selections do not match any of the variants in the product; the selector parameter will contain a lot of generally-useful information, such as the parent product object.
Hope this helps!
In the selectCallback function add next code:
<script>
var selectCallback = function(variant, selector) {
var $discount = $('#offpercent'),
$productPrice = $('#productPrice'),
$comparePrice = $('#comparePrice');
alert(Shopify.formatMoney(variant.price, Shopify.money_format));
alert(Shopify.formatMoney(variant.compare_at_price, Shopify.money_format));
var percDiff = Math.round((variant.compare_at_price-variant.price)/variant.compare_at_price * 100);
alert(percDiff);
$discount.html(percDiff);
};
</script>
Shopify's tutorial for color swatches isn't supported yet for Slate,
and the select callback referenced no longer exists in the code base. Is it possible to modify this tutorial to work on Slate themes to create radio buttons or swatches instead of a dropdown for selecting variants on the product template?
Yes. I was able to get this tutorial to work by modifying the code slightly. This workaround is only going to be relevant until the shopify tutorial is updated to correspond to Slate.
Follow the tutorial as per the directions.
When you get to the step "Locate your selectCallback function",
you will notice there is no selectCallback function in Slate. Yikes!
Instead find "_onSelectChange" in theme.js and add the code there.
This is the final function with the swatches code added:
/**
* Event handler for when a variant input changes.
*/
_onSelectChange: function() {
var variant = this._getVariantFromOptions();
this.$container.trigger({
type: 'variantChange',
variant: variant
});
if (!variant) {
return;
}
// BEGIN SWATCHES
var selector = this.originalSelectorId;
if (variant) {
var form = $(selector).closest('form');
for (var i=0,length=variant.options.length; i<length; i++) {
var radioButton = form.find('.swatch[data-option-index="' + i + '"] :radio[value="' + variant.options[i] +'"]');
if (radioButton.size()) {
radioButton.get(0).checked = true;
}
}
}
// END SWATCHES
this._updateMasterSelect(variant);
this._updateImages(variant);
this._updatePrice(variant);
this.currentVariant = variant;
if (this.enableHistoryState) {
this._updateHistoryState(variant);
}
},
Then, once you've completed the tutorial, you will notice it's still not working. This is because the code you add to theme.liquid uses a class that is no longer on your variant Selects.
On product.liquid (this is a Section on most Slate themes) Add the class "single-option-selector" to your selects, like so:
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js">
<label for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select
id="SingleOptionSelector-{{ forloop.index0 }}"
class="single-option-selector"
data-single-option-selector
data-index="option{{ option.position }}">
{% for value in option.values %}
<option value="{{ value | escape }}"
{% if option.selected_value == value %}selected="selected"{% endif %}>
{{ value }}
</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
Now, the tutorial should work as it's supposed to. I hope this helps someone out!
My view has:
{% if (process.env.NODE_ENV == 'development') %}
<!-- Livereload script rendered -->
<script type="text/javascript", src="http://" + req.host + ":35729/livereload.js"></script>
{% endif %}
So I'd expect the req.host to be replaced with localhost or something. But what renders is:
<script type="text/javascript", src="http://" + req.host + ":35729/livereload.js"></script>
My express config has: app.set('view engine', 'html');
You need to enclose your variable in the variable controls. {{ req.host }}
{% if (process.env.NODE_ENV == 'development') %}
<!-- Livereload script rendered -->
<script type="text/javascript", src="http://{{ req.host }}:35729/livereload.js"></script>
{% endif %}