get selected product stock quantity on product page magento 2 - magento2

I am new in magento 2
i want to get selected product stock qty using ajax.
i am able to get selected product id by using below script in
app/design/frontend/Sm/market/Magento_Catalog/templates/product/view/addtocart.phtml file
var $ = jQuery.noConflict();
$(window).load(function() {
requirejs(['jquery'], function(jQuery) {
var selected_options = {};
jQuery('.swatch-attribute').each(function(k, v) {
var attribute_id = jQuery(v).attr('attribute-id');
var option_selected = jQuery(v).attr('option-selected');
if (!attribute_id || !option_selected) {
return;
}
selected_options[attribute_id] = option_selected;
});
var product_id_index = jQuery('[data-role=swatch-options]').data('mageSwatchRenderer').options.jsonConfig.index;
var found_ids = 0;
jQuery.each(product_id_index, function(product_id, attributes) {
var productIsSelected = function(attributes, selected_options) {
return _.isEqual(attributes, selected_options);
}
if (productIsSelected(attributes, selected_options)) {
found_ids += parseInt(product_id);
}
});
console.log(found_ids);
alert(found_ids);
});
});
and also able to count product qty by using this code
$product_Id = 1748;
$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$stockInfo = $objectManager->get('Magento\CatalogInventory\Api\StockRegistryInterface')->getStockItem($product_Id);
$stockqty = (int)$stockInfo->getQty();
echo $stockqty;
but how to pass product_id to php code dynamically?

Related

Cascading Dropdowns with storage to Local Storage

Am trying to save Cascading dropdown options to local storage, and am coming up with a few issues:
-The dropdowns are registered in Localstorage when changed, but they are not saving on refresh
-They are not being retrieved (probably because of the former issue).
Here's a link to the testing site:
https://www.flighteducation.co.uk/Panelcraft/Bespoke.php
Here is the script for the cascading dropdowns:
var subjectObject = {
"WALL": {
"NON FIRE RATED": ["BEADED", "NON-BEADED"],
"FIRE RATED 1 HOUR": ["BEADED", "NON-BEADED"],
"FIRE RATED 2 HOUR": ["BEADED", "NON-BEADED"],
},
"CEILING": {
"NON FIRE RATED": ["BEADED", "NON-BEADED"],
"FIRE RATED 1 HOUR": ["BEADED", "NON-BEADED"]
}
}
window.onload = function() {
var subjectSel = document.getElementById("subject");
var topicSel = document.getElementById("topic");
var chapterSel = document.getElementById("chapter");
for (var x in subjectObject) {
subjectSel.options[subjectSel.options.length] = new Option(x, x);
}
subjectSel.onchange = function() {
chapterSel.length = 1;
topicSel.length = 1;
for (var y in subjectObject[this.value]) {
topicSel.options[topicSel.options.length] = new Option(y, y);
}
}
topicSel.onchange = function() {
chapterSel.length = 1;
var z = subjectObject[subjectSel.value][this.value];
for (var i = 0; i < z.length; i++) {
chapterSel.options[chapterSel.options.length] = new Option(z[i], z[I]);
}
}
}
   
The code for local storage looks like this:
let options = [position, fire, frame];
for (let i = 0; i < options.length; i++) {
if (window.localStorage.getItem('dropdownValue') === options[i].value) {
options[i].setAttribute('selected', 'selected');
}
}
$(function () {
$('#number').change(function () {
localStorage.setItem('BespokeOrderInput', this.value);
});
if (localStorage.getItem('BespokeOrderInput')) {
$('#number').val(localStorage.getItem('BespokeOrderInput')).trigger('change');
}
});
$(function () {
$('#subject').change(function () {
localStorage.setItem('BespokeOrderForm1', this.value);
});
if (localStorage.getItem('BespokeOrderForm1')) {
$('#subject').val(localStorage.getItem('BespokeOrderForm1')).trigger('change');
}
});
with the $(function) being repeated for each item
the code looks like this for each dropdown (id being different for each)
<select class="list-dropdown" name="chapter" id="chapter">
<option id="frame" value="" selected="selected">PLEASE SELECT FIRE RATING FIRST</option>
</select>
The inputs for the numbers are saving and retrieving with no problem, but as mentioned above dropdowns are not working.
Very new to Localstorage stuff, and I appreciate anyone's time!
thanks

How to generate leaflet control from database

I wish to generate a custom dropdown filter, based on categories from a database.
How is this achieved?
In my example, this is (poorly) implemented with some hard coding and duplication.
var serviceOverlays = [
{name:"Cardiology", value:"cardiology"},
{name:"Opthamology", value:"opthamology"}
];
var oSelect = L.control({position : 'topright'});
oSelect.onAdd = function (map) {
var overlayParent = document.getElementById('new-parent'); // overlays div
var node = L.DomUtil.create('select', 'leaflet-control');
node.innerHTML = '<option value="cardiologist">Cardioligist</option><option value="opthamology">Opthamology</option>';
overlayParent.appendChild(node);
L.DomEvent.disableClickPropagation(node);
L.DomEvent.on(node,'change',function(e){
var select = e.target;
for(var name in serviceOverlays){
serviceOverlays[name].removeFrom(map);
}
serviceOverlays[select.value].addTo(map);
});
Fiddle
I created a Control for you:
L.Control.Select = L.Control.extend({
options: {
position : 'topright'
},
initialize(layers,options) {
L.setOptions(this,options);
this.layers = layers;
},
onAdd(map) {
this.overlayParent = L.DomUtil.create('div', 'leaflet-control select-control');
this.node = L.DomUtil.create('select', 'leaflet-control',this.overlayParent);
L.DomEvent.disableClickPropagation(this.node);
this.updateSelectOptions();
L.DomEvent.on(this.node,'change',(e)=>{
var select = e.target;
for(var value in this.layers){
this.layers[value].layer.removeFrom(map);
}
this.layers[select.value].layer.addTo(map);
});
return this.overlayParent;
},
updateSelectOptions(){
var options = "";
if(this.layers){
for(var value in this.layers){
var layer = this.layers[value];
options += '<option value="'+value+'">'+layer.name+'</option>';
}
}
this.node.innerHTML = options;
},
changeLayerData(layers){
this.layers = layers;
this.updateSelectOptions();
}
});
var oSelect = new L.Control.Select(serviceOverlays,{position : 'topright'}).addTo(map);
The data structure have to be:
var serviceOverlays = {
"cardiology": {name:"Cardiology", layer: cities},
"opthamology": {name:"Opthamology", layer: badCities}
};
Demo: https://jsfiddle.net/falkedesign/1rLntbo5/
You can also change the data dynamicl< with oSelect.changeLayerData(serviceOverlays2)

Can't figure out how to select items in the Facebook newsfeed for a Chome Extension

I'm working on a Chrome extension that inserts a button on every item in the Facebook newsfeed. I started off by using Tampermonkey to install a script that installs a button next to the subscribe video of every Youtube page (chrome-extension://dhdgffkkebhmkfjojejmpbldmpobfkfo/ask.html?aid=994ff494-1242-452f-a334-1bd616e18bb6), which worked fine.
Then I tried to modify it so it acts on the Facebook newsfeed, rather than the Youtube subscribe button. I changed the // match to go to facebook.com and targeting it to go after class='_3vuz', the Facebook div that houses the "like" button. But nothing happens when I go on Facebook; no button appears.
Here's my Tampermonkey code. Many thanks!
// ==UserScript==
// #name Facebook Fake News Button
// #namespace https://www.youtubeinmp3.com
// #version 1.2.2
// #description Adds a button to show you whether a Facebook article is true
// #author Ilana
// #match https://www.facebook.com/*
// #run-at document-end
// ==/UserScript==
function polymerInject(){
/* Create button */
var buttonDiv = document.createElement("div");
buttonDiv.style.width = "100%";
buttonDiv.id = "parentButton";
var addButton = document.createElement("button");
addButton.appendChild(document.createTextNode("Fake News"));
if(typeof(document.getElementById("iframeDownloadButton")) != 'undefined' && document.getElementById("iframeDownloadButton") !== null){
document.getElementById("iframeDownloadButton").remove();
}
addButton.style.width = "100%";
addButton.style.backgroundColor = "#181717";
addButton.style.color = "white";
addButton.style.textAlign = "center";
addButton.style.padding = "10px 0";
addButton.style.marginTop = "5px";
addButton.style.fontSize = "14px";
addButton.style.border = "0";
addButton.style.cursor = "pointer";
addButton.style.borderRadius = "2px";
addButton.style.fontFamily = "Roboto, Arial, sans-serif";
addButton.onclick = function () {
this.remove();
/* Add large button on click */
var addIframe = document.createElement("iframe");
addIframe.src = '//www.convertmp3.io/widget/button/?color=ba1717&video=' + window.location.href;
addIframe.style.width = "100%";
addIframe.style.border = "none";
addIframe.style.height = "60px";
addIframe.style.marginTop = "10px";
addIframe.style.overflow = "hidden";
addIframe.scrolling = "no";
addIframe.id = "iframeDownloadButton";
var targetElement = document.querySelectorAll("[id='meta']");
for(var i = 0; i < targetElement.length; i++){
if(targetElement[i].className.indexOf("ytd-watch") > -1){
targetElement[i].insertBefore(addIframe, targetElement[i].childNodes[0]);
}
}
};
buttonDiv.appendChild(addButton);
/* Find and add to target */
var targetElement = document.querySelectorAll("[class='_3vuz']");
for(var i = 0; i < targetElement.length; i++){
if(targetElement[i].className.indexOf("ytd-video-secondary-info-renderer") > -1){
targetElement[i].appendChild(buttonDiv);
}
}
/* Fix hidden description bug */
var descriptionBox = document.querySelectorAll("ytd-video-secondary-info-renderer");
if(descriptionBox[0].className.indexOf("loading") > -1){
descriptionBox[0].classList.remove("loading");
}
}
function standardInject() {
var pagecontainer=document.getElementById('page-container');
if (!pagecontainer) return;
if (/^https?:\/\/www\.facebook.com\/watch\?/.test(window.location.href)) run();
var isAjax=/class[\w\s"'-=]+spf\-link/.test(pagecontainer.innerHTML);
var logocontainer=document.getElementById('logo-container');
if (logocontainer && !isAjax) { // fix for blocked videos
isAjax=(' '+logocontainer.className+' ').indexOf(' spf-link ')>=0;
}
var content=document.getElementById('content');
if (isAjax && content) { // Ajax UI
var mo=window.MutationObserver||window.WebKitMutationObserver;
if(typeof mo!=='undefined') {
var observer=new mo(function(mutations) {
mutations.forEach(function(mutation) {
if(mutation.addedNodes!==null) {
for (var i=0; i<mutation.addedNodes.length; i++) {
if (mutation.addedNodes[i].id=='watch7-container' ||
mutation.addedNodes[i].id=='watch7-main-container') { // old value: movie_player
run();
break;
}
}
}
});
});
observer.observe(content, {childList: true, subtree: true}); // old value: pagecontainer
} else { // MutationObserver fallback for old browsers
pagecontainer.addEventListener('DOMNodeInserted', onNodeInserted, false);
}
}
}
function onNodeInserted(e) {
if (e && e.target && (e.target.id=='watch7-container' ||
e.target.id=='watch7-main-container')) { // old value: movie_player
run();
}
}
function finalButton(){
var buttonIframeDownload = document.createElement("iframe");
buttonIframeDownload.src = '//www.convertmp3.io/widget/button/?color=ba1717&video=' + window.location.href;
buttonIframeDownload.id = "buttonIframe";
buttonIframeDownload.style.width = "100%";
buttonIframeDownload.style.height = "60px";
buttonIframeDownload.style.paddingTop = "20px";
buttonIframeDownload.style.paddingBottom = "20px";
buttonIframeDownload.style.overflow = "hidden";
buttonIframeDownload.scrolling = "no";
document.getElementById("watch-header").appendChild(buttonIframeDownload);
}
function run(){
if(!document.getElementById("parentButton") && window.location.href.substring(0, 25).indexOf("facebook.com") > -1 && window.location.href.indexOf("watch?") > -1){
var parentButton = document.createElement("div");
parentButton.className = "yt-uix-button yt-uix-button-default";
parentButton.id = "parentButton";
parentButton.style.height = "23px";
parentButton.style.marginLeft = "28px";
parentButton.style.paddingBottom = "1px";
parentButton.onclick = function () {
this.remove();
finalButton();
};
document.getElementById("watch7-user-header").appendChild(parentButton);
var childButton = document.createElement("span");
childButton.appendChild(document.createTextNode("Download MP3"));
childButton.className = "yt-uix-button-content";
childButton.style.lineHeight = "25px";
childButton.style.fontSize = "12px";
parentButton.appendChild(childButton);
}
}
if(document.getElementById("polymer-app") || document.getElementById("masthead") || window.Polymer){
setInterval(function(){
if(window.location.href.indexOf("watch?v=") < 0){
return false;
}
if(document.getElementById("count") && document.getElementById("parentButton") === null){
polymerInject();
}
}, 100);
}
else{
standardInject();
}

Google chart data from external source

I am using C# webmethod to provide data to Google line chart. However I am stuck with the format of the data.
Currently I can only send data in list (object) format. But I want to send data in other format.
Is this possible? Please find my code snippet below:
ASP Page
//call to get data from ASP web method
$.ajax({
type: "POST",`enter code here`
contentType: 'application/json',
data: '{}',
url: 'AdminDashboard.aspx/GetChartData',
beforeSend: function () { alert("before send"); },
complete: function () { alert("complete"); },
success: function (data) {
var linedata1 = new google.visualization.arrayToDataTable(data.d);
linedata1.insertColumn(0, 'date', linedata1.getColumnLabel(0));
// copy values from column 1 (old column 0) to column 0, converted to Date
for (var i = 0; i < linedata1.getNumberOfRows() ; i++) {
var val = linedata1.getValue(i, 1);
if (val != '' && val != null) {
var dateArray = val.split('/');
var year = dateArray[2];
var month = dateArray[0] - 1; // convert to javascript's 0-indexed months
var day = dateArray[1];
linedata1.setValue(i, 0, new Date(year, month, day));
}
}
// remove column 1 (the old column 0)
linedata1.removeColumn(1);
dashboard.bind(programmaticSlider, programmaticChart);
dashboard.draw(linedata1);
}
ASP webmethod
[WebMethod]
public static List<object> GetChartData()
{
DataTable chartData = new DataTable();
DataTable tktData = new DataTable();
Array arrdata=null;
SPList configList, tktList;
SPQuery dataQuery;
SPListItemCollection configColl;
SPSecurity.RunWithElevatedPrivileges(delegate()
{
using (SPSite oSite = new SPSite("http://dsknomoe11:9696/"))
{
using (SPWeb oWeb = oSite.OpenWeb())
{
//Get Config list value for Ticket Priority and Ticket Status
configList = oWeb.Lists.TryGetList("SCMS_Configuration");
dataQuery = new SPQuery();
dataQuery.Query = "<Where><Or><Eq><FieldRef Name='Title' /><Value Type='Text'>Ticket Priority</Value></Eq><Eq><FieldRef Name='Title' /><Value Type='Text'>Ticket Status</Value></Eq></Or></Where>";
configColl = configList.GetItems(dataQuery);
//Ticket Priority and status
foreach(SPListItem oItem in configColl)
{
//Get Ticket Priority
if (oItem["Title"].ToString().Equals("Ticket Priority"))
{
tktPriority = oItem["value"].ToString().Split(';');
}
//Get Ticket Status
else if (oItem["Title"].ToString().Equals("Ticket Status"))
{
tktStatus = oItem["value"].ToString().Split(';');
}
}
//Add columns to DataTable ChartData
foreach (string s in tktStatus)
{
chartData.Columns.Add(s);
}
//Get Config list value for Ticket Priority and Ticket Status
tktList = oWeb.Lists.TryGetList("SCMS_Tickets");
dataQuery = new SPQuery();
dataQuery.Query = "<Where><Eq><FieldRef Name='isAct' /><Value Type='Choice'>Yes</Value></Eq></Where><OrderBy><FieldRef Name='Created' Ascending='True' /></OrderBy><GroupBy Collapse='True'><FieldRef Name='Created' /></GroupBy>";
dataQuery.ViewFields = "<FieldRef Name='Created' /><FieldRef Name='tckPrty' /><FieldRef Name='tckStat' />";
dataQuery.ViewFieldsOnly = true;
tktData = tktList.GetItems(dataQuery).GetDataTable();
var grpdata= tktData.AsEnumerable().Select(x => new { Date = Convert.ToDateTime(x[0]).Date.ToString("MM/dd/yyyy"), Status = x[2] }).ToArray();
arrdata = grpdata.GroupBy(l => l.Date).Select(g => new
{
Date = g.Key,
Open = g.Count(l => (string)l.Status == "Open"),
Closed = g.Count(l => (string)l.Status == "Closed"),
InProgress = g.Count(l => (string)l.Status == "In-Progress"),
Total = g.Count(l => ((string)l.Status == "Open") || ((string)l.Status == "Closed") || ((string)l.Status == "In-Progress"))
}).ToArray();
}
}
});
List<object> list = new List<object>();
list.Add(new object[] {"Date","Open","Closed","In-Progress","Total" });
string strDt, strOpen, strClosed, strInP, strTotal;
for (int i = 0; i < arrdata.Length; i++)
{
var spltData = arrdata.GetValue(i).ToString().Replace('{',' ').Replace('}',' ').Split(',');
strDt = spltData[0];
strOpen = spltData[1];
strClosed = spltData[2];
strInP = spltData[3];
strTotal = spltData[4].Trim();
list.Add(new object[] { Convert.ToDateTime(strDt.Split('=').Last()).Date.ToString("MM/dd/yyyy"),
Convert.ToInt32(strOpen.Split('=').Last()),
Convert.ToInt32(strClosed.Split('=').Last()),
Convert.ToInt32(strInP.Split('=').Last()),
Convert.ToInt32(strTotal.Split('=').Last())
});
}
return list;
}
Please help me with this.
1. My basic requirement is to create a datatable/or any other format with dynamic columns and then bind the data to google mutli-line chart.
For clarity, my current data format i.e list data is as
Date Open Closed InProgress
1/2/13 2 0 0
2/2/13 1 2 0
3/3/13 0 0 1
4/3/13 0 1 0
You can serve the data in many formats (JSON, CSV, TSV, HTML), I strongly recommend to you to use JSON, you can see the Google default structure here:
I got it working by using the JSON format.
i have posted the snippet, might help some one.
//for dynamic data binding
string jsonData = #"{ ""cols"" :[ { ""label"" : ""Type"" , ""type"" : ""string"" },{ ""label"" : ""Count"" , ""type"" : ""number"" }], ""rows"" :[{""c"":[{""v"":""Mushrooms""},{""v"":3}]}," +
#"{""c"":[{""v"":""Total""},{""v"":1}]}," +
#"{""c"":[{""v"":""Open""},{""v"":1}]}," +
#"{""c"":[{""v"":""Closed""},{""v"":1}]}," +
#"{""c"":[{""v"":""In-Progress""},{""v"":2}]}]}";
The catch was to use "double quotes" for every value. JSON recognizes "double quotes".
Thanks

Append divs changing his content dynamic

I have a dif called cdefualt that has some inputs from a form inside of it and I want to do something like this to clone it and change that input names:
var i = 2;
function add() {
var item = $('#cdefault').clone();
item.attr({'style': ''});
$xpto = 'gtitle'+i;
$xpto2 = 'gmessage'+i;
item.id = $xpto;
$('#'+$xpto+' input[id="gtitle1"]').attr('name', $xpto);
$('#'+$xpto+' textarea[id="gmessage1"]').attr('name',$xpto2);
$(item).appendTo('#ccontainer');
i++;
}
But this doesnt work. I've tried this already as well but it only works twice (for the original and first clone):
var i = 2;
function add() {
var item = $('#cdefault').clone();
item.attr({'style': ''});
$xpto = 'gtitle'+i;
$xpto2 = 'gmessage'+i;
$('#cdefault input[id="gtitle1"]').attr('id', $xpto);
$('#cdefault textarea[id="gmessage1"]').attr('id',$xpto2);
$('#cdefault input[name="gtitle1"]').attr('name', $xpto);
$('#cdefault textarea[name="gmessage1"]').attr('name', $xpto2);
$(item).appendTo('#ccontainer');
i++;
}
Even tryed this way:
function add() {
$xpto = 'gtitle'+i;
$xpto2 = 'gmessage'+i;
var div = document.getElementById('cdefault');
clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = $xpto;
clone.style.display = '';
$("#"+$xpto+" input[id='gtitle1']").attr('name', $xpto);
$("#"+$xpto+" textarea[id='gmessage1']").attr('name',$xpto2);
document.getElementById('ccontainer').appendChild(clone);
i++;
}
http://jsfiddle.net/Theopt/xNfSd/
fixed. changed cdefault id to id0 and this java script:
var i = 2;
var c = 0;
function add() {
$xpto = 'gtitle'+i;
$xpto2 = 'gmessage'+i;
var klon = $( '#id'+ c );
klon.clone().attr('id', 'id'+(++c) ).insertAfter( '#inserthere' );
document.getElementById('id'+(c)).style.display = '' ;
$("#id"+(c)+" input[id='gtitle1']").attr('name', $xpto);
$("#id"+(c)+" textarea[id='gmessage1']").attr('name',$xpto2);
i++;
}