I am trying to show within a New Order notification whether an item is possible of being shipped next day or not. The customer should have to choose next day shipping first for this to even trigger at all but if they do then each line item should display Next-Day item or Not Next-Day item dependent on whether each product is tagged with Next-Day or not. The below mechanics work in Shopify Flow but not in this notification and I suspect the variables are worded incorrectly. Please help debug the below.
{% if order.shippingLine.title contains "Next Day" %}
{% for line_item in order.line_items %}
<br><br>
<span class="muted" style="text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 11px; line-height: 1px; font-weight: normal; text-transform: none; color: #e62026;">{% if line_item.variant.product.tags contains "Next-Day" %}Next-Day item{% else %}Not Next-Day item{% endif %}</span>
<br>
{% endfor %}
{% endif %}
When I try this it doesn't output anything on the notification. I expect this to output either 'Next-Day item' or 'Not Next-Day item' on each line item dependent on the product tag for each variant line item but only if "Next Day" is within the overall order shipping line title.
Related
Hi so I'm working on writing a custom jinja template that inherits from Pandas base template.
My default template looks as
{% extends "html.tpl" %}
{% block table %}
<style type="text/css" >
{% block default_table_styles %}
#T_{{uuid}} th {
font-size: 100%;
text-align: center;
background-color: blue;
color: white;
border: black solid thin;
} #T_{{uuid}} td {
font-size: 100%;
text-align: center;
background-color: white;
color: black;
border: black solid thin;
} #T_{{uuid}} th:empty {
border-width: 0;
}
{% endblock default_table_styles %}
</style>
{{ super() }}
{% endblock table %}
Now I create a mock dataframe and try to render using my custom template but the effects do not take place.
My mock code for a dataframe
import numpy as np
import pandas as pd
from pandas.io.formats.style import Styler
from IPython.display import HTML
from bs4 import BeautifulSoup as bs
# make complex dataframe
def mklbl(prefix, n):
return ["%s%s" % (prefix, i) for i in range(n)]
micolumns = pd.MultiIndex.from_tuples([('a', 'foo'), ('a', 'bar'),
('b', 'foo'), ('b', 'bah')],
names=['lvl0', 'lvl1'])
miindex = pd.MultiIndex.from_product([mklbl('A', 4),
mklbl('B', 2),
mklbl('C', 4),
mklbl('D', 2)], names=['lvl2','lvl3','lvl4','lvl5'])
df = pd.DataFrame(np.arange(len(miindex) * len(micolumns))
.reshape((len(miindex), len(micolumns))),
index=miindex,
columns=micolumns).sort_index().sort_index(axis=1)
df
Making my custom subclass Styler object using Pandas subclass factory function.
EasyStyler = Styler.from_custom_template("path_to_new_tpl_file", "default.tpl")
Now I render
EasyStyler(df)
That should work according my research but it doesn't appear to.
I tried pretty printing the html and it doesn't look like my style block is there at all.
print(bs(EasyStyler(df).render()).prettify())
What I want is for users to be able override the properties of my default template if they so choose. My thinking was that if I include my style block before any of their code then if the user decides to override some style attributes then those will take precedence over mine as they come later.
Edit:
So I was able to get what I want by moving the style container inside of table block. However, I cannot override these settings now.
s = EasyStyler(df)
s.set_table_styles(dict(selector="th", props=[('background-color','red'),('color','white')]))
I was hoping the above would change the background color in the th header but its not. I would love to know how to get this working.
Edit2:
So it seems to be that the parent templates style container gets placed before the childs, causing the child's to overwrite the parents. Is there way to force them the other way perhaps?
So after a lot of reading I discovered the problem.
Two things I learned, as I never worked with css/html before let alone jinja2 templates.
If you look at the template that Pandas provides you'll see they have empty blocks such as before_style and before_table if you call those in your child template that inherits from it, the code you put in those blocks gets executed in that place.
The second mistake I was making was that when I was trying to apply the css to the table. I didn't realize that because the table is the most element I only needed the table id and not the actual word table.
Those two adjustments got me what I wanted completely and the template is still completely overridable from the pandas.io.formats.style.Style subclass.
{% extends "html.tpl" %}
{%- block before_style -%}
<style type="text/css">
#T_{{uuid}} th {
font-size: 100%;
text-align: center;
background-color: blue;
color: white;
border: black solid thin;
} #T_{{uuid}} td {
font-size: 100%;
text-align: center;
background-color: white;
color: black;
border: black solid thin;
} #T_{{uuid}} th:empty {
border-width: 0;
}
</style>
{%- endblock before_style -%}
{%- block before_table -%}
<style>
#T_{{uuid}} {
border: black solid thin;
}
</style>
{%- endblock before_table -%}
{% block table %}
{{ super() }}
{% endblock table %}
A client wants me to make an image overlay over the selected radio button, so when Size Small, for example, is selected, instead of a highlighted button, and image will show up in its place. See image below. Let me know!! been trying to figure this out for like 5 days!! Thanks.
enter image description here
This looks like something that would just need a little bit of clever HTML/CSS structure.
For example:
.product-option{
position: relative;
display: inline-block;
}
.product-option__input{
display: none;
}
.product-option__label{
padding: 0.25em 1.5em;
display: inline-block;
cursor: pointer;
border: 1px solid black;
border-radius: 4px;
}
.product-option__input:checked ~ .product-option__label{
/* Some nice styles to highlight the selected option? */
background-image: url('/some-nice-background.png');
color: transparent; /* If you want to make the text go away for some reason? */
border-color: darkgreen;
/* Etc. */
}
.product-option__input:checked ~ .product-option__label:after{
/* Maybe we want something that we can position independently? */
position: absolute;
content: '';
border: 2px solid green;
border-radius: 50%;
width: 2.5em;
height: 2.5em;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
background: linear-gradient(-0.125turn, green, lightgreen);
}
<!--
In Liquid, this HTML would be generated with a forloop similar to the following:
{% for option in product.options_with_values %}
<div class="product-option-wrapper">
{% for value in option.values %}
{% assign unique_option_id = 'option_' | append: product.id | append: '-' | append: option.position | append: '-' | append: forloop.index %}
<div class="product-option>
<input class="product-option__input" id="{{ unique_option_id }}" name="{{ option.name }}" value="{{ value | escape }}" {% if value == option.selectd_value %}checked{% endif %} />
<label class="product-option__label" for="{{ unique_option_id }}">
<span class="product-option__text">{{ value }}</span>
</label>
</div>
{% endfor %}
</div>
{% endfor %}
-->
<div class="product-option">
<input class="product-option__input" id="option1-small" type="radio" name="option1" value="small"/>
<label class="product-option__label" for="option1-small">
<span class="product-option__text">Small</span>
</label>
</div>
<div class="product-option">
<input class="product-option__input" id="option1-med" type="radio" name="option1" value="med"/>
<label class="product-option__label" for="option1-med">
<span class="product-option__text">Med</span>
</label>
</div>
<div class="product-option">
<input class="product-option__input" id="option1-lg" type="radio" name="option1" value="lg"/>
<label class="product-option__label" for="option1-lg">
<span class="product-option__text">Large</span>
</label>
</div>
<!-- etc -->
This should hopefully be enough to get you started and let your imagination run wild with all the cool things you can do with just some simple HTML/CSS running together :)
Hello sir i wanna change the header section of posts page and want them to look like collection page featured image background. let me explain in detail.
This is the collection page URL with featured image. https://shoeslik.myshopify.com/collections/all
in this page featured image shown as background of title.
Here is the news post page. https://shoeslik.myshopify.com/blogs/news/ways-to-select-shoes-to-wear-with-an-outfit
feature image is already set but i want to edit some code to make the header look like above collection page.
and i am using Debut theme.
One more thing to add i have seen that the collection page feature background image height is 300px but i want the news posts background image size 400px.
here is what i have done so far
<div data-section-id="{{ section.id }}" data-section-type="collection-template">
<header class="collection-header">
<div class="collection-hero">
<div class="collection-hero__image ratio-container lazyload js"
data-bgset="{% include 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-image: url('{{ article.image | img_url: '300x300' }});"></div>
<noscript>
<div class="collection-hero__image" style="background-image: url({{ article.image | img_url: '2048x600', crop: 'top' }});"></div>
</noscript>
<div class="collection-hero__title-wrapper">
<h1 class="collection-hero__title page-width">{{ article.title }}</h1>
</div>
</div>
above code is the collection page so i copy it and its scss is already used with other div also and i change it little to fit needs. but i can't actually able to do exactly look like collection page. I also can't able to add author name and publish date in background area. You may check the links and can guide me what to do.
Waiting for your kind help.
thanks
Well now this question is solved while adding some css like this.
body.template-article article.page-width {
padding-left: 0px;
padding-right: 0px;
margin: 0px;
width: 100% !important;
max-width: 100% !important;
}
body.template-article .collection-hero__image {
height: 400px;
}
.section-header.text-center.blogs-heders+.collection-hero__image:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #685858;
opacity: 0.4;
}
I'm currently working on a Shopify project and I need to add color swatches on the product pages. I already did it in other projects using the product variants. But in this case the colors are different products. I found some examples on shopify:
Fashion Nova.
doyoueven.
In those examples when you click on a color you want, it changes the page. In the code it's a simple html link to the other products.
These brands are maybe using an app but I'm not sure.
Thanks.
I did that with an App for a swim suit company. Due to the way their navigation worked, it was clear they had a product per color. Not a color per variant. The App I provided them was for curated links. So they could connect all the same products with the different colors, and easily provide clickable links to each, making for a super easy way to manage inventory.
I did some test and I came up with an idea. I still need to work on it but I think maybe it could be a solution.
I am using tags to linked the products together. I need to test with more product how it's working but it could be a good start.
<div class="swatches">
<label>Colors</label>
<br />
<div class="related-colors">
{% for relatedProduct in collections.all.products %}
{% if product.tags contains relatedProduct.handle %}
{% for tag in relatedProduct.tags %}
{% if tag contains 'color-' %}
{% assign color = tag | replace: 'color-', '' %}
<a href="{{ relatedProduct.url }}">
<div class="color-swatches" style="background-color: {{color}}"></div>
</a>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
</div>
<style>
.swatches{
width:100%;
padding-left:5px;
}
.color-swatches
{
margin-top:10px;
display: inline-block;
margin-right: 0px;
margin-bottom: 10px;
width: 30px;
height: 30px;
border: 1px solid #dedede;
border-radius: 30px;
}
</style>
I have a problem with displaying a collection of products with a help of snippet product-loop.liquid in Shopify. The code is basically the following.
{% capture collection_handle %}{{ product-loop | handleize }}{% endcapture %}
{% capture url %}{% if collection_handle != "" %}/collections/{{ product-loop }}{{ product.url }}{% else %}{{ product.url }}{% endif %}{% endcapture %}
<div class="product span3 {% if template == 'collection' %}adaptive-grid{% endif %}">
</div>
{% unless template contains 'collection' %}
{% cycle 'clear-product-loop': '', '', '', '<div style="clear:both;"></div>' %}
{% endunless %}
The result is one row is 2 items or 3 items or 4 items (depending on screen resolution) and the next row is always 1 item and this pattern is repeating all the time. What is wrong?
EDIT: Some related CSS
.row { margin: 0 0 30px 0; }
.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { display: block; float: left; margin: 0 15px; }
.inner-left { margin-left: 0px !important; }
.inner-right { margin-right: 0px !important; }
.span1 { width: 53px; }
.span2 { width: 136px; }
.span3 { width: 219px; }
.span4 { width: 302px; }
.span3.adaptive-grid {width: 219px;}
.span3.adaptive-grid:nth-child(6n+7) {clear: none;}
.span3.adaptive-grid:nth-child(4n+5) {clear: both;}
Finally I resolved my problem by removing lines like
.span3.adaptive-grid:nth-child(6n+7) {clear: none;}
.span3.adaptive-grid:nth-child(4n+5) {clear: both;}
from Shopify styles file (Minimal theme). Now the grid of products is displayed ok for different resolutions without breaking the lines.