Magento 2.4 PHP 7.4
Clicking on the 'Order Now' button on the checkout page does not trigger any action. There are no errors on Console or in the Network tab.
Our setup uses the Amasty_CheckoutCore module on the front end to create a generic 'Order Now' button which will be triggered for the different types of Place order requests depending on the Payment methods.
By referring some online solutions I linked the Order Now button with the Place Order that will appear on UI. But that didn't work. Please find below the code for the same. I added the summary.js.
app\design\frontend\Vendor\Amasty_CheckoutCore\web\js\summary.js
require(
[
'jquery',
'ko',
'Magento_Checkout/js/view/summary',
'Magento_Checkout/js/model/step-navigator',
],
function(
$,
ko,
Component,
stepNavigator
) {
'use strict';
console.log("inside summary js");
return Component.extend({
isVisible: function () {
return stepNavigator.isProcessed('shipping');
},
initialize: function () {
$(function() {
$('body').on("click", '#place-order-trigger', function () {
$(".payment-method._active").find('.action.primary.checkout').trigger( 'click' );
});
});
var self = this;
this._super();
}
});
}
);
Related
I'm making an investment fundraising page for a small business and I'm trying to create a custom PayPal button where the amount to give is set by a slider. The reason for this is that the business doesn't want to take loans less than a certain amount, but they don't want to restrict people to a limited number of choices (most PayPal buttons give people limited options for donation amounts). They want to be able to choose any amount from $500-$38,000. The idea is that they'll select this amount with a slider, then click a button that takes them to a payment screen for that amount. The code is on my GitHub at https://github.com/cbarboza2011/funkychickenfoodtruck. The slider and paypal button on are on donate.html
I've looked into the PayPal Docs, but I'm really new to backend stuff and so I'm not sure how to implement the information provided. I think I need to somehow access the HTML variable amount but I'm not sure how to do so. Currently, the slider has no effect on the resulting paypal page; users are taken to a page showing "$0.01". I want the slider to set the amount so that when a user clicks the paypal button, a payment page with their chosen amount comes up instead of a page showing "$0.01".
NOTE: The donate.html page is only currently styled for mobile, so view in devtools mobile view on Chrome if possible, otherwise everything will be enormous in a regular desktop window. It will still work, but it's huge.
$('.slider').slider({
max: 38000,
min: 500,
step: 100,
value: 500,
});
function getLoanAmount() {
var loanAmount = $('.loanamount');
var $selection = $( ".slider" ).slider( "value" );
$(loanAmount).text($selection);
}
getLoanAmount();
$('.slider').on('slide', function() {
getLoanAmount();
});
$(".slider").on( "slidestop", function() {
var $amount = $('.loanamount').text();
$( ".slider" ).slider( "option", "value", $amount );
$('a.paypalbutton').attr('href', 'https://www.paypal.com/donate?hosted_button_id=LR2YL2LXSYSTQ&amount=' + $amount);
});
$('button.submitloan').on('click', function() {
$('.loan-setter').slideUp();
$('#smart-button-container').css('display', 'block');
});
<div class="slider"></div>
<!-- PayPal Widget -->
<a href="https://www.paypal.com/donate?hosted_button_id=LR2YL2LXSYSTQ" class="paypalbutton">
<img src="https://www.paypalobjects.com/webstatic/en_US/i/btn/png/btn_buynow_107x26.png" alt="Buy Now" />
</a>
UPDATE: I've tried modifying the PayPal JS, but I don't know how to check if it works?
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'pill',
color: 'white',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
var $amount = $('.loanamount').text();
$('.dollaramount').text($amount);
return actions.order.create({
purchase_units: [{"amount":{"currency_code":"USD","value": $amount}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
For a classic HTML-only button that redirects:
Use an unhosted button (no hosted_button_id), of type Donate or Buy Now.
Go to https://www.paypal.com/buttons , sign in, start creating your button, but before creating it ensure that in Step 2 you uncheck the option to Save the button at PayPal, so it is unhosted.
Once you generate your code, click above it to remove the code protection.
Now you have code that can be copied and edited, or you can use the 'Email' tab if you prefer a URL. The input parameter to add/modify is "amount", as documented here.
For a better JS in-context payment experience, use a smart checkout button; here is an example implementation: https://developer.paypal.com/demo/checkout/#/pattern/client
I got the new amount from your slider from copying the $selection var of your getLoanAmount function. Its originally a var called AmountNumeral because its a number value. Then $amount uses toString() just to make it a text string so that you can pass it into your paypal URL as the amount you want to show up. The console logs can just show how it formats it from numeral to string if that helps in seeing the difference
The amount on paypal still shows up as $0.00 initially. I read that if your paypal donate button is "hosted" then its impossible to change the amount value or any preset numbers as a safety precaution. Not sure if your paypal button was setup as "hosted" or "unhosted" but I would check that out maybe.
I haven't worked with PayPal before I just quickly skimmed through some answers about it and their website. But this should fix your updated slider value at least.
Pre-populate Donation Amount on Website
function getLoanAmount() {
var loanAmount = $('.loanamount');
var $selection = $( ".slider" ).slider( "value" );
$(loanAmount).text($selection);
console.log(($selection));
console.log($(loanAmount).text($selection));
}
getLoanAmount();
$('.slider').on('slide', function() {
getLoanAmount();
});
$(".slider").on( "slidestop", function() {
var $amountNumeral = $( ".slider" ).slider( "value" );
console.log($amountNumeral);
var $amount = $amountNumeral.toString();
console.log('$amount');
$( ".slider" ).slider( "option", "value", $amount );
$('a.paypalbutton').attr('href', 'https://www.paypal.com/donate?hosted_button_id=LR2YL2LXSYSTQ¤cy_code=USD&amount=10.00');
});
I want to add a custom button on the Insert/Edit Link dialog/popup in tinymce v5.
I only got this code for the setup option where I put in call to a function.
function tinyMceEditLink(editor) {
console.log("tinyMceEditLink");
editor.on("click", function(e) {
console.log("this click");
});
}
I'll be the first to admit this is a bit hacky, but you could try:
function tinyMceEditLink(editor) {
editor.windowManager.oldOpen = editor.windowManager.open; // save for later
editor.windowManager.open = function (t, r) { // replace with our own function
var modal = this.oldOpen.apply(this, [t, r]); // call original
if (t.title === "Insert/Edit Link") {
$('.tox-dialog__footer-end').append(
'<button title="Custom button" type="button" data-alloy-tabstop="true" tabindex="-1" class="tox-button" id="custom_button">Custom button</button>'
);
$('#custom_button').on('click', function () {
//Replace this with your custom function
console.log('Running custom function')
});
}
return modal; // Template plugin is dependent on this return value
};
}
This will give you the following result:
Setup:
tinymce.init({
selector: "#mytextarea", // change this value according to your HTML
plugins: "link",
menubar: "insert",
toolbar: "link",
setup: function(editor) {
// Register our custom button callback function
editor.on('init',function(e) {
tinyMceEditLink(editor);
});
// Register some other event callbacks...
editor.on('click', function (e) {
console.log('Editor was clicked');
});
editor.on('keyup', function (e) {
console.log('Someone typed something');
});
}
});
Tips:
You can replace $('.tox-dialog__footer-end')... with $('.tox-dialog__footer-start')... if you want your button on the left hand side of the footer.
This currently works on the default skin, changes to .tox-dialog__footer class could break this.
Any updates to the library that change the title "Insert/Edit Link" will break this.
The above example requires jQuery to work.
This is a bare minimum example. Use the configuration guide to customize the toolbar, setup events etc.
I am new to Magento 2, I want to show/hide custom shipping method like delivery in 2 hours radio button if customer fills particular city on checkout page.if he is from that city will show "2 hour delivery option" if not will hide it.
Can anybody help me in this?
Thanks in advance.
You can use write js in template file like that:
\Namespace\Module\view\frontend\templates\XXX\view\abc.phtml
<script>
// <![CDATA[
require(
['jquery', 'namespace/module'],
function ($, xyz) {
var ajaxurl = '<?php echo $block->getAjaxUrl() ?>';
$(document).ready(xyz.chkCity(ajaxurl));
});
// ]]>
</script>
and keep your js at:
\Namespace\Module\view\frontend\web\js\abc.js
define([
'jquery'
],
function ($, xyz) {
return {
chkCity: function (ajaxurl) {
$('#city').on('blur', function (e) {
//you logic here
});
}
};
});
I have a simple angular app here
<div ng-app="WhereToMeet" ng-controller="MapCtrl">
<leaflet shape="shape"></leaflet>
<button ng-click="clicked()">Clicked</button>
</div>
app = angular.module("WhereToMeet", [])
app.directive "leaflet", ->
restrict: "E"
replace: true
transclude: true
template: "<div id=\"map\"></div>"
scope:
shape: "=shape"
link: (scope, element, attrs, ctrl) ->
scope.$watch attrs.shape,( (newValue, oldValue) ->
watched newValue
), true
watched = (newValue) ->
alert newValue
#MapCtrl = ($scope) ->
clicked = (clicked) ->
$scope.shape = "Clicked"
alert "clicked"
I have it in a JSFiddle http://jsfiddle.net/charliedavi/bezFB/22/ but it wont run. Really odd. I think its an error with my coffee script but I can not see it
error:
Uncaught SyntaxError: Unexpected string fiddle.jshell.net:22
Uncaught Error: No module: WhereToMeet
in pure JS
var app;
app = angular.module("WhereToMeet", []);
app.directive("leaflet", function() {
var watched;
({
restrict: "E",
replace: true,
transclude: true,
template: "<div id=\"map\"></div>",
scope: {
shape: "=shape"
},
link: function(scope, element, attrs, ctrl) {
return scope.$watch(attrs.shape, (function(newValue, oldValue) {
return watched(newValue);
}), true);
}
});
return watched = function(newValue) {
return alert(newValue);
};
});
this.MapCtrl = function($scope) {
var clicked;
return clicked = function(clicked) {
$scope.shape = "Clicked";
return alert("clicked");
};
};
http://jsfiddle.net/charliedavi/gsPx3/2/
i dont know coffee script but angular. i just tried to solve it. ;-)
Select no-wrap body, under select framework
Select no-library(pure-js)
Add angular js as resources
Manually initialize angular using this angular bootstrap
angular.bootstrap document, ['WhereToMeet']
The generated javascript code is in another scope. You have to solve this
by either adding the -b parameter to the coffeescript compiler or export your function
explicitly via
root = exports ? this
root.clicked = ->
alert "clicked"
$scope.shape = "Clicked"
It is working now Fiddle Here
I had a similar issue with jsfiddle and angular yesterday. I had to do a couple of things to make it work:
Jsfiddle is adding the tags for html and body, so just write the markup that should end up inside the body tag.
Add a wrapping div with ng-app="myApp" instead of trying to specify another html-tag
Select no-wrap body, under select framework
I don't know what your "leaflet" is doing but I have updated your fiddle so that the click will trigger an alert
I've had to change the how the controller is instantiated to get the onclick to work.
http://jsfiddle.net/t9nsY/2/
app.controller("MapCtrl", function ($scope) {
$scope.clicked = function (clicked) {
console.log("clicked");
$scope.shape = "Clicked";
return alert("clicked");
};
});
I have a tabbed widget that shows three separate loops. Under the third tabbed section which is hidden by default, I show a search that gives ajax results. My problem is that I can't figure how to apply jScrollPane to the container div of the results. Everytime the search is entered, the container div is emptied and new results are appended so I need to reapply it each time. Here is the code I'm using to trigger the search.
jQuery( function( $ ) {
// search filed
var $s = $( '#s' );
// the search form
var $sForm = $s.closest( 'form' );
console.log( $sForm );
$sForm.on( 'submit', function( event) {
event.preventDefault();
$.post(
T5Ajax.ajaxurl,
{
action: T6Ajax.action,
search_term: $s.val()
},
function( response ) {
$("#music-results").empty();
$("#music-results").append( response );
},
);
});
});
Now I have the basic call to setup jscrollpane for the other loops but that doesn't get applied to the div in question because it is hidden by default I guess.
$(document).ready(function(){
$('#music-results').jScrollPane({showArrows: true,autoReinitialise: false});
});
So how can I apply jscroll to the div each time it's emptied and new results are added?
You're right, jscrollpane doesn't apply to content that is not displayed (display:none).
To fix your problem, you simply need to call jscrollpane when the content is apended.
So instead of putting $('#music-results').jScrollPane({showArrows: true,autoReinitialise: false}); in the document ready(), simply put it after $("#music-results").append( response );. It should then work.
$.post(
T5Ajax.ajaxurl,
{
action: T6Ajax.action,
search_term: $s.val()
},
function( response ) {
$("#music-results").empty();
$("#music-results").append( response );
$('#music-results').jScrollPane({showArrows: true,autoReinitialise: false});
},
);
There is another way of doing what you want using the api.
Declare a global variable for the api, that will be available to all functions and then set it the document.ready()
var api;
$(document).ready(function(){
var element = $('##music-results').jScrollPane({showArrows: true,autoReinitialise: false});
api = element.data('jsp'); //you can now access the api through this variable.
});
Then, when you append the content to #music-results, simply reinitialize the scrollpane using the api.
$.post(
T5Ajax.ajaxurl,
{
action: T6Ajax.action,
search_term: $s.val()
},
function( response ) {
$("#music-results").empty();
$("#music-results").append( response );
api.reinitialise();
},
);
But remember, in order to do this, your content needs to be visible because jscrollpane needs to calculate the height and if it's not displayed, the height will not be found.
So if you append the content and the tab is not visible, simply reinitialize jscrollpane on the tab switch.
Hope this helps.