We want to add a class to the category filter page on a specific attribute.
An example is below, we would like to add a class called "Man" to the DT.
<dt class="even">Manufacturer</dt>
<dd class="even"><ol>
<li>
<input type="checkbox" onclick="$(this).next().click()">
<a onclick="$(this).previous().checked = true;" href="/filter/test">Apple</a>
(1)
</li>
<li>
<input type="checkbox" onclick="$(this).next().click()">
<a onclick="$(this).previous().checked = true;" href="/filter/test/">HTC</a>
(1)
</li>
</ol></dd>
We are trying to add a class, so it would look like the example below:
<dt class="even Man">Manufacturer</dt>
How would this be possible?
There is a file located at:
app/design/frontend/base/default/template/catalog/layer/view.phtml
Here you can put those classes in dt elements based on some if conditions, although it's not a good practice.
Related
I am looking to create a orbit that will not auto-play, and only change slide when user clicks "next" link manually.
Docs:
https://foundation.zurb.com/sites/docs/orbit.html
Do I use data-options the wrong way?
<div class="orbit" role="region" data-orbit data-options="data-timer-delay:0; data-auto-play:false;">
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
<li class="is-active orbit-slide">
<img class="orbit-image" src="https://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg" alt="Space">
</li>
<li class="orbit-slide">
<img class="orbit-image" src="https://foundation.zurb.com/sites/docs/assets/img/orbit/01.jpg" alt="Space">
</li>
</ul>
</div>
http://codepen.io/anon/pen/vyoRJz
Cheers!
This is how I got it to work:
<div class="orbit" role="region" data-orbit data-auto-play="false">
As mentioned in the Foundation docs, there are two ways the settings can be defined in the HTML:
As individual data attribute, like Åsmund did in his answer
<div class="orbit" role="region" data-orbit data-auto-play="false">
Or together in the data-options attribute i.e. like this
<div class="orbit" role="region" data-orbit data-options="autoPlay:false; timerDelay:1000; bullets:false">
In the former case the option is notated in hyphenated words whereas in the second case the option is notated camelCased.
I would like to undo the changes that spree_fancy theme has made to the listing products. In the original Spree, I received products with 'columns three' when I browsed a taxon.
<div data-hook="taxon_products">
<ul id="products" class="inline product-listing" data-hook="">
<li id="product_3" class="columns three alpha" itemtype="http://schema.org/Product" itemscope="" data-hook="products_list_item">
<div class="product-image">
<a class="info" title="Ruby on Rails Baseball Jersey" itemprop="name" href="/products/ruby-on-rails-baseball-jersey">Ruby on Rails Baseball Jersey</a>
<span class="price selling" itemprop="price">$19.99</span>
</li>
However, spree_fancy theme inserted another nested unordered list and set the class to "columns four". I would like to undo these changes. My first guess was to browse through the overrides, but I couldn't find the caused file.
div data-hook="taxon_products">
<ul id="products" class="inline product-listing" data-hook="">
<li class="product-row">
<ul>
<li id="product_18" class="columns four alpha" itemtype="http://schema.org/Product" itemscope="" data-hook="products_list_item">
<div class="product-image">
<a class="info" title="Sunflower Clip Arts" itemprop="name" href="/products/sunflower-clip-arts">Sunflower Clip Arts</a>
<span class="price selling" itemprop="price">$4.00</span>
</li>
The override happens here:
https://github.com/spree/spree_fancy/blob/596d11e09343a1ce716b4c34bcd3802765728c46/app/overrides/spree/shared/_products/group_products_list_by_3_in_row.html.erb.deface
If you place an empty file at app/overrides/spree/shared/_products/group_products_list_by_3_in_row.html.erb.deface and restart your web server, this override should not longer be applied.
Can Foundation 4 be initialized only in certain areas of the page?
For instance, if I have 2 divs, can I call foundation("#div2") and all CSS and javascript events are applied only within div#2?
Thanks a 1000!
Generally it won't affect you. The grid system for example is mainly controlled by CSS. For forms, unless you apply the custom class to your form the js for forms elements won't kick in. To illustrate that, one of the two forms below has the custom class and the other don't. Notice that Foundation will add two anchor tags and an unordered list for the form with custom class:
<form id="form1">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<form id="form2" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
Here's the fiddle to that to see it in action.
UPDATE: For general "section formatting" yes you can apply foundation to some sections of your page. But take note though that the grid system will still be applied even if the grid is outside the section you targeted. Again, that is because they are mainly controlled by CSS. Here's another illustration:
<h1>The Grid System will still be applied to this</h1>
<div class="row1">
<div class="large-5 large-centered columns">
<p class="panel">Centered Div</p>
</div>
</div>
<div id="foundationArea">
<h1>Only apply Foundation here</h1>
<form id="form1" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
<div class="row">
<div class="large-6 columns panel">
<p>Test</p>
</div>
</div>
</div>
<h1>Foundation is not allowed here</h1>
<form id="form2" class="custom">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</form>
See this updated fiddle to show the updated example given here.
I usually keep it simple and use the following form syntax in my templates:
<div>
<div>{{form.title.label}}:</div>
<div>{{form.title}}</div>
</div>
The problem with this approach is the bad semantic in the html output.
<div>
<div>Title:</div>
<div><input id="id_form-title" type="text" maxlength="30" name="form-title"></div>
</div>
Correct should be:
<div>
<label for="id_form-title">Title</label>
<input id="id_form-title" type="text" maxlength="30" name="form-title">
</div>
Is there a django build-in tag to do this automatically for me, or do I have to do it manually myself like this?
<div>
<label for="id_form-title">{{form.title.label}}</label>
{{form.title}}
</div>
It is indeed annoying that outputting fields one by one doesn't give you automatic access to a properly-constructed label element - doing form.as_p will correctly produce the fields plus labels, but you give up all control over the form layout.
You can build up the label tag using the field information fairly easily though:
<label for="{{ field.auto_id }}">{{ field.label }}</label>
{{ field }}
You can put this in a template tag for easier reuse.
Don't forget to also add {{ field.errors }} to display the errors associated with each field.
using label_tag should give you properly constructed label tag. So instead of just {{form.title.label}} you should use {{form.title.label_tag}} and it will result in the desired html
Is there a way to get multiple digits of a given number within a django template?
For example:
{{ some_num|get_digit:2 }}
will give you the second right most digit. For 1224531 it would be 3
Is there a way to get the last 3 digits or the first 5 digits? Like python's slicing?
something like:
{{ some_num|get_digits:2,5}}
There is a the "slice" template tag
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#slice
It uses the same syntax as Python's list slicing.
Example:
{{ some_list|slice:":2" }}
in python this is equivalent to:
some_list[:2]
BTW your 2nd example would be "2:5" not "2,5"
NB. Python slicing works on any 'sequence'. Strings and lists are sequences. Numbers are not!
any extra filter that converts the number into a string before slicing will work. I used these variants:
{{ some_num|slugify|slice:"2:5" }}
and
{{ some_num|stringformat:"d"|slice:"5:10" }}
{{1234567|make_list|slice:'2:5'|join:''}}
Stefano's answer is on the right track. You need a pre-processing step to turn your number into a list, and a post-processing step to merge that list back into string.
You just need to write code as follow for slicing :-
{{valueformoney|slice:"0:4"}}
{% for cloth in valueformoney|slice:"0:4" %}
<div class="product h-100 w-100 border rounded ">
<div class="img__container">
<img src="{{cloth.cloth_image.url}}" alt="" />
</div>
<div class="product__bottom">
<div class="price">
<span class="text-danger"> <del>{% min_price cloth as result %} {{ result|rupee}}</del></span>
<span>{% discount_price cloth as result %}{{result|rupee}}</span>
<span class="float-right badge p-3 badge-info">Save {{cloth.cloth_discount}}% </span>
</div>
<h3 class="p-4">{{cloth.cloth_name}}</h3>
<div class="button">
See More
</div>
</div>
</div>
{% endfor %}