This is working, but always with the same product-priview.png, productName and price. How can I replace productId, Image, productName, price and url with my real product info. How can I check if the product was already in the cart and if it is in the cart, just update the quantity.
function addProduct(target) {
productId = productId + 1;
var productAdded =
<li class="cd-cart__product">
<div class="cd-cart__image">
<img src="assets/img/product-preview.png" alt="placeholder">
</div>
<div class="cd-cart__details">
<h3 class="truncate">
Product Name
</h3>
<span class="cd-cart__price">$10.00</span>
<div class="cd-cart__actions">
Delete
<div class="cd-cart__quantity">
<label for="cd-product-'+ productId +'">Qty</label>
<span class="cd-cart__select">
<select class="reset" id="cd-product-'+ productId +'" name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<svg class="icon" viewBox="0 0 12 12">
<polyline fill="none" stroke="currentColor" points="2,4 6,8 10,4 "/>
</svg>
</span>
</div>
</div>
</div>
</li>;
cartList.insertAdjacentHTML('beforeend', productAdded);
};
Related
I have got the next snippet. There are a few select blocks. What I would like to do is to collect both variables and send to the Django server. But the request.GET is empty. What is wrong?
<div class="flex" x-data="{ foo: '', bar: ''}">
<div class="flex justify-between">
<div class="mt-1">
<select x-model="foo"
name="foo"
id="foo"
class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
<option value="">Type of FOO</option>
<option value="FOO_1">FOO_1</option>
<option value="FOO_2">FOO_2</option>
<option value="FOO_1">FOO_3</option>
</select>
</div>
<div class="mt-1">
<select name="bar"
x-model="bar"
id="bar"
class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
<option value="">BAR Types</option>
<option value="BAR_1">BAR_1</option>
<option value="BAR_2">BAR_2</option>
<option value="BAR_3">BAR_3</option>
</select>
</div>
<input type="text" name="foo" x-model="foo" hidden />
<input type="text" name="bar" x-model="bar" hidden />
<button
hx-get="{% url 'server:parse-values' %}"
hx-target="#element"
hx-swap="innerHTML"
hx-include="[name='foo', name='bar']">
<span
class="cursor-pointer px-3 py-3 border-2">Parse details</span>
</button>
</div>
</div>
But when I click on the button the Django backend does not receive foo and bar parameters.
Any thoughts?
To include multiple inputs you need to separate them with a comma like this:
hx-include="input[name='foo'], input[name='bar']"
That would be the equivalent of using querySelectorAll to grab your inputs:
document.querySelectorAll("input[name='foo'], input[name='bar']")
I added the additional input so it excludes the select lists, but you can probable remove the hidden inputs from your example and just include the lists.
I should also add that if you move the htmx attributes from the button to the x-data div and change that into a form. Then change the button to type submit. All the form data will be automatically sent to the server.
<form class="flex" x-data="{ foo: '', bar: ''}"
hx-get="{% url 'server:parse-values' %}"
hx-target="#element"
hx-swap="innerHTML"
>
<div class="flex justify-between">
<div class="mt-1">
<select x-model="foo"
name="foo"
id="foo"
class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
<option value="">Type of FOO</option>
<option value="FOO_1">FOO_1</option>
<option value="FOO_2">FOO_2</option>
<option value="FOO_1">FOO_3</option>
</select>
</div>
<div class="mt-1">
<select name="bar"
x-model="bar"
id="bar"
class="w-64 h-14 text-sm border-gray-300 focus:bg-transparent">
<option value="">BAR Types</option>
<option value="BAR_1">BAR_1</option>
<option value="BAR_2">BAR_2</option>
<option value="BAR_3">BAR_3</option>
</select>
</div>
<button type="submit">
<span class="cursor-pointer px-3 py-3 border-2">Parse details</span>
</button>
</form>
I'm using vanilla bootstrap with Python on Django. I've configured a form with radio buttons, however the buttons render on top of the fields as shown in the screenshot below.
I've notice that Django puts the radio buttons into a list and I thought that could be the cause, so I tried using CSS to disable the tag but the radio buttons still float on top just without the list bullets.
Forms.py
class MerchantGroupForm(forms.Form):
DO_WHAT_CHOICES=[('merge','Merge'),
('update','Update')]
#do_what = forms.ChoiceField(choices=DO_WHAT_CHOICES, widget=forms.RadioSelect(attrs={'class': "custom-radio-list"}))
do_what = forms.ChoiceField(choices=DO_WHAT_CHOICES, widget=forms.RadioSelect)
merge_merchantgroup = forms.ModelChoiceField(required=False, queryset=MerchantGroup.objects.all().order_by('name'), empty_label="Merge with")
name = forms.CharField(required=False)
default_ledger = GroupedModelChoiceField(required=False, queryset=Ledger.objects.all().order_by('coa_sub_group__name','name'), choices_groupby = 'coa_sub_group')
disable_AI = forms.BooleanField(required=False, label='Disable AI')
<form action="/monzo/merchantgroups/update/799/" method="post">
<input type="hidden" name="csrfmiddlewaretoken" value="ZWtsz3JDsnUtu1mj6NO3SDlBuyJyEpDgbZUDC6elfTPK2DCwWevD2BpirSZJOhiM">
<div class="form-group">
<label for="id_do_what_0">Do what:</label>
<ul id="id_do_what" class="custom-radio-list form-control">
<li><label for="id_do_what_0"><input type="radio" name="do_what" value="merge" class="custom-radio-list form-control" required id="id_do_what_0">
Merge</label>
</li>
<li><label for="id_do_what_1"><input type="radio" name="do_what" value="update" class="custom-radio-list form-control" required id="id_do_what_1">
Update</label>
</li>
</ul>
</div>
<div class="form-group">
<label for="id_merge_merchantgroup">Merge merchantgroup:</label>
<select name="merge_merchantgroup" class="form-control" id="id_merge_merchantgroup">
<option value="" selected>Merge with</option>
<option value="203">ATM</option>
<option value="799">Amazon</option>
<option value="200">Post Office</option>
<option value="201">Virgin Media</option>
<option value="202">www.modelsport.co.uk</option>
</select>
</div>
<div class="form-group">
<label for="id_name">Name:</label>
<input type="text" name="name" value="Amazon" class="form-control" id="id_name">
</div>
<div class="form-group">
<label for="id_default_ledger">Default ledger:</label>
<select name="default_ledger" class="form-control" id="id_default_ledger">
<option value="">---------</option>
<optgroup label="Accounts">
<option value="20">Jacks Account</option>
<option value="32">Jacks Monzo</option>
<option value="21">Janes Account</option>
<option value="126">Janes Monzo</option>
<option value="22">Joint Account</option>
</optgroup>
<optgroup label="Bills">
<option value="7">Council tax</option>
<option value="6">Electricity & Gas</option>
</optgroup>
<optgroup label="Cash">
<option value="23">Jacks Float</option>
<option value="24">Janes Float</option>
</optgroup>
<optgroup label="Food & Home">
<option value="8">Basic food</option>
<option value="9">Coffee & Snacks</option>
<option value="11">Home Supplies</option>
<option value="10">Take away</option>
</optgroup>
</optgroup>
<optgroup label="Property">
<option value="19">Property</option>
</optgroup>
<optgroup label="Purchases">
<option value="31">Computer & Electrical</option>
<option value="30">Hobbies</option>
<option value="29" selected>Toys</option>
</optgroup>
<optgroup label="Reserves">
<option value="27">Profit & Loss Accounts</option>
</optgroup>
<optgroup label="Taxation">
<option value="5">Income tax</option>
</optgroup>
<optgroup label="Taxation">
<option value="25">Tax Liability</option>
</optgroup>
<optgroup label="Travel">
<option value="17">Public Transport</option>
<option value="18">Taxis</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label for="id_disable_AI">Disable AI:</label>
<input type="checkbox" name="disable_AI" class="form-control" id="id_disable_AI" checked>
</div>
<input type="submit" class="btn btn-primary">
</form>
If the screenshot you showed have template the previous .html code then Django does nothing because you don't use Django form to render your form. It's just a plain HTML/Bootstrap form.
This is how to use Django Form.
Also if you want to Group radios on the same horizontal row with Bootstrap then you can add .form-check-inline to any .form-check as Bootstrap inline radio button page says.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="merge"
value="merge">
<label class="form-check-label" for="merge">Merge</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="update"
value="update">
<label class="form-check-label" for="update">update</label>
</div>
NB : I think that your first .form-group is not well structured.
You can visit Bootstrap form to do it fine.
Removing the form-control class did the trick. According to Bootstrap docs this class is only for certain fields, guess radio is not one of them.
I am having problem to get the selected data from a form. Here is my form
<form action="#" method="GET">
{% csrf_token %}
<select name="country" id="selectcountries" class="custom-select">
<option>Select country</option>
{% for item in countries %}
<option val="{{ item.name }}"> {{ item.name }} </option>
{% endfor %}
</select>
<select name ="city" id="selectcities" class="custom-select">
<option>Select city</option>
</select>
<select class="custom-select" name="option" >
<option selected> Tourist Spot </option>
<option> Hotel </option>
<option> Restaurent </option>
</select>
<button type="submit" class="btn tour-btn"><i class="fa fa-search pr-2" aria-hidden="true"></i> Search </button>
</form>
And my views.py is
def advanceSearch(request):
country = request.GET.get('country')
city = request.GET.get('city')
option = request.GET.get('option')
if request.method == "GET" :
if country:
message = 'q= %s' % country
else:
message = 'Empty'
else:
message = 'oops'
return HttpResponse(message)
HTTPResponse always give me empty message even after with passing values by the form. I want to get the data from this form but i cant.
I tried to replicate the scenario with the provided code, and I think your search view is not getting executed. You have provided {% url 'advanceSearch' %} in the anchor tag inside button. It should be in the action attribute of the form.
<form action="{% url 'advanceSearch' %}" method="GET">
{% csrf_token %}
<select name="country" id="selectcountries" class="custom-select">
<option>Select country</option>
{% for item in countries %}
<option val="{{ item.name }}"> {{ item.name }} </option>
{% endfor %}
</select>
<select name ="city" id="selectcities" class="custom-select">
<option>Select city</option>
</select>
<select class="custom-select" name="option" >
<option selected> Tourist Spot </option>
<option> Hotel </option>
<option> Restaurent </option>
</select>
<button type="submit" class="btn tour-btn"><i class="fa fa-search pr-2" aria-hidden="true"></i>Search</button>
</form>
First, I wanna let you know that I'm just starting at Ember, so, if is there a better way to accomplish the same result, feel free to point at that.
I have a component called "select-room", it should work as the fields "Quartos", "Adultos" and "Crianças" at this site.
In this site when the field "Quartos" is changed, will be added or removed more selects fields on the form, the same happen when the value of "Crianças" change. I was able to accomplish this behavor using DOM manipulation, but when appending a select field like this html+= ''; the action helper don't work.
Link to the full code is at this repo in Github: https://github.com/darwinboaventura/embercvc
What is the best to way to solve this problem?
You'd use data set on the component to render DOM elements using handlebars syntax.
{{#if items}}
<select onchange={{action ..}}>
{{#each items as |item|}}
<option value={{item.value}}>{{item.label}}</option>
{{/each}}
</select>
{{/if}}
See this example: https://guides.emberjs.com/v2.14.0/templates/displaying-a-list-of-items/
Overall, you should go through the tutorial, so you have a better grasp of how things work in Ember. Start here: https://guides.emberjs.com/v2.14.0/tutorial/ember-cli/
I solved the problem, here my solution:
app/components/select-rooms.js:
import Ember from 'ember';
export default Ember.Component.extend({
name: null,
quantityRooms: 1,
rooms: '',
init() {
this._super(...arguments);
this.set('rooms', [1]);
},
actions: {
changeQuantityRooms(value) {
this.set('quantityRooms', value);
this.set('rooms', []);
for (var i = 0; i < this.get('quantityRooms'); i++) {
this.get('rooms').pushObject(i);
};
},
changeQuantityChildren(value) {
this.set("quantity" + value.name, value.value);
this.set(value.name, []);
for (var i = 0; i < this.get("quantity" + value.name); i++) {
this.get(value.name).pushObject(i);
}
}
}
});
app/templates/components/select-rooms.hbs:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>Quartos</label>
<select name={{name}} onchange={{action "changeQuantityRooms" value="target.value"}} class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="col-sm-6">
{{#if rooms}}
{{#each rooms as |room index|}}
<div class="row">
<div class="col-sm-6 form-group">
<label>
Adultos <small>+18</small>
</label>
<select name={{concat name index "-adults"}} class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
<div class="col-sm-6 form-group">
<label>
Crianças <small>até 17 anos</small>
</label>
<select name={{concat name index "-children"}} onchange={{action "changeQuantityChildren" value="target"}} class="form-control">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
</div>
<div class="col-xs-12">
{{#if (get this (concat "quantity" name index "-children"))}}
<div class="row">
<div class="col-xs-12">
<label>Idade das crianças: </label>
</div>
</div>
<div class="row">
{{#each (get this (concat name index "-children")) as | child i |}}
<div class="col-sm-4 form-group">
<select name={{concat name index "-children-age-" i}} class="form-control">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
</select>
</div>
{{/each}}
</div>
{{/if}}
</div>
</div>
{{/each}}
{{/if}}
</div>
</div>
I try to use Crispy forms for ModelForm in Django. However, I need custom HTML code for all fields.
Here is sample field code generated by crispy forms:
<div class="span12 field-box">
<div id="div_id_user" class="control-group">
<label for="id_user" class="control-label requiredField">
User select
<span class="asteriskField">*</span>
</label>
<div class="controls">
<select id="id_user" class="select" name="user">
<option value="" selected="selected">---------</option>
<option value="1">User 1</option>
<option value="2">User 2</option>
</select>
</div>
</div>
</div>
but I would need code generated like:
<div class="span12 field-box">
<label>User:</label>
<div class="ui-select span5">
<select>
<option value="1">User 1</option>
<option value="2">User 2</option>
</select>
</div>
</div>
I think it would be enough if I will be able to just add custom class to div.controls - But I have no idea how to achieve that.
Here is crispy form code:
self.helper.layout = Layout(
Div(
Field('user'),
css_class="span12 field-box",
),
)
How about setting a class in field layout object:
Field('user', css_class='span5')