Here's the error message populating my page, with the accompanying code issue: TemplateSyntaxError at /home Invalid block tag: 'endblock', expected 'endif' Request Method: GET Request URL: http://localhost:8000/home Django Version: 4.1 Exception Type:
Code error
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
{% load bootstrap4 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}
{% block head %} {% endblock %}
</head>
<body>
<nav class="navbar {% if not request.user.is_authenticated %} navbar-expand-lg {% endif %} navbar-light bg-warning">
<a class="navbar-brand" href="/">Txapita</a>
{% if not request.user.is_authenticated %}
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item {% request.GET.next != '/cliente/' %}active{% endif %}">
<a class="nav-link" arial-current="page" href="/sign-in/?next=/cliente/">Cliente</a>
</li>
<li class="nav-item {% request.GET.next == '/transportador/' %}active{% endif %}">
<a class="nav-link" arial-current="page" href="/sign-in/?next=/transportador/">Transportador</a>
</li>
</ul>
</div>
{% else %}
<form class="form-inline">
<span class="mr-4">{{ request.user.get_full_name|title }}</span>
Sair
</form>
{% endif %}
</nav>
{% block content %} {% endblock %}
<footer class="text-center mt-5 mb-5">
© txapita.co.mz
</footer>
</body>
</html>
Related
I have a slideshow on my homepage on my shopify website. I have been given a task to add a class on each slide of the slideshow for google tag manager tracking on the anchor tag inside the "swiper-slide" div. I want to add the class based on the number of slides available. For example, for the first slide I want to add the class of "banner1", for 2nd slide "banner2" and so on. I tried the following:
<a href="{{ block.settings.button_link}}" class="full-width-link banner{{forloop.index}}" ></a>
but I end up having just "banner1" for all the slides.
<!-- Slider main container -->
<div class="main-swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
{%- for block in section.blocks -%}
{% assign banner_index = forloop.index %}
<!-- Slides -->
<div class="swiper-slide">
<a href="{{ block.settings.button_link}}" class="full-width-link " ></a>
<!--<img src="{{ block.settings.image | img_url: 'master'}}" class="img-responsive banner-img small--hide">
<img src="{{ block.settings.mobimage | img_url: 'master' }}" class="img-responsive banner-img medium-up--hide">-->
<picture>
<source media="(min-width:750px)" srcset="{{ block.settings.image | img_url: '1600x'}}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload" >
<img data-src="{{ block.settings.mobimage | img_url: '400x' }}" alt="" width="100%" height="100%" class="img-responsive banner-img lazyload">
</picture>
{% comment %}
<div class="sticky--shop-box">
<div class="slider--content setu-flex setu-direction-column height_100p">
<p>{{ block.settings.subheading}}</p>
<h1>{{ block.settings.slide_title}}</h1>
{% if block.settings.button_label != blank %}
<div class="hide shop-button--wrapper">
{{ block.settings.button_label}}
</div>
{% endif %}
</div>
</div>
{% endcomment %}
</div>
{%- endfor -%}
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
This works for me
{%- for block in section.blocks -%}
<div class="swiper-slide-{{ forloop.index }}">
</div>
{%- endfor -%}
I have a problem with the visibility of description of ARTICLES in block's post, they are showing other content but not the first paragraph of the article, as it supposed to do.
print screen
here is the code (just the part of the BLOG)
<div class="lp-section blog-section">
<h2>
Blog
</h2>
<ul>
{% set rec_posts = blog_recent_posts("default", 3) %}
{% for rec_post in rec_posts %}
<li>
<div class="lp-block">
{% if rec_post.featured_image %}
<a class="resource__post-image"
alt="{{ rec_post.featured_image_alt_text }}"
style="background-image: url('{{ rec_post.featured_image }}');"
href="{{ rec_post.absolute_url }}">
</a>
{% endif %}
{% set featured_tag = rec_post.topic_list | first %}
{% if featured_tag %}
<div class="content content-description">
<div>
<span class="keyword">{{ featured_tag }}</span>
{% endif %}
<h3>{{ rec_post.name }}</h3>
<p class="description">{{ content.meta_description | default(content.post_summary, true) | truncatehtml(150, '...', false) }}</p>
</div>
<div>
<a class="ghost-cta" href="{{ rec_post.absolute_url }}">
Read more
</a>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
<a class="link" href="https://ai.reportlinker.com/en/resources/blog">+ More articles </a>
</div>
Could somebody please help me please?
Using wagtail(django) I created a carrousel that serves all my media content. The user can select 1-3 columns (three templates accordingly), which displays a carousel if media content >1, else only the image/video.
As for the 2-3 columns display can be small for some, I added a FullScreen toggle button, if the user wishes to.
This works well... almost as I have two issues with passing wagtail blocs into CSS/JS loops:
Fullscreen toggle buttons. If the block has more than 2-3 carousels not all will function.
Ex: With 3 carousels, one per column, only the right and the left one are clickables.
With 6 carousels (2*3 block), only the left ones and the upper central one are clickable).
How should I pass the JS script to the given button (with some kind of _{{ block.id }}...??) so the carousel full screen buttons can be attributed to the specific instance?
Indicators : The indictors are displayed properly, until the second slide is activated. Then, the indicator of the first slide appears in the boostrap default style. The other slides function as expected with their override style and hover-color for the active element.
I tried to add condition {% elif forloop.counter == 0/2/-1 %} neither worked.
Any advise on how to make it function?
Here's my code:
carousel_block.html
and in case you find it useful, here's the block templates.
three_columns_block.html
single_column_block.html
For the sake of brevity, I didn't add the stream_field.html which populates the carousel data in the columns templates. Kindly advised if needed.
Any input, consideration is highly appreciated.
carousel_block.html
{% load wagtailcore_tags wagtailimages_tags wagtailembeds_tags %}
<head>
<!--I added the head as I didn't know how to pass only links and scripts from the base.html-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<style>
.carousel-item {
object-fit: cover;
object-position: center!important;
min-height: 50vh;
overflow: hidden;
vertical-align: middle!important;
}
.carousel-indicators li.dactive, .carousel-indicators li.active {
width: 11px;
height: 11px;
border-radius: 50%;
margin: 2px 4px;
border: 2px solid black;
}
.carousel-indicators li {
border: 1px solid #475c6f;
}
.carousel-indicators li.active {
background: #20b0b9;
border-color: #20b0b9;
}
#myDiv.fullscreen{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9998;
}
.but {
top:0;
left:0;
position: absolute;
background-color: #f5f;
z-index: 9999;
}
#myDiv{background:#fff;}
</style>
</head>
<article>
<div class="row">
<div class="">
<div id="myDiv">
{% if block.block_type == 'carousel' %}
{% if block.value|length > 1 %}
<div id="carouselExampleIndicators_{{ block.id }}" class="carousel slide zoom" data-bs-ride="carousel">
<ol class="carousel-indicators">
{% for item in block.value %}
<li data-bs-target="#carouselExampleIndicators_{{ block.id }}"
data-bs-slide-to="{{ forloop.counter0 }}" aria-label="Slide {{ forloop.counter }}"
{% if forloop.counter == 1 %} class="active" aria-current="true" {% else %} class="dactive" {% endif %}>
</li>
{% endfor %}
</ol>
{% endif %}
<div class="carousel-inner">
{% for item in block.value %}
<div class="carousel-item{% if forloop.counter == 1 %} active{% endif %}">
<div class="d-block w-90">
{% if item.block_type == 'image' %}
{% image item.value.image original as img %}
<img src="{{ img.url }}" alt="{{ img.alt }}">
{% if item.value.caption %}
<div class="carousel-caption d-none d-md-block overlay1 neonText">
{{ item.value.caption }}</div>
{% endif %}
{% elif item.block_type == 'video' %}
{{ item.value }}
{% endif %}
</div>
<button type="button" class="btn btn-default but btn-sm">
<span class="glyphicon glyphicon-fullscreen"></span> Fullscreen
</button>
<i class="bi bi-fullscreen"></i>
</div>
{% endfor %}
</div>
{% if block.value|length > 1 %}
<a class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators_{{ block.id }}" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators_{{ block.id }}" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</article>
<script>
$('button').click(function(){
$('#myDiv').toggleClass('fullscreen');
});
</script>
single_column_block.html
{% load wagtailcore_tags wagtailembeds_tags %}
<div class="row my-3">
<div class="col zoom-none">
{% for block in self.single_column %}
<div class="card mb-md-3 single">
{% include_block block %}
</div>
{% endfor %}
</div>
</div>
three_columns_block.html
{% load wagtailcore_tags wagtailembeds_tags %}
<div class="row my-3">
<div class="col-md-4">
{% for block in self.left_column %}
<div class="card">
{% include_block block %}
</div>
{% endfor %}
</div>
<div class="col-md-4">
{% for block in self.middle_column %}
<div class="card">
{% include_block block %}
</div>
{% endfor %}
</div>
<div class="col-md-4">
{% for block in self.right_column %}
<div class="card">
{% include_block block %}
</div>
{% endfor %}
</div>
</div>
I can programmatically add it to my page homepage by adding {% section 'header-text' %}, but I want to add it through the "add section" GUI. I looked similar questions and I have {{ content_for_index }} in my index.liquid and {% schema %} and {% endschema %}
Here is my code theme.liquid
<!DOCTYPE html>
<html>
<head>
<title>{{ page_title }}</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="{{ page_description | escape }}" />
<link rel="canonical" href="{{ canonical_url }}" />
<meta
name="viewport"
content="width=device-width,initial-scale=1,shrink-to-fit=no"
/>
{{ content_for_header }}
<!-- Header hook for plugins -->
{{
"application.scss" | asset_url | stylesheet_tag
}}
</head>
<body>
<header class="container-fluid">
<nav class="nav-holder">
<h1>Dreamy Cream</h1>
<div class="nav__button" id="burger">{% include 'icon-navicon' %}</div>
<div class="nav-links" id="menu">
<ul class="nav-items">
{% for link in linklists.main-menu.links %} {% assign
child_list_handle = link.title | handleize %}
<li>
{{ link.title }}
</li>
{% endfor %}
</ul>
{% include 'icon-cart' %}
</div>
</nav>
{% section 'header-text' %}
</header>
<main role="main">
{{ content_for_layout }}
</main>
{{ "application.js" | asset_url | script_tag }}
</body>
</html>
header-text.liquid
<div class="nav__title main" id="{{section.settings.id}}">
<h1>{{section.settings.title}}</h1>
</div>
{% schema %}
{
"name": "opening text",
"class": "opeaning-text-section",
"settings": [
{
"id": "title",
"type": "text",
"label": "Section Title ",
"default": "Taste the intensity"
}
] ,
"presets": [
{
"name": "Title Text",
"category":"Store information"
}
]
}
{% endschema %}
So, I needed a section that was programmed in the theme.liquid {% section 'header-text' %}
I found the solution https://github.com/Shopify/themekit/issues/842
UPDATE
Ok I know what the problem is, but not how to solve it.
vendor:cow horn OR title:cow horn doesn't work
title:cow horn OR vendor:cow horn does.
Spaces are causing the additional prefixes to break where "OR" isn't properly working in my search results.
vendor:cow OR title:cow works
But the moment I put a space in the search then the title won't be searched.
I have a search bar, and I set it to search for an items tag, vendor & title.
Problem is this code prevents me from being able to use spaces in my search term, and if I append "*" I'm unable to use ampersands. Here's the code.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="original" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="original"]').val();
$('.searchtext').val("vendor:"+searchtext+" OR tag:"+searchtext+" OR title:"+searchtext);
});
</script>
If you need to see the search.liquid here it is.
<div id="impact-grid-header" class="collections-page">
<h1 id="regular-title">Search Results for: "{{ search.terms[1] | replace: 'vendor:', '' | replace: 'tag:', '' | replace: 'title:', '' | replace: '*', '' | strip | escape}}"</h1>
</div>
<div id="product-content" class="full-bleed">
<div class="content">
{% paginate search.results by 20 %}
<!-- Begin collection info -->
<div class="row">
<!-- End sort collection -->
<div class="column inventory-items">
{% include 'search-bar' %}
<div id="inventory" class="span12 content-grid">
<!-- Begin no products -->
{% if search.results.size == 0 %}
<div class="row">
<div class="span12 expanded-message">
<p>That's a great idea but unfortunately we don't have that item.<br/>Try again?</p>
</div>
</div>
{% endif %}
<div class="row products">
{% for item in search.results limit: settings.pagination_limit %}
{% if item.variants.first.inventory_quantity >= 0 %}
<div class="item product" data-tags="{% for tag in item.tags %}{{ tag | downcase }}, {% endfor %}">
<a href="{{ item.url }}">
<div class="product-pic">
<div class="inner-pic">
<img src="{{ item.featured_image | product_img_url: 'large' }}" alt="{{ item.title | escape }}"/>
</div>
<!-- Box that appears upon hover -->
<div class="view-product bg-black">
<i class="icon-search"></i>
<span>View</span>
</div>
</div>
</a>
<div class="description">
<span class="product-name">{{ item.title }}</span>
<span class="brand">{{ item.vendor }}</span>
<span class="price">
{% if item.available %}
{% if item.compare_at_price_max > item.price %}
<del>{{ item.compare_at_price | money }}</del>
{% endif %}
{% if item.price_varies %}
<em>from</em>
{% endif %}
<span>{{ item.price | money }}</span>
{% else %}
<span>
{{ item.price | money }} Sold Out
</span>
{% endif %}
</span>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% include 'pagination' %}
{% endpaginate %}
<!-- End no products -->
</div>
</div>
</div>
</div>