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>
Related
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 }}">
Anyone can help me why my featured photo wont change when I select variant on collection page??
https://strokes-test.myshopify.com/collections/frontpage
Javascript
initColorSwatchGrid: function() {
jQuery('.item-swatch li label').click(function(){
var newImage = jQuery(this).parent().find('.hidden img').attr('src');
jQuery(this).parents('.item-row').find('.featured-image').attr({ src: newImage });
return false;
});
}
HTML
<ul class="item-swatch color_swatch_Value">
{% for option in product.options %}
{% if option == 'Shades' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}
{{ variant.options[index] }}
{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<li>
<label style="{% if text == 'white' %}border: 1px solid #cbcbcb; {% endif %}background-color: {{ color | split: ' ' | last | handle }}; background-image: url({{ text | append: '.png' | file_url }});"></label>
{% if variant.image != null %}
<div class="hidden">
<img src="{{ variant.image.src | product_img_url: 'grande' }}" alt="{{ text }}"/>
</div>
{% endif %}
</li>
{% capture tempList %}
{{ colorlist | append: color | append: ' ' }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
Note I' also using jquery v1.8.1
You need to update the JS code to work properly, use it
initColorSwatchGrid: function() {
jQuery('.item-swatch li label').click(function () {
var newImage = jQuery(this).next().find('img').attr('src');
jQuery(this).parents('.product-detail').prev().find('.featured-image').attr({ src: newImage });
return false;
});
}
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 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.
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)