<div spry:region="ds1" spry:repeatchildren="ds1">
<b spry:if=" '{title}'!='' ">
<!-- this is the first if -->
<a href="#" spry:if=" '{author}'!='' ">{author}
<!-- this is the second if -->
</a>
</b>
</div>
I wonder if there is any method as simple as
if(x==y && i>j)
in
<b>spry</b>
region.
I can't find any information in spry docs (labs.adobe.com/technologies/spry/)
The syntax inside the spry:if attribute is Javascript, so you can use &&:
<b spry:if="'{title}' != '' && '{author}' != ''">
<!-- ... -->
</b>
also you can call a function instead
spry:if="myFunc();"
and in your function return Boolean value as result
function myfunc()
{
//do somethings ;
if(...)
return true;
else
return false;
}
Normally I do like this
<div spry:region="ds1" spry:repeatchildren="ds1">
<b spry:if=" '{ds1::title}'!='' && '{ds1::author}'!=''">
{author}
</b>
</div>
Related
if the data is null or empty, how can set dont show it?
when I get the print_data.chrt_B1_Measures is null or empty, how do I do dont show ?
<p style="margin-left: 28px">
<span>Solution：</span>
<br />
<span class="ql-editor" v-html="print_data.chrt_B1_Measures"></span>
</p>
is it use v-if then??
I'd tried to used this
<p style="margin-left: 28px" v-if="!print_data.chrt_B1_Measures">
<span>Solution：</span>
<br />
<span class="ql-editor" v-html="print_data.chrt_B1_Measures"></span>
</p>
But it's failed....
Try this
<p style="margin-left: 28px" v-show="print_data.chrt_B1_Measures">
<span>Solution：</span>
<br />
<span class="ql-editor" v-html="print_data.chrt_B1_Measures"></span>
</p>
Create like this in computed:
total() {
if (this.print_data) {
if (this.print_data.chrt_B1_Measures) {
return this.print_data.chrt_B1_Measures
} else {
return 0
}
} else {
return 0
}
}
and put this in your v-show condition
<p style="margin-left: 28px" v-show="!total">
I'm learning to handle typo3. I understand that what I'm using here is Fluid to call the variable from my backend
I have this template
<f:layout name="Default" />
<f:section name="Main">
<div class="container">
<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '21'}" />
</div>
</f:section>
And this is the template? I'm printing my content element with.
<html data-namespace-typo3-fluid="true"
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
<div class="row">
<div class="col-7 ">
<div class="screen">
<div class="screenshot">
<f:for each="{screenshots}" as="screenshot">
<f:image style="opacity: 1;" image="{screenshot}" />
</f:for>
</div>
<a href="#" target="_blank">
<img src="typo3conf/ext/hebotek_website/Resources/Public/Images/screen.png" width="100%">
</a>
</div>
</div>
<div class="col-5">
<f:for each="{logos}" as="logo">
<f:image style="opacity: 1;" image="{logo}" />
</f:for>
<div class="project_desc">
<h3>
{data.header}
</h3>
<f:format.html>{data.bodytext}</f:format.html>
</div>
</div>
</div>
</html>
This will print two columns, the first one with a picture and the second one with a header and a text.
I want to print one time the image at the left and the next time the image at the right and the next at the left again. How do I alternate the html here? Is this possible with fluid or I must take a different approach?
Something like:
if(index % 2 == 0)
{
print left
}
else
{
print right
}
In any of this two templates I have an array in order to do this.
Thanks!
Unfortunately, there is no real alternate functionality in fluid.
You could use your approach with a condition:
<f:if condition="{index % 2 == 0}">
<f:then>
print left
</f:then>
<f:else>
print right
</f:else>
</f:if>
Fluid also provides a way to render partials in separate files, to reduce the amount of markup in your template:
<f:render partial="path/to/your/partial/left">
But a better approach will probably be to use css to alternate your layout.
For example with flexbox:
.row:nth-child(even) .col-6.image {
order: 1;
}
.row:nth-child(even) .col-6.text {
order: 2;
}
.row:nth-child(odd) .col-6.image {
order: 2;
}
.row:nth-child(odd) .col-6.text {
order: 1;
}
This way, you can also use a media query, to keep your top-bottom order for smaller screens, so your images or your text are not next to each other.
I'm trying to focus on several elements of my form but the first one, despite being applied, returns an error by console.
This is my template:
<div class="container">
<div class="col-xs-12">
<div class="row">
<h1 class="animal-title">Your selection is : </h1>
</div>
<div class="wrapper">
<form class="first-form" #submit.prevent="onSubmit">
<div class="image-wrapper">
<div class="sel-image">
<div v-on:click="imageSelected = true" v-for="item in items" v-bind:key="item.id">
<label>
<input
type="radio"
name="selectedItem"
ref="item"
:value="item.id"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)"
/>
<img v-if="item.id === 1" src="../../assets/1.png" />
<img v-if="item.id === 2" src="../../assets/2.png" />
<img v-if="item.id === 3" src="../../assets/3.png" />
</label>
<p class="cie-animal-subtitle">{{item.name}}</p>
</div>
</div>
</div>
<div class="form-select">
<div v-show="filteredStock && (imageSelected || itemFormInfo.selectedItem) > 0">
<h1 v-if="this.itemName === 'Phone' || this.itemName === 'Tablet'" for="selectedItem" ref="itemVisible">
Select the brand of your <span>{{this.itemName}}</span> :
</h1>
<h1 v-if="this.itemName === 'PC'" for="selectedBreed" ref="itemVisible">
Select the type of your <span>{{this.itemName}}</span> :
</h1>
<select
ref="brand"
class="form-control"
id="selectedBrand"
v-model="itemFormInfo.selectedBrand"
#change="onChangeBrand($event)">
<option v-for="brand in filteredBrand" v-bind:key="brand.name">{{ brand.name }}</option>
</select>
<div v-show="this.isBrandSelected">
<h1>What are you going to use your
<span>{{itemName}}</span> for ?
</h1>
<input
type="text"
id="componentName"
ref="componentName"
class="form-control fields"
style="text-transform: capitalize"
v-model="itemFormInfo.component"
#keypress="formChange($event)"
/>
<div class="loader-spinner" v-if="loading">
<app-loader/>
</div>
</div>
</div>
</div>
<div class="service-options" v-show="isComponentCompleted">
<div class="from-group">
<h1>
Here are the options for your <span>{{this.itemFormInfo.component}}</span> :
</h1>
<div class="services">
<div class="column-service" v-for="option in options" v-bind:key="option.name">
<div class="service-name">{{option.name}}</div>
<div class="service-price">{{option.price.toString().replace(".", ",")}} </div>
</div>
</div>
and here my first method
onChangeItem(event) {
let item = event.target._value;
this.itemName = this.getItemName(item);
if (this.isItemSelected = true) {
this.isItemSelected = false;
this.isComponentCompleted = false;
this.isLoaderFinished = false;
this.itemFormInfo.name = ""
}
this.$refs.item.focus();
},
in this function that I control my first input, the focus is working but it returns me by console the following error:
"this.$refs.item.focus is not a function at VueComponent.onChangeItem"
I have seen some references to similar cases where they involved the reference in a setTimeout or used the this.$nextTick(() => method but it didn't work in my case.
What am I doing wrong?
How can I focus on the next select with ref brand, once I have chosen the value of the first input?
Thank you all for your time and help in advance
How can I focus on the next select with ref brand, once I have chosen the value of the first input?
You want to put focus on brand but your onChangeItem handler is calling this.$refs.item.focus() (trying to focus item). Seems strange to me...
Reason for the error is you are using ref inside v-for.
Docs: When used on elements/components with v-for, the registered reference will be an Array containing DOM nodes or component instances
So the correct way for accessing item ref will be this.$refs.item[index].focus().
Just be aware that right now v-for refs do not guarantee the same order as your source Array - you can find some workarounds in the issue discussion...
I'm setting a webshop in Prestashop (1.6.1.1.) using the theme Default-Bootstrap.
I'm using the "Image slider for your homepage" module but it's only displayed in the homepage. I tried different things but any of them worked:
I've removed the condition {if $page_name =='index'}from the /homeslider.tpl
I've tried to force it by using the following condition in header.tpl:
{if $page_name !='index' && $page_name !='pagenotfound'}
{include file="$tpl_dir./modules/homeslider/homeslider.tpl"}
{/if}
I've tried to copy&paste the code from the /homeslider.tpl directly to the header/tpl template but only the <!-- Module HomeSlider -->comments are displayed with anything between (the {if isset($homeslider_slides)} condition seems to return false).
Of course, the module is hooked in the DisplayTop but still nothing happens outside the homepage... and using DisplayTopColumn is not an option.
Here is the code of the homeslider.tpl:
<!--{if $page_name =='index'} -->
<!-- Module HomeSlider -->
{if isset($homeslider_slides)}
<div id="homepage-slider">
{if isset($homeslider_slides.0) && isset($homeslider_slides.0.sizes.1)}{capture name='height'}{$homeslider_slides.0.sizes.1}{/capture}{/if}
<ul id="homeslider"{if isset($smarty.capture.height) && $smarty.capture.height} style="max-height:{$smarty.capture.height}px;"{/if}>
{foreach from=$homeslider_slides item=slide}
{if $slide.active}
<li class="homeslider-container">
<a href="{$slide.url|escape:'html':'UTF-8'}" title="{$slide.legend|escape:'html':'UTF-8'}">
<img src="{$link->getMediaLink("`$smarty.const._MODULE_DIR_`homeslider/images/`$slide.image|escape:'htmlall':'UTF-8'`")}"{if isset($slide.size) && $slide.size} {$slide.size}{else} width="100%" height="100%"{/if} alt="{$slide.legend|escape:'htmlall':'UTF-8'}" />
</a>
{if isset($slide.description) && trim($slide.description) != ''}
<div class="homeslider-description">{$slide.description}</div>
{/if}
</li>
{/if}
{/foreach}
</ul>
</div>
{/if}
<!-- /Module HomeSlider -->
<!--{/if}-->
And a piece of the header.tpl:
<div class="header-container">
<header id="header">
{capture name='displayBanner'}{hook h='displayBanner'}{/capture}
{if $smarty.capture.displayBanner}
<div class="banner">
<div class="container">
<div class="row">
{$smarty.capture.displayBanner}
</div>
</div>
</div>
{/if}
{capture name='displayNav'}{hook h='displayNav'}{/capture}
{if $smarty.capture.displayNav}
<div class="nav">
<div class="container">
<div class="row">
<nav>{$smarty.capture.displayNav}</nav>
</div>
</div>
</div>
{/if}
<div>
<div class="container">
<div class="row">
<div id="header_logo">
<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
</a>
</div>
{if isset($HOOK_TOP)}{$HOOK_TOP}{/if}
/*********************************************
HERE I'D LIKE TO DISPLAY THE HOMESLIDER MODULE
*********************************************/
<!--{if $page_name !='index' && $page_name !='pagenotfound'}
{include file="$tpl_dir./modules/homeslider/homeslider.tpl"}
{/if} -->
</div>
</div>
</div>
</header>
</div>
I hope I've explained the problem well so you can be able to help me :)
Thanks in advance!
iarcas
I think you're on the right track, you foudn the conditional in templates, but have you checked the actual hook in the module?
See this:
homslider.php
public function hookdisplayTopColumn($params)
{
if (!isset($this->context->controller->php_self) || $this->context->controller->php_self != 'index')
return;
if (!$this->_prepareHook())
return false;
return $this->display(__FILE__, 'homeslider.tpl', $this->getCacheId());
}
So basically, you have to make an override for this function:
/override/modules/homeslider/homeslider.php
<?php
class HomeSliderOverride extends HomeSlider
{
public function hookdisplayTopColumn($params)
{
if (!$this->_prepareHook())
return false;
return $this->display(__FILE__, 'homeslider.tpl', $this->getCacheId());
}
}
I have a div element in TouchXML, and I know for a fact that it contains an a element which I need to access. This is the element, which is declared as CXMLElement *element in a for-in loop
<div id="song_html" class="show3">
<div class="left">
<!-- info mp3 here -->
128 kbps<br/>2:35<br/>2.36 mb
</div>
<div id="right_song">
<div style="font-size:15px;"><b>The Doors - The Crystal Ship mp3</b></div>
<div style="clear:both;"/>
<div style="float:left;">
<div style="float:left; height:27px; font-size:13px; padding-top:2px;">
<div style="float:left;">Download</div>
<div style="margin-left:8px; float:left; width:27px; text-align:center;">Play</div>
<!-- New ad start -->
<script><![CDATA[
var id_array = ["newad14851327"]; window.onload = function(){
var i = 0;
for(i=0; i < id_array.length; i++){
var tgt = document.getElementById(id_array[i]).href; document.getElementById(id_array[i]).href = ""; document.getElementById(id_array[i]).onclick = function(){
window.location.href= tgt;
return false;
};
} }
]]>
</script><!-- New ad end -->
<div style="margin-left:8px; float:left;">Download Album</div>
<!-- ToneFuse Start -->
<script><![CDATA[ (function(id) {
console.log("tonefuse id:"+id);
document.write('<div style="margin-left:8px; float:left; color:red;" id="'+id+'">]]>
</script>
</div>
');
tfp_multi_ad_slots = window.tfp_multi_ad_slots || [];
tfp_multi_ad_slots.push(id);
window.tfpWriteMultiAd && tfpWriteMultiAd();
})(("tfp_multi_"+Math.random()).replace(".",""));
<!-- ToneFuse End -->
<div style="clear:both;"/>
</div>
<div id="player14851327" style="float:left; margin-left:10px;" class="player"/>
</div>
<div style="clear:both;"/>
</div>
(Sorry about the formatting; I didn't write it)
As you can see, there is an a element (there's actually two) in this. However, when I attempt to access these elements using the following
NSArray *linkElements = [element elementsForName:#"a"];
linkElements always contains 0 objects. Why is TouchXML not filling linkElements with the two a elements?
The elementsForName: method only looks at the immediate child nodes of the element. It does not do a recursive descent. In your posted code, element does not have any a elements, just more div child elements. You need to write your own code to recursively traverse all of the child div elements until you find all of the desired a elements.