I'm using opencart cms to manage my online shop. Recently I decided to add some filters to refine the search of my products. I did everything according to this tutorial: link to tutorial
So I have added two filters: size and color. To each of the filters I added three options: red, white, black and S, M, L.
Everything seems to be working except one. In the front end of the site I can only see the name of the filters: "size", "color" and the button "refine search". However I cannot see the selections. This is the image what I see in the frontend: link to the screenshot
However if I look at the source code of the site, I see that server returns the options. This is how the code looks like:
<div class="panel panel-default">
<div class="panel-heading">Refine Search</div>
<div class="list-group">
<a class="list-group-item">Size</a>
<div class="list-group-item">
<div id="filter-group7">
<label class="checkbox">
<input name="filter[]" type="checkbox" value="24" />
L (1)</label>
<label class="checkbox">
<input name="filter[]" type="checkbox" value="23" />
M (0)</label>
<label class="checkbox">
<input name="filter[]" type="checkbox" value="22" />
S (0)</label>
</div>
</div>
<a class="list-group-item">Color</a>
<div class="list-group-item">
<div id="filter-group6">
<label class="checkbox">
<input name="filter[]" type="checkbox" value="21" />
White (3)</label>
<label class="checkbox">
<input name="filter[]" type="checkbox" value="20" />
Black (3)</label>
<label class="checkbox">
<input name="filter[]" type="checkbox" value="19" />
Red (2)</label>
</div>
</div>
</div>
Maybe someone will know where is the problem? I use a standart Induca theme, but I dont think that its the reason of the problem.
I had same problem and I found answer!
You should go to layouts options, find there "category" template and add (+) there "filter" to left column panel.
Description there: http://www.pavothemes.com/blog/tutorials/137-how-to-use-opencart-filter.html
Related
I am displaying different locations to the front end.
When each location is checked, the User is asked to add the Quantity of stock they want to add in that specific location.
Now I am not sure how to achieve this in angular. Can someone please guide or help me?
<div class="form-group">
<h4>Markets to stock and fulfill product</h4>
<div *ngFor="let location of (allLocations | async)" class="form-check">
<input class="form-check-input" type="checkbox" name="myCheckbox" value="{{location}}" id="checkboxCity_">
<label class="form-check-label">
{{location}}
</label>
<div class="row">
<div id="stockInput_" style="display: none;">
<label>Enter Quantity of Stock in this Market (In Units)</label>
<div class="col-md-6">
<input placeholder="Stock (In Units)" class="form-control" name="mkt[]" id="stock_">
</div>
</div>
</div>
</div>
</div>
I created it previously in core Javascript and this was what I was creating.
{"Houston":"30","New York":"10","Los Angeles":null}
So is it possible to achieve it in Angular too?
I used this snap of code to create a dropdown menu that includes textboxes: https://stackoverflow.com/a/27547021
Now, i would like to move the position of this dropdown menu to align with a certain piece of tekst. Ideally, I would like it to be at the right side of the 'Tekstpiece'. I tried to adjust the CSS, as can be seen here: https://www.w3schools.com/code/tryit.asp?filename=GDUL1WPE82S0
However, the contents of the dropdown box do not move along with the box itsself. Furthermore, hardcoding the position is likely not the best option.
Any thoughts on how this can be pulled off?
Change your html to this:
<!DOCTYPE html>
<html>
<h3>Tekstpiece</h3>
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</div>
</form>
</html>
Assuming that you want the dropdown checkboxes want to be "lined up" with the select box.
Im new to frontend so its a bit difficult for me to tell but here is my problem. I have this schedules menu or table and in the table itself it has a violation and remarks. This seems hard to explain to me what I want but I will try. I got a schedules table and it has a relation to checkers and the checkers has a relation to remarks table. Remarks table got a static values in the database like At room, Present and ect.. My question is how I can i loop the remarks values in the vue component and checking the remarks that is in the database. Here are my pictures.
My Component
So basically the remarks that I got is correct but I want to show the other remarks in the database without check and if i got two remarks, two checkbox will be checked. But if i have two remarks in DB it doubles the display.
Here is my Database
The remarks_id is number 9 and the value of that is at lecture room which is correct.
I cant write my query because it is too long and i know it will difficult for you to understand but incase you want here it is
//schedule_id
$scid = $request->id;
$round = \DB::table('rounds')
->select('rounds.*','checkers.*','remarks.*','violations.*')
->join('checkers','checkers.id','=','rounds.checker_id')
->join('checker_details','rounds.id','=','checker_details.round_id')
->join('remarks','remarks.id','=','rounds.remarks_id')
->join('violations','violations.id','=','checker_details.violation_id')
->where('checkers.schedule_id',$scid)
->where('rounds.round_no','=',1)
->distinct('rounds.remarks_id')
->get();
return response()->json($round);
The included tables in the query
Code snippet for the component shown
<div class="row" v-for="detail in details" :key="detail.id">
<div class="col-xs-3">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Violations</h3>
</div>
<div class="box-body">
<div class="form-group">
<input class="form-check-input" checked="checked"
type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
{{detail.violation_details}}
</label>
</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="box box-success">
<div class="box-header">
<h3 class="box-title">Remarks</h3>
</div>
<div class="box-body">
<div class="form-group">
<input class="form-check-input" checked="checked"
type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
{{detail.remarks_desc}}
</label>
</div>
</div>
</div>
</div>
</div>
I hope you understand my problem. Thanks for help.
Here is the docs about how to work with checkboxes https://v2.vuejs.org/v2/guide/forms.html#Checkbox . You should modify your checkboxes to something like this:
<input type="checkbox" id="checkbox" v-model="checked">
Quick question I have 3 checkbox's
I want to make the text next to them white, and by text next to time I mean the YES part
any idea's ?
<div class="wrapper3">
<h3 style="color:white;"><i>Choose Your Game Preferences</i></h3>
<h4 style="color:white;"><i>Do You Want Sound ?</i></h4>
<input type="checkbox" value="No" id="sound">Yes
<h4 style="color:white;"><i>Do You want Text ?</i></h4>
<input type="checkbox" value="No" id="text">Yes
<h4 style="color:white;"><i>Do You want Flashes ?</i></h4>
<input type="checkbox" value="No" id="flash">Yes
</div>
Probably a span is easiest:
<h4><i>Do You want Flashes ?</i></h4>
<input type="checkbox" value="No" id="flash">
<span class="whiteText">Yes</span>
</div>
CSS:
.whiteText {
color: white;
}
Or with inline styling by replacing the class with a style="color:white;".
You can kill two birds with one stone by giving all your checkbxes and radio buttons labels, with a "for" attribute.
This firstly allows you to attach CSS to the label (give the label an id for this). But it is also the correct way to script checkboxes and radios these days, to make your web site accessible to the disabled. People who have impaired eyesight, or impaired handling, have difficulty clicking items as small as checkboxes. A labels becomes selectable along with the checkbox it is attached to, providing a much bigger area for the user to click on. It's good practice these days, especially if you do professional web development.
Just add a label and style the label. I ll use inline styles here but it's best practice to separate html and CSS
<div class="wrapper3">
<h3 style="color:white;"><i>Choose Your Game Preferences</i></h3>
<h4 style="color:white;"><i>Do You Want Sound ?</i></h4>
<label style="color:white;"><input type="checkbox" value="No" id="sound">Yes</label>
<h4 style="color:white;"><i>Do You want Text ?</i></h4>
<label style="color:white;"> <input type="checkbox" value="No" id="text">Yes</label>
<h4 style="color:white;"><i>Do You want Flashes ?</i></h4>
<label style="color:white;"> <input type="checkbox" value="No" id="flash">Yes</label>
</div>
I have a form with multi checkbox which is required field that I turned into twitter bootstrap toggle buttons.
I am trying to activate a selection button with js, by adding 'active' class to it.
I am able to add the class but when saving the form I am getting an error that the field is required.
What am I missing?
Here is the form.
<div id="reminder">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_1" value="1" title="Choose at least one reminder option">Now</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_2" value="30" title="Choose at least one reminder option">30m</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_3" value="60" title="Choose at least one reminder option">1h</label>
<label class="btn btn-primary active">
<input type="checkbox" name="reminder" id="id_reminder_4" value="120"
title="Choose at least one reminder option">2h</label>
<label class="btn btn-primary">
<input type="checkbox" name="reminder" id="id_reminder_5" value="1440"
title="Choose at least one reminder option">1d</label>
</div>
</div>
This is how I am adding the class:
$('#reminder label:eq(3)').addClass('active')
You're only adding the class, but you don't actually select it. Add the selected attribute and it will work:
$('#reminder label:eq(3)').addClass('active').attr('selected',true);
Here is a demo
Add class open not active to open the dropdown (if thats what you are trying to do). You have to add the class to <li class='dropdown open'> which hosts the <ul class='dropdown-menu'>
btn-primary is the css that will make your buttons blue. It looks like this is what you are using for inactive buttons because the way you have your code, all the buttons should be blue. If you are trying to make the button grey because grey will be your active button, then you can use removeClass('btn-primary'). This will turn it grey. Hope this helps.