I can only get elevateZoom to work with one image.
So when I click on a thumbnail that updates the image to the selected one the zoom no longer works.
Code:
<div class="product-single__photo--flex-wrapper">
<div class="product-single__photo--flex">
{% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
<div id="{{ wrapper_id }}" class="product-single__photo--container product-single__photo--container-thumb">
<div class="product-single__photo-wrapper" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;">
{% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img id="zoom_03" class="product-single__photo lazyload {{ img_id_class }}"
src="{{ featured_image | img_url: '300x300' }}"
data-zoom-image="{{ featured_image | img_url: '1080x1080' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 590, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
{% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
data-image-id="{{ featured_image.id }}"
alt="{{ featured_image.alt | escape }}"
data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}">
<noscript>
<img id="zoom_03" class="product-single__photo"
src="{{ featured_image | img_url: 'master' }}"
data-zoom-image="{{ featured_image | img_url: '1080x1080' }}"
{% if section.settings.zoom_enable %}data-mfp-src="{{ featured_image | img_url: '1024x1024' }}"{% endif %}
alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}" data-zoom="{{ featured_image | img_url: '1024x1024', scale: 2 }}">
</noscript>
<script>
$('#zoom_03').ezPlus({
zoomType: 'inner',
cursor: 'crosshair'
});
</script>
</div>
</div>
</div
This is being used on Shopify. One image works, multiple don't.
Any suggestions on how I can get this to work?
Example here - https://allsops.myshopify.com/products/zoom-test
you need to update main image attribute also with thumbnail image attributes
As per Drip's comment above.
The way to fix this was to change it from id to class.
I was following the guide on the elevateZoom-Plus website, which wasn't correct for my situation.
Related
I try to validate my Website for HTML and the following error came through:
Element div not allowed as child of element a in this context: Does someone find the error here?
{%- liquid
assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
assign height = image.height | times: 1.0 | default: 1.0
assign width = image.width | times: 1.0 | default: 1.0
assign padding_top = height | divided_by: width | times: 100 | append: "%"
if id == blank
assign id = image.id
endif
-%}
<div class="image js-enabled {% unless disable_style %}image--{{ id }} {% endunless %}{{ wrapper_class }}">
<img
class="image__img lazyload{% if preload %} lazypreload{% endif %} {{ image_class }}"
src="{{ image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
>
</div>
{%- unless disable_style -%}
<style>
.image--{{ id }} {
padding-top: {{ padding_top }};
}
</style>
{%- endunless -%}
<noscript>
<div class="image image--{{ id }} {{ wrapper_class }}">
<img class="image__img" src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
</div>
</noscript>
I am working on a Shopify website, what I have done is, show all the variants of a product as the individual product on the collection page, but what I want help with is, when someone click on the variant image on the collection page, it should open the same variant in the product page
<div class="col-6 col-md-4 custom-variant" data-tag="{{test}}">
<div class="hover-grid-wrapper">
<a href="{{product.url}}">
{%if variant.image.src != blank %}
<img src="{{ variant.image.src | img_url: 'master' }}" alt="" class="img-responsive" />
{% else %}
<div class="product-image pr oh lazyload" data-include="{{pr_url}}/?view=img{{sett_equal}}"><div class="nt_bg_lz nt_fk_lz"{% unless sett_equal %} style="padding-top:{{ 1 | divided_by: images_0.aspect_ratio | times: 100}}%;"{% endunless %}></div></div>
<img src="{{ product.featured_image.src | crop:center | img_url: 'master' }}" class="featured-image" alt="{{ product.featured_image.alt | escape }}">
{% endif %}
{% assign vTitle = variant.title | split: ' / ' %}
{% assign title = words[0] | capitalize %}
<span class="color-text color-{{color | handle }} {{variant.id}}">{{title}}</span>
</a>
{%- if variant.inventory_quantity <= 0 and variant.inventory_management == 'shopify' -%}{%- assign txt = 'products.product.pre_orders' | t -%}{%- else -%}{%- assign txt = 'products.product.add_to_cart' | t -%}{%- endif -%}
<span>+ Quick Add</span>
</div>
</div>
This is my code
Easy :)
You should use variant deep link
On the link of the product, you should add ?variant=[variant-id]
On your code replace:
<a href="{{product.url}}">
by
<a href="{{ product.url }}?variant={{ variant.id }}">
I'm trying to validate an image URL if it exists in javascript. So I add this code in javascript which accepts a URL and returns the http status code.
function imageExists(image_url){
var http = new XMLHttpRequest();
http.open('HEAD', image_url, false);
http.send();
return http.status != 404;
}
And in the liquid template, I want to check the image URL if it exists before displaying kinda like this
<div class="variant-cat-attributes">
{% assign tags = product.metafields.product_meta.tag | split: "," %}
{% for tag in tags %}
<div class="item">
{% capture tag_slug %}{{ tag | replace: " ", "_"}}{% endcapture %}
{% assign img_png = 'tag' | append: '-' | append: tag_slug | append: '.png'%}
{% capture png_exists %}<script>imageExists({{ img_png }})</script>{% endcapture %}
{% if png_exists%}
<img src="{{ img_png | file_img_url: '32x32' }}" />
{% else %}
{% assign img_jpg = 'tag' | append: '-' | append: tag_slug | append: '.jpg'%}
{% capture jpg_exists %}<script>imageExists({{ img_jpg }})</script>{% endcapture %}
{% if jpg_exists%}
<img src="{{ img_png | file_img_url: '32x32' }}" />
{% else %}
{% assign img_default = 'tag' | append: '-' | append: 'default' | append: '.png'%}
<img src="{{ img_default | file_img_url: '32x32' }}" />
{% endif %}
{% endif %}
<p class="item-name">{{ tag | capitalize }}</p></div>
{% endfor %}
</div>
I'm just starting to understand liquid so I don't know if its correct this way. But what happens with this code is the script tag is taken up as a string and the code in it is not run
png_exists = imageExists({{ img_png }})
How do I solve this?
You are mix matching JS with Liquid, which is OK if you only pass liquid content.
At the moment liquid see your code like so:
{% capture png_exists %}<script>imageExists({{ img_png }})</script>{% endcapture %}
png_exists => <script>imageExists(http://asset_img_url.jpg)</script>
You can't execute Javascript code and expect liquid to know about it, Javascript is executed AFTER liquid, so liquid finish it's logic and Javascript will run it's code afterwards.
So you you can't use javascript functionality in liquid.
We're attempting to implement (https://github.com/aFarkas/lazysizes/tree/master) on https://berkshireblanket.com.
But after following all directions, the implementation will not work. When I run a check using DevTools, it outputs as false:
typeof($("img").lazyload) === "function"
I'm at a loss, and I'm not sure if we're missing something either within the script or within the HTML.
Here's a look at our HTML to show how it's currently being implemented:
<div class="product-main-images {% if section.settings.thumbnails == 'bottom' %}desktop-12{% else %}desktop-10{% endif %} tablet-6 mobile-3" tabindex="0">
<div class="product-image-container" style="padding-bottom: {{ product_image_box_ratio_max }};" >
{% for image in product.images %}
{% assign image_box_ratio = image.height | append: ".0" | times: 1 | divided_by: image.width | times: 100 | append: "%" %}
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<div class="product-main-image {% if forloop.first %}selected{% endif %}" data-image-id="{{ image.id }}">
<a class="product-fancybox" rel="product-images" href="{{ image | img_url: '2400x' }}" tabindex="-1">
<img id="{{ product.id }}" class="product__image lazyload"
src="{{ image | product_img_url: '300x' }}"
data-src="{{ img_url }}"
data-sizes="auto"
data-zoom-src="{{ image | img_url: '2400x' }}"
alt="{{ image.alt | escape }}">
</a>
<noscript>
<img id="{{ product.id }}" class="product-main-image lazyload" src="{{ featured_image | product_img_url: '800x' }}" alt='{{ image.alt | escape }}'/>
</noscript>
</div>
{% endfor %}
</div>
</div>
I'd appreciate any help!
Please let me know if I can clarify anything, or provide further examples of our current implementation.
Thanks!
You might need to change src to data-src:
<img id="{{ product.id }}" class="product-main-image lazyload" data-src="{{ featured_image | product_img_url: '800x' }}" alt='{{ image.alt | escape }}'/>
install lazysizes, then add class "lazyload" to all images and iframes and in the img tag make sure to change "src" to "data-src"
I am trying to figure out a way to automatically rename the size variants "Small" "Medium" "large" "x-large" "xx-large" "xxx-large", to "S" "M" "L" "XL "XXL" .. etc.
The reason why I want to rename the size variants is because of the amount of extra space that is being taken up.
I am creating products from an app that doesn't let me change the name of the size variants prior to creating the products in shopify. It wouldn't make sense to manually go and change each product's variant titles because it's not time efficient.
I'm thinking the best way to do this is by using Javascript, but I don't know exactly how to go about doing this so it doesn't break anything.
Here is an example of the HTML source code of the Medium size variant.
<div data-value="Medium" class="swatch-element medium-swatch available"> <label for="swatch-1-medium-286472667159">
Medium <span class="crossed-out"></span></label></div>
Liquid Source for the swatches.
<div class="swatch clearfix" data-option-index="{{ option_index }}">
<div class="option_title">{{ swatch }}</div>
{% assign values = '' %}
{% for variant in product.variants %}
{% assign value = variant.options[option_index] %}
{% unless values contains value %}
{% assign values = values | join: ',' %}
{% assign values = values | append: ',' | append: value %}
{% assign values = values | split: ',' %}
<input id="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" type="radio" name="option-{{ option_index }}" value="{{ value | escape }}"{% if forloop.first %} checked{% endif %} />
<div data-value="{{ value | escape }}" class="swatch-element {% if is_color %}color {% endif %}{{ value | handle }}-swatch {% if variant.available %}available{% else %}soldout{% endif %}">
{% if is_color %}
<div class="tooltip">{{ value }}</div>
{% endif %}
{% if is_color %}
<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}" style="background-image: url({{ value | handle | append: '.' | append: file_extension | asset_img_url: '50x' }}); background-color: {{ value | split: ' ' | last | handle }};">
<span class="crossed-out"></span>
</label>
{% else %}
<label for="swatch-{{ option_index }}-{{ value | handle }}-{{ product.id }}">
{{ value }}
<span class="crossed-out"></span>
</label>
{% endif %}
</div>
{% endunless %}
{% endfor %}
</div>
As the workaround, I can suggest you this way:
Export products from Shopify in plain CSV
Open CSV file in excel
Rename all size variants in excel with "find and replace"
Import again into Shopify (make sure, you selected Overwrite existing products that have the same handle)