In ExpressioneEngine, I'm creating a list with conditionals that is returning some strange behavior. The code below is part of a bigger set:
<li><h4>DERMATOLOGY</h4>
<ul>
{exp:channel:entries channel="specialist" dynamic="no" orderby="sp_order" sort="asc"}
{if sp_specialty == "sp_dermatology"}
<li>
<img src="{sp_headshot}" />
<p>{title}</p>
</li>
{/if}
{/exp:channel:entries}
</ul>
</li>
<li><h4>EMERGENCY AND CRITICAL CARE</h4>
<ul>
{exp:channel:entries channel="specialist" dynamic="no" orderby="sp_order" sort="asc"}
{if sp_specialty == "sp_emergency"}
<li class="{switch='one|two'}">
<img src="{sp_headshot}" />
<p>{title}</p>
</li>
{/if}
{/exp:channel:entries}
</ul>
</li>
What happens, in the case of EMERGENCY AND CRITICAL CARE, is that with the 5 entries I have under that, the classes are returned like this: two, one, one, one, two. Any suggestions on getting the behavior I need?
I see what you mean. The switch variable applies its logic to all entries returned by the entries loop - which is why you're seeing odd numbering in your rendered page - because it's applying them to entries returned by the loop that you are then applying conditionals to in order to do your grouping. You could use the search param to do some of that for you, returning only the entries you're looking for within each loop. Like this:
<li><h4>DERMATOLOGY</h4>
<ul>
{exp:channel:entries channel="specialist" search:sp_specialty="=sp_dermatology" dynamic="no" orderby="sp_order" sort="asc"}
<li>
<img src="{sp_headshot}" />
<p>{title}</p>
</li>
{/exp:channel:entries}
</ul>
</li>
<li><h4>EMERGENCY AND CRITICAL CARE</h4>
<ul>
{exp:channel:entries channel="specialist" search:sp_specialty="=sp_emergency" dynamic="no" orderby="sp_order" sort="asc"}
<li class="{switch='one|two'}">
<img src="{sp_headshot}" />
<p>{title}</p>
</li>
{/exp:channel:entries}
</ul>
</li>
This way each loop returns ONLY the matching items you're looking for, eliminating the need for the conditional and allowing the switch param to operate as it wants to - applying itself in alternating fashion to every returned entry from the loop.
Related
Page Speed Insights is giving me the following error message for Accessibility:
Lists do not contain only li elements and script supporting elements (script and template)
Below are the code snippets that are generating this message. I'm not quite sure what needs to be done here to stop generating the errors, any advice would be much appreciated!
<ul class="slide_tit swiper-pagination-clickable swiper-pagination-bullets">
<li class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 1">
<li class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2">
<li class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 3">
Using sublime text 3 cutting and then paste and indent using Ctrl+Shift+V it doesn't do what I think it should do:
<div>
<div></div>
</div>
function(){
test;
}
The expected result should be:
<div>
<div></div>
</div>
function(){
test;
}
Am I missing something?
This is not how Paste and Indent works. It is intended for situations when you copy a line or lines with one indentation and paste it into a block with a different indentation. For example:
<ul class="list1">
<li>One</li>
<li>
<ul class="innerList">
<li>OneA</li>
<li>OneB</li>
| <li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Four</li>
</ul>
Now, I want to copy the line where the cursor is (containing <li>Three</li>) from innerList to list1. If I just do copy and paste (CtrlV), the indentation is wrong:
<ul class="list1">
<li>One</li>
<li>
<ul class="innerList">
<li>OneA</li>
<li>OneB</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
| <li>Three</li>
<li>Four</li>
</ul>
However, if I do "paste and indent" (CtrlShiftV):
<ul class="list1">
<li>One</li>
<li>
<ul class="innerList">
<li>OneA</li>
<li>OneB</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
| <li>Three</li>
<li>Four</li>
</ul>
The indentation is corrected for the current context. To do what you want to do, you'd need to use one of the many HTML and/or JS formatting plugins available on Package Control. I personally use HTML-CSS-JS Prettify, which runs on top of Node.js, but there are plenty to choose from.
as i remember there is Beautiful Html extension well be useful for your issue
Prestashop option to hide unavailable attributes on product page doesn't work when attribute groups are used, for example color and size (for clothing shops).
I need to keep showing all possible combinations, but grey out (or strikethrough) the combinations with no stock.
Like this:
I tried several things.
In Prestashop 1.6 the following piece of code worked to apply css class (.out-of-stock-float-left) to unavailable combinations:
{elseif $group.group_type == 'radio'}
<ul id="group_{$id_attribute_group}">
{foreach from=$group.attributes key=id_attribute item=group_attribute}
{if {$group.attributes_quantity[{$id_attribute|intval}]} > 1} <!-- product in stock -->
<li class="input-container float-left">
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]"
value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span class="radio-label">{$group_attribute.name}</span>
</li>
{else} <!-- product out of stock -->
<li class="input-container out-of-stock-float-left">
<input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}"
name="group[{$id_attribute_group}]"
value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
<span class="radio-label">{$group_attribute.name}</span>
</li>
{/if}
{/foreach}
</ul>
{/if}
When changing combinations there is an ajax request. I don't know how to grey out combinations with no stock and make them not clickable.
Thanks
I'm using the flexslider to create a carousel of pictures and use channel entries to populate the list items (images) that the flexslider uses to create the carousel.
Now I want to add a link to a pdf on al those list items that I have in a matrix field in the channel and that works also but only for the first list item.
Anybody knows why this is?
<div class="flexslider">
<ul class="slides">
{exp:channel:entries channel="lr_press"}
{if press_slider_switch != ""}
{press_artikel}
<li><img src="{press_beeld}" alt="{title}" /></li>
{/press_artikel}
{/if}
{/exp:channel:entries}
</ul>
</div>
I'm having trouble wrapping my head around how to create a dynamic menu with GWcode categories in ExpressionEngine. I would like the menu to go a certain depth only for current {segment_2} (parent) category and the rest of the parent categories to just stay a depth of 1.
For instance, if the url was: domain.com/products/medical-tables-cabinets/eta-classic-series/ it would output this:
<ul class="nav-menu">
<li>Power Tables</li>
<li class="active submenu">Medical Tables & Cabinets
<ul class="nav-submenu">
<li>ETA Alpha Series</li>
<li class="active submenu">ETA Classic Series
<ul class="nav-submenu">
<li>Entry A</li>
<li>Entry B</li>
<li>Entry C</li>
</ul>
</li>
<li>Style Line Cabinet Models</li>
<li>Echo Image Series</li>
<li>Bariatric Series</li>
<li>Family Practice</li>
<li>Treatment & Bedside Cabinets</li>
<li>Managed Care Quick Cabinets</li>
<li>Recovery Couches</li>
</ul>
</li>
<li>Pediatric Equipment</li>
<li>Medical Seating</li>
<li>Blood Drawing Chairs</li>
<li>Tubular Steel & Accessories</li>
<li>Physical Therapy Equipment</li>
<li>Kangoo by Clinton</li>
<li>Training Room Furnishings</li>
<li>Index by Model #</li>
<li>Clinton-Eco Tables</li>
</ul>
I got it working, but I still need to go a little deeper. Here is the basic concept:
{exp:gwcode_categories
channel="products"
style="linear"
}
{if depth1_start AND segment_2 != cat_url_title}
<li>{cat_name}</li>
{/if}
{if depth1_start AND segment_2 == cat_url_title}
<li class="active submenu">{cat_name}
<ul class="nav-submenu">
{/if}
{if depth == 2 AND segment_2 == parent_url_title}
<li{if segment_3 == cat_url_title} class="active"{/if}>{cat_name}</li>
{/if}
{if depth1_end AND segment_2 == parent_url_title}
</ul>
</li>
{/if}
{/exp:gwcode_categories}