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
});
}
};
});
Related
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();
}
});
}
);
I'm trying to add data to each event I send in GA4 via javascript by using the 'set' command:
https://developers.google.com/tag-platform/gtagjs/reference#set
From those docs, it appears to be similar to Serilog Enrichment, but it doesn't appear to work and I don't see this data coming through.
I'm using localhost + Google Analytics Debugger chrome extension. Then in the Analytics > Configure > DebugView I see the custom event 'hello-world' and the property 'test', but I don't see the data I add via the "set" command.
GA DebugView
I use the set command for 2 calls - first is the "user_id" property that does work. That must be a special case, since GA treats that differently. The 2nd is for the custom object that doesn't work.
Console shows some output for both set command calls, but nothing to tell me that something has succeeded or failed
<!DOCTYPE html>
<html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SOMECODE"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
window.dataLayer.push(arguments);
}
gtag('js', new Date());
// Set enrichment properties for every event "on this page"
// https://developers.google.com/tag-platform/gtagjs/reference#set
gtag('set', {
'foo': 'bar',
});
// Set the measurement id
// https://developers.google.com/analytics/devguides/collection/gtagjs/setting-values
gtag('config', 'G-SOMECODE');
//Set the GA4 user_id and keep it set for all events
gtag('set', {
'user_id': 'a24b935c-03cd-47f0-af68-c60a68b31303'
});
gtag('event', 'hello-world', {
'test': true
});
</script>
<title>Html Delivery</title>
<script type="text/javascript">
function myFunction() {
// Event with nested data test. It doesnt seem to display nicely
gtag('event', 'button-click-nested', {
'data': {
'type': 'nextButton'
}
});
gtag('event', 'button-click', {
'type': 'nextButton'
});
}
function LinkFunction() {
console.log("link click");
gtag('event', 'link click', {
'type': 'link'
});
}
</script>
</head>
<body>
<button onclick="myFunction()">Next</button>
<a id="myLink" href="#" title="Click to do something" onclick="LinkFunction()">link text</a>
</body>
</html>
I've tried to move the calls to above/below the config command, but it makes no difference either.
There is a similar question, but my rep wont let me comment on it to see if its still the case. The accepted answer doesn't really help me since I wanted to be able to add any arbitrary data in this way.
I have tried to setup a custom metric for this in GA (im not using GTM), but still. No data comes through.
Does this just not work?
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 using jQuery 2.1.1, and have been using it to add 'clickable' to rows returned from a database using this:
<script type="text/javascript">
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
});
});
</script>
That has been working fine. I have now added jquery-ias (2.1.2), and only the first page of returned results has clickable rows.
My jquery-ias code is as follows:
<script type="text/javascript">
$(document).ready(function() {
// Infinite Ajax Scroll configuration
jQuery.ias({
container : '.wrap', // main container where data goes to append
item: '.item', // single items
pagination: '.nav', // page navigation
next: '.nav a', // next page selector
negativeMargin: 250,
});
});
</script>
Jquery-ias is working fine, the pages are loading as needed, but the resultant rows are not clickable.
Inspecting the page in Chrome shows that the subsequently loaded rows have not had the clickable attribute added.
The relevant row in the php is this:
<tr class='resultsrow item' <?php echo "data-href='carddetail.php?setabbrv={$row['setcode']}&number={$row['number']}&id={$row[1]}'"; ?>>
All works fine if I use either, but how do I get them to play nicely together?
EDIT.....
OK, I have worked around it using the jquery-ias built-in pageChange event.
jQuery.ias().on('pageChange', function(pageNum, scrollOffset, url) {
var delay=1000;
setTimeout(function(){
jQuery( function($) {
$('tbody tr[data-href]').addClass('clickable').click( function() {
window.location = $(this).attr('data-href');
});
});
},delay);
});
This way when ias finds a page change, it waits a second for the page structure to load, and then applies the clickable class.
I can't see this working if it's waiting for images though... doesn't have to for this instance, but there's got to be a better way to do this.
Any pointers?
the better way would be to use the rendered event, for example:
jQuery.ias().on('rendered', function(item) {
var $items = jQuery(items);
$items.each(function() {
jQuery('tr[data-href]', $this).addClass('clickable').click(function() {
window.location = $(this).attr('data-href');
});
});
});