I am using bootstrap-select from http://silviomoreto.github.io/bootstrap-select/.
I am using the code in Prestashop as country selector as follows;
{elseif $field_name eq "country" || $field_name eq "Country:name"}
<p class="required select">
<div class="form-group"><label for="id_country" class="col-lg-2 col-md-2 col-sm-2 control-label">{l s='Country'} <sup>*</sup></label>
<div class="col-lg-10 col-md-10 col-sm-10"><select name="id_country" id="id_country" class="selectpicker">
{foreach from=$countries item=v}
<option value="{$v.id_country}"{if (isset($guestInformations) AND $guestInformations.id_country == $v.id_country) OR (!isset($guestInformations) && $sl_country == $v.id_country)} selected="selected"{/if}>{$v.name|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select></div></div>
</p>
This is the original.
{elseif $field_name eq "country" || $field_name eq "Country:name"}
<p class="required select">
<label for="id_country">{l s='Country'} <sup>*</sup></label>
<select name="id_country" id="id_country">
{foreach from=$countries item=v}
<option value="{$v.id_country}"{if (isset($guestInformations) AND $guestInformations.id_country == $v.id_country) OR (!isset($guestInformations) && $sl_country == $v.id_country)} selected="selected"{/if}>{$v.name|escape:'htmlall':'UTF-8'}</option>
{/foreach}
</select>
</p>
I am trying to figure out why Bootstrap select is giving me an error..maybe the option value isn't being passed on? Anyone used Bootstrap select and had a similar problem? It has been working for everything else for me.
Thanks in advance!
Carl
Try the following, it worked for me after thousands of trials and errors.
First of all, you should link the following scripts in your tag:
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://www.bootply.com/plugins/bootstrap-select.min.js"></script>
Then you have to give your tag an id, as follows:
<select id="combo1" class="selectpicker" data-style="btn-danger">
<option data-hidden="true">Choose Option</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
Then again another script to initiate this selectpicker above:
<script>
$(document).ready(function() {
$("#combo1").selectpicker ({});
}); </script>
The problem is the label tag.
I can not get it to work with the label tag ...
I don't know why :(
echo "<td>
<label for='".$value1['id_news']."_Cat'>Catégorie</label>
<select id='".$value1['id_news']."_Cat' name='".$value1['id_news']."_Cat' class='selectpicker' data-width='150px'>
<option value='0'>Général</option>";
// Affiche toutes les catégories
foreach($aCat as $sCat) {
echo "<option value='".$sCat['cat_id']."'>".$sCat['cat_nom_fr']."</option>";
}
echo "</select>
</td>
Related
So I have the following code in vue.js:
<div v-for="guest in guests" :key="guest">
<label for="attendance">Will {{guest}} be attending? </label>
<select v-model="attendance">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br><br>
</div>
Current Output
I want to know what each guest selects and send it to my backend. Guest is an array that gets sent from the previous page. Here is it's code:
created() {
this.guests = this.$route.query.guests;
this.numGuests = this.guests.length;
},
Currently I am just sending each guest by sending this.guest but I am hoping to bind this somehow.
I have no idea how to do this and I do not know if I am searching for the right thing either. Hopefully someone can help me.
you could save it like an object like this
new Vue({
el: '#app',
data: {
guests: [
'steve', 'mark', 'mario'
],
attendance: {}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div v-for="guest in guests" :key="guest">
<label for="attendance">Will {{guest}} be attending? </label>
<select v-model="attendance[guest]">
<option value="yes">Yes</option>
<option value="no">No</option>
</select>
<br>
</div>
<h2>Attendace: {{ attendance }}</h2>
</div>
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 would like to know if there's a way to hide categories whose sub-categories' products are out of stock.
The file with the code to show the categories is "ps_mainmenu.tpl", whose code is attached
Thanks in advance
Ive tried with some modules like "block-categories-with-counter" but it doesn't work
{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
{if $nodes|count}
<ul class="top-menu top-menu--level-{$depth}" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
{foreach from=$nodes item=node}
<li class="category-custom category-custom--level-{$depth} {$node.type}{if $node.current} current {/if}" id="{$node.page_identifier}">
{assign var=_counter value=$_counter+1}
<a
class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
href="{$node.url}" data-depth="{$depth}"
{if $node.open_in_new_window} target="_blank" {/if}
>
{if $node.children|count}
{* Cannot use page identifier as we can have the same page several times *}
{assign var=_expand_id value=10|mt_rand:100000}
<span class="float-xs-right hidden-md-up">
<span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
<i class="material-icons add"></i>
<i class="material-icons remove"></i>
</span>
</span>
{/if}
{$node.label}
</a>
{if $node.children|count}
<div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
{menu nodes=$node.children depth=$node.depth parent=$node}
</div>
{/if}
</li>
{/foreach}
</ul>
{/if}
{/function}
<div class="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
{menu nodes=$menu.children}
<div class="clearfix"></div>
</div>
You need to remove empty category in the SQL query, so in your php wrap your code with something like that :
$count = Db::getInstance()->getValue('SELECT COUNT(cp.id_category) FROM '._DB_PREFIX_.'category_product cp, '._DB_PREFIX_.'product pr WHERE cp.id_category = '.$id_current_category .' AND cp.id_product = pr.id_product AND pr.active = 1' );
if($count>0)
{
//your actual code to get the category
}
Maybe I'm going about this the wrong way ... but I'm trying to use a v-for loop to duplicate/remove a custom component x times. x is decided by a <select> field above. What I have works on the initial page load, but then when you select a different option, only one custom component is displayed (although x is updated). Does anyone have any idea what I am doing wrong?
// here is the select field that defines the number of enrolling students
<select name="number_students_enrolling" v-model="formFields.numberStudentsEnrolling">
<option value="" default selected></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
// here is the custom component I'm trying to duplicate/remove dynamically
<div class="students-container">
<student v-for="n in formFields.numberStudentsEnrolling" :key="n" v-bind:index="n" >
</student>
</div>
// here is the custom component
Vue.component('student', {
props: ["index"],
template: `
<div class="input--student">
<div class="input--half">
<label>
<span class="d-block">
Student {{ index }} Name <span class="field--required">*</span>
</span>
<input type="text">
</label>
</div>
<div class="input-wrap input--half">
<label>
<span class="d-block">
Student {{ index }} DOB <span class="field--required">*</span>
</span>
<input type="text">
</label>
</div>
</div>
`
})
// Here is the Vue.js instance
var test = new Vue({
el: '#test',
data: {
formFields: {
numberStudentsEnrolling: 3
}
}
});
v-for needs a Number, but you're giving it a string (the selected value). Convert it to a Number so v-for will treat it as a range from 1 to N:
<div class="students-container">
<student
v-for="n in Number(formFields.numberStudentsEnrolling)"
:key="n"
v-bind:index="n">
</student>
</div>
For completeness, another approach (per #HusamIbrahim) is to annotate the v-model reference with .number, which will automatically do the conversion.
<select
name="number_students_enrolling"
v-model.number="formFields.numberStudentsEnrolling"
>
Here's a codesandbox: https://codesandbox.io/s/xzy6or9qo
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());
}
}