I've followed this tutorial to implement a pop-up email newsletter sign-up to add to my Shopify theme which uses fancybox.js & cookie.js. Everything works fine except when you enter an email address & click 'Sign Up' even though an additional tab opens to complete the Mailchimp sign up process, on the original shop tab, the email pop-up stays open as though nothing has changed.
I wondered if there is a way I could adapt the code so that on click of 'Sign Up' the new tab opens as normal but the email pop-up fades out so when the user goes back to the shop the pop-up has disappeared. I'm not great with JS so any help would be really appreciated!
My current code:
theme.liquid -
Liquid HTML:
{% if settings.popup_newsletter_enable %}
<div id="email-popup" style="display: none;" >
{% include 'popup-newsletter-form' %}
</div>
{% endif %}
JS:
{{ 'jquery.fancybox.js' | asset_url | script_tag }}
<script type="text/javascript">
(function($) {
// set a variable for the cookie check
var check_cookie = $.cookie('popup_box');
// check whether the cookie is already set for this visitor
if( check_cookie != 'active' ){
// if the cookie does not exist do the following:
// (1) set the cookie so it's there for future visits (including an expiration time in days)
$.cookie('popup_box', 'active', {
expires: 3,
path: '/'
});
// (2) trigger the fancybox pop up, specifying that it's inline
$( '#trigger' ).fancybox({
type: 'inline',
});
setTimeout(function () {
$('#trigger').eq(0).trigger('click'); // make the click event happen on load
}, 5000);
}
})(jQuery); // this is a noconflict wrapper for WP
</script>
popup-newsletter-form.liquid (snippet include):
Liquid HTML:
<!-- Mailchimp Form Integration -->
{% if settings.newsletter_form_action != blank %}
{% assign form_action = settings.newsletter_form_action %}
{% else %}
{% assign form_action = '#' %}
{% endif %}
<form action="{{ form_action }}" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" class="input-group">
<input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="EMAIL" id="mail" class="input-group-field" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}" autocorrect="off" autocapitalize="off">
<span class="input-group-btn">
<input type="submit" class="btn" name="subscribe" id="subscribe" value="{{ 'general.newsletter_form.submit' | t }}">
</span>
</form>
$('#pro_image').click(function(){
$("#pro_image").fancybox({
closeSpeed : 250,
closeEasing : 'swing',
closeOpacity : true,
closeMethod : 'zoomOut',
});
})
;
Try this one.
Usually they put js inside header, also possible to put it any where inside tag, but they say better to place in at the bottom of code ( inside ) to let all code receive by browser and the js execute.
Related
I have a custom button in the a header next to a "cart" link. Website uses AJAX cart. When an item is added to cart, the cart link enlarges to include nr of items in cart. This causes the cart link to overflow and overlap the custom button next to it. Essentially what I'm trying to achieve is to add a margin to the custom button when an item is added to cart and the cart link is expanded. My first thought was to wrap both in a div and use CSS flex to adjust the sizing of both, however, and please correct me if I'm wrong, I thought it would be quicker to just write a script that would add a margin to my custom button. Definitely didn't turn out to be the quicker way as I've been stuck on it for hours now - any help would be greatly appreciated. I've browsed through similar posts and couldn't find a result that I want - any help would be greatly appreciated (I'm still new to JS and jQuery but learning). Below is the code and some of the things that I've tried.
HTML - header
<div class="header--menu">
<div class="custom-btn-container">
Quick Order
</div>
{%
render 'framework--x-menu',
js_class: 'XMenu',
align: menu_alignment,
overlap_parent: 1,
handle: menu
%}
</div>
{% endif %}
<div class="header--cart">
{% render 'snippet-cart', cart_icon: cart_icon %}
</div>
</div>
HTML - cart
{% if settings.cart--type == 'drawer' %}
<div
class="cart--open-right off-canvas--open"
data-off-canvas--open="right-sidebar"
data-off-canvas--view="cart"
aria-haspopup=”menu”
>
{% endif %}
<a
class="header--cart-link"
data-item="accent-text"
href="{{ routes.cart_url }}"
aria-label="{{ 'layout.header.cart' | t }}"
>
{% if cart_icon == 'text' %}
{{ 'layout.header.cart' | t }}
{% elsif cart_icon == 'bag' %}
{% render 'framework--icons', icon: 'bag' %}
{% else %}
{% render 'framework--icons', icon: 'cart' %}
{% endif %}
<span class="header--cart-number" data-item-count="{{ cart.item_count }}">
(<span class="cart--external--total-items">{{ cart.item_count }}</span>)
</span>
</a>
{% if settings.cart--type == 'drawer' %}
</div>
{% endif %}
And these are some of the scripts that I've tried:
window.onload = () => {
if (jQuery('.header--cart-number').data('item-count') != '0') {
$(".custom-button").css('margin-right', '10px');
}
}
The above is nearly what I'm after, but only works after refreshing the page.
document.ajaxComplete = () => {
if (jQuery('.header--cart-number').data('item-count') != '0') {
$(".custom-button").css('margin-right', '10px');
}
}
similar story
$(document).ajaxSuccess(function() {
if (jQuery('.header--cart-number').data('item-count') != '0') {
$(".custom-button").css('margin-right', '10px');
}
}
This didn't do anything whatsoever.
I'm sure I'm missing something small, but it's driving me mad. Again, any help will be greatly appreciated!
Best,
J
I have several posts each of them composed of three parts : a title, a username/date and a body. What I want to do is to show the body when I click on either the title or the username/date and hide it if I click on it again. What I've done so far works but not as expected because when I have two or more posts, it only shows the body of the last post even if I click on another post than the last one. So my goal is only to show the hidden text body corresponding to the post I'm clicking on. Here is my code:
{% extends 'base.html' %}
{% block header %}
<h1>{% block title %}Test page{% endblock %}</h1>
<a class="action" href="{{ url_for('main_page.create') }}">New</a>
{% endblock %}
{% block content %}
{% for post in posts %}
<article class="post">
<header>
<script language="JavaScript">
function showhide(newpost)
{var div = document.getElementById(newpost);
if (div.style.display !== "block")
{div.style.display = "block";}
else {div.style.display = "none";}}
</script>
<div onclick="showhide('newpost')">
<h1>{{ post['title'] }}</h1>
<div class="about">by {{ post['username'] }} on {{ post['created'].strftime('%d-%m-%Y') }}</div>
</div>
</header>
<div id="newpost">
<p class="body">{{ post['body'] }}</p>
</div>
</article>
{% if not loop.last %}
<hr>
{% endif %}
{% endfor %}
{% endblock %}
Of course I looked for a solution as much as I could but I'm kind of stuck plus I'm a complete beginner in HTML/JS/CSS. And one last thing, I'm currently using Python's framework Flask. Thank you by advance.
You need to give each of your posts a unique id for your approach to work.
Change your code to
<div id="{{post_id}}">
<p class="body">{{ post['body'] }}</p
</div>
where post_id is that post's unique id e.g. its id in the database you are using that you pass to the template in your view. Then, change the call to the onclick event handler to
<div onclick="showhide('{{post_id}}')">
If you don't have a unique id you can also use the for loop's index: replace all post_id instances above with loop.index. See Jinja's for loop docs for more information.
I have this code that has the phone number of different posters.
{% for ad in ads %}
...
<a class="btn" onclick="showNumber()" id="showNumber"><span class="fa fa-phone"></span> View Phone Number</a>
<input id="phonenum" style="display: none;" type="text" value="{{ ad.user.phone }}">
...
{% endfor %}
and the Javascript function
<script type="text/javascript">
function showNumber() {
document.getElementById('showNumber').innerHTML = document.getElementById('phonenum').value;
}
</script>
the above works and the input field shows correctly the different numbers of the posters when i change it to block. But the problem is that the phone number of the first button on the first button shows regardless of which button i click. what else should i do there?
IDs are meant to be unique, you're creating elements in a loop and giving them the same ID (phonenum), instead of IDs you should use class names and retrieve the appropriate element base on which anchor was clicked. Here is an example:
{% for ad in ads %}
...
<a class="btn" onclick="showNumber(e)"><span class="fa fa-phone"></span> View Phone Number</a>
<input class="phonenum" style="display: none;" type="text" value="{{ ad.user.phone }}">
...
{% endfor %}
<script type="text/javascript">
function showNumber(e) {
e.target.innerHTML = e.target.parent.querySelector('.phonenum').value;
}
</script>
In this example, e.target is the clicked anchor and I'm using e.target.parent.querySelector('.phonenum') to retrieve the input associated with the anchor (I'm assuming they have the same parent element).
I've been trying all day long to include this liquid code inside javascript with no luck so far..
I'm simply trying to update a div with the cart data to show the image and name, this is what I've got.
$('.openCart').click(function(e)
{
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: data,
dataType: 'json',
success: function()
{
{% capture content %}{% include 'addItemToCartDetails' %}{% endcapture %}
var content = {{ content | json }};
$("._second").html(content);
}
});
});
Overall the following code doesn't work(simply because of the for loop, and I have no clue how to get around this..): If I remove the for loop then the code retrieves the divs and everything, besides the item data since the loop isn't working.
This is the addItemToCartDetails.liquid,
{% for item in cart.items %}
<div class="_second_1">
<a href="{{ item.url | widivin: collections.all }}" class="cart-image">
<img width="320" src="{{ item | img_url: '700x700' }}" alt="{{ item.title | escape }}">
</a>
</div>
<div class="_second_2"><h3>Product Name</h3>{{ item.product.title }}</div>
<div class="_second_3"><h3>Remove Product</h3><span class="clearCart">Remove</span></div>
<div class="_second_4"><h3>Quantity</h3><input class="quantity" type="input" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" data-id="{{ item.id }}" title="If you'd like another subscription please checkout separately" alt="If you'd like another subscription please checkout separately" disabled></div>
<div class="_second_5">
<h3>Total Price</h3>
<div class="totalDetails">Total: {{ item.line_price | plus: 0 | money }} / month</div>
</div>
<div class="_third">
<input type="submit" name="checkout" value="PROCEED TO CHECKOUT">
</div>
{% endfor %}
You are trying to use Liquid when you should be using Javascript
All of the Liquid processing happens on the backend to construct an HTML file that gets passed to the browser. Once the HTML page has been passed to the user's browser, Javascript can be used to manipulate the document and make this appear/disappear/change.
Practically, this means that your {% for item in cart.items %} in addItemToCartDetails.liquid will be rendered once, before page load, and never again afterwards. No matter how many items are added to the cart, the results of that snippet will only ever be current as of page load.
You should be using the Javascript variables instead
Shopify passes the line item object representing the most recently-added product to your success callback function. Your code should look something like this:
$('.openCart').click(function(e)
{
$.ajax({
type: 'POST',
url: '/cart/add.js',
data: data,
dataType: 'json',
success: function(line_item)
{
var content = '<h3>You added a ' + line_item.title + '!</h3>' +
'<p> We appreciate that you want to give us ' + Shopify.formatMoney(line_item.line_price, {{ shop.money_format }}) + '!</p>' +
'<p>That is very nice of you! Cheers!</p>';
// Note: Not every theme has a Shopify.formatMoney function. If you are inside an asset file, you won't have access to {{ shop.money_format }} - you'll have to save that to a global javascript variable in your theme.liquid and then reference that javascript variable in its place instead.
$("._second").html(content);
}
});
});
If you're curious about what all you can access in the response object, add a console.log(line_item) to the beginning of your success function to print the object to your browser's console. (In most browsers you can right-click any element on the page and select 'Inspect Element' to bring up your developer tools. There should be a tab called 'Console' where the logs get printed to, and once your information is there you should be able to click on the object to expand its contents.)
In your first snippet, pass cart.items as the variable items to the template:
{% include 'addItemToCartDetails', items: cart.items %}
In the file addItemToCartDetails.liquid template, modify the for loop statement accordingly:
{% for item in items %}
In your case, you can put this {% capture content %}{% include 'addItemToCartDetails' %}{% endcapture %} in your liquid code somewhere in your HTML probably hidden and append it to the element where you want it to appear like so.
success: function()
{
var content = $("#addItemToCartDetails-wrapper").html();
$("._second").html(content);
}
Something like that. Hope that helps!
I have a problem with my Symfony2 Website. I have a search function which work fine in production but not in wamp.
My twig file :
{% extends "::base.html.twig" %}
{% block title %}Membres en attente de validation{% endblock %}
{% block body %}
{% if confirmation != null %}<div id="confirmationValidation">Nouveau tutoré accepté : {{ confirmation }}</div>{% endif %}
<form id="form_recherche_validation" action="{{ path('paces_user_validation_recherche') }}" method="post">
{{ form_widget(form) }}
<input type="submit" value="Rechercher" />
</form>
<!-- Loading -->
<div class="center-align">
<div class="preloader-wrapper small active loading_validation">
</div>
</div>
<div id="resultats_recherche_validation">
{% include 'PACESUserBundle:Validation:liste.html.twig' with {'tutores' : tutores} %}
</div>
{% endblock %}
Problem is that search is working thanks to a script :
$(".loading_validation").hide();
$("#resultats_recherche_validation").hide();
$("#form_recherche_validation").submit(function() {
$(".loading_validation").show();
$("#resultats_recherche_validation").show();
var numero = $("#paces_user_validationRechercheForm_numero").val();
var nom = $("#paces_user_validationRechercheForm_nom").val();
var prenom = $("#paces_user_validationRechercheForm_prenom").val();
var DATA = {numero: numero, nom: nom, prenom: prenom};
var request = $.ajax({
type: "POST",
url: "{{ path('paces_user_validation_recherche')}}",
data: DATA,
success: function(data) {
$('#resultats_recherche_validation').html(data);
$(".loading_validation").hide();
}
});
return false;
});
This script is normally loaded in the page's twig file. In wamp, all scripts doesn't work except those I put in my base.html.twig. So I created a custom.js file which loads the scripts for the whole website.
According to Chrome developer tools, it should be a route problem :
No route found for "POST /validation/%7B%7B%20path('paces_user_validation_recherche')%7D%7D" (from "http://localhost/trunk/web/validation/")
I searched for a whole day but I don't find an answer.
Do you have an idea ?