im creating a individual template for each policy on site, how can i show only that specific policy on each template, here is code i made for that:
<div class="flex flex-col items-center my-8">
{% for policy in shop.policies %}
<h1 class="text-5xl font-bold tracking-tighter my-4 md:my-8">{{ policy.title }}</h1>
<div class="py-2 mb-4 inline-flex items-center justify-center text-xs font-semibold tracking-tighter">
<span class="mr-2">
{{ 'general.last_updated' | t }}
</span>
{{ policy.published_at | date: '%d/%B/%Y' }}
</div>
<div class="max-w-5xl mx-auto px-4">{{ policy.body }}</div>
{% endfor %}
</div>
i tried to access on policy object with handle filter like:
{{ policy['terms-of-service'].title }}
but it doesn't work, anyone is able to guide me how can i get it works?
thanks in advance :)
EDIT:
here is code i have at the moment, with [shop.privacy_policy] but make an loop with that creating 2 policies on section.
<div class="flex flex-col items-center my-8">
{% for policy in shop.policies %}
<h1 class="text-5xl font-bold tracking-tighter my-4 md:my-8">{{ shop.privacy_policy.title }}</h1>
<div class="py-2 mb-4 inline-flex items-center justify-center text-xs font-semibold tracking-tighter">
<span class="mr-2">
{{ 'general.last_updated' | t }}
</span>
</div>
<div class="max-w-5xl mx-auto px-4">{{ shop.privacy_policy.body }}</div>
{% endfor %}
</div>
and some image to show what i mean:
There is actually an objet for each policy inside shop.
shop.privacy_policy
shop.refund_policy
shop.shipping_policy
shop.subscription_policy
shop.terms_of_service
Check this: https://www.shopify.ca/partners/shopify-cheat-sheet
Related
Gallery with carousel
I created a gallery like on the attached picture. I have no problem when I am linking picture from hard drive. I can preview those small pictures in main carousel view by clicking on the them and also using controll buttons on carousel.
The problem I have is how to have the same functionality when loading pictures from the model? The small images after click are displayed randomly on main carousel view.
How to link data-bs-slide-to="" ? Or there is another option?
Below code from liniking from hard drive and using database.
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="{% static 'bpage/img/f1r.jpg' %}" class="rounded d-block img-fluid mx-auto" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'bpage/img/f2r.jpg' %}" class="rounded d-block img-fluid mx-auto" height="600" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'bpage/img/f3r.jpg' %}" class="rounded d-block img-fluid mx-auto" height="600" alt="...">
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="{% static 'bpage/img/f4r.jpg' %}" class="rounded d-block img-fluid mx-auto" height="600" alt="...">
</div>
</div>
<!--rest of the carousel-->
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
<!--- imagaes below carousel-->
<div class="row" >
<div class="col-6 col-md-5 col-lg-4 col-xl-3 ">
<div class="row row-cols-2 row-cols-sm-4">
<div class="col">
<img src="{% static 'bpage/img/f1r.jpg' %}" class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="0">
</div>
<div class="col">
<img src="{% static 'bpage/img/f2r.jpg' %}" class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="1">
</div>
<div class="col">
<img src="{% static 'bpage/img/f3r.jpg' %}" class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="2">
</div>
<div class="col ">
<img src="{% static 'bpage/img/f4r.jpg' %}" class="rounded w-100 mt-2" data-bs-target="#carouselExampleInterval" data-bs-slide-to="3">
</div>
</div>
</div>
</div> ```
Gallery created with models.py
```<div class="container">
<div class="row ">
<div class="col-6 col-md-5 col-lg-4 col-xl-3 ">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
{% for product in products %}
<div class="carousel-item {% if forloop.first %} active {% endif %}">
<img src="{{ product.image.url }}" class="rounded d-block img-fluid mx-auto" height="600" alt="...">
</div>
{% endfor %}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!--- imagaes below carousel-->
<div class="container">
<div class="row" >
<div class="col-6 col-md-5 col-lg-4 col-xl-3 ">
<div class="row row-cols-sm-4 row-cols-2">
{% for product in products %}
<img src="{{ product.image.url }}" class="rounded mt-2" data-bs-target="#carouselExampleControls" data-bs-slide-to="">
{% endfor %}
</div>
</div>
</div> ```
Are you using a for loop to get your images from the model? If you are, then you might be able to map it like this:
data-bs-slide-to="{{ forloop.counter |add:"-1" }}
Which, assuming you are using a for loop to display every image , will backlink your thumbnails to your images.
I'm using HTML and TWIG.
I have different boxes with different fields filled with data retrieved from a php call. The problem is I don't know how to make those fields (and consequently boxes) the same size.
The size of each field should be the tallest one of the group. So far I got this
As you can see, Contratto, JSer and Azienda are fine (usually always on a single line, so it shouldn't be a problem).
The problem is Note: as you can see, it goes well for single box, but having more ones just break the visualization. I'd like all fields to be the same size in their own group:
every Contratto the size of the biggest one;
every JSer the size of the biggest one;
every Azienda the size of the biggest one
and of course, the important one, every Note the size of the biggest one
Here's the code I'm using, with Bootstrap 3.3.7
{% if alerts|length > 0 %}
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> I TUOI AVVISI ({{ alerts|length }})</h3>
</div>
<div class="box-body">
{% for alert in alerts %}
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="shadow-box">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f">Avviso</h3>
</div>
<div class="box-body">
<p><b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}</p>
<p><b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}</p>
<p><b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}</p>
<p><b>Note</b>: {{ alert.getJob().getNote() }}</p>
</div>
{% if alert.getUtente() is not null %}
<div class="box-footer" style="text-align: left">
<p><b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}</p>
</div>
{% endif %}
<div class="box-footer">
<a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}"class="link-avviso">
Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
EDIT: this is the code version with columns and rows
{% if alerts|length > 0 %}
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> I TUOI AVVISI ({{ alerts|length }})</h3>
</div>
<div class="box-body">
{% for alert in alerts %}
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="shadow-box">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f">Avviso</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-sm-12">
<b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}
</div>
</div>
<div class="row">
<div class="col-sm-12">
<b>Note</b>: {{ alert.getJob().getNote() }}</p>
</div>
</div>
</div>
{% if alert.getUtente() is not null %}
<div class="box-footer" style="text-align: left">
<p><b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}</p>
</div>
{% endif %}
<div class="box-footer">
<a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}"class="link-avviso">
Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endif %}
Any suggestion?
EDIT ANSWER:
After few tries, I normalized the single row instead of single fields...single fields would not be the same height, but the row will, so this is actually fine for my final result. Here's the answer:
//CSS in head
.alertProperties {
padding-left:0px !important;
}
//Code
{% if alerts|length > 0 %}
<div class="box box-danger">
<div class="box-header with-border">
<h3 class="box-title" style="color: #ff000f"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> I TUOI AVVISI ({{ alerts|length }})</h3>
</div>
<div class="box-body">
{% for alert in alerts %}
{% if loop.index % 5 == 0 or loop.first %}
<div class="row">
{% endif %}
<div class="col-lg-3 col-md-3 col-sm-3">
<div class="box-header with-border"><h3 class="box-title" style="color: #ff000f">Avviso</h3></div>
<div class="box-body" style="border-left: 1px solid #00ACDF !important">
<div class="col-sm-12 alertProperties">
<b>Contratto</b>: {{ alert.getJob().getContratto().getRiferimento() }}
</div>
<div class="col-sm-12 alertProperties">
<b>JSer</b>: {{ alert.getJob().getJobStationer().getNome() }} {{ alert.getJob().getJobStationer().getCognome() }}
</div>
<div class="col-sm-12 alertProperties">
<b>Azienda</b>: {{ alert.getJob().getAzienda().getNome() }}
</div>
<div class="col-sm-12 alertProperties">
<b>Note</b>: {{ alert.getJob().getNote() }}</p>
</div>
{% if alert.getUtente() is not null %}
<div class="box-footer" style="text-align:left;">
<div class="col-sm-12 alertProperties">
<b>Modificato da</b> {{ alert.getUtente().getNome() }} {{ alert.getUtente().getCognome() }} <b>il</b> {{ alert.getDataModifica()|date('d/m/Y') }}
</div>
</div>
{% endif %}
<div class="box-footer">
<div class="col-sm-12">
<a href="{{ path('job_dettaglio', { 'id_job': alert.getJob().getId(), 'dettaglio': 1 }) }}" class="link-avviso">
Vai al dettaglio <i class="fa fa-angle-right" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
</div>
{% if (loop.index % 4 == 0 or loop.last) %}
</div>
{% endif %}
{% endfor %}
</div>
{# </div> #}
</div>
{% endif %}
You can truncate text of the note section by forcing text on the same line with the white-space:none
p{
width:400px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
However if you wanna truncate it to more than one line you can read it more on chris coyier's article here
Im trying to add code back into shopify to allow for a comments box at the bottom of blog posts.
from my investigating, the code should exist in article.liquid, however it looks like the original developer deleted it.
I have tried entering code from Shopifys example https://shopify.github.io/liquid-code-examples/example/comment-list which produced no changes (Also I can't see there being an option to 'moderate' the comments, ideally we want to check them before they're posted on site.
Also tried a code from Github https://github.com/Shopify/Timber/blob/master/templates/article.liquid, which resulted in the below image. This code mentions 'moderate', but it didn't work.
github code error
Has anyone experience similar issue?
this is the current article.liquid code:
<div class="small-12 columns">
<article class="single-article">
<div class="article__title">
<h1 class="impact alpha">{{ blog.title }}</h1>
<h3 class="impact gamma">
<time pubdate datetime="{{ article.published_at | date: '%Y-%m-%d' }}">{{ article.published_at | date: '%b %d, %Y' }}</time> | {{ blog.title }}
</h3>
</div>
<div class="article__feature-image">
<img src="{{ article.image.src | img_url: '1024x1024' }}" alt="{{ article.image.alt }}">
</div>
<div class="article__content">
<div class="row">
<div class="small-12 medium-8 medium-offset-2 columns rte">
{{ article.content }}
</div>
</div>
</div>
<div class="article__paginate">
{% if blog.next_article or blog.previous_article %}
<div class="row">
<div class="small-12 medium-8 medium-offset-2 columns rte">
<p class="clearfix">
{% if blog.next_article %}
<span class="left impact epsilon">{{ '← Next Post' | link_to: blog.next_article }}</span>
{% endif %}
{% if blog.previous_article %}
<span class="right impact epsilon">{{ 'Previous Post →' | link_to: blog.previous_article }}</span>
{% endif %}
</p>
</div>
</div>
{% endif %}
</div>
<div class="article__author">
<div class="row">
<div class="small-12 medium-8 medium-offset-2 columns">
<div class="row">
<div class="author-image small-12 medium-3 columns">
<img src="http://www.gravatar.com/avatar/{{ article.user.email | md5 }}?s=100" />
</div>
<div class="author-details small-12 medium-9 columns">
<h4 class="impact epsilon">Written by {{ article.author }}</h4>
<p>{{ article.user.bio }}</p>
</div>
</div>
</div>
</div>
</div>
<div class="article__social clearfix">
<div class="row">
<div class="small-12 medium-8 small-centered columns">
<h4 class="epsilon impact">Share This</h4>
<br>
{% include 'snippets_share' %}
</div>
</div>
</div>
</article>
</div>
this is probably an easy one, I need help with an if statement so my button only shows on specific product types.
<button id="myBtn">Size Guide</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img style="margin:auto; width:100%" class="modal-size-chart" src="https://cdn.shopify.com/s/files/1/0278/2842/0746/t/3/assets/{{ product.vendor }}.jpg"></img>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<img style="margin:auto; width:100%" class="modal-size-chart" src="https://cdn.shopify.com/s/files/1/0278/2842/0746/t/3/assets/{{ product.vendor }}.jpg"></img>
</div>
</div>
{% if product.type == "myType" %}
<button id="myBtn">Size Guide</button>
{% endif %}
More information on product.type here
More information on if here
First of all, I'm very new to Vue so, sorry if the answer is very obvious. I have a list of elements that I'm rendering with Vue.js, some of these items have a "Sold" attribute and when they have it, the layout has to change a bit, so far this works well:
<template v-if="property.sold === 'sold'">
<span class="property-item-sold">{{ property.sold }}</span>
<div class="item-meta">
<h3 class="property-item-title">{{ property.name }}</h3>
<div class="item-meta-group">
<div class="location"><i class="fas fa-map-marker-alt"></i> {{ property.location | cityState }} {{ property['property-state'][0].name }}</div>
<div class="size">{{ property.surface.value | numberFormat }} {{ property.surface.unit }}</div>
</div>
</div>
</template>
<template v-else>
<div class="property-item-offering-type">For {{ property['offering-type'][0].name }} </div>
<div class="item-meta">
<h3 class="property-item-title">{{ property.name }}</h3>
<div class="item-meta-group">
<div class="location"><i class="fas fa-map-marker-alt"></i> {{ property.location | cityState }} {{ property['property-state'][0].name }}</div>
<div class="size">{{ property.surface.value | numberFormat }} {{ property.surface.unit }}</div>
</div>
<a :href="property.url" class="btn btn--green">View Details</a>
</div>
</template>
But I'm repeating a lot of code, is there a way to DRY this conditional?
Something like this:
<template>
<span v-if="property.sold === 'sold'" class="property-item-sold">{{ property.sold }}</span>
<div v-else class="property-item-offering-type">For {{ property['offering-type'][0].name }} </div>
<div class="item-meta">
<h3 class="property-item-title">{{ property.name }}</h3>
<div class="item-meta-group">
<div class="location"><i class="fas fa-map-marker-alt"></i> {{ property.location | cityState }} {{ property['property-state'][0].name }}</div>
<div class="size">{{ property.surface.value | numberFormat }} {{ property.surface.unit }}</div>
</div>
<a v-if="property.sold !== 'sold'" :href="property.url" class="btn btn--green">View Details</a>
</div>
</template>