WooCommerce Fields Validation on MultiStep Checkout page - php

i have this problem, and need your help to resolve it. I use MultiStep Checkout form, and all seems fine, except fields validation. I have 3 steps
Billing > Payment > Order Confirmation
Issue is that when left empty required field into "Billing" step, Woocommerce allow me to go to "Payment" step, and there show me error that required field is not filled. I want that check to be executed in "Billing" step. I checked into form-checkout.php, and found that navigation is made by this JS:
<?php if ($thegem_checkout_type == 'multi-step'): ?>
<script>
(function($) {
function active_checkout_tab($tab, isinit) {
if ($tab.length == 0 || ($tab.hasClass('active') && !isinit)) {
return false;
}
$tab.parent().find('.checkout-step').removeClass('active before-active');
$tab.addClass('active');
$tab.prev('.checkout-step').addClass('before-active');
var tab_id = $tab.data('tab-id');
$('.checkout-contents').removeClass('active');
$('.checkout-contents[data-tab-content-id="' + tab_id + '"]').addClass('active');
window.location.hash = '#' + tab_id;
}
var m = window.location.hash.match(/#checkout\-(.+)/);
if (m && $('.checkout-steps .checkout-step[data-tab-id="checkout-' + m[1] + '"]').length == 1) {
active_checkout_tab($('.checkout-steps .checkout-step[data-tab-id="checkout-' + m[1] + '"]'), true);
} else {
active_checkout_tab($('.checkout-steps .checkout-step:first'), true);
}
$('.checkout-steps .checkout-step').not('.disabled').click(function() {
active_checkout_tab($(this), false);
});
})(jQuery);
</script>
and this is php code:
<?php if ($thegem_checkout_type == 'multi-step'): ?>
<div class="checkout-steps <?php if(is_user_logged_in()): ?>user-logged<?php endif; ?> clearfix">
<?php if(is_user_logged_in() || 'no' === get_option( 'woocommerce_enable_checkout_login_reminder' )): ?>
<div class="checkout-step active" data-tab-id="checkout-billing"><?php esc_html_e('1. Facturation','thegem'); ?></div>
<div class="checkout-step" data-tab-id="checkout-payment"><?php esc_html_e('2. Paiement','thegem'); ?></div>
<div class="checkout-step disabled" data-tab-id="checkout-confirmation"><?php esc_html_e('3. Confirmation','thegem'); ?></div>
<?php else: ?>
<div class="checkout-step active" data-tab-id="checkout-signin"><?php esc_html_e('1. Se connecter','thegem'); ?></div>
<div class="checkout-step" data-tab-id="checkout-billing"><?php esc_html_e('2. Facturation','thegem'); ?></div>
<div class="checkout-step" data-tab-id="checkout-payment"><?php esc_html_e('3. Paiement','thegem'); ?></div>
<div class="checkout-step disabled" data-tab-id="checkout-confirmation"><?php esc_html_e('4. Confirmation','thegem'); ?></div>
<?php endif; ?>
</div>
So my question is how to made fields verification on first step instead of second one?

Related

jQuery - display button dependent on the section in the viewport

I am making a one page website and would like to show or hide a button dependent on the section id or element that is visible in the view port.
I have a home button that i need to show when the user scrolls down past what is technically the homepage. I am using scrollify to snap scrolls to section with a height value of 100vh.
I have a function to detect if the element in question is in view but the button displays or hides relevant to the page that is loaded not by seaching for the element that would tell the button to show or hide.
I am using the div class text to determine whether to show or hide the home button is there a way to make jquery update and re engage the function when the user has scrolled or moved the page? the pages in question are live on www.testsiteclash.co.uk
Thanks
jquery
$.fn.inView = function(inViewType){
var viewport = {};
viewport.top = $(window).scrollTop();
viewport.bottom = viewport.top + $(window).height();
var bounds = {};
bounds.top = this.offset().top;
bounds.bottom = bounds.top + this.outerHeight();
switch(inViewType){
case 'bottomOnly':
return ((bounds.bottom <= viewport.bottom) && (bounds.bottom >= viewport.top));
case 'topOnly':
return ((bounds.top <= viewport.bottom) && (bounds.top >= viewport.top));
case 'both':
return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));
default:
return ((bounds.top >= viewport.top) && (bounds.bottom <= viewport.bottom));
}
};
$(document).ready(function(){
if($('.text').inView( 'both' ) == true ){
$('.home-btn').css('display','none');
}else if($('#section_1').inView( 'both' ) == false ) {
$('.home-btn').css('display','block');
}
});
Html/php
<?php get_header(); ?>
<article id="section_1">
<section class='section' data-section-name="Devon Food Movement">
<div class="container">
<div class="logo">
<div class="logo-image">
</div>
</div>
<div class="text">
<h1>Devon Food Movement</h1>
<h2>Website under construction <br class="textbreak">follow us below on ...</h2>
</div>
<div class="icons">
<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
<div class="icon3m"></div>
</div>
</div>
</section>
</article>
<article id="section_2">
<section class='section' data-section-name="Contact">
<?php
if (have_posts()) :
while (have_posts()) : the_post();
get_template_part('form');
endwhile;
else:
echo '<p>No Content found</p>';
endif;
?>
</section>
</article>
<div class="home-btn"><i class="fas fa-home"></i></div>
</body>
</html>
Added scroll to the function all works now, noob alert haha!
$(document).scroll(function(){
if($('.text').inView( 'both' ) == true ){
$('.home-btn').css('display','none');
}else if($('#section_1').inView( 'both' ) == false ) {
$('.home-btn').css('display','block');
}
});
Here is a simplistic example that shows how to use the window.scroll event to detect whether to show/hide a button.
var currPos=1, lastPos=0, scrollDir='dn';
var triggerPos = $('#myTrigger').offset().top;
$(window).scroll(function(){
currPos = $(window).scrollTop();
$('#d2').html(currPos); //unnecc - displays current scroll position for you
scrollDir = (currPos > lastPos) ? 'dn' : 'up';
lastPos = currPos;
if (scrollDir=='dn'){
if (currPos > triggerPos) $('#btnSpecial').fadeIn(100);
}else{
if (currPos < triggerPos) $('#btnSpecial').fadeOut(100);
}
});
.dPage{width:100vw;height:100vh;}
#d1{background:palegreen;}
#d2{background:bisque;}
#d3{background:lightpink;}
#d4{background:purple;}
#d5{background:lightblue;}
#btnSpecial{display:none;position:fixed;top:30px;right:100px;padding:10px;background:dodgerblue;color:white;font-size:2.3rem;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dPage" id="d1"></div>
<div class="dPage" id="d2"><div id="myTrigger"></div></div>
<div class="dPage" id="d3"></div>
<div class="dPage" id="d4"></div>
<div class="dPage" id="d5"></div>
<button id="btnSpecial">La Button</button>

Yii: run a function when a submitButton is pressed

I'm very new to Yii, and trying to understand an existing web app, so please bear with me.
I've been having issues with a certain function, that seems to fail retaining data whenever actionView is calledhere, but I thought perhaps I was going about this problem all wrong.
Instead, I thought perhaps the button could directly run the function from the controller, instead of... whatever it was doing prior.
I looked at a sample here that had this:
<?php echo CHtml::submitButton('CSV Report', array('submit'=>'getReport')); ?>
Where getReport is the function in my controller (actionGetReport).
Unfortunately, it's not working. Here's the code of my _commentform.php:
<?php $post = $forum; ?>
<?php $comment = $model; ?>
<div id="comment_form<?=$post->id?>" class="other-member-comment-box">
<?php
$user=Persons::model()->findByAttributes(array('party_id'=>Yii::app()->user->id));
$country=Lookup_codes::model()->findByAttributes(array('id'=>$user->country));
$location = empty($country) ? '' : 'from '.$country->name;
?>
<div class="user-profilepic">
<a href="<?php echo Yii::app()->createUrl('persons/view/id/'.$user->showViewLinkId())?>"><img src="<?php
if(!empty($user->image) AND file_exists( Yii::getPathOfAlias('webroot').'/images/profile_picture/'.$user->party_id . $user->image)){
echo Yii::app()->request->baseUrl.'/images/profile_picture/'.$user->party_id . $user->image;
} else echo Yii::app()->request->baseUrl.'/images/profile_picture/NA.jpg';
?>"></a>
</div>
<div class="form">
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'comment-form',
'action'=>Yii::app()->createUrl('forum/view/id/'.$forum->id),
'enableAjaxValidation'=>false,
)); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->hiddenField($model,'node_type_id',array('value'=>'7')); ?>
<?php echo $form->error($model,'node_type'); ?>
</div>
<div class="row">
<?php echo $form->hiddenField($model,'content_id',array('value'=>$forum->id)); ?>
<?php echo $form->error($model,'content_id'); ?>
</div>
<div class="row">
<?php echo $form->hiddenField($model,'category',array('value'=>$forum->category)); ?>
<?php echo $form->error($model,'category'); ?>
</div>
<div class="row">
<?php echo $form->textArea($model,'content',array('rows'=>6, 'cols'=>90),array('id'=>'sample')); ?>
<?php echo $form->error($model,'content'); ?>
</div>
<input type="hidden" value="<?php echo $view; ?>" id="view" name="view"/>
<div class="row buttons">
<?php
if ($view == 'view'){
if ($model->isNewRecord) {
echo CHtml::submitButton('Reply', array('id'=>'comment'.$comment->id));
} else {
echo CHtml::button('Save', array('submit'=>'updatecomment'));
}
}?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
</div>
And here's the UpdateComment function from my controller:
public function actionUpdateComment()
{
Yii::log(CVarDumper::dumpAsString("ForumController: Update COMMENT!"));
Yii::log(CVarDumper::dumpAsString($_POST['Comment']));
exit();
}
I'm not exactly sure what I'll get by the $_POST['Comment'], but if the code worked, I'd very least expect it to log out the "ForumController: Update COMMENT!". It doesn't.
I tried changing the submitButton to button, but that just kills the button function entirely.
Next, I tried this answer here.
So I changed the submitButton code to this:
echo CHtml::submitButton($model->isNewRecord ? 'Reply' : 'Save',array('id'=>'comment'.$comment->id));
And added this to the end:
<script>
$(document).ready(function() {
$('#text_form_submit').click(function(ev) {
ev.preventDefault();
$.ajax({ type: 'POST', dataType: 'JSON',
url: '<?php echo Yii::app()->createUrl("forum/UpdateComment"); ?>',
success:function(data){
if(data !== null) {
$('#Text_group').val(data);
$('#text-form').submit();
}
},
error: function() {
alert("Error occured!!!.");
},
});
return false;
});
});
</script>
Not exactly sure what the code does, other than call a function as well, but as well, it doesn't work (I also changed POST from GET and back).
Any suggestions? I feel like CActiveForm is to blame here, but even modifying that causes the site to fail in loading pages.
You have a long question and could be you should split your question in more question with simple question each ..
A firts answer the submit button don't contain the target function see this doc
http://www.yiiframework.com/doc/api/1.1/CHtml#submitButton-detail
the target function (php controller/action) is defined in form .. this is from html .. is the form definition that define the target for the submitted data ..
if you want execute the actionGetReport you should define the target in form action
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'comment-form',
'action'=>Yii::app()->createUrl('yourController/actionGetReport'),
'enableAjaxValidation'=>false,
)); ?>

accordion not working after load

I just encountered a problem with jquery accordion. What I am doing is loading new content from a php page "jobsload.php". After updating the page with new content, accordion doesnot work. I have tried the destroy property too but in vain.
here is the code
$('#postjob').click(function () {
//Get the data from all the fields
var title = $('#jobtitle');
var date = $('#jobdate');
var status = $('#status');
var desc = $('#jobdesc');
//Simple validation to make sure user entered something
//If error found, add error-highlight class to the text field
if (title.val()=='') {
title.addClass('error-highlight');
return false;
} else title.removeClass('error-highlight');
if (date.val()=='') {
date.addClass('error-highlight');
return false;
}
else date.removeClass('error-highlight');
if (desc.val()=='') {
desc.addClass('error-highlight');
return false;
}
else desc.removeClass('error-highlight');
var data;
if($("#jobid").val()=="")
{
data = 'title=' + title.val() + '&date=' + date.val() + '&status=' + status.val() + '&desc=' + desc.val();
}
else
data = 'id=' + $("#jobid").val() + '&title=' + title.val() + '&date=' + date.val() + '&status=' + status.val() + '&desc=' + desc.val();
//organize the data properly
// Disable fields
//$('.text-label, .textarea-label').attr('disabled','true');
//show the loading sign
$('.loading-contact').show();
//start the ajax
$.ajax({
//this is the php file that processes the data and send mail
url: "postjob.php",
//GET method is used
type: "POST",
//pass the data
data: data,
//Do not cache the page
cache: false,
//success
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
//show the success message
$('.loading-contact').fadeOut('slow');
//show the success message
$('.success-message').slideDown('slow');
$('.success-message').delay(1000).slideUp('slow');
$('#jobsload').load("jobsload.php");
// Disable send button
//$('#send').attr('disabled',true);
//if process.php returned 0/false (send mail failed)
} else
{
$('.loading-contact').fadeOut('slow')
alert('Sorry, unexpected error. Please try again later.');
}
}
});
//cancel the submit button default behaviours
$('#accordion').accordion('destroy').accordion({ heightstyle: "content" });
return false;
});
HTML CODE
<div id="jobsload" style="clear:both">
<div class="panel">
<div class="panel-heading"><center>Available Positions</center></div>
<div class="row">
<?php
$sql = "SELECT * FROM jobs where valid='YES'";
$res = mysql_query($sql) or die(mysql_error());
?>
<div class="personalInfo" id="accordion">
<?php while ($row = mysql_fetch_array($res))
{ ?>
<h6 class="media-heading historyHeading">
<span style="width:80%;"><?php echo $row['title'];?></span>
<span style="width:20%;">(<?php echo $row['date'];?>)</span>
</h6>
<div>
<p><?php echo $row['description'];?></p>
</div>
<?php } ?>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading"><center>Positions Filled</center></div>
<div class="row">
<?php
$sql = "SELECT * FROM jobs where valid='NO'";
$res = mysql_query($sql) or die(mysql_error());
?>
<ul class="personalInfo">
<?php $mycount=1; while ($row = mysql_fetch_array($res))
{ ?>
<li>
<span>
<div style="width:100%; border:thin #666666">
<div style="float:left; width:5%">
<p style="margin-left:10px; margin-top:5px" >
<?php echo $mycount; $mycount++; ?>
</p>
</div>
<div style="float:left; width:85%">
<h6 class="media-heading historyHeading">
<?php echo $row['title'];?>
</h6>
</div>
<div style="float:right; width:10%">
<h6 class="media-heading historyHeading">
<?php echo $row['date'];?>
</h6>
</div>
</div>
</span>
<div class="clearfix"></div>
</li>
<?php } ?>
</ul>
<!-- add this line to add small portfolio -->
</div>
thank you for your help.
If i'm correct the following code loads your new content:
$('#jobsload').load("jobsload.php");
and not the post call.
You need to re-initialize ajaxloaded content, because it's not in the dom, when jquery is initialized.
In the answer Kuma, the accordion is triggered at the same time as the load is being called. Not after the success of the code.
See code beneath to use the success function of the jobsload
$('#jobsload').load("jobsload.php", function( response, status, xhr ) {
if (status == "success") {
// Place reload the accordion code here
}
if ( status == "error" ) {
// optional: place error code here.
// if you don't place this, user will not receive notification of failure.
}
});
You should apply the accordion inside your success function.
success: function (html) {
//if process.php returned 1/true (send mail success)
if (html==1) {
//hide the form
//show the success message
$('.loading-contact').fadeOut('slow');
//show the success message
$('.success-message').slideDown('slow');
$('.success-message').delay(1000).slideUp('slow');
$('#jobsload').load("jobsload.php");
// Disable send button
//$('#send').attr('disabled',true);
//if process.php returned 0/false (send mail failed)
//cancel the submit button default behaviours
$('#accordion').accordion('destroy').accordion({ heightstyle: "content" });
return false;
} else
{
$('.loading-contact').fadeOut('slow')
alert('Sorry, unexpected error. Please try again later.');
}
}

Magento - Product add to mini cart from slider

I want to add product to mini cart from slider.
Slider contain number of thumbnails of products ( It is dynamically generate from admin side. When admin is adding product, the product image will automatically adding in slider too.)
Now my question is
-> If user clicks on specific thumbnail, and click to add-to-cart button, it should be add in Mini cart in header using ajax.
-> If I'm getting product id with Image, Is it enough ? If not, what are parameters are required ?
I haven't more knowledge for Magento, If you knowing even One point from above, please guide me. It will me more helpful to solve out issue.
As of this post:(EE 1.12 or CE 1.7)
Adding a product to the (mini) cart/cart remains relatively the same process across the site, however, where are you adding this slider?
Home Page? Product Listing Page? Product View/Detail Page? Other?
1) Yes, if you properly link the Product via: Link, Image, or (Add to Cart) button, you can have the item added to the cart. See below.
2) We use the ID/SKU to retrieve the product information and in turn it's Image/Small/Thumbnail images as well as Label, Short/Long Description or any other Product related data to the SKU/ID, so yes the product ID is enough information to add the product to the cart.
Are you using a specific slider? Making your own?
Slider Template via Listing Page, read, apply, and expand; do not just copy and paste.
//You'll want to loop through your collection for the slider, is this collection from a category? Custom module?
<?php foreach ($_productCollection as $_product): ?>
//Get/Load the Product Id when looping through a/your collection:
<?php $product = Mage::getModel('catalog/product')->load($_product->getId()); ?>
//Get the Image/Link Information you want to display for your slider:
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(100); ?>" width="100" height="100" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
//Basic Add to Cart:
<?php //echo $this->helper('checkout/cart')->getAddUrl($_product) ?>
//Ajax Button
<button onclick="productAddToCartForm.submit()" class="button btn-cart"><span><span>Get a Quote</span></span></button>
//Basic Javascript for Button
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(){
if (this.validator.validate()) {
this.form.submit();
}
}.bind(productAddToCartForm);
//]]>
</script>
For additional Details, the following provides a complete implementation as well.
The following provides a good example of the logic though:
http://tutorialmagento.com/add-multiple-product-to-cart-using-magento-ajax-add-cart
--
Update:
Magento's EE Iphone Theme also add's in a visual for adding the product to the cart.
Please see the following file (EE 1.12), I'll have to check to see if this is available in CE, keep in mind this is a Detail page and targeting product ID's on the home page will be different, however, once the Product ID is found, the rest is applicable.
app/design/frontend/enterprise/iphone/template/catalog/product/view.phtml
<?php // SAMPLE?>
<?php $_helper = $this->helper('catalog/output'); ?>
<?php $_product = $this->getProduct(); ?>
<script type="text/javascript">
var optionsPrice = new Product.OptionsPrice(<?php echo $this->getJsonConfig() ?>);
</script>
<div id="messages_product_view"><?php echo $this->getMessagesBlock()->setEscapeMessageFlag(true)->toHtml() ?></div>
<div class="product-view">
<form action="<?php echo $this->getSubmitUrl($_product) ?>" method="post" id="product_addtocart_form"<?php if($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
<div class="no-display">
<input type="hidden" name="product" value="<?php echo $_product->getId() ?>" />
<input type="hidden" name="related_product" id="related-products-field" value="" />
</div>
<div class="product-essential">
<div class="product-img-box">
<?php echo $this->getChildHtml('media') ?>
</div>
<div class="product-shop">
<div class="product-main-info">
<div class="product-name">
<h1><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></h1>
</div>
<?php echo $this->getChildHtml('alert_urls') ?>
<?php echo $this->getChildHtml('product_type_data') ?>
</div>
<?php echo $this->getChildHtml('tierprices') ?>
<?php echo $this->getChildHtml('extrahint') ?>
<?php if (!$this->hasOptions()):?>
<div class="add-to-box">
<?php if($_product->isSaleable()): ?>
<?php echo $this->getChildHtml('addtocart') ?>
<?php endif; ?>
</div>
<?php else:?>
<?php if ($_product->isSaleable() && $this->hasOptions() && $this->getChildChildHtml('container1') ):?>
<div class="options-container-small">
<?php echo $this->getChildChildHtml('container1', '', true, true) ?>
</div>
<?php endif;?>
<?php endif; ?>
<?php echo $this->getChildHtml('other');?>
</div>
</div>
// -------
<script type="text/javascript">
//<![CDATA[
var productAddToCartForm = new VarienForm('product_addtocart_form');
productAddToCartForm.submit = function(button, url) {
if (this.validator.validate()) {
var form = this.form;
var oldUrl = form.action;
if (url) {
form.action = url;
}
var e = null;
try {
var transformValue = {};
if ( Modernizr.csstransforms3d ) {
transformValue[Modernizr.prefixed('transform')] = 'translate3d(-82px, -106px, 2px) scale(0) rotate(200deg)';
} else if ( Modernizr.csstransforms ) {
transformValue[Modernizr.prefixed('transform')] = 'translate(-82px, -106px) scale(0) rotate(200deg)';
} else {
this.form.submit();
return false;
}
var originalImg = $$('.product-image-wrap .product-image img')[0];
originalImg.up('.product-image-wrap').insert(originalImg.clone().addClassName('cloned'));
setTimeout(function () {
$$('.cloned')[0].setStyle(transformValue);
}, 1);
$$('.product-image-wrap .cloned')[0].observe(transEndEventName, function(e) {
this.form.submit();
}.bind(this));
} catch (e) {
}
this.form.action = oldUrl;
if (e) {
throw e;
}
if (button && button != 'undefined') {
button.disabled = true;
}
}
}.bind(productAddToCartForm);
productAddToCartForm.submitLight = function(button, url){
if(this.validator) {
var nv = Validation.methods;
delete Validation.methods['required-entry'];
delete Validation.methods['validate-one-required'];
delete Validation.methods['validate-one-required-by-name'];
if (this.validator.validate()) {
if (url) {
this.form.action = url;
}
this.form.submit();
}
Object.extend(Validation.methods, nv);
}
}.bind(productAddToCartForm);
//]]>
</script>

Ajax how to disable div or item

I am new to ajax, is there a way you can help me, how to disable all items once click is successful:
Here is my code for ajax:
if (!parent.hasClass('.disabled')) {
// vote up action
if (action == 'click') {
alert("test");
};
//how do i add disabled function on a particular div
// add disabled class with .item
parent.addClass('.disabled');
};
here is my index:
<?php while($row = mysql_fetch_array($query)): ?>
<div class="item" data-postid="<?php echo $row['recipe_id'] ?>" data-score="<?php echo $row['vote'] ?>">
<div class="vote-span"><!-- voting-->
<div class="vote" data-action="up" title="Vote up">
<i class="icon-chevron-up"></i>
</div><!--vote up-->
<div class="vote-score"><?php echo $row['vote'] ?></div>
</div>
<div class="post"><!-- post data -->
<p><?php echo $row['recipe_title'] ?></p>
</div>
</div><!--item-->
i jst want to disable the loop icon-chevron-up class.not just one but all.
Actually no ajax call needed here. I will only be done by using jquery. See the code
$(document).ready(function(){
$('.item').click(function(){
if (!parent.hasClass('.disabled')) {
parent.addClass('.disabled');
}
});
});
Here you have not mentioned, on what click you need the action, so i consider that on the div contains class='item', the action will be performed. I hope it will help.

Categories