I have a search view which results are in a single column. I would like to move only couple of fields to the second column. is this possible?
My views-view-fields--mytestview.html.twig code is as below:
{% set index = 0 %}
<div class='row'>
<div class="panel panel-default">
<div class="panel-body">
{% for key, field in fields -%}
{% if index == 0 or index == 5 %}
<div>
{% endif %}
<span {{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</span>
<a href="#" data-toggle="tooltip" data-placement="right" title="{{ tooltips[key] }}">
<span {{ field.element_attributes }}>{{ field.content }}</span><br/>
</a>
{% if index == 4 or index + 1 == fields | length %}
</div>
{% endif %}
{% set index = index + 1 %}
{%- endfor %}
</div>
</div>
</div>
This is making all the fields appear in a single column. I would like to move the google map and the link below it to second column. Any help? Attaching my current view screenshot here....
Related
i try to simply count object into a city
enter image description here
in paris, i have 5 object, i don't want show 11111 but just 5,
that my code
{% set newAnnounceCity = [] %}
{% for item in announceCity %}
{% if item.infoCity is not null %}
{% if item.infoCity.city not in newAnnounceCity %}
<span class=" font-semibold mr-2 text-left flex-auto">
<a href="{{path('app_city_show',{slug: item.infoCity.slug})}}">
<button class=" m-2 p-2 pl-5 pr-5 bg-transparent border-2 border-red-500 text-red-500 text-lg rounded-lg hover:bg-gradient-to-b hover:from-red-600 hover:to-pink-500 hover:text-gray-100 focus:border-4 focus:border-red-300">
{{ (item.infoCity.city) }}
{% for key in item.infoCity.announce|keys %}
{{key|length }}
{% endfor %}
{% set newAnnounceCity = newAnnounceCity|merge([item.infoCity.city]) %}
</button>
</a>
</span>
{% endif %}
{% else %}
{% endif %}
{% endfor %}
someone can help me
i try to count an keys object
It's a bit hard to guess without a sample structure of your input array, but maybe try replacing
{% for key in item.infoCity.announce|keys %}
{{key|length }}
{% endfor %}
with simply
{{ item.infoCity.announce|length }}
I am having a twig template for my view on which the fields are displayed on 2 columns. Is there a way to make all the fields appear in the same column?
Twig code:
{% set index = 0 %}
<div class='row'>
<div class="panel panel-default">
<div class="panel-body">
{% for key, field in fields -%}
{% if index == 0 or index == 5 %}
<div class='col-md-6'>
{% endif %}
<span {{ field.label_attributes }}>{{ field.label }}{{ field.label_suffix }}</span>
<a href="#" data-toggle="tooltip" data-placement="right" title="{{ tooltips[key] }}">
<span {{ field.element_attributes }}>{{ field.content }}</span><br/>
</a>
{% if index + 1 == fields | length %}
<a href=''>Test link</a>
{% endif %}
{% if index == 4 or index + 1 == fields | length %}
</div>
{% endif %}
{% set index = index + 1 %}
{%- endfor %}
</div>
</div>
</div>
Current output:
How to make all the fields appear in one single column?
Could you not wrap the class in css using flex-direction: column.. for example:
.panel-body{
display:flex
flex-direction: column
}
Pretty simple fix. I removed the class from panel and it brought all the fields in a single column.
<div class='col-md-6'> changed to just <div> tag
I display the content of the category and I display the button "displays more" if I have other content but the button has been marked according to the number of ads in the category, and when I paste the button outside "for" I get always this button even when the category content is empty
<div class="pedagogical pedagogical--category js-pedagogical-items" data-type="category" data-nbdisplayed="4">
{% for categoryId in questionCategories %}
<div class="row pedagogical__items" data-type="category" data-value="{{ categoryId }}">
{% for tool in tools if tool.questionCategory == categoryId %}
<div class="col-12 col-md-6 pedagogical__item__wrapper">
{% include 'components/tool-preview-item.html.twig' with {'tool' : tool} %}
</div>
<div class="col-12 text-center">
<button class="btn btn-outline-secondary js-show-more" data-type="category" data-value="{{ categoryId }}">{{ 'show-more'|trans({}, 'action') }}</button>
</div>
{% endfor %}
</div>
{% endfor %}
</div>
I think you just need to add a check before rendering your button:
<div class="pedagogical pedagogical--category js-pedagogical-items" data-type="category" data-nbdisplayed="4">
{% for categoryId in questionCategories %}
<div class="row pedagogical__items" data-type="category" data-value="{{ categoryId }}">
{% set has_items = 'false' %}
{% for tool in tools if tool.questionCategory == categoryId %}
{% set has_items = 'true' %}
<div class="col-12 col-md-6 pedagogical__item__wrapper">
{% include 'components/tool-preview-item.html.twig' with {'tool' : tool} %}
</div>
{% endfor %}
{% if has_items == 'true' %}
<div class="col-12 text-center">
<button class="btn btn-outline-secondary js-show-more" data-type="category" data-value="{{ categoryId }}">{{ 'show-more'|trans({}, 'action') }}</button>
</div>
{% endif %}
</div>
{% endfor %}
</div>
Basically in their shopping cart I would like to display the image they upload to print but i can't seem to figure it out..... I know i need to add in something along the lines of <img src="http://path/to/thumbnails/myimage.jpg"> but i don't know what to add in place of "http://path/to/thumbnails/myimage.jpg" within this code to display the image they upload if there even is anything? All help appreciated! Thanks (sorry if this is a silly question and plain obvious)
{% comment %}
This is your /cart template. If you are using the Ajaxify Cart plugin,
your form (with action="/cart") layout will be used in the drawer/modal.
For info on test orders:
- General http://docs.shopify.com/manual/your-store/orders/test-orders
- Shopify Payments - http://docs.shopify.com/manual/more/shopify-payments/testing-shopify-payments
<!-- Bold: Options 4-1 -->
<script>function update_qty_builder(builder_id, qty){ jQuery('.'+builder_id+"_qty").val(qty.value); } function remove_product_builder(builder_id){ jQuery('.'+builder_id+"_qty").val(0); jQuery('.'+builder_id+"_qty").parents("form").submit(); }</script>
{% include 'bold-cart-handler' %}
<!-- // end Options 4-1 -->
{% endcomment %}
{% if cart.item_count > 0 %}
<form action="/cart" method="post" novalidate class="cart">
<div class="section-header">
<h1 class="section-header__title">{{ 'cart.general.title' | t }}</h1>
</div>
<div class="cart__row medium-down--hide cart__header-labels">
<div class="grid--full">
<div class="grid__item large--one-half push--large--one-half">
<div class="grid--full">
<div class="grid__item one-third medium-down--one-third">
<span class="h4">{{ 'cart.label.price' | t }}</span>
</div>
<div class="grid__item one-third medium-down--one-third text-center">
<span class="h4">{{ 'cart.label.quantity' | t }}</span>
</div>
<div class="grid__item one-third medium-down--one-third text-right">
<span class="h4">{{ 'cart.label.total' | t }}</span>
</div>
</div>
</div>
</div>
</div>
{% comment %}
Loop through products in the cart
{% endcomment %}
{% for item in cart.items %}
<!-- Bold: Options 4-2 -->
{% include 'boldoptions' with 'step2' %}
<!-- // end Options 4-2 -->
<tr style="{% include 'boldoptions' with 'step4' %}" class="{% include 'boldoptions' with 'step3' %}">
<div class="cart__row" data-id="{{ item.id }}">
<div class="grid--full cart__row--table-large">
<div class="grid__item large--one-half">
<div class="grid">
<div class="grid__item one-third">
<a href="{{ item.url | within: collections.all }}" class="cart__image">
{% comment %}
More image size options at:
- http://docs.shopify.com/themes/filters/product-img-url
{% endcomment %}
<!-- Bold: Options 4-5 -->
{% if builder[0] %}
<img src="{{ builder[1] }}" alt="{{ builder[0] }}" />
{% else %}
<img src="{{ item | img_url: 'medium' }}" alt="{{ item.title | escape }}">
</a>
<!-- Bold: Options 4-6 -->
{% include 'boldoptions' with 'step6' %}
<!-- // end Options 4-6 -->
{% endif %}
<!-- // end Options 4-5 -->
</div>
<div class="grid__item two-thirds">
<a href="{{ item.url }}" class="h4">
{{ item.product.title }}
</a>
{% unless item.variant.title contains 'Default' %}
<br>
<small>{{ item.variant.title }}</small>
{% endunless %}
{% if settings.cart_vendor_enable %}
<p>{{ item.vendor }}</p>
{% endif %}
{% comment %}
Optional, loop through custom product line items if available
For more info on line item properties, visit:
- http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization
{% endcomment %}
{% include 'product_customizer_cart' %}
{% if item.properties.size > 0 %}
{% for p in item.properties %}
{% unless p.last == blank %}
{{ p.first }}:
{% comment %}
Check if there was an uploaded file associated
{% endcomment %}
{% if p.last contains '/uploads/' %}
{{ p.last | split: '/' | last }}
{% else %}
{{ p.last }}
{% endif %}
<br>
{% endunless %}
{% endfor %}
{% endif %}
<a href="{% include 'boldoptions' with 'step9' %}" data-id="{{ item.id }}" class="{% include 'boldoptions' with 'step10' %} cart__remove" {% include 'boldoptions' with 'step11' %}>
<small>{{ 'cart.general.remove' | t }}</small>
</a>
</div>
</div>
</div>
<div class="grid__item large--one-half">
<div class="grid--full cart__row--table-large">
<div class="grid__item one-third">
<span class="cart__mini-labels">{{ 'cart.label.price' | t }}</span>
<span class="h5">{% include 'boldoptions' with 'step12' %}</span>
</div>
<div class="grid__item one-third text-center">
<span class="cart__mini-labels">{{ 'cart.label.quantity' | t }}</span>
{% comment %}
Added data-id for the ajax cart implementation only.
{% endcomment %}
<input type="number" name="updates[]" id="updates_{{ item.id }}" class="{% include 'boldoptions' with 'step7' %}" value="{{ item.quantity }}" min="0" data-id="{{ item.id }}" {% include 'boldoptions' with 'step8' %}>
</div>
<div class="grid__item one-third text-right">
<span class="cart__mini-labels">{{ 'cart.label.total' | t }}</span>
<span class="h5">{% include 'boldoptions' with 'step13' %}</span>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
<div class="cart__row">
<div class="grid">
{% comment %}
Optional, add a textarea for special notes
- Your theme settings can turn this on or off. Default is on.
- Make sure you have name="note" for the message to be submitted properly
{% endcomment %}
{% if settings.cart_notes_enable %}
{% assign noteSize = cart.note | size %}
<div class="grid__item large--five-twelfths">
<button type="button" class="text-link cart__note-add{% if noteSize > 0 %} is-hidden{% endif %}">
{{ 'cart.label.add_note' | t }}
</button>
<div class="cart__note{% if noteSize > 0 %} is-active{% endif %}">
<label for="CartSpecialInstructions">{{ 'cart.general.note' | t }}</label>
<textarea name="note" class="input-full" id="CartSpecialInstructions">{{ cart.note }}</textarea>
</div>
</div>
{% endif %}
<div class="grid__item text-right{% if settings.cart_notes_enable %} large--seven-twelfths{% endif %}">
<p>
<span class="cart__subtotal-title">{{ 'cart.general.subtotal' | t }}</span>
<span class="h5 cart__subtotal">{{ cart.total_price | money }}</span>
</p>
<p><em>{{ 'cart.general.shipping_at_checkout' | t }}</em></p>
<input type="submit" name="update" class="btn--secondary update-cart" value="{{ 'cart.general.update' | t }}">
<input type="submit" name="checkout" class="btn" value="{{ 'cart.general.checkout' | t }}">
{% if additional_checkout_buttons %}
<div class="cart__additional_checkout">{{ content_for_additional_checkout_buttons }}</div>
{% endif %}
</div>
</div>
</div>
</form>
{% else %}
{% comment %}
The cart is empty
{% endcomment %}
<h2>{{ 'cart.general.title' | t }}</h2>
<p>{{ 'cart.general.empty' | t }}</p>
<p>{{ 'cart.general.continue_browsing_html' | t }}</p>
{% endif %}
<!-- Bold: Options 4-14 -->
{% include 'bold-cart-modal' %}
<!-- // end Options 4-14 -->
You have to include the full publicly reachable image path in the src attribute of the image tag
<img src="http://path/to/thumbnails/myimage.jpg">
What I am trying to achieve is to render a simple 5-star rating HTML element based on a number ( 0-5 )
Example :
{{ user.rating }} // returns integer 4
Output should be:
<div class="rating">
<i class="star voted"></i>
<i class="star voted"></i>
<i class="star voted"></i>
<i class="star voted"></i>
<i class="star-empty"></i>
</div>
// 4 lighted stars out of 5
Thanks
You can archive your problem with this code:
<div class="rating">
{% for i in 1..5 %}
{% set starClass = (user.rating >= i ? "star voted" : "star-empty") %}
<i class="{{ starClass }}"></i>
{% endfor %}
</div>
See the working solution on this twigfiddle
Explanation:
From the doc:
If you do need to iterate over a sequence of numbers, you can use the
.. operator:
{% for i in 0..10 %}
* {{ i }}
{% endfor %}
The Twig built-in .. operator is just syntactic sugar for the range function.
Simple way :
{% set stars, count,starsResult = 4 , 1 , "" %}
{% for i in range(1, 5) %}
{% if stars >= count %}
{% set starsResult = starsResult ~ "<i "star active">" %}
{% else %}
{% set starsResult = starsResult ~ "<i class="star disable">" %}
{% endif %}
{% set count = count + 1 %}
{% endfor %}
{{ starsResult }}