I edited my checkout/cart.tpl and initially everything looks fine, but then when I "add cart" something the code changes automatically and everything be strange.
EXAMPLES
1- when I enter in website and look to cart, everything looks fine:
2- THE BUG/MISTAKE. When I update my cart, when I click in "Add cart" only appear this part of my cart, without prices and checkout etc:
HTML/cart.TPL
<div id="cart">
<img src="images/bag.png" alt="Bag" />Cart: <span id="cart-total"><?php echo $text_items; ?></span>
<div class="cart_menu">
<?php if ($products || $vouchers) { ?>
<div class="cart_items">
<?php foreach ($products as $product) { ?>
<div class="c_item_img floatleft">
<?php if ($product['thumb']) { ?>
<img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" title="<?php echo $product['name']; ?>" />
<?php } ?>
</div>
<div class="c_item_totals floatleft">
<div class="c_item_totals_detail floatleft">
<h5><?php echo $product['name']; ?></h5>
<span><?php echo $product['quantity']; ?> x <?php echo $product['total']; ?></span>
</div>
<div class="close_icon_cart floatleft">
<img src="images/close.png" onclick="cart.remove('<?php echo $product['key']; ?>');" title="<?php echo $button_remove; ?>" alt="" />
</div>
</div>
<?php } ?>
</div>
<div class="cart_totals">
<?php foreach ($totals as $total) { ?>
<div class="c_totals_left floatleft">
<p></p>
</div>
<div class="c_totals_right floatleft">
<p><?php echo $total['title']; ?> <?php echo $total['text']; ?></p>
</div>
<?php } ?>
</div>
<div class="cart_view_bottom">
<div class="c_totals_left floatleft">
<?php echo $text_cart; ?>
</div>
<div class="c_totals_right floatleft">
<?php echo $text_checkout; ?>
</div>
</div>
<?php } else { ?>
<div class="cart_items">
<p class="text-center"><?php echo $text_empty; ?></p>
</div>
<?php } ?>
</div>
</div>
.JS
<script type="text/javascript"><!--
$('#button-cart').on('click', function() {
$.ajax({
url: 'index.php?route=checkout/cart/add',
type: 'post',
data: $('#product input[type=\'text\'], #product input[type=\'hidden\'], #product input[type=\'radio\']:checked, #product input[type=\'checkbox\']:checked, #product select, #product textarea'),
dataType: 'json',
beforeSend: function() {
$('#button-cart').button('loading');
},
complete: function() {
$('#button-cart').button('reset');
},
success: function(json) {
$('.alert, .text-danger').remove();
$('.form-group').removeClass('has-error');
if (json['error']) {
if (json['error']['option']) {
for (i in json['error']['option']) {
var element = $('#input-option' + i.replace('_', '-'));
if (element.parent().hasClass('input-group')) {
element.parent().after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
} else {
element.after('<div class="text-danger">' + json['error']['option'][i] + '</div>');
}
}
}
if (json['error']['recurring']) {
$('select[name=\'recurring_id\']').after('<div class="text-danger">' + json['error']['recurring'] + '</div>');
}
// Highlight any found errors
$('.text-danger').parent().addClass('has-error');
}
if (json['success']) {
$('.breadcrumb').after('<div class="alert alert-success">' + json['success'] + '<button type="button" class="close" data-dismiss="alert">×</button></div>');
$('#cart-total').html(json['total']);
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('#cart > div').load('index.php?route=common/cart/info .cart_menu .cart_items');
}
}
});
});
//--></script>
I already tried put all div classes in JavaScript but it didn't work, unfortunately.
I'm almost positive that your problem is due to the fact that you have used the id "cart" in your checkout/cart template which is already in use by the cart module handled by module/cart. It's important to understand that these are two different things and the cart id needs be unique - especially when you are using javascript to update it's contents.
Try changing the id in checkout/cart.tpl to something other than "cart".
Related
I'm creating simple quiz plugin, but now I'm in dilemma, because don't have an idea how to make options to auto-scroll to the top of the Explanation Box after visitor choose an answer (right or wrong, explanation box is same with same content. Note - explainer box is hidden until visitor clicks with mouse on checkbox of any offered answer.
Below is JavaScript code I have so far:
var wpvqgr = wpvqgr || {};
(function($)
{
$(document).ready(function()
{
wpvqgr.selectAnswer = function($question, question_id, $answer, answer_id)
{
// Don't let the user play twice the same question!
if ($answer.hasClass('wpvqgr-disabled-answer') && !wpvqgr.vars.quiz.settings.trivia_hiderightwrong) {
return;
}
// Right or wrong?
var rightAnswers = wpvqgr.getRightAnswers(question_id);
var isRight = (rightAnswers.indexOf(answer_id) > -1);
// Store data
var _answers = wpvqgr.getStore('answers') || { 'questions' : [] };
_answers.questions[question_id] = {
'answer_id' : answer_id,
'isRight' : isRight,
'rightAnswers' : rightAnswers,
};
wpvqgr.setStore('answers', _answers);
// Display Right or Wrong answers
if (wpvqgr.vars.quiz.settings.trivia_hiderightwrong != 'yes')
{
// First, disable every answers
$question.find('.wpvqgr-answer').removeClass('wpvqgr-selected-answer').addClass('wpvqgr-disabled-answer');
// Add explanation
var $explanation = $question.find('div.wpvqgr-explanation');
$explanation.find('div.wpvqgr-explanation-content').html(wpvqgr.vars.quiz.questions[question_id].wpvqgr_quiz_questions_explanation);
if (isRight)
{
$explanation.find('h3.wpvqgr-thats-right').show();
$answer.addClass('wpvqgr-right-answer');
}
else
{
$explanation.find('h3.wpvqgr-thats-wrong').show();
$answer.addClass('wpvqgr-wrong-answer');
$.each(rightAnswers, function(index, answer_id){
$question.find('.wpvqgr-answer[data-id=' + answer_id + ']').addClass('wpvqgr-right-answer');
});
}
$explanation.show();
}
else
{
$question.find('.wpvqgr-answer').removeClass('wpvqgr-selected-answer');
$answer.addClass('wpvqgr-selected-answer');
}
// Update visual checkbox
$question.find('div.wpvqgr-checkbox-picture').removeClass('wpvqgr-checkbox-checked-picture');
$answer.find('div.wpvqgr-checkbox-picture').addClass('wpvqgr-checkbox-checked-picture');
// Not a visual class, just marked as
$answer.addClass('wpvqgr-is-selected-answer');
};
wpvqgr.computeResults = function()
{
var answers = wpvqgr.getStore('answers') || { 'questions' : [] };
var finalScore = 0;
// Score
$.each(answers.questions, function (q_id, answer_data) {
if (answer_data.isRight) {
finalScore++;
}
});
// Appreciation
var appreciation = wpvqgr.getAppreciation(finalScore);
// Store global data for Facebook, page refresh and other stuff
wpvqgr.setStore('finalScore', finalScore);
wpvqgr.setStore('appreciation', appreciation);
};
//Autoscroll
/**
* Integrate results in view
* #return {[type]} [description]
*/
wpvqgr.integrateResults = function ()
{
wpvqgr.parseResults('quizname', wpvqgr.vars.quiz.general.name);
wpvqgr.parseResults('score', wpvqgr.getStore('finalScore'));
wpvqgr.parseResults('total', wpvqgr.getStore('answers').questions.length);
wpvqgr.parseResults('description', wpvqgr.getStore('appreciation').content);
}
wpvqgr.getAppreciation = function(score)
{
var finalAppreciationId = -1;
var finalAppreciationScoreStep = 9999;
$.each(wpvqgr.vars.quiz.appreciations, function (ap_id, data)
{
var app_score = parseInt(data.score);
if (score <= app_score && finalAppreciationScoreStep > app_score)
{
finalAppreciationScoreStep = app_score;
finalAppreciationId = ap_id;
}
});
// No appreciation found!
if (finalAppreciationId == -1) {
return { 'content':'', 'redirect':'', 'picture':'', 'score':-1 }
} else {
return wpvqgr.vars.quiz.appreciations[finalAppreciationId];
}
};
wpvqgr.getRightAnswers = function(question_id)
{
var rightAnswers = [];
var answers = wpvqgr.vars.quiz.questions[question_id]['wpvqgr_quiz_questions_answers'];
$.each(answers, function(id, data) {
if (data['wpvqgr_quiz_questions_answers_right']) {
rightAnswers.push(id);
}
});
return rightAnswers;
};
wpvqgr.getFinalScore = function()
{
return wpvqgr.getStore('finalScore');
};
});
})(jQuery);
/**
* Store
*
* questions[$id] = $answer_id
*
*
*
*/
<?php global $wpvqgr_quiz, $wpvqgr_quiz_columns, $wpvqgr_resources_dir_url, $wpvqgr_skin_dir_url; ?>
<!-- Load CSS Skin Theme -->
<style> #import url('<?php echo $wpvqgr_resources_dir_url . 'css/bootstrap-wrapper.css'; ?>'); </style>
<style> #import url('<?php echo $wpvqgr_resources_dir_url . 'icons/fa/css/font-awesome.min.css'; ?>'); </style>
<style> #import url('<?php echo $wpvqgr_resources_dir_url . 'css/fo-style.css'; ?>'); </style>
<style> #import url('<?php echo $wpvqgr_skin_dir_url . 'style.css'; ?>'); </style>
<!-- Custom style -->
<style>
<?php if ($wpvqgr_quiz->getSetting('progessbarcolor') != ''): ?>
.wpvqgr-wrapper button.wpvqgr-button.wpvqgr-playagain,
.wpvqgr-wrapper button.wpvqgr-button.wpvqgr-start-button,
.wpvqgr-wrapper div.wpvqgr-continue button.wpvqgr-button,
.wpvqgr-wrapper button.wpvqgr-button.wpvqgr-askinfo-submit,
.wpvqgr-progress .progress-bar {
background-color:<?php echo $wpvqgr_quiz->getSetting('progessbarcolor'); ?>;
}
<?php endif; ?>
<?php echo $wpvqgr_quiz->getSetting('global_custom_css'); ?>
</style>
<!-- Facebook SDK -->
<script type="text/javascript">
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- / Prepare sharing options -->
<?php echo apply_filters('wpvqgr_public_version', "<!-- Quiz Created with WP Viral Quiz (v".WPVQGR_VERSION.") - https://www.ohmyquiz.io/discover -->"); ?>
<a name="wpvqgr"></a>
<div class="wpvqgr-wrapper">
<div class="container-fluid">
<?php if ($wpvqgr_quiz->getSetting('startbutton') && !$wpvqgr_resultsOnly): ?>
<div class="wpvqgr-intro">
<?php if ($wpvqgr_quiz->getSetting('startbuttonintro')): ?>
<p><?php echo $wpvqgr_quiz->getSetting('startbuttonintro'); ?></p>
<?php endif ?>
<button class="wpvqgr-start-button wpvqgr-button"><?php echo $wpvqgr_quiz->getSetting('customlabel_startbutton'); ?></button>
</div>
<?php endif ?>
<div id="wpvqgr-<?php echo $wpvqgr_quiz->getId(); ?>" class="wpvqgr <?php echo $wpvqgr_quiz->getType(); ?>">
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_before')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_before')); ?>
</div>
<?php if ($wpvqgr_quiz->getPageCounter() > 1 && in_array('top', $wpvqgr_quiz->getSetting('progessbar'))): ?>
<!-- Progress bar -->
<div class="wpvqgr-progress wpvqgr-progress-top progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<?php endif ?>
<?php if (!$wpvqgr_resultsOnly): ?>
<div class="wpvqgr-page-0 wpvqgr-page" data-id="0">
<?php
$wpvqgr_questions = $wpvqgr_quiz->getQuestionsAndBlocks();
$q_real_id = -1;
foreach($wpvqgr_questions as $q_id => $question):
// Type and content
$q_type = $question['_type'];
$q_content = ($q_type == 'wpvqgr_quiz_htmlblocks') ? $question['wpvqgr_quiz_htmlblocks_content'] : $question['wpvqgr_quiz_questions_content'];
// Real ID (ignore HTML blocks)
if ($q_type == 'wpvqgr_quiz_questions') {
$q_real_id++;
}
// Pagination
$q_isTherePage = ($question['wpvqgr_quiz_questions_addpage'] && isset($wpvqgr_questions[$q_id+1]));
$currentPage_id = (!isset($currentPage_id)) ? 0 : $currentPage_id;
// Picture
if ($q_type == 'wpvqgr_quiz_questions') {
$q_picture_id = $question['wpvqgr_quiz_questions_picture'];
$q_picture_info = WPVQGR_Snippets::wpGetAttachment($q_picture_id);
$q_picture_url = wp_get_attachment_url($q_picture_id);
}
?>
<div class="row">
<div class="col-sm-12">
<!-- Global ads between questions -->
<?php if ( $q_real_id > 0 && $wpvqgr_quiz->getSetting('global_ads_between_count') > 0 && ($q_real_id % $wpvqgr_quiz->getSetting('global_ads_between_count') == 0) ): ?>
<?php echo $wpvqgr_quiz->getSetting('global_ads_between_content'); ?>
<?php endif; ?>
<!-- HTML Blocks -->
<?php if ($q_type == 'wpvqgr_quiz_htmlblocks'): ?>
<div class="wpvqgr-htmlblock">
<?php echo do_shortcode($q_content); ?>
</div>
<?php else: ?>
<!-- Regular question -->
<div class="wpvqgr-question" data-id="<?php echo $q_real_id; ?>">
<div class="wpvqgr-question-label"><?php echo do_shortcode(nl2br($q_content)); ?></div>
<?php if (is_numeric($q_picture_id)): ?>
<div class="wpvqgr-question-picture">
<figure class="figure">
<img src="<?php echo $q_picture_url; ?>" class="figure-img img-fluid" alt="<?php echo htmlentities($q_picture_info['alt']); ?>" />
<?php if ($q_picture_info['caption'] != ''): ?>
<figcaption class="figure-caption"><?php echo $q_picture_info['caption']; ?></figcaption>
<?php endif; ?>
</figure>
<?php if (function_exists ('adinserter')) echo adinserter (1); ?> <!-- / First Add Code -->
</div>
<?php endif ?>
<div class="row">
<?php
$smartColumns = WPVQGR_Snippets::getSmartColumnsSize($question, $wpvqgr_quiz_columns);
foreach ($question['wpvqgr_quiz_questions_answers'] as $a_id => $answer):
// Answer
$a_label = $answer['wpvqgr_quiz_questions_answers_answer'];
// Picture
if ($smartColumns['displayPicture'])
{
$a_picture_id = $answer['wpvqgr_quiz_questions_answers_picture'];
if ($a_picture_id == 0) {
$a_picture_info = array('alt' => '', 'caption' => '');
$a_picture_url = WPVQGR_PLUGIN_URL . '/resources/images/picture-placeholder.jpg';
} else {
$a_picture_info = WPVQGR_Snippets::wpGetAttachment($a_picture_id);
$a_picture_url = wp_get_attachment_image_src($a_picture_id, 'wpvqgr-square-answer');
$a_picture_url = $a_picture_url[0];
}
}
?>
<div class="wpvqgr-answer-col col-xs-<?php echo $smartColumns['xs-size']; ?> col-md-<?php echo $smartColumns['md-size']; ?>">
<div class="wpvqgr-answer" data-id="<?php echo $a_id; ?>">
<?php if ($wpvqgr_quiz->getType() == 'wpvqgr_quiz_perso'): ?>
<!-- Multipliers -->
<?php foreach ($answer['wpvqgr_quiz_questions_answers_multipliers'] as $p_id => $value): ?>
<input type="hidden" name="wpvqgr_answer_multipliers[]" data-pid="<?php echo (int)$p_id; ?>" value="<?php echo (int)$value; ?>" />
<?php endforeach ?>
<?php endif; ?>
<?php if ($smartColumns['displayPicture']): ?>
<div class="wpvqgr-answer-picture">
<figure class="figure">
<img src="<?php echo $a_picture_url; ?>" class="figure-img img-fluid" alt="<?php echo htmlentities($a_picture_info['alt']); ?>" />
<?php if ($a_picture_info['caption'] != ''): ?>
<figcaption class="figure-caption"><?php echo $a_picture_info['caption']; ?></figcaption>
<?php endif; ?>
</figure>
</div>
<?php endif ?>
<?php if ($a_label != ''): ?>
<div class="wpvqgr-checkbox">
<div class="wpvqgr-checkbox-picture wpvqgr-checkbox-unchecked-picture"></div>
<span class="wpvqgr-answer-label"><?php echo do_shortcode(stripslashes($a_label)); ?></span>
<hr class="wpvqgr-clear" />
</div>
<?php endif ?>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="row"><div class="col-sm-12">
<div class="wpvqgr-explanation">
<center><h6>⇩ SCROLL DOWN TO CONTINUE ⇩</h6></center>
<h3 class="wpvqgr-thats-right"><?php echo $wpvqgr_quiz->getSetting('customlabel_right'); ?></h3>
<h3 class="wpvqgr-thats-wrong"><?php echo $wpvqgr_quiz->getSetting('customlabel_wrong'); ?></h3>
<div class="wpvqgr-explanation-content"></div>
</div>
</div>
</div>
</div> <!-- .question -->
<?php endif; ?>
</div> <!-- / col -->
</div> <!-- / row -->
<div class="autoscroll>">
</div>
<div class="wpvqgr-continue">
<?php if (function_exists ('adinserter')) echo adinserter (2); ?> <!-- / Second Add Code -->
<button class="wpvqgr-button" style="background:<?php echo $wpvqgr_quiz->getSetting('progessbarcolor'); ?>;">
<?php echo $wpvqgr_quiz->getSetting('customlabel_continuebutton'); ?>
</button>
</div>
<?php
if ($q_isTherePage): $currentPage_id++;
?>
</div> <!-- close previous page -->
<div class="wpvqgr-page-<?php echo $currentPage_id; ?> wpvqgr-page" data-id="<?php echo $currentPage_id; ?>">
<?php endif ?>
<?php endforeach; ?>
</div> <!-- Final page close -->
<?php endif; ?>
<a id="wpvqgr-resultarea"></a>
<!-- Force to share -->
<div class="row">
<div class="col-xs-12 col-md-10 offset-md-1">
<div class="wpvqgr-forcetoshare">
<h3><?php echo __("Share the quiz to show your results !", 'wpvq'); ?></h3>
<button class="wpvqgr-button wpvqgr-social-facebook wpvqgr-force-share" data-title="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_title'); ?>" data-description="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_description'); ?>"><i class="fa fa-facebook-square" aria-hidden="true"></i> <?php echo __('Share on Facebook', 'wpvq'); ?></button>
</div>
</div>
</div>
<!-- Force to give some informations -->
<div class="row">
<div class="col-xs-12 col-md-10 offset-md-1">
<div class="wpvqgr-askinfo">
<h3><?php echo $wpvqgr_quiz->getSetting('customlabel_askinfotitle'); ?></h3>
<form action="" method="GET">
<?php foreach($wpvqgr_quiz->getSetting('askinfo_fields') as $field): ?>
<?php
$field_slug = WPVQGR_Snippets::slugify($field['wpvqgr_settings_askinfo_fields_field_label']);
$is_required_field = ($field['wpvqgr_settings_askinfo_fields_field_optional'] != 'yes');
?>
<div class="form-group">
<label for="wpvqgr-<?php echo $field_slug; ?>"><?php echo $field['wpvqgr_settings_askinfo_fields_field_label']; ?></label>
<input type="<?php echo $field['wpvqgr_settings_askinfo_fields_field_type']; ?>" class="form-control" name="<?php echo $field_slug; ?>" id="wpvqgr-<?php echo $field_slug; ?>" <?php if($is_required_field): ?>required="true"<?php endif; ?>/>
</div>
<?php endforeach; ?>
<?php if ($wpvqgr_quiz->getSetting('global_gdpr_enabled') == 1): ?>
<div class="form-check gdpr-area">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" name="wpvq_gpdr" id="wpvq_gpdr_checkbox" required="true" />
<?php echo $wpvqgr_quiz->getSetting('global_gdpr_message'); ?>
</label>
</div>
<?php endif ?>
<div class="form-group" style="text-align:center;">
<button type="submit" class="wpvqgr-button wpvqgr-askinfo-submit"><?php echo $wpvqgr_quiz->getSetting('customlabel_askinfobutton'); ?></button>
</div>
</form>
<?php if ($wpvqgr_quiz->getSetting('askinfo_ignore')): ?>
<p class="wpvqgr-askinfo-ignore"><?php echo $wpvqgr_quiz->getSetting('customlabel_askinfoignore'); ?></p>
<?php endif ?>
</div>
</div>
</div>
<!-- Show results -->
<div class="row">
<div class="col-sm-12">
<div class="wpvqgr-results">
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_aboveresults')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_aboveresults')); ?>
</div>
<div class="wpvqgr-results-box <?php echo $wpvqgr_quiz->getType(); ?>">
<div class="wpvqgr-top-result">
<div class="wpvqgr-quiz-name"><?php echo stripslashes($wpvqgr_quiz->getName()); ?></div>
<h3><?php echo $wpvqgr_quiz->getSetting('global_template_result'); ?></h3>
<div class="wpvqgr-result-description">%%description%%</div>
</div>
<div class="wpvqgr-additional-results">
<div class="wpvqgr-additional-results-template">
<h3><?php echo $wpvqgr_quiz->getSetting('global_template_additional_results'); ?></h3>
<div class="wpvqgr-result-description">%%description%%</div>
</div>
</div>
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_afterresults')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_afterresults')); ?>
</div>
<?php if ($wpvqgr_quiz->getSetting('displaysharing')): ?>
<div class="wpvqgr-sharing">
<?php if (!in_array('facebook', $wpvqgr_quiz->getSetting('global_socialmedia_hide'))): ?>
<button class="wpvqgr-button wpvqgr-social-facebook" data-title="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_title'); ?>" data-description="<?php echo $wpvqgr_quiz->getSetting('global_template_facebook_description'); ?>"><i class="fa fa-facebook-square" aria-hidden="true"></i> <?php echo __('Share on Facebook', 'wpvq'); ?></button>
<?php endif; ?>
<!-- Twitter -->
<?php if (!in_array('twitter', $wpvqgr_quiz->getSetting('global_socialmedia_hide'))): ?>
<button class="wpvqgr-button wpvqgr-social-twitter" data-tweet="<?php echo $wpvqgr_quiz->getSetting('global_template_twitter'); ?>" data-mention="<?php echo $wpvqgr_quiz->getSetting('twittermention'); ?>" data-hashtag="<?php echo $wpvqgr_quiz->getSetting('twitterhashtag'); ?>"><i class="fa fa-twitter-square" aria-hidden="true"></i> <?php echo __('Share on Twitter', 'wpvq'); ?></button>
<?php endif ?>
<!-- VK -->
<?php if (!in_array('vk', $wpvqgr_quiz->getSetting('global_socialmedia_hide'))): ?>
<button class="wpvqgr-button wpvqgr-social-vk" data-title="<?php echo $wpvqgr_quiz->getSetting('global_template_vk_title'); ?>" data-description="<?php echo $wpvqgr_quiz->getSetting('global_template_vk_description'); ?>"><i class="fa fa-vk" aria-hidden="true"></i> <?php echo __('Share on VK', 'wpvq'); ?></button>
<?php endif ?>
</div>
<?php endif; ?>
</div>
<?php if ($wpvqgr_quiz->getSetting('playagain')): ?>
<button class="wpvqgr-button wpvqgr-playagain"><?php echo $wpvqgr_quiz->getSetting('customlabel_playagainbutton'); ?></button>
<?php endif; ?>
</div>
</div>
</div>
<?php if ($wpvqgr_quiz->getPageCounter() > 1 && in_array('bottom', $wpvqgr_quiz->getSetting('progessbar'))): ?>
<!-- Progress bar -->
<div class="wpvqgr-progress wpvqgr-progress-bottom progress">
<div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<?php endif ?>
<div class="wpvqgr-a-d-s">
<?php echo do_shortcode($wpvqgr_quiz->getSetting('global_ads_after')); ?>
<?php echo do_shortcode($wpvqgr_quiz->getSetting('ads_after')); ?>
</div>
<?php if ($wpvqgr_quiz->getSetting('promote')): ?>
<div class="wpvqgr-promote">
<p>
<?php _e("This quiz has been created with", 'wpvq'); ?> WordPress Viral Quiz
</p>
</div>
<?php endif; ?>
</div> <!-- / #wpvqgr -->
</div> <!-- / container -->
<!-- Loading -->
<div class="row">
<div class="wpvqgr-loader">
<p>
<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only"><?php _e("Loading...", 'wpvq'); ?></span>
</p>
</div>
</div>
</div> <!-- / Bootstrap wrapper -->
I tried with dummy DIV element, but without success (to have it as an anchor, because explainer element is invisible).
Code samples I tried so far are:
$('wpvqgr-answer').click(function() {
$('html,body').animate({scrollTop: ('#autoscroll').offset().top - staticHeaderHeight}, 'slow');
return true;
});
And:
$('.wpvqgr-answer').click(function () {
$("html, body").animate({ scrollTop: $(el).closest(':visible').offset().top}, 400);
return true;
});
And, this was desperate act of self destruction:
$('.wpvqgr-answer').click(() => {
$('.wpvqgr-explanation').toggle('smooth', () => {
$('.wpvqgr-explanation').get(0).scrollIntoView();
});
});
I hope you have some kind of overview now, even in basic sense. Any guidance appreciated. Thank you
EDIT: Box creation conditions are within JS and parsed to HTML code, example below:
// Add explanation
var $explanation = $question.find('div.wpvqgr-explanation');
$explanation.find('div.wpvqgr-explanation-content').html(wpvqgr.vars.quiz.questions[question_id].wpvqgr_quiz_questions_explanation);
if (isRight)
{
$explanation.find('h3.wpvqgr-thats-right').show();
$answer.addClass('wpvqgr-right-answer');
}
else
{
$explanation.find('h3.wpvqgr-thats-wrong').show();
$answer.addClass('wpvqgr-wrong-answer');
$.each(rightAnswers, function(index, answer_id){
$question.find('.wpvqgr-answer[data-id=' + answer_id + ']').addClass('wpvqgr-right-answer');
});
}
$explanation.show();
}
else
{
$question.find('.wpvqgr-answer').removeClass('wpvqgr-selected-answer');
$answer.addClass('wpvqgr-selected-answer');
}
<div class="row"><div class="col-sm-12">
<div class="wpvqgr-explanation">
<center><h6>⇩ SCROLL DOWN TO CONTINUE ⇩</h6></center>
<h3 class="wpvqgr-thats-right"><?php echo $wpvqgr_quiz->getSetting('customlabel_right'); ?></h3>
<h3 class="wpvqgr-thats-wrong"><?php echo $wpvqgr_quiz->getSetting('customlabel_wrong'); ?></h3>
<div class="wpvqgr-explanation-content"></div>
</div>
</div>
</div>
Simple piece of code worked as charm for me, just enough to achieve functionality and in the same time not to complicate too much:
const goToTop = () => window.scrollTo(0, 950);
goToTop();
This is very quick and "clean" solution for one who does not need complicated function.
i am reading and trying to get this to work for several hours. I am pretty new with javascript and only have a small knowledge base about it in general.
I hope someone can be so kind as to help me and share their knowledge with me.
The problem:
I have a image gallery with a php generated masonry look. And a visualization of either a selected or deselected image. (Info comes out of db). Now when i click a image it needs to call a method in one of my controllers.
And afterwards update the selected to deselected or vise versa css style.
The methods have been made and the return aswell.
This is what i got so far. But nothing seems to be working. I don't know if it is something specific to codeigniter or to javascript (jquery).
$(document).ready(function()
{
$('div#imagelink').click(function()
{
var imgId = $(this).find('a').attr('href');
$('#result').load('<?php echo base_url(); ?>selection/selectionImage/' + imgId);
return false;
});
});
If anything else is required i will be happy to provide.
<div class="flex-column width-1275">
<div class="d-flex justify-content-between">
<div class="p-2">
<h1><?php echo $this->session->userdata('username'); ?></h1>
<h3><?php echo str_replace( '_', ' ', $selected_gallery) . ' Galerij'; ?></h3>
</div>
<?php echo $this->session->flashdata('gallerymsg'); ?>
<div class="p-2 text-right">
<?php echo $this->session->flashdata('clientmsg') . '</br>'; ?>
</div>
<div id="result"></div>
</div>
<div class="grid imageGallery" data-masonry='{ "itemSelector": ".grid-item", columnWidth: ".grid-sizer" }'>
<div class="grid-sizer"></div>
<?php $counter=1 ; $sizeGallery=c ount($images); foreach($images as $img) : $imageLocation='img/jpg/' . $folderName . '/' . $img[ 'image_name']; $id=$ selected_gallery . $counter; ?>
<div class="grid-item">
<a href="#<?php echo $id; ?>">
<img src="<?php echo base_url($imageLocation) ?>" alt="<?php echo $selected_gallery . ' ' . $counter ?>">
</a>
<?php $class='' ; $selected=$ img[ 'image_selected']; switch($selected) { case '0'; $class='isNot' ; break; case '1'; $class='is' ; break; default; $class='isNot' ; break; } if($img[ 'image_locked']=='1' ) { $class='locked' ; } ?>
<div id="imagelink" class="<?php echo $class ?> selected">
<?php if ($img[ 'image_locked']=='0' ) : ?>
<!-- -->
<?php endif; ?>
</div>
</div>
<div class="cssbox">
<a id="<?php echo $id; ?>" href="#<?php echo $id; ?>">
<img class="cssbox_thumb">
<span class="cssbox_full">
<img src="<?php echo base_url($imageLocation) ?>">
</span>
<div class="<?php echo $class ?> Lightbox-Selected"></div>
</a>
<a class="cssbox_close" href="#void"></a>
<?php if($counter < $sizeGallery) : ?>
<?php $next=$ counter+1; ?>
<a class="cssbox_next" href="#<?php echo $selected_gallery . $next ?>">></a>
<?php endif; ?>
<?php if($counter> 1) : ?>
<?php $prev=$ counter-1; ?>
<a class="cssbox_prev" href="#<?php echo $selected_gallery . $prev ?>"><</a>
<?php endif ?>
</div>
<?php $counter++; endforeach; ?>
</div>
</div>
<script>
$(document).ready(function() {
$('div#imagelink').click(function() {
var imgId = $(this).find('a').attr('href');
$('#result').load('<?php echo base_url(); ?>selection/selectionImage/' + imgId);
return false;
});
});
</script>
<!-- <script src="<?php echo base_url('assets/js/image-select.js'); ?>"></script> -->
<script src="<?php echo base_url('assets/js/imagesloaded.pkgd.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/masonry.pkgd.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/masonry.js'); ?>"></script>
I have made a shopping cart website using ajax and Codeigniter. The products is added to cart without the page load when the button add to cart is clicked. I was displaying single net weight for the product, but now i have changed it to multiple netweight for the same product. but add to cart is not working for the product which has multiple netweight. because i am not getting the logic to send the data of a selected dropdown list.
<section class="regular slider">
<?php
foreach($todays_offers as $offer)
{
if(!empty($offer))
{
$product_id=$offer->id;
$product_name=$offer->product_name;
$image=$offer->image;
$price=$offer->mrp;
$our_price=$offer->retail_price;
$brand=$offer->brand;
$pro_quantity=$offer->stock;
$gst=$offer->gst;
$stock=$offer->stock;
}
?>
<div class="product-container col-xs-12" style="">
<div class="product-left">
<div class="product-thumb">
<a class="product-img" href="#">
<img src='<?php echo base_url("images/$image")?> ' alt="<?php echo $product_name?>" >
</a>
</div>
</div>
<div class="product-right">
<div class="product-brand ">
<?php echo ucfirst($brand); ?>
</div>
<div class="product-name " style="height: 40px;overflow: hidden;line-height:17px;">
<?php echo $product_name ?>
</div>
<?php
$sql ="SELECT * FROM materials where product_name='".$product_name."' ORDER BY retail_price ASC";
$query1 = $this->db->query($sql);
$rowCount="SELECT * FROM materials where product_name='$product_name'";
$query2 = $this->db->query($rowCount);
if (!empty($query1))
{
if ($query2->num_rows() > 1)
{
echo "<select name='netweight' id='netweight' onchange='ItemSelected(this)'>";
foreach ($query1->result() as $row)
{
$net = $row->packing;
$retail_price = $row->retail_price;
?>
<option id="<?php echo $row->id;?>" value="<?php echo $net;?>" ><?php echo $net .' - Rs. '. $retail_price?> </option>
<?php
}
echo "</select>";
}
else
{
$net_weight=$offer->packing;
echo "<span>$net_weight</span>";
}
}
?>
<div class="price-box">
<span class="product-price"> <i class="fa fa-inr" aria-hidden="true"></i> <?php echo $our_price ?></span>
<?php
if($our_price<$price)
{
?>
<span class="product-price-old">MRP <i class="fa fa-inr" aria-hidden="true"></i><?php echo $price ?></span>
<?php
}
?>
</div>
<div class="col-sm-5 col-xs-4 pad-0"> <input type="number" value="1" min="1" max="10" name="quantity" class="form-control quantity" id="<?php echo $product_id ?>" /></div>
<div class="col-sm-5 col-xs-5 pad-0">
<div class="product-button">
<?php
if($pro_quantity>0)
{
?>
<a class="button-radius btn-add-cart add_cart" type="button" title="Add to Cart" name="add_cart" data-netweight="<?php echo $net_weight ?>" data-image="<?php echo $image ?>" data-productname= "<?php echo $product_name ?>" data-price="<?php echo $price?>" data-productid="<?php echo $product_id ?>" data-brand="<?php echo $brand ?>"data-gst="<?php echo $gst ?>" data-stock="<?php echo $stock ?>" >add<span class="icon"></span></a>
<?php
}
else
{
echo "<span class='label label-danger'>Out of stock</span>";
}
?>
</div>
</div>
</div>
</div>
<?php
}
?>
</section>
ajax code
$('.add_cart').click(function() {
var product_id = $(this).data("productid");
var product_name = $(this).data("productname");
var product_price = $(this).data("price");
var net = $(this).closest(".netweight").val();
alert(net);
var image=$(this).data("image");
var brand=$(this).data("brand");
var gst=$(this).data("gst");
var stock=$(this).data("stock");
var quantity = $('#' + product_id).val();
if(quantity != '' && quantity > 0)
{
$.ajax({
url:"<?php echo base_url(); ?>shopping_cart/add",
method:"POST",
data:{product_id:product_id, product_name:product_name, product_price:product_price, quantity:quantity,net:net,image:image,brand:brand,gst:gst,stock:stock },
success:function(data)
{
$.alert(product_name, {
title: 'Success product is added to cart',
closeTime: 6 * 1000,
autoClose: true,
});
$('#cart_details').html(data);
$('#' + product_id).val(1);
}
});
}
else
{
alert("Please Enter quantity");
}
});
I just want send the selected data with id to the cart
Your problem is, you dont pick up the value from your selected option and you dont set a value at all.
You should post your entire list item partial here - because i need the ancestor of the select element netweight
a possible solution could be :
add a value field to your option element like (be aware - i don't know your desired value, so i took $row->net instead)
<option id="<?php echo $row->id; ?>" value="<?=$row->net; ?>">
<?php echo $net .' - Rs. '. $retail_price?>
</option>
and of course in your js function you have to change your net Variable accordingly $(this).closest(".netweight").val() might not work - because i need the correct ancestor - so pls post your entire view here.
$('.add_cart').click(function ()
{
var product_id = $(this).data("productid");
var product_name = $(this).data("productname");
var product_price = $(this).data("price");
var net = $(this).closest(".product-right").find(".netweight").val();
var image = $(this).data("image");
var brand = $(this).data("brand");
var gst = $(this).data("gst");
var stock = $(this).data("stock");
var quantity = $('#' + product_id).val();
if (quantity != '' && quantity > 0)
{
$.ajax({
url: "<?php echo base_url(); ?>shopping_cart/add",
method: "POST",
data: {product_id: product_id, product_name: product_name, product_price: product_price, quantity: quantity, net: net, image: image, brand: brand, gst: gst, stock: stock},
success: function (data)
{
$.alert(product_name, {
title: 'Success product is added to cart',
closeTime: 6 * 1000,
autoClose: true,
});
$('#cart_details').html(data);
$('#' + product_id).val(1);
}
});
}
else
{
alert("Please Enter quantity");
}
});
Ok, if this question has already been answered, I apologize, I have searched and not found a satisfactory answer that fits my situation.
Here is the situation:
I have a custom template file for displaying the products in a category, part of that list is the ability to add products directly to the cart with a specified quantity from the category page. In order to accomplish this I wrote a function that re-writes the target line of the "Add to Cart" button, submits the request, then re-writes the button again back to it's original version (see code below). The problem I'm running into is that every time the button is clicked right now I get an error in the debug panel stating that customAddToCart is not defined. But if you look at the code for the product list template below you can see that the function is defined even before the list is generated (btw, I had it at the bottom of the page and was getting the same error).
If anyone can shed some light on why the javascript function would be undefined when it's being included on the same page as the list...I could sure use some help.
<?php
/**
* Product list template
*
* #see Mage_Catalog_Block_Product_List
*/
?>
<?php
$_productCollection=$this->getLoadedProductCollection();
$_helper = $this->helper('catalog/output');
?>
<script type="text/javascript">
function customAddToCart( product_id, url ){
var qty = document.getElementById('qty_input_'+product_id).value;
document.getElementById('addtocartbutton_'+product_id).setAttribute('onclick', "setLocation(" + url + "/qty/" + qty ")");
document.getElementById('addtocartbutton_'+product_id).click(); return false;
document.getElementById('addtocartbutton_'+product_id).setAttribute('onclick', "customAddToCart(" + product_id + ", " + url + ")");
}
</script>
<?php if(!$_productCollection->count()): ?>
<p class="note-msg"><?php echo $this->__('There are no products matching the selection.') ?></p>
<?php else: ?>
<div class="category-products">
<?php // List mode ?>
<?php if($this->getMode()!='grid'): ?>
<ol class="products-list" id="products-list">
<?php foreach ($_productCollection as $_product): ?>
<li class="item">
<?php // Product Image ?>
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(230, null); ?>" width="230" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
<?php // Product description ?>
<div class="product-shop">
<div class="f-fix">
<?php $_productNameStripped = $this->stripTags($_product->getName(), null, true); ?>
<h2 class="product-name"><?php echo $_helper->productAttribute($_product, $_product->getName() , 'name'); ?></h2>
<?php if($_product->getRatingSummary()): ?>
<?php echo $this->getReviewsSummaryHtml($_product) ?>
<?php endif; ?>
<?php echo $this->getPriceHtml($_product, true) ?>
<div class="desc std">
<?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?>
<?php echo $this->__('Learn More') ?>
</div>
<ul class="add-to-links">
<?php if ($this->helper('wishlist')->isAllow()) : ?>
<li><?php echo $this->__('Add to Wishlist') ?></li>
<?php endif; ?>
<?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
<li><span class="separator">|</span> <?php echo $this->__('Add to Compare') ?></li>
<?php endif; ?>
</ul>
<div class="add-to-cart-options">
<?php if($_product->isSaleable()): ?>
<?php if( !($_product->getTypeInstance(true)->hasRequiredOptions($_product) || $_product->isGrouped() )){ ?>
<label for="qty_input">Quantity: </label>
<input type="text" class="spinner qty-input" name="qty_input" id="qty_input_<?php echo $_product->getId(); ?>" />
<?php /*<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p> */ ?>
<button type="button" class="button" onclick="javascript:customAddToCart(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product); ?>')"><span><span><?php echo $this->__('Add to Cart'); ?></span></span></button>
<?php } else { ?>
<button type="button" class="button" id="addtocartbutton_<?php echo $_product->getId(); ?>" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart'); ?></span></span></button>
<?php } ?>
<?php else: ?>
<p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
<?php endif; ?>
</div>
</div>
</div>
</li>
<?php endforeach; ?>
</ol>
<script type="text/javascript">decorateList('products-list', 'none-recursive')</script>
<?php else: ?>
As you can see, the function is clearly defined at the top of the page, so why this button
<button type="button" class="button" onclick="javascript:customAddToCart(<?php echo $_product->getId(); ?>, '<?php echo $this->getAddToCartUrl($_product); ?>')"><span><span><?php echo $this->__('Add to Cart'); ?></span></span></button>
results in a message in the console saying that customAddToCart is not defined I'm not sure.
Is there an error about an "Unexpected string"? The concatenation in the second line of your function is missing its last plus sign.
Update
"/qty/" + qty ")"
to
"/qty/" + qty + ")"
and refresh.
I know there is some issue with get document.getElementById and IE, but not sure why IE is having a problem with .remove and all other browsers are not. Any help here would be appreciated. I am getting the error
SCRIPT438: Object doesn't support property or method 'remove'
from the error console. The Javascript works in all other browsers.
Here is the code:
<script type="text/javascript"><!--
function removeModule() {
<?php $tab = 1; ?>
var module_row = <?php echo $module_row; ?>;
if(!confirm('Are you sure?'))
{
return false;
}
var x = 1;
while (x < module_row)
{
if (document.getElementById('tab-' + x).checked)
{
document.getElementById('tab-' + x).remove();
document.getElementById('module-' + x).remove();
document.getElementById('tab-module-' + x).remove();
}
x++;
<?php $tab++; ?>
}
$('#form').submit();
}
//--></script>
This is from an opencart module, it is the tpl file. I've included part of the file here as well so hopefully someone can spot whatever the error is.
<?php echo $header; ?>
<div id="content">
<div class="breadcrumb">
<?php foreach ($breadcrumbs as $breadcrumb) { ?>
<?php echo $breadcrumb['separator']; ?><?php echo $breadcrumb['text']; ?>
<?php } ?>
</div>
<?php if ($error_warning) { ?>
<div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<div class="box">
<div class="heading">
<h1><img src="view/image/module.png" alt="" /> <?php echo $heading_title; ?></h1>
<div class="buttons">
<a onclick="$('#form').submit();" class="button"><?php echo $button_save; ?></a>
<a onclick="removeModule();" class="button"><?php echo $button_delete ?></a>
<a onclick="location = '<?php echo $cancel; ?>';" class="button"><?php echo $button_cancel; ?></a></div>
</div>
<div class="content">
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
<div class="vtabsQS">
<?php $module_row = 1; ?>
<?php foreach ($modules as $module)
{ ?>
<div style="margin-left: -7px; float:left;">
<input type="checkbox" style="float: left; margin-top: 8px;" id="tab-<?php echo $module_row; ?>" onClick="" value="#tab-<?php echo $module_row; ?>" />
<a href="#tab-module-<?php echo $module_row; ?>" id="module-<?php echo $module_row; ?>">
<?php foreach ($languages as $language)
{ ?>
<label class="inputLrgTab"><?php if (!empty($module['language_id'][$language['language_id']])) { echo $module['language_id'][$language['language_id']];} ?></label>
<?php } ?>
</a><br />
</div>
<?php $module_row++; ?>
<?php } ?>
<span id="module-add" style="clear: both; margin-left: -7px;"><?php echo $button_add_module; ?> <img src="view/image/add.png" alt="" onclick="addModule();" /></span>
</div>
<?php $module_row = 1; ?>
<?php foreach ($modules as $module) { ?>
<div id="tab-module-<?php echo $module_row; ?>" class="vtabs-content" style="margin-left:230px;">
<table class="form">
<tr>
<td><?php echo $entry_title; ?></td>
<td class="left">
<?php foreach ($languages as $language) { ?>
<img src="view/image/flags/<?php echo $language['image']; ?>" alt="<?php echo $language['name']; ?>" />
<input class="inputLrg" type="text" name="<?php echo $classname; ?>_module[<?php echo $module_row; ?>][language_id][<?php echo $language['language_id']; ?>]" value="<?php if (!empty($module['language_id'][$language['language_id']])) { echo $module['language_id'][$language['language_id']];} ?>">
<br />
<?php } ?>
<span class="error"><?php echo $error_title; ?></span>
</td>
</tr>
<tr>
<td><?php echo $entry_limit; ?></td>
You should get the parent of the element you are trying to remove and use the remove child method to find and remove the element
element.parentNode.removeChild(element);
this works in all browsers including IE.
remove() as a method on HTMLElements unfortunately is not supported by Internet Explorer.
You could use the workaround in this SO answer for a vanilla javascript solution.
However as you already seem to use jQuery, instead replace
document.getElementById('tab-' + x).remove();
with
$('#tab-' + x).remove();
You should use this
element.parentElement.removeChild(element);
Supported by all browser and also have some benefits over just a hack to
remove child element.
Here is another workaround for keep using .remove() function
Element.prototype.remove = function() {
this.parentElement.removeChild(this);
}
NodeList.prototype.remove = HTMLCollection.prototype.remove = function() {
for(var i = this.length - 1; i >= 0; i--) {
if(this[i] && this[i].parentElement) {
this[i].parentElement.removeChild(this[i]);
}
}
}
And then you can remove elements like this
document.getElementById("my-element").remove();
or
document.getElementsByClassName("my-elements").remove();
Here is Stack Overflow link for further info also source of this answer.
It appears that IE10 also throws this error..
Here one way I tried using the objects outerHTML property:
if(typeof document.getElementById('id').remove=='function'){
//If support is found
document.getElementById('id').remove()
}
else{
//If not
document.getElementById('id').outerHTML='';
}
You can polyfill the remove() method:
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('remove')) {
return;
}
Object.defineProperty(item, 'remove', {
configurable: true,
enumerable: true,
writable: true,
value: function remove() {
this.parentNode.removeChild(this);
}
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);