I need some help with a template on prestashop. What i'm trying to achieve is that when the customer clicks on a link, it should call a php function from my model that adds a product to the cart.
But it seems that the function is executed whether the link is clicked or not. As soon as the link is "readed" (by Smarty i guess) it is executed. How can i prevent that and only execute the function when the link is clicked?
Here below you can find my template's code.
Thanks in advance
<div class="bloc_bouton_recap">
<h4>Ce produit ne vous convient pas et vous souhaitez reprendre la configuration à zero? Suivez ce lien</h4>
<h3>nbproduxcts : {$cart->nbProducts()}</h3>
</div>
<div class="bloc_bouton_recap">
<h4>Ajouter ce produit à <a href="{$link->getModuleLink('formulairemodule')}" class="lien_panier" onclick='{Formulaire::addProduitAuPanier($idproduct)}' >votre panier</a></h4>
<h3>nbproduxcts : {$cart->nbProducts()}</h3>
</div>
The h3 tags are only here to display the quantity of products in my cart and the last one always display 1 more than the others.
You should place in onclick Javascript function and not PHP/Smarty call.
In Javascript function you should then for example using AJAX launch url where there's a script that adds a product to the cart.
You need to learn about Javascript/AJAX if you want to achieve that. Using only Smarty and PHP you won't be able to do this.
Related
I am not able to understand from the code how does the 'PAY FOR ORDER' button is linked to the corresponding function handler.
When user goes to pay on the cart page (for an existing order), a button called 'PAY FOR ORDER' is displayed. This button is defined in the following file :
"woocommerce/templates/checkout/form-pay.php" --> 'woocommerce_pay_order_button_html'
When the button is clicked, the 'pay_action()' function is invoked. The function defined in the following file :
"woocommerce/includes/class-wc-form-handler.php"
However, I am not able to understand from the Woocommerce code how does the button 'PAY FOR ORDER' is linked to the function 'pay_action()' ?
Thanks !!!
Ok so I have looked everywhere for a solution to this but I can't figure out why this is happening. Logically it makes no sense. I'm not really a coder but I know some basic PHP.
I used the following code to simply move the coupon field in Woo checkout to a different location:
/*** MOVE THE COUPON CODE ***/
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );
add_action( 'woocommerce_after_order_notes', 'woocommerce_checkout_coupon_form' );
After this code is added, the "Buy Now" checkout button to finalize the order does nothing on click, like the JS is disabled.
When the code is removed and coupon code goes back to original location, the button works normally.
Has anyone else had this happen to them? It's so bizarre.
You can see the page (with code above implemented) here:
http://insiders.nomadmoguls.com/payment/?add-to-cart=205479&variation_id=205481&attribute_pa_type-of-pass=yearly
Thanks in advance for everyone's help! This was my last resort after several hours looking for a solution on my own!
The issue is caused by the hook you're using, woocommerce_after_order_notes. It's causing the <form name="checkout"> to close before the Submit button, so the Sign Up Now button isn't actually inside that form anymore, so it can't submit it when it's clicked, since your (paraphrased) markup is like this:
<form name="checkout">
<!-- coupon code stuff -->
</form>
<button type="submit">Sign Up Now</button>
Check out this video of me on the site with Dev Tools open. You can see the Sign Up Now button outside the Checkout form - as soon as I drag it up to be inside the form, it works just fine.
A relatively common misconception is that "Coupon Code" is a checkout form field, when it's really it's own separate form, so of course - it doesn't want to be nested directly inside the checkout form (you can't have forms inside forms).
This means you have real two options, without doing something crazy like rebinding a click handler on the submit button to submit the form:
Use a hook that comes after the checkout form, such as woocommerce_after_checkout_form instead of woocommerce_after_order_notes.
Keep the coupon form at its original location.
I am currently using Meteor 0.9.2.2. I am trying to better understand how to build a form in Meteor + Famous without having to put each form element into a Famous surface.
I am using the "gadicohen:famous-views 0.1.7" and "mjnetworks:famous 0.2.2 "
I am using https://github.com/gadicc/meteor-famous-views and have looked at some of the samples of events. I can generate events on the view but seems to have lost the ability to generate events using Jquery (probably Famous alarm bells going off) for fields on the template.
(Note I fid try following What is a recommended way to get data into your meteor template from the front-end for a famous surface? but that just directed me to the examples I am following - sorry still stuck)
For example, if I wanted to have a "blur" event when a contenteditable field changed and used that to update the database, I am not sure how I do it.
BTW, I am bringing in the template via Iron-router:
this.route('someTemplate', {
path: '/',
});
Here's some sample of code of what I have been playing around with:
<template name="someTemplate">
{{#Scrollview target="content" size="[undefined,100]"}}
{{#Surface class="green-bg"}}
<h4 id="main-edit-title" class="editable" data-fieldname="title" data-resourceid="{{_id}}" contenteditable=true>Heading</h4>
<p id="main-edit-message" class="mediumEditable editable" data-fieldname="message" data-resourceid="{{_id}}" contenteditable=true>Summary</p>
{{/Surface}}
{{/Scrollview}}
</template>
Template.someTemplate.events({
'blur .editable': function (e) {
e.preventDefault();
//e.stopPropagation();
var item = $(e.currentTarget);
DO SOME UPDATE STUFF TO THE DATABASE
item.removeClass('resourceUpdated');
},
});
I looked at the 'famousEvents' too and could not seem to get that working. Ie no events fired and that would only be at the surface level, not the field level.
At the view level I was fine and code below worked fine:
Template.someTemplate.rendered = function() {
var fview = FView.from(this);
var target = fview.surface || fview.view._eventInput;
target.on('click', function() {
clickeyStuff(fview);
});
}
I tried the other variants from this page: https://famous-views.meteor.com/examples/events
So the core questions, I think, is: Do I have to move every form element to a Famous Surface? This would be a killer. I am hoping I can still use Jquery or access the DOM for stuff within the template. Note I do see stuff in the Famous FAQ http://famo.us/guides/pitfalls that says don't touch the DOM... so happy to find out how else I should be doing this???
I tried to make this clearer on the events example page, but I guess I'm still not there yet. I'll answer below but please feel free to chime in with how I can improve the documentation.
Inside of a Surface is basically regular Meteor. But outside of a Surface is the realm of famous-views. So you need to have a Meteor template inside of a Surface for events to attach themselves properly - and, as noted in the docs - that template needs to have at least one element in side of it to attach the events. So either (and in both cases, renaming the outer template wrapper but leaving Template.someTemplate.events as is):
<template name="someTemplateWrapper">
{{#Scrollview target="content" size="[undefined,100]"}}
{{#Surface class="green-bg"}}
{{> someTemplate}}
{{/Surface}}
{{/Scrollview}}
</template>
or simply:
<template name="someTemplateWrapper">
{{#Scrollview target="content" size="[undefined,100]"}}
{{>Surface template="someTemplate" class="green-bg"}}
{{/Scrollview}}
</template>
and then move all the Meteor stuff that needs events to it's own template where the events are handled:
<template name="someTemplate">
<h4 id="main-edit-title" class="editable" data-fieldname="title" data-resourceid="{{_id}}" contenteditable=true>Heading</h4>
<p id="main-edit-message" class="mediumEditable editable" data-fieldname="message" data-resourceid="{{_id}}" contenteditable=true>Summary</p>
</template>
Hope that makes sense, just rushing out... let me know if anything is not clear and I'll ammend the answer later.
Let's say we have a classic form - a few input fields that must meet some pattern. When user enters incorrect data and submits this form all the fields that are filled wrong are marked as invalid and appropriate error message is provided for every incorrect field.
I need to make this form WAI ARIA compliant, so that after form submission the accessibility tools will see these errors first.
I've found solution that implements it by dynamic html modification using JS (http://jsfiddle.net/nS3TU/1/):
HTML:
<form id="signup" method="post" action="">
<p id="errors" role="alert" aria-live="assertive"></p>
<p>
<label for="first">First Name (required)</label>
<input type="text" id="first">
</p>
<p>
<input type="submit" id="button" value="Submit">
</p>
</form>
JS:
$('#signup').submit(function () {
$('#errors').html('');
if ($('#first').val() === '') {
$('#errors').append('Please enter your first name.');
}
return false;
});
Here validation does not reload page, and the "alert" area is dynamically modified.
In my case the page is reloaded on validation phase, and I don't know how to make aria alert work. After hours of investigation I didn't find any solution at all. Any ideas?
I think there's a simple solution, but you'll have to say if it covers your cases.
I would be careful about making something "WAI-ARIA compliant", that should not be a goal in itself. WAI-ARIA is intended to map web pages to application roles, but only applications are actually suitable for this treatment.
For a classic web-form, you do not need WAI-ARIA at all. The alert aspect would not work if the page reloads, as it would only alert if the content changed dynamically.
If the page does not reload (as per the example), you would want to ensure that submitting the form doesn't just leave the user sitting on the button. You can manage the focus to achieve this:
$('#errors').append('Please enter your first name.');
// Make the error message focusable, but not in the default tab-order:
$('#errors').attr('tabindex', '-1').css('outline', '0');
// Set the focus on the (first) error message:
$('#errors').focus();
JSFiddle updated here.
A couple of articles on error-message best-practices your question reminded me of, which would help extend this answer to other use-cases:
Displaying error messages
Accessible form validation.
Am working on a Symfony2 application whose among its functions will allow the user to select to visit different sections of the site, and this from anywhere (any page) of the site. For simplifying let's say: when a user want to sort he/she choose from a drop down select form and submit.
I built the action and template with a test root to verify this function and this work (when I use directly the rendering of that sortAction() on my app_dev/test adress.
The issu is that when I try to make this action accessible from the general template (app/Resources/views/base.html) I can view the select form with default view, but when I select for a sort and try to Submit page relaods and return to the defaut view.
I use {% render "MycompanyMybundleBundle:Mycontroller:sort" %} in .../base.html and I want this action to work on (like) mysite/anypage this last extending bundle layout which (layout also extent base).
Can anyone help me?
The description of your problem isn't realy clear, but I think the problem lies at the form action. Do you've configured this action? You should leave it empty if you want to submit it to the same page.
Another solution would be to make use of the extending posibilities of Twig. Define the form as a block in the parent, and override it in the child.
http://twig.sensiolabs.org/doc/tags/extends.html
EDIT:
You could make the form action a block, that is what I mean...
<form action="{% block formAction %}defaulttargetpage.php{ %endblock% }"> <!-- formcontent --> </form>