I am experimenting with creating a slideshow that has four images, for example. And the thing is I want to create a link button with its own url link for each image. But what I have done is created four link buttons that appears on the slideshow, instead of the one link button that changes along with each image, and with its own url link.
{% if settings.show_block_lookbook %}
<div id="lookbook-section" class="section-full lookbook-section">
<div class="lookbook-wrapper">
<div class="lookbook-text">
<div class="lookbook-container">
<div class="container">
<div class="lb-text">
{% assign lbText1 = settings.block_lookbook_text_1 %}
{% assign lbText2 = settings.block_lookbook_text_2 %}
{% assign lbText3 = settings.block_lookbook_text_3 %}
{% assign lbText4-1 = settings.block_lookbook_text_4_1 %}
{% assign lbText4-2 = settings.block_lookbook_text_4_2 %}
{% assign lbText4-3 = settings.block_lookbook_text_4_3 %}
{% assign lbText4-4 = settings.block_lookbook_text_4_4 %}
{% assign lbLink-1 = settings.block_lookbook_link_1 %}
{% assign lbLink-2 = settings.block_lookbook_link_2 %}
{% assign lbLink-3 = settings.block_lookbook_link_3 %}
{% assign lbLink-4 = settings.block_lookbook_link_4 %}
{% if lbText1 != blank %}<h3>{{ lbText1}}</h3>{% endif %}
<div class="bg-slider-arrows">
<span class="button-prev no-border"></span>
<span class="button-next no-border"></span>
</div>
{% if lbText2 != blank %}<h2>{{ lbText2 }}</h2>{% endif %}
{% if lbText3 != blank %}<p>{{ lbText3 }}</p>{% endif %}
{% if lbText4-1 != blank %}{{ lbText4-1 }}{% endif %}
{% if lbText4-2 != blank %}{{ lbText4-2 }}{% endif %}
{% if lbText4-3 != blank %}{{ lbText4-3 }}{% endif %}
{% if lbText4-4 != blank %}{{ lbText4-4 }}{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="lookbook-bg">
{% for i in (1..4) %}
{% assign newShow = 'block_lookbook_img_' | append: i %}
{% if settings[newShow] %}
{% assign newImage = 'block_lookbook_img_' | append: i %}
<div class="lookbook-item">
<img src = "{{ newImage | append: '.jpg' | asset_url}}" alt="" />
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
I am totally lost as to what to do, as I am very very new to this. I would think I somehow need to link the images with the urls and link buttons etc, but have no idea how to code it so that each image has its own link button and url link...Any help? Any examples?
Hold on, you are not using much of angular here. I think its django or some other template with {% if %} .
Use something like:
<div ng-repeat="object in objects">
{{object.name }}
<img src="{{ object.img_path}}" />
</div>
For look try this link for ng-repeat
For the functionality u need, I would recommend you to look into cleaner approach of Carousel
Related
I have created a gift note functionality which store notes but the problem is it is showing title on orders even though textarea is blank could you please help to get rid of this problem
if textarea is blank still order page is showing "cart note:"
{% if line_item.properties != empty %}
<ul class="CartItem__PropertyList">
{% for property in line_item.properties %}
{% assign first_character_in_key = property.first | truncate: 1, '' %}
{% if property.last == blank or first_character_in_key == '_' %}
{% continue %}
{% endif %}
<li class="CartItem__Property">{{ property.first }}: <p class="cart_note_txt">{{ property.last }}</p></li>
{% endfor %}
</ul>
{% endif %}
<textarea class="gift_note_pro" maxlength="300" name="properties[Cart Note]" style="display:none;" placeholder="Add a note">
</textarea>
Can someone help me to get rid of this problem ?
Anyone can help me why my featured photo wont change when I select variant on collection page??
https://strokes-test.myshopify.com/collections/frontpage
Javascript
initColorSwatchGrid: function() {
jQuery('.item-swatch li label').click(function(){
var newImage = jQuery(this).parent().find('.hidden img').attr('src');
jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage });
return false;
});
}
HTML
<ul class="item-swatch color_swatch_Value">
{% for option in product.options %}
{% if option == 'Shades' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<li>
<label style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
{% if variant.image != null %}
<div class="hidden">
<img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ text }}"/>
</div>
{% endif %}
</li>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
Note I' also using jquery v1.8.1
You need to update the JS code to work properly, use it
initColorSwatchGrid: function() {
jQuery('.item-swatch li label').click(function () {
var newImage = jQuery(this).next().find('img').attr('src');
jQuery(this).parents('.product-detail').prev().find('.featured-image').attr({ src: newImage });
return false;
});
}
I want to connect my option value to my swatches like when I click the variant swatches the option value will change also.
Example when I click on the swatches[circle color] dropdown options will change also.
image sample
Here's my code below and site link:
https://strokes-test.myshopify.com/collections/frontpage
and Im using JQuery v1.8.1
HTML
<form action="/cart/add" method="post">
{% if product.variants.size == 1 %}
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />
{% else %}
<select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select>
{% endif %}
<ul class="item-swatch color_swatch_Value">
{% for option in product.options %}
{% if option == 'Shades' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<li>
<label value="{{ variant.id}}" style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
{% if variant.image != null %}
<div class="hidden">
<img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ text }}"/>
</div>
{% endif %}
</li>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
<div><button type="submit" name="add">Add to cart</button></div>
</form>
JS
initColorSwatchGrid: function() {
jQuery('.item-swatch li label').click(function(){
var newImage = jQuery(this).parent().find('.hidden img').attr('src');
jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage });
return false;
});
}
Try this one
initColorSwatchGrid: function() {
jQuery('.item-swatch li label').click(function () {
var newImage = jQuery(this).next().find('img').attr('src');
jQuery(this).parents('.product-detail').prev().find('.featured-image').attr({ src: newImage });
// JS code for product switching
jQuery(this).parents('ul.item-swatch').prev().val(jQuery(this).attr('value'));
return false;
});
}
I've checked a lot of other questions and I haven't seen my particular scenario really addressed and I've tried a lot of things out without success.
What I have is a DJango for loop in my HTML code, and within the for loop is an if statement checking if each element from the list that is being looped through equals a certain value. If that is true, then an entry is created on the page. I need to dynamically print the element number (eg. entry 1 would display as 1. and entry 2 would display as 2.)
The two best attempts I have made are:
1.
<!-- this approach prints out 1 for each entry -->
{% with counter=0 %}
{% for q in questionnaire.questions %}
{% if q.answer %}
<div class="row"><h3>
{{ counter|add:1 }}. {{ q.name }}
</h3></div>
<!-- some other code-->
{% endif %}
{% endfor %}
{% endwith %}
{% for q in questionnaire.questions %}
{% if q.answer %}
<div class="row"><h3>
<span id="displayCount">0</span>. {{ q.name }}
</h3></div>
<!-- some other code-->
{% endif %}
{% endfor %}
<script type="text/javascript">
var count = 0;
var display = document.getElementById("displayCount");
count++;
display.innerHTML = count;
</script>
Any help would be appreciated
You can access the built-in counter of your for loop using forloop.counter. It starts at 1, you can also you forloop.counter0 if you'd like to start at zero.
{% for q in questionnaire.questions %}
{% if q.answer %}
<div class="row">
<h3>
{{ forloop.counter }}. {{ q.name }}
</h3>
</div>
<!-- some other code-->
{% endif %}
{% endfor %}
Filter your queryset in your view as to avoid issues with indexing and separating presentation from logic.
am using django 2.0 and am trying to make this blog, the issue is that once i click the next page the active bar in the pagination section dont change mean from 1 to 2 see pic image
i don't know where is the mistake
here is the views.py
def post_list(request):
object_list=Post.objects.filter(status='Published').order_by("-created")
pages = pagination(request,object_list,3)
context={
'items':pages[0],
'page_range':pages[1],
}
return render(request,"blog.html",context)
pagination function
from django.core.paginator import EmptyPage, PageNotAnInteger, Paginator
def pagination(request,data,num=10):
paginator = Paginator(data,num) # Show 5 contacts per page
page = request.GET.get('page',5)
try:
items=paginator.page(page)
except PageNotAnInteger:
items=paginator.page(5)
except EmptyPage:
items=paginator.page(paginator.num_pages)
index=items.number=1
max_index=len(paginator.page_range)
start_index=index - 5 if index >= 5 else 0
end_index=index + 5 if index <= max_index - 5 else max_index
page_range=paginator.page_range[start_index:end_index]
return items, page_range
and pagination.html
<nav>
{% if items.has_other_pages %}
<ul class="pagination">
{% if items.has_previous %}
<li>«</li>
{% else %}
<li class="disabled"><span>«</span></li>
{% endif %}
{% for i in page_range %}
{% if items.number == i %}
<li class="active"><span>{{ i }} <span class="sr-only">(current)</span></span></li>
{% else %}
<li>{{ i }}</li>
{% endif %}
{% endfor %}
{% if items.has_next %}
<li>»</li>
{% else %}
<li class="disabled"><span>»</span></li>
</ul>
{% endif %}
{% endif %}
</nav>
blog.html
{% for obj in items %}
{% if obj.status == 'Published' %}
<article>
<img src="{{obj.thumb.url}}" alt="" />
<div class="post-content">
<h2>{{obj.title}}</h2>
{{obj.created}} Author {{obj.user}} <h4>{{obj.Category}}</h4>
<hr/>
<p>{{obj.body}}</p>
<a class="mtr-btn button-navy ripple" href= "{% url 'post_detail' obj.slug %}">Continue reading →</a><br>
</div>
</article>
{% endif %}
{% endfor %}
{% include 'pagination.html' %}
</div>
Remove the = 1 from the line index = items.number = 1