I am trying to add a product directly to cart which is in virtuemart from external page. I have one external page there I have a button.
When we click on that button, the product details should go to cart in virtuemart and it should not affect the virtuemart add to cart functionality.
What should I do to make it possible. If you know the answer help me. thanks in advance.
Good Question, i have implemented this concept in one of my custom component page. you can use it anywhere only you have to provide product id and quantity.
following is the code you have to implement to your page:
Dont forget to change the variable in following div:
quantity= "1" replace 1 with your quantity
"$res->virtuemart_product_id" replace it with your product id
Place the following div inside your page:
<div class="addtocart-bar">
<span class="addtocart-button" style="float:right !important;">
<input type="submit" url='<?php echo JRoute::_("index.php?option=com_virtuemart&nosef=1&view=cart&task=addJS&format=json&lang=en&quantity=1&quantity%5B%5D=1&view=cart&virtuemart_product_id%5B%5D=$res->virtuemart_product_id&option=com_virtuemart"); ?>' title="Add to Cart" value="Add to Cart" id="btn_addtocart" class="bttn right" name="addtocart">
</span>
<div class="clear"></div>
</div>
and at the top of page you have to add following code:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery("[name=addtocart]").click(function(e){
e.preventDefault();
var url = $(this).attr('url');
jQuery.ajax({
type:"POST",
url: url,
async:false,
data:{'p_id' : 1 },
success: function(html){
var msg ="<div id='fancybox-content'><div style='width:auto;height:auto;overflow: auto;position:relative;'><div class='popUp_Box'><p>This item has been added to your shopping cart.</p><a class='continue bttn rmv_brdr btn_fix' href='index.php?option=com_virtuemart&view=categories&virtuemart_category_id=0'>Keep Shopping</a><?php if($user->id){ ?><a href='index.php?option=com_virtuemart&view=cart' class='showcart floatright bttn btn_fix'>Check Out</a><?php }else{ ?><a href='index.php?option=com_users&view=login&checkout=1' class='showcart floatright bttn btn_fix'>Check Out</a><?php } ?></div></div></div><a id='fancybox-close' style='display: block;'></a>";
jQuery.fancybox({
"titlePosition" : "inside",
"transitionIn" : "elastic",
"transitionOut" : "elastic",
"type" : "html",
"autoCenter" : true,
"closeBtn" : true,
"closeClick" : false,
"content" : msg
}
);
}
});
});
});
</script>
The Above Script will work if you have fancybox plugin saved at your root folder, for that please download fancybox plugin from "http://fancyapps.com/fancybox/#license". I have used fancybox because when the order is added to cart your order confirmation will appear in fancybox, that looks great. i am also attaching one of the image to show where you have to add fancybox plugin folder. I hope this will help you a lot.
Regards
Mohit :)
Related
i wrote some code to view my all showing events details using bootstrap modal popup when click read more button. but when i click read more button every response repeats same id.
this is my laravel code
#if(!empty($event))
#foreach($event as $value)
<!-- Single Blog Post -->
<div class="single-blog-post d-flex" id="event_tag">
<div class="post-thumbnail">
<img src="{{asset('images/'.$value->image)}}" alt="">
</div>
<div class="post-content">
<a class="post-title">
#if(strlen($value->title) <= 35)
{{$value->title}}
#else
{{substr($value->title, 0, 35) . '...'}}
#endif
</a>
<div class="post-meta d-flex justify-content-between">
<center><button id="event_button" class="post-cata cata-sm cata-success text_white" data-toggle="modal" data-target="#myModal">Read More</button></center>
</div>
</div>
<input type="hidden" name="event_id" id="event_id" value="{{$value->id}}"></div>
#endforeach
#endif
and this is javascript code to get id and show every id detail.
<script>
$(document).on("click", "#event_button", function() {
var id = $("event_id").val();
console.log(id);
$.ajax({
url: "/event/" + id + "/show",
dataType: "json",
success: function(html) {
$("#event_title").html(html.data.title);
}
});
})
</script>
every time repeats id no 2 when click each event read more button. how can i fix this?
Your code has some mistakes in html too. For example, has fixes ids in html.
'event_id'
'event_button'...
Try this...
<button id="event_button-{!! $value->id !!}" data-target="event_id-{!! $value->id !!}"
<input type="hidden" name="event_id" id="event_id-{!! $value->id !!}"
The code above will fixed the id issue.
Now let's to the JS code... Change the click event:
$(document).on("click", "button.post-cata", function() {
var id = $("#" . $(this).data("target").val();
...
Do you need to associate tags to work with the right value. Avoid to put fixes ids inside a php loop. The html id element must be unique in document.
So, has many ways to do this. In this case, the input hidden fild is not necessary. you can put the id in a attribute in the button tag too.
<button data-id="{!! $value->id !!}...
So in the jquery click event do:
var id = $(this).data('id');
It's more ease and clean.
give class name to button and add attribute to button
<button class="event_button post-cata cata-sm cata-success text_white" data-eventid="{{$value->id}}">Read More</button>
so no need to use hidden input id
now using jQuery :
$(document).on('click','.event_button',function(){
var event_id = $(this).attr("data-eventid");
$("#myModal").modal("show");
$.ajax({
url: "/event/" + event_id+ "/show",
dataType: "json",
success: function(html) {
$("#event_title").html(html.data.title);
}
});
});
I have a div with an un-ordered navigation list in it. The div it is in has a set height and the overflow set to auto to give me a scroll bar. What I want is to have the "current" navigation link scrolled to the top of the div on page load. Each list items has the class 'current-menu-item' when current. Here is what the code looks like.
<div class="menu-portfolio-container">
<ul id="menu-portfolio" class="menu">
<li id="menu-item-174" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-174 has-image">
<a href="http://dnb.khcreativemedia.com/hinton/">
</li>
Here is the jQuery I tried.
<script>
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('.current-menu-item').offset().top
}, 'slow');
});
</script>
Here's the link to jQuery in the head:
<script src="http://dnb.khcreativemedia.com/wp-includes/js/jquery/jquery.js?ver=1.11.1" type="text/javascript">
Can anyone tell me what I would need to do to get this working? This is a wordpress site using the genesis framework.
Thanks to Tim's help, I've got it working. You can check the js fiddle page to see it in action. jsfiddle.net/KHCreative/2rn7otax
Thanks again for your help Tim.
can one help on how can i submit the form to search page script on index page and return the results of search script on specific DIV id search_results we out going to the search.php or refresh the index page using AJAX onClick
Am not good in Ajax but i try my best to come out with the following code which does what am looking for but is loading the page we out clicking anything i need a user to trigger the event when he/she enters what they are looking for? Any answer or suggestion is greatly appreciate
<script language="javascript" src="js/jquery-8.js"></script>
<script language="javascript">
var grbData = $.ajax({
type : "GET",
url : "search_m.php",
data : "q=",
success: function (html) {
$("#more-info").html(html);
}
});
</script>
<div id="more-info"></div>
I wish the above code to use this following htm form
<form method="get" style="width:230px; margin:0 auto;" id="find">
<input type="image" src="images/searchthis.png" id="search_btn">
<input type="text" id="search_toggle" name="q" placeHolder="type to start searching">
</form>
Add a click event to the search_btn element.
$('#search_btn').click(function(e) {
e.preventDefault();
$.ajax({
type : "GET",
url : "search_m.php",
data : $('#search_toggle').val(),
success: function (html) {
$("#more-info").html(html);
}
});
HTH.
I have this fairly basic code within a $(document).ready listener:
$('#contact-us-button').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
$('.get-a-quote').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
Whereas the HTML:
<a id="contact-us-button" href="impianto/get-a-quote-form.php"></a>
[...]
<div class="product">
<h1>Ferrari California</h1>
<a href="dettaglio.php?id=7">
<img src="images/showcase/ferrari-california-showcase.jpg" />
</a>
<a class="get-a-quote" href="impianto/get-a-quote-form.php?id=7"></a>
</div>
Fancybox binds correctly but shows that message in place of my form. There are no conflicts among class names and IDs. Any ideas? Please note that Fancybox 1.3.4 behaves correctly with about the same code (different options).
Try adding the fancybox.ajax class to your links like
<a id="contact-us-button" class="fancybox.ajax" href="impianto/get-a-quote-form.php"></a>
and
<a class="get-a-quote fancybox.ajax" href="impianto/get-a-quote-form.php?id=7"></a>
Try using the property 'type' : 'iframe' if you want it to show another web page's content inside it like a window to the other page.
Something like this in your < head > tag:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'type' : 'iframe'
});
});
</script>
Also it might be obvious but if not... With this specific javascript enabling "fancybox" class links as popup links, your link to fire a popup would have class set as matching the class name in the javascript above, something like:
Link
I have a link on my ShowData.aspx page that I'm calling fancybox on.
Edit Data
My JQuery code is:
$("#editLink").fancybox({
'opacity': true,
'overlayShow': true,
'transitionIn': 'elastic',
'transitionOut': 'none'
});
The form EditData.aspx contains a save button. My problem is that after I click the save button the dialog does not close. Furthermore, after the save is performed on the server the client page redirects to EditData.aspx.
The expected outcome is that the dialog closes and I am returned to the parent page (ShowData.aspx).
Thanks!
I removed fancybox and found that this issue also occurs with regular JQuery dialogs. If you load a page that has a submit button (or posts back in any way) then your dialog will disappear and your main page will redirect to the dialog page. Here's a simple test:
HTML:
<div id="divClick"></div>
JQuery:
$(function () {
$("#divClick").dialog({
modal: true,
open: function () {
$(this).load('Postback.aspx');
},
title: 'Ajax Page'
});
});
Postback.aspx:
<body>
<form id="form1" runat="server">
<div>
</div>
Enter Name:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</form>
</body>
Is there a way to attach an event to the postback from the dialog?
Furthermore, I modified Postback.aspx to include jscolor.js (a JQuery plugin) to see if it would work, it did not work. Any JQuery functionality doesn't seem to work in a dialog.
I ended up using an iFrame. This seems to do the job.
MainPage.aspx
<div id="divClick"><iframe src="Postback.aspx"></iframe></div>
JQuery:
$(function () {
$("#divClick").dialog({
modal: true,
title: 'iFrame Page',
width: 500,
height: 500
});
});
JQuery plugins in Postback.aspx work well and posting back doesn't close the dialog and redirect the main page.