ive written an simple plugin but it changes the tree, so that the .container moves after the .head, if it trys to render this part:
<a class="head" href="#">
<div class="container">
{% for subchild in child.children %}
<a>{{ subchild }}</a>
{% empty %}
notext
{% endfor %}
</div>
</a>
but if i change the outter a tag to anything else it works
Related
I want to include multiple layout file in index file of view and extends all of them from master.volt. But my problem is level-1.volt doesn't render when I run index.volt. Is my workflow ok? What is the problem?
I have on base view file named master.volt that have basic view of my frontend:
<div class="row justify-content-center" id="Level-1">
<div class="col-11">
<div class="row flex-column justify-content-center align-items-center">
{% block bannerOne %}
{% endblock %}
</div>
</div>
</div>
I have one view file named level-1.volt:
{% block bannerOne %}
<div class="col-12 d-flex justify-content-center align-items-center">
<img src="img/pop-1-2.png" class="img-fluid"/>
</div>
{% endblock %}
And this is my index.volt view:
{% extends 'master/master.volt' %}
{% include 'layouts/level-1.volt' %}
I am developing a site on Shopify and I need to know how to change color of selected menu items. When a user clicks on any menu items, the color will change and remove once another menu item is selected.
I have tried to solve this problem many times now by using CSS and JQuery, but nothing I do seems to work.
Here is the code for the megamenu liquid file in Shopify.
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-
top="197">
<div class="container">
<div class="mega-menu">
<!-- Brand and toggle get grouped for better mobile display -->
<ul class="nav navbar-nav" id="navbar">
{% assign meagemenu_lists = settings.Megamenu-list %}
{% for link in linklists[meagemenu_lists].links %}
{% assign item = link.title | downcase %}
<li class="level1 dropdown">
<a class="megamenu_icon{% increment count %} a1" href="{{ link.url }}"
title="{{link.title}}">{{ link.title }}</a>
{% for i in (2..5) %}
{%capture Megamenu%}megamenu_{{i}}_parent{%endcapture%}
{% if settings[Megamenu] == item %}
<div class="sub-menu dropdown-menu">
<div class="top-sub-menu">
<div class="item">
{% if settings.service-megamenu-icon1 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon1']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title1'] }}</h3>
<p>{{ settings['service-megamenu-subtitle1'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon2 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon2']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title2'] }}</h3>
<p>{{ settings['service-megamenu-subtitle2'] }}</p>
</div>
</div>
<!-- End item -->
<div class="item">
{% if settings.service-megamenu-icon3 != blank %}<p
class="image"><i class="{{ settings['service-megamenu-icon3']
}}"></i></p>{% endif %}
<div class="text">
<h3>{{ settings['service-megamenu-title3'] }}</h3>
<p>{{ settings['service-megamenu-subtitle3'] }}</p>
</div>
</div>
<!-- End item -->
</div>
<ul class="menu-level-1">
{% for j in (1..3) %}
{% capture mega_title %}megamenu_{{ i }}_column_{{ j }}_title{%
endcapture %}
{% capture mega_col %}megamenu_{{ i }}_column_{{ j }}_menu{%
endcapture %}
<li class="level2"><h4>{{ settings[mega_title] }}</h4>
<ul class="menu-level-2">
{% for link in linklists[settings[mega_col]].links %}
<li class="level3"><a href="{{ link.url }}" title="{{
link.title }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
</li>
{% endfor %}
{% capture _image1 %}megamenu_{{ i }}_image1.jpg{% endcapture %}
{% capture _image2 %}megamenu_{{ i }}_image2.jpg{% endcapture %}
<li class="level2">
<img src="{{ _image1 | asset_url }}" alt="Sub-Menu" />
</li>
<li class="level2">
<img src="{{ _image2 | asset_url }}" alt="Sub-Menu" />
</li>
</ul>
<div class="bottom-sub-menu">
<p>{{ settings['Megamenu-description'] }}</p>
</div>
</div>
{% endif %}
{% endfor %}
<!-- End Dropdow Menu -->
</li>
{% endfor %}
</ul>
</div>
</div>
</nav>
There will be a CSS class somewhere in the menu HTML which applies a CSS rule to color the active item. Across different e-commerce themes and platforms, this class is generally 'active', 'open', 'nav-open'. This class may be added via JavaScript after page load, so you may not see it in the HTML file.
I recommend using the inspect element tool to find the rule being applied to the item.
I have been following the Grav documentation (https://learn.getgrav.org/cookbook/general-recipes#render-content-in-columns) to figure out how to do this, but haven't had much luck. The content for my page is in default.md, but I can't figure out to how place images and content into separate columns and rows.
I've included a screenshot of what I've created in HTML and CSS. Basically I want to put an image into the left column of a row, and details into the right column. See here: http://imgur.com/HuTSGw5
When I am editing the page template however, I only seem to have one "variable" (if that's the right word) controlling all the content. See my code for base.html.twig:
<div class="container">
<div class="row">
<div class="col-md-4">
{% block content %} {# thumbnail image goes here #}
{% endblock %}
</div> <!-- COLUMN END -->
<div class="col-md-8">
{% block content %} {# album details go here #}
{% endblock %}
</div> <!-- COLUMN END -->
</div> <!-- ROW END -->
How do I specify that a content block is specific for an image, and that another is specific for album details?
{% block content %} is the only block available when showing data from the .md file.
To render the data (text or images) in two or more columns as shown in the documentation, you have to split them in the .md file (with ---) and then use the twig function {% for %} in your .html.twig template to show them.
user/pages/my-2-column-page.md
(note the extra line before the ---)
---
title: ' 2 Columns Page'
---
Column one is for the image thumb
---
Here goes all the album details content.
Phasellus id eleifend risus. In dui tellus, dignissim id
viverra non, convallis sed ante. Suspendisse
---
user/themes/mytheme/templates/my-2-column-page.html.twig
(note the twig function {% for %} )
{% extends 'partials/base.html.twig' %}
{% block content %}
{% set colsize = [4, 8] %}
<div class="container">
<div class="row">
{% for key, column in page.content|split('<hr />') %}
<div class="col-md-{{ colsize[key] }}">
{{ column }}
</div>
{% endfor %}
</div>
</div>
{% endblock %}
OR ...
Other way to do it (more simple) is to define your .html.twig template as normal (with no "for" iteration) and call the image directly:
{% block content %}
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="{{ page.media['thumbnail.jpg'].url }}" />
</div>
<div class="col-md-8">
{{ page.content }}
</div>
</div>
</div>
{% endblock %}
The image filename must match the file copied in the page folder (user/pages/my-2-column-page/thumbnail.jpg) and just type the album detail in the .md file.
I'd love some help with this.
On the Cart page, when the "use my stores Layout" is selected, when customers click "Check Out", it just keeps cycling on the page and won't proceed to checkout. This is a known issue with the Luna theme for Bigcartel.
The solution I found says you need to uncheck it, but when you do, you get the error message:
"You must include {{ head_content }} inside the <head> tag of your content"
This means there's no page formatting in the code. I'm not big on the code, though I've tried for a bit to get this to work, stealing code for other pages in the theme, and failed. (it's been years since I've messed with code, so any help would be a big one).
Thank you
Here's the code for the page:
<header class="product_header page_header">
<h1>Cart</h1>
<span class="dash"></span>
</header>
{% if cart.items != blank %}
<form id="cart-form" {% unless cart.shipping.enabled or cart.discount.enabled %}class="no_options"{% endunless %} method="post" action="/cart" accept-charset="utf8">
<input type="hidden" name="utf8" value='✓'>
<div id="cart_description">
<section id="cart_items">
<ul>
{% for item in cart.items %}
<li class="cart_item {% unless item.product.has_default_option %}with_option{% endunless %}" id="item-{{ item.id }}">
<div class="item_image"><img src="{{ item.product.image | product_image_url: "thumb" }}" alt="Photo of {{ item.name }}"></div>
<dl>
<dt>{{ item.product.name }}</dt>
<dd class="item_price">{{ item.unit_price | money_with_sign }}{% if item.quantity > 1 %}<span class="item_quantity">(x{{ item.quantity }})</span>{% endif %}</dd>
<dd class="quantity_input">{{ item | item_quantity_input }}</dd>
{% unless item.product.has_default_option %}<dd class="item_option">{{ item.option.name }}</dd>{% endunless %}
</dl>
Remove item
</li>
{% endfor %}
</ul>
</section>
{% if cart.shipping.enabled or cart.discount.enabled %}
<section id="cart_options">
<ul>
{% if cart.shipping.enabled %}
{% if cart.shipping.strict %}
<li id="shipping_option">
<label for="country">Shipping</label>
{{ store.country | country_select }}
{% if cart.shipping.pending %}
{% if cart.country %}
<span class="no_shipping">We don't ship to {{ cart.country.name }}</span>
{% endif %}
{% endif %}
</li>
{% endif %}
{% endif %}
{% if cart.discount.enabled %}
<li id="cart_discount" class="cart_item">
{% if cart.discount.pending %}
<label id="cart_discount_label" for="cart_discount_code">Discount</label>
{{ cart.discount | discount_code_input }}
{% elsif cart.discount.free_shipping %}
<label for="cart_discount_code">Discount</label>
<p>{{ cart.discount.name }}</p>
{% else %}
<label for="cart_discount_code">Discount</label>
<p>{{ cart.discount.name }}</p>
{% endif %}
</li>
{% endif %}
</ul>
<div class="cart-update">
<button id="update-btn-footer" class="update-btn button disabled" name="update" type="submit" title="Update your cart total"><span>Update total</span></button>
</div>
</section>
{% else %}
<section id="cart_options" class="solo_update">
<div class="cart-update">
<button id="update-btn-footer" class="update-btn button disabled" name="update" type="submit" title="Update your cart total"><span>Update total</span></button>
</div>
</section>
{% endif %}
</div>
<section id="cart_summary">
<ul>
<li>
<h3>Items</h3>
<span>{{ cart.subtotal | money_with_sign }}</span>
</li>
{% if cart.shipping.enabled %}
<li id="cart-shipping-tax">
<h3>Shipping</h3>
{% if cart.shipping.pending %}
{% if cart.country %}
<span class="shipping-amount">Select another country</span>
{% else %}
<span class="shipping-amount">Select country</span>
{% endif %}
{% else %}
<span class="shipping-amount">{{ cart.shipping.amount | money_with_sign }}</span>
{% endif %}
</li>
{% else %}
<li id="cart-shipping-tax" class="not_set">
<h3>Shipping</h3>
<span>Applicable fees apply</span>
</li>
{% endif %}
{% if cart.discount.enabled %}
{% if cart.discount.pending %}
{% elsif cart.discount.free_shipping %}
<li>
<h3>Discount</h3>
<span>Free shipping!</span>
</li>
{% else %}
<li>
<h3>Discount</h3>
<span>-{{ cart.discount.amount | money_with_sign }}</span>
</li>
{% endif %}
{% endif %}
<li id="cart_total">
<h3>Total</h3>
<h2>{{ cart.total | money_with_sign }}</h2>
</li>
</ul>
<button id="checkout-btn" class="button" type="submit" title="Checkout">Checkout</button>
</section>
</form>
{% else %}
<div id="cart_empty">
<p>Your cart is empty! Sounds like a good time to start shopping.</p>
</div>
{% endif %}
Thanks!
There's not any known issues with the Luna theme code that prevents customers from being able to check out - you shouldn't need to edit any settings or change any code.
It sounds like your custom domain might be setup incorrectly with an IFRAME though, as this is known to cause problems with the cart page redirecting to the checkout. You can test this by using your storename.bigcartel.com URL vs. the custom domain to see if this is the case.
Since this isn't related specifically to your theme, you'll want to get in touch with Big Cartel support directly and they should be able to help troubleshoot further.
I'm using Twitter Bootstrap and Symfony 2 with Twig. I have this for all my pages:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="{{ path('home') }}">BudgetTracker</a>
<ul class="nav">
<li class="active">Expenses</li>
<li>Reports</li>
<li>Categories</li>
<li>Months</li>
<li>Bank Accounts</li>
</ul>
</div>
</div>
I don't want to copy it on each page... The problem is that the class active attribute should be put only for the cuurent page. Is there a way to succeed without using JavaScript, only with some king of macro or include? Thank you very much in advance!
UPDATE
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="{{ path('home') }}">BudgetTracker</a>
<ul class="nav">
{% if var == 'Expenses' %}
<li class="active">Expenses</li>
{% else %}
<li>Expenses</li>
{% endif %}
{% if var == 'Reports' %}
<li class="active">Reports</li>
{% else %}
<li>Reports</li>
{% endif %}
{% if var == 'Categories' %}
<li class="active">Categories</li>
{% else %}
<li>Categories</li>
{% endif %}
{% if var == 'Months' %}
<li class="active">Months</li>
{% else %}
<li>Months</li>
{% endif %}
{% if var == 'Bank Accounts' %}
<li class="active"><li>Bank Accounts</li>
{% else %}
<li><li>Bank Accounts</li>
{% endif %}
</ul>
</div>
</div>
My not very elegant try. And I call it with:
{% include 'EMBudgetTrackerBundle::navbar.html.twig' with {'var':'Categories'} %}
The easy way to do this is using the routes:
<ul class="nav nav-pills">
<li {% if app.request.attributes.get('_route') == 'your_route' %} class="active" {% endif %}>
MyTitle
</li>
...
</ul>
This is an adaptation of a solution provided by #Winzou.
It is quite simple:
Define this as a single twig with
{% block menu_block %} //your content here {% endblock %}
Use your block in every page
{% block menu_block %} {{ parent() }} {% endblock %}
Make conditional statements for give your class at the current menu element. Obviously you have to pass to your twig (or retrieve from request, i.e.) the name or id of your page, to make what you're trying to do
Here's an example.
{% if menu.url == current_url %} class="active"{% endif %}