Simplecart additional hidden item attributes - shopping-cart

I am trying to add an additional, hidden field to my simplecart items when using the simpleCart_shelfItem div. I've tried hidden inputs, additional spans, and can't get my attribute to show up in the JSON that's passed by Simplecarts form checkout.
Nothing fancy when I init simplecart:
// Init shopping cart
script(type='text/javascript')
simpleCart({
checkout: {
type: "SendForm",
url: "/cart/checkout"
},
currency: "USD",
cartStyle: "table"
});
Here's where I load a shelf item (note that this is using the Jade engine, but HTML is as expected):
div.simpleCart_shelfItem
p.item_name My Special Item
input.item_Quantity(type='text', value='1')
input.item_secretId(type='hidden', value='A hidden identifier')
br
span.item_price $0.99
br
a.item_add(href="javascript:;") Add to Cart
I've also tried using:
span.item_secretId A hidden identifier
And when I pass the cart to /cart/checkout secretId is nowhere to be found when I do a console log of req.body in my server-side code:
Checkout passed with: {"currency":"USD","shipping":"0","tax":"0","taxRate":"0","itemCount":"1","item_name_1":"4x6 Print","item_quantity_1":"4","item_price_1":"0.99","item_options_1":""}
I've seen the ability to add custom columns to the cart in the API docs, but I don't want this field to show up in the cart, it's strictly internal to facilitate server-side processing.

It's not particularly pretty, but I solved this by using div tags around my new data elements, and then hiding them in a stylesheet like this
HTML:
input(class="item_internalId", type='text', value='1234')
CSS:
input.item_internalId {
display: none;
}

Related

How to make a NameValueCollection list editable in GlassMapper

I am trying to make a NameValueList collection editable with GlassMapper and I don't seem to be able to get to the bottom of this.
We have a list of validations that can be attached to a field and I would like to have the validation message editable in ExperienceEditor.
The collection is pre-processed when GlassMapper is retrieving the item:
Validations = glassItem.GetValidations();
#foreach(Validation validation in Model.Validations)
{
<div id="#validation.Identifier" ng-message="#validation.AngularKey" ng-cloak class="mtg-validation-msg">
#Html.Glass().Editable(validation, e => e.ErrorMessage)
</div>
}
Error that I am getting:
Failed item resolve - You cannot save a class that does not contain a property that represents the item ID. Ensure that at least one property has been marked to contain the Sitecore ID. Type: MyAssembly.Models.Validation
It is not possible to directly edit certain types of complex fields in the Experience Editor, such as Treelist, Multilist or Name Value Collection.
Instead, you should set up and use an Edit Frame. This will pop up a modal dialog allowing you to edit the field, it is not inline but means you do not need to leave the Experience Editor. This is the recommended approach to this problem.
Since you are using Glass Mapper, since version 4 you can declare Edit Frames all directly from code and now have to declare/set them up in the Core database first.
#if (Sitecore.Context.PageMode.IsExperienceEditor)
{
using (Html.Glass().BeginEditFrame(Model, "Edit", x => x.Validations))
{
<div>Edit Validations</div>
}
}
You might be interested in this blog post I wrote about adding a wrapper around the Edit Frame to make the UX more friendly.

Setting selected entry using helper.options?

Im am using Play 2.0.4 and
helper.options(myitems)
in my template (inside of a helper.select)
In this case, how can I define the default selected entry, which shall be one entry out of myitems? Thanks for any hint!
A little bit more about my case:
Imagine a news archive, showing all news titles. This news archive uses pagination, pagination uses GET to pass the next/previous page number.
The play framework however will only correctly select the currently selected "select" item (here: news category) when a POST request was used - while pagination uses GET!
Intended behaviour: While a filter is applied / a specific news category is selected, this shall always be visible to the user by preselecting the currently selected news category in the "select" form.
A "screenshot" for illustration:
So, anyone having a good idea on how to cope with this problem? Any way to tell Play manually which entry from the "select" form it shall select? '_default always adds a new entry instead of selecting one out of the given options ): Would be great, if one wouldn't have to build the complete "select" form manually.
Try passing '_default option to select helper:
#import views.html.helper._
#select(form("email"), options(List("first", "third")), '_default -> "second")
It seems, unfortunately, the only way to figure it out is to look up the source.
Update:
Specifying _default property doesn't set selected attribute on option tag. It looks like the only way to preselect entry is to pass prefilled form to the template. For example, suppose you have following form:
case class RegInfo(email: String, color: String)
private val registrationForm = Form(
mapping(
"email" → email,
"color" → nonEmptyText(minLength = 5, maxLength = 32)
)(RegInfo.apply)(RegInfo.unapply)
)
Then in the action prefill form before passing to the view:
def create = Action {
Ok(html.create(registrationForm.fill(RegInfo("user#qwe.com", "blue"))))
}
Then in template use helper:
#select(form("color"), options(List("red", "green", "blue")))
And value will be preselected.
Ended up with the pragmatic approach:
<select id="myfield" name="myfield" >
<option class="blank" value="">-- All items --</option>
#for((key, value) <- MyModel.options) {
#if(key == GETValuePassedToTemplate) {
<option value="#key" selected>#value</option>
} else {
<option value="#key">#value</option>
}
}
</select>
Still wondering if there is a better option / way to do it.
Actually, there is a nicer solution to it. If you call the template having the form partially bound you will achieve your goal. Here's the code for your controller:
Ok(views.html.myForm(myForm.bind(
Map("fieldName1" -> "value1",
"fieldName2" -> "value2"))))
Make sure you map fieldnames to the values of the options you want pre-selected.
Still wondering if there is a better option / way to do it.
Well, if your not hell-bent on using play to solve this particular problem, you could always solve it using JavaScript and jQuery:
$(function () {
$('#yourSelect_id').val(5);
}
Where your select options each has values and the one option you whish to pre select has value 5.

Why does a DOJO tools text area control break my forms

Hi I'm using django comments in one of my apps. I customized the comments framework to fit my needs. Everything works properly until I use dojo to make the textarea for the comments expandable http://dojotoolkit.org/reference-guide/1.7/dijit/form/Textarea.html#dijit-form-textarea. After adding the script the form throws an error after submitting: this field is required. So it seems django doesn't recognize the textarea as part of the form anymore.
in my template I use the standart comment tags:
{% render_comment_form for event %}
{% render_comment_list for event %}
When I'm adding the dojo script, the textarea gets expandable, but the form doesn't pass it's value anymore.
dojo.require("dijit.form.Textarea");
dojo.ready(function(){
var textarea = new dijit.form.Textarea({
name: "id_comment",
style: "width:200px;"
}, "id_comment");
});
dojo adds a bunch of classes to the textarea so that it looks like following. But it still got it's id and it's still a textarea isn't it?
<textarea autocomplete="off" data-dojo-attach-point="focusNode,containerNode,textbox" name="id_comment" class="dijitTextBox dijitTextArea dijitExpandingTextArea" style="overflow-y: hidden; overflow-x: auto; -moz-box-sizing: border-box; width: 200px; height: 36px;" tabindex="0" id="id_comment" widgetid="id_comment" value="" rows="1"></textarea>
After reading the answers for this question: Searching for the Ultimate Resizing Textarea. I thought this might the best way to go but unfortunatly it's not.
I'm wondering if it's just me. Is there a way to get this right or should I use a different method to make the field expandable.
Edit
with dojo the post looks like that:
content_type cylebrations.image
csrfmiddlewaretoken 24827190efbb5b7793aeadaf8276beed
honeypot
id_comment ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
object_pk 4
post Post
security_hash 8a091cfbf1e309627369069d4f71c21b33843a85
timestamp 1335209980
without dojo:
comment eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
content_type cylebrations.image
csrfmiddlewaretoken 24827190efbb5b7793aeadaf8276beed
honeypot
object_pk 4
post Post
security_hash e02d8261f528cfc0f22ee30ced820cfbb80715bc
timestamp 1335210114
Dojo overwrites the name of the textarea. I called it id_comment, instead of just comment. After changing that the post looks just fine and everything works like it should:
dojo.require("dijit.form.Textarea");
dojo.ready(function(){
var textarea = new dijit.form.Textarea({
name: "comment",
style: "width:200px;"
}, "id_comment");
});

django admin list_filter too long

I have a list_filter with loads of sectors. This list, on the right side of the page, is too long.
Can I use an input select field instead since I can't choose more than one sector?
I have seen this before, screenshots, but I can not find the way to do this.
edit:
I have a custom FilterSpec not a list_filter
You can write your own custom FilterSpec (custom admin list filter).
This feature is not part of the Django code yet; it is planned for version 1.2. You'll need to apply this patch to the Django code: http://code.djangoproject.com/ticket/5833.
There are many examples on stackoverflow on how to do that, e.g: https://stackoverflow.com/a/1294952/342473.
http://lincolnloop.com/blog/2011/jan/11/custom-filters-django-admin/
The long list that you said comes from the default template 'admin/filter.html', in django/contrib/admin/templates/admin/filter.html, of builtin ListFilters.
There are several ways to customize it:
Globally override 'admin/filter.html'. Render select tag instead of ul tag if the count of choices hit certain limit. This affects all list filters in admin. The select tag should have onchange event handler like
<select ... onchange="location.href=this.options[this.selectedIndex].value">
Set template attribute in your specific ListFilter instance, to the name of the customized filter template. The content of the template is like #1. Django 1.4+ is required for this.
Add javascript in the ModelAdmin instance to convert HTML content inside the ul tag to select tag as soon as DOM has been fully loaded.
This is how i resolved it (jQuery):
$('#changelist-filter ul').each(function(){
var maxlength = 10;
if ($(this).children().length > maxlength )
{
var list=$(this),
select=$(document.createElement('select')).insertBefore($(this).hide());
$('>li a', this).each(function(){
console.log($(this).parent().attr('class'));
var target=$(this).attr('target'),
option=$(document.createElement('option'))
.appendTo(select)
.val(this.href)
.attr('selected', $(this).parent().attr('class'))
.html($(this).html())
.click(function(){
if (target==='_blank'){
window.open($(this).val());
}
else{
window.location.href=$(this).val();
}
});
});
list.remove();
}
});

Django Flowplayer overlay does not submit form

I am trying to use flowplayer's overlay to load an external page that has a django form built in.
However the overlay loads the page but the submit button simply refreshes the page.
How do i actually submit the values entered in the form?
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script>
$(function() {
// if the function argument is given to overlay,
// it is assumed to be the onBeforeLoad event listener
$("a[rel]").overlay({
mask: {
color: '#ebecff',
loadSpeed: 200,
opacity: 0.9
},
effect: 'apple',
closeOnClick: false,
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
});
});
</script>
<div class="bananas">launch</div>
my view boom has a model form.
Without seeing the actual view code, it's hard to give a helpful answer. In the future, please be sure to do so...
If you don't have the overlay programmed to redirect to the page, then submitting it to that same url might process/save the data without you noticing. Is the data being saved, or does absolutely nothing happen when you click 'submit'?
Generally, this is how it works: you need to be posting to a url, defined in urls.py, that points to a view function in your views.py. (These names are merely convention, and can be called whatever you like) You mentioned that you have a view named 'boom': is it defined in your urls.py like this?
url(r'^path/to/boom/$', 'model.views.boom',),
Check that this is defined and that your form is posting to it.
The view must then contain logic to process the request and return a response. Posting to that url will transfer a cleaned_data dictionary of form variables that can be accessed over the field names defined in the form. It looks like this: x = form.cleaned_data[x]. Check the form for its validity with form.is_valid(), and then do your processing. This can involve saving objects, running arbitrary code, whatever you wish.
To find out more, be sure to read the excellent documentation.