I have a component that is populated multiple times in the page. Inside that component I have a button that on click hides some content and shows another.
What I'm expecting: on click of each button it should execute initAnswer() function.
What I have now: Once I click on the button nothing is happening and I get no error.
P.S. I have checked other threads and tried to replicate the answers but with no success. Thank you!!! 🙏
let selectedShadeButton = document.querySelectorAll('.shade-btn');
let shadeDataSet = selectedShadeButton.dataset.sheertexShade;
for(let i = 0; i < selectedShadeButton.length; i++) {
selectedShadeButton[i].addEventListener('click', (event) => {
if(event = event.target){
initAnswer();
}
})
}
function initAnswer() {
document.querySelector('.nudes-wrapper').style.display = 'none';
document.querySelector('.nudes-thanks').style.display = 'block';
document.querySelector('.shady-answer').innerHTML = shadeDataSet;
}
<div id="nudesModal" class="modalnudes">
{% comment %} Modal content {% endcomment %}
<div class="modal-content">
<span class="close-nudespop">×</span>
<div class="inner-content">
<p class="sm:tw-text-4xl tw-leading-tight sm:tw-ml-auto pop-title tw-text-2xl">Which group should we start from?</p>
<p>The subtitle of the modal</p>
</div>
<div class="nudes-wrapper tw-flex">
<div class="shade-container">
{% include 'shade-picker.row', shade_name: 'S1' %}
{% include 'shade-picker.row', shade_name: 'S2' %}
{% include 'shade-picker.row', shade_name: 'S3' %}
{% include 'shade-picker.row', shade_name: 'S4' %}
{% include 'shade-picker.row', shade_name: 'S5' %}
{% include 'shade-picker.row', shade_name: 'S6' %}
</div>
<div class="magnified-img">
</div>
</div>
<div class="nudes-thanks tw-hidden">
{% include 'nudes-thank-you' %}
</div>
</div>
</div>
/* inside the shade-picker.row */
<div class="shade-{{shade_name}} shade-of-nude">
<label>{{ shade_name }}</label>
<div class="shade-img tw-flex">
<img class="lazyload" data-src="{{ shade_name | append: '-face1.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyload" data-src="{{ shade_name | append: '-face2.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyload" data-src="{{ shade_name | append: '-face3.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyload" data-src="{{ shade_name | append: '-face4.jpg' | asset_url }}" data-sizes="auto" alt="Picture of a face that matches shade {{shade_name | escape}}">
<noscript>
<img class="lazyloaded" data-src="{{ shade_name | append: '-face1.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyloaded" data-src="{{ shade_name | append: '-face2.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyloaded" data-src="{{ shade_name | append: '-face3.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
<img class="lazyloaded" data-src="{{ shade_name | append: '-face4.jpg' | asset_url }}" alt="Picture of a face that matches shade {{shade_name | escape}}">
</noscript>
</div>
<div>
<button class="shade-btn" data-sheertex-shade='{{shade_name}}'>Pick {{ shade_name }}!</button>
</div>
</div>
The problem is by doing this
let selectedShadeButton = document.querySelectorAll('.shade-btn');
You will receive an array of nodes in the selectedShadeButton and on that array of nodes you can not access dataset. So dataset is undefined. To solve the problem you can debug the problem by doing some debugging.
console.log(selectedShadeButton)
Will help you to understand what is happening
Related
I want to upload video in my shopify store my code has for loop
<div class="product-slider-show">
<div class="owl-carousel">
{% for image in product.images %}
<div class="swiper-product-image">
<a class="cloud-zoom-gallery sub-image" id="product-image-options-" href="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}"
rel="useZoom: 'product-cloud-zoom', smallImage: '{{ image.src | img_url: 'master' }}'" data-pos="{{ forloop.index }}">
<img {% if settings.lazyloading_enable %} class="lazyload" data-{% endif %}src="{{ image.src | img_url: 'master' }}" title="{{ featured_img_alt }}" alt="{{ featured_img_alt }}" />
</a>
</div>
{% endfor %}
</div>
</div>
When I add video html to this code, video shows up next to each pictures.
What code should I use in this for loop, so that the video can appear alone at the end?
if anyone else is having this problem. This code was my solution
{% for image in product.images %}
{% if forloop.first == true %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" class="product_variant_image">
</figure>
{% else %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
</figure>
{% endif %}
{% endfor %}
{% for media in product.media %}
{% if media.media_type == 'video' %}
{{ media | video_tag: controls: true, preload: true, image_size: "768x" }}
{% endif %}
{% endfor %}
I'm trying to pass data on the modal with the help of jquery. I was successful passing all text related data but I'm unsure how would it work for images. As we use the {% static %} tag to show the images. It wouldn't just show on the passed modal.
Loop from where the data is being taken.
<div class="animals" id="cats" >
{% for animals in cats %}
<div class="animalInfo" id="animalInfoID" data-image = "{{ animals.image.url }}" data-name="{{ animals.name }}" data-ageyears="{{ animals.age }}"
data-agemonths="{{ animals.age_months }}" data-gender="{{ animals.gender }}" data-description="{{ animals.description }}" onclick="showContainer()">
<img class="animalPic" src="{{ animals.image.url }}" alt="">
<div class="animalDesc">
<h1>{{ animals.name }}</h1>
<p>{{ animals.description }}</p>
</div>
</div>
{% endfor %}
</div>
Modal where data is passed
<div class="mainAdoptionPopContainer" id="mainAdoptionContainerId" style="display: none;">
<img src="{% static 'adoptions/imgs/close-container.png' %}" onclick="hideContainer()" class="closeContainer" id="closeContainerID" alt="Close Pop Up">
<div class="adoptionPopImageContainer">
<img id="adoptionPopImage" src=""></img>
</div>
<div class="adoptionPopAnimalInfo">
<div class="adoptionPopAnimalInfoTitle">
<span id="adoptionPopName"><b></b></span> |
<span id="adoptionPopGender"><b></b></span> |
<span><span id="adoptionPopAge"></span> Year <span class="adoptionPopAgeMonths"></span>Months</span> |
<span id="adoptionPopBreed"><b></b></span>
</div>
<span class="adoptionDescription" id="adoptionDescriptionID"></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('.animalInfo').click(function(){
$("#adoptionPopName").html($(this).data("name"));
$("#adoptionPopImage").html($(this).data("image.url"));
$("#adoptionPopGender").html($(this).data('gender'));
$("#adoptionPopBreed").html($(this).data('breed'));
$("#adoptionPopAge").html($(this).data('ageyears'));
$("#adoptionPopAgeMonths").html($(this).data('agemonths'));
$("#adoptionPopBreed").html($(this).data('breed'));
$("#adoptionDescriptionID").html($(this).data('description'));
});
});
</script>
You need to set the src of the <img>, they have no innerHTML
$("#adoptionPopImage").attr('src', $(this).data("image"));
Also the data attribute is data-image and has no "url" in it's name
i need to add video in the product gallery .For this i am going through this tutorial https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video
But when i add this code The product image is disappeared and the video is not uploaded also.
I am use this code in Product template and media below.
// Product-template
{% for media in product.media %}
{% include 'media' %}
{% endfor %}
//In midea
{% case media.media_type %}
{% when 'image' %}
<div class="thumb">
<a class="fancybox" rel="gallery1" href="{{ image.src | product_img_url: '1024x1024' }}" >
<img id="product-featured-image-{{image.id}}" class="product-featured-img" src="{{ image | img_url: 'original' }}" alt="{{ image.alt | escape }}" data-zoom-image="{{ image.src | img_url: 'original' }}"/>
</a>
</div>
{% when 'external_video' %}
<div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div class="product-single__media" data-media-id="{{ media.id }}">
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
{{ media | model_viewer_tag }}
</div>
{% else %}
<div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
{{ media | media_tag }}
</div>
{% endcase %}
Product.media and product images are different objects.
{% for media in product.media %}
{% if media.media_type == 'video' %}
{{ media | video_tag: controls: true, preload: true, image_size: "1024x" }}
{% endif %}
{% endfor %}
{% for image in product.images %}
{% if forloop.first == true %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" class="product_variant_image">
</figure>
{% else %}
<figure>
<img src="{{ image.src | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
</figure>
{% endif %}
{% endfor %}
You need a mix of the two objects or add the photos you want to show it into media.
I'm working on a thumbnail carousel using bootstrap carousel. However I need to modify the data-slide behaviour as I'm pulling in the carousel items dynamically.
So what I'm trying to do is add an ID (something like 3672764 which will be the image ID) to the data-slide-to attribute and on clicking on the thumbnail it should slide to the slide that has the same ID.
This is the code:
<div id="carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="item active srle" data-id="{{ image.id }}">
<img src="{{ featured_image | img_url: '1000x1000' }}" alt="{{ featured_image.alt | escape }}" data-product-featured-image>
<p>{{ featured_image.alt | escape }}</p>
</div>
{% for image in product.images offset:1 %}
<div class="item" data-id="{{ image.id }}">
<img src="{{ image.src | img_url: '1000x1000' }}" alt="{{ image.alt | escape }}">
<p>{{ image.alt | escape }}</p>
</div>
{% endfor %}
</div>
</div>
<div id="thumbcarousel" class="carousel slide thumbnails-carousel vertical" data-ride="false">
<div class="carousel-inner">
{% for image in product.images %}
<div class="grid__item carousel-padding">
<div data-target="#carousel" data-slide-to="{{ image.id }}" class="thumb"><img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail>
</div>
</div>
{% endfor %}
</div>
</div>
Any ideas how to do this?
Hi I am trying to work out how I can fix a jquery error that I am getting when I try and display product prices for more than 2 products. Currently I have this working with 2 products (code showing 1 product code) but whenever I replicate the following code for a third product I get an Unresponsive script error and I am not sure if this is to do with memory limits in Shopify as works for 2 products.
My Code for 1 product in page.prices.liquid
<div class="grid">
<div class="grid_full">
{% comment %}
div class="grid__item large--two-thirds push--large--one-sixth" -- old one
{% endcomment %}
<div class="grid__item">
{% for product in collections.leaflets.products %}
{% for variant in product.variants %}
{% if forloop.index <=1 %}
<div id="temp_first" style="display:none;">
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
{% elsif forloop.index <13 %}
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
{% elsif forloop.index <=13 %}
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
</div>
{% elsif forloop.index ==14 %}
<div id="temp_second" style="display:none;">
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
{% elsif forloop.index <26 %}
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
{% elsif forloop.index ==26 %}
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
</div>
{% elsif forloop.index ==27 %}
<div id="temp_third" style="display:none;">
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
{% elsif forloop.index <39 %}
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
{% elsif forloop.index ==39 %}
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
</div>
{% elsif forloop.index ==40 %}
<div id="temp_fourth" style="display:none;">
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
{% elsif forloop.index <52 %}
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
{% elsif forloop.index ==52 %}
<div class="price">{{ variant.price | money | remove: '.00'}}</div>
</div>
{% endif %}
{% endfor %}
{% endfor %}
The following is the code within my page:
<script>// <![CDATA[
$i(document).ready(function () {
$("#price_first_row").html($("#temp_first").html());
$("#price_second_row").html($("#temp_second").html());
$("#price_third_row").html($("#temp_third").html());
$("#price_fourth_row").html($("#temp_fourth").html());
// ]]></script>
<div class="grid__item large prices-two">
<div class="prices-title blue">Product Name</div>
</div>
<div id="price_first_row" class="grid__item large prices-three"></div>
<div id="price_second_row" class="grid__item large prices-four"></div>
<div id="price_third_row" class="grid__item large prices-five"></div>
<div id="price_fourth_row" class="grid__item large prices-six"></div>
</div>
The only two lines that I have changed to add another product is:
{% for product in collections.leaflets.products %}
which is edited to change leaflets to 3rd product name and then changing the div ids to price_fifth_row etc.
The jquery error I get is the following:
At times this will say jquery.min.js:2 and at times jquery.min.js:3.
I would have shared a link for the site but this is locked with a password at the moment.
If somebody could please, would appreciate it.
Thanks
The following shows the script as part of another script hence the $i as was having jquery conflicts.
<script>// <![CDATA[
$(document).ready(function () {
$("#price_first_row").html($("#temp_first").html());
$("#price_second_row").html($("#temp_second").html());
$("#price_third_row").html($("#temp_third").html());
$("#price_fourth_row").html($("#temp_fourth").html());
var carousel = $i("#owlCarousel-Prices");
carousel.owlCarousel({
items: 3,
margin:10,
navigation:true,
autoHeight : true,
autoPlay : 3000,
navigationText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
],
});
});
// ]]></script>
Here's your JavaScript code fixed:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$("#price_first_row").html($("#temp_first").html());
$("#price_second_row").html($("#temp_second").html());
$("#price_third_row").html($("#temp_third").html());
$("#price_fourth_row").html($("#temp_fourth").html());
});
//]]>
</script>
There was a i before document.ready and you didn't close the function. Does it help your unresponsive page?