Need help to display all images on a product page

New Member
5 0 0

Hello everybody, 

 

I need help on a product page, for display all images on the left column and have the descriptions on a right column.

 

In the template code, I identified a piece of code:

$(function() {
thumbnails = $('img[src*="/products/"]').not(':first');
if (thumbnails.size()) {
thumbnails.bind('click', function() {
var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
if (typeof variantImages[image] !== 'undefined') {
{% for option in product.options %}
optionValue = variantImages[image]['option-{{ forloop.index0 }}'];
if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option').filter(function() { return $(this).text() === optionValue }).length) {
$('.single-option-selector:eq({{ forloop.index0 }})').val(optionValue).trigger('change');
$(".product-variants:not('.form-upsell .product-variants')").val($(".product-variants-one").val());
$(".image-product img").attr("src",$(".product__image-wrapper:not(.hide) .zoomImg").attr('src'));
}

Do you have any idea what changes need to be made?

 

thank you in advance

0 Likes
Pathfinder
105 13 22

Could you share your product page url and your theme name?

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
0 Likes
New Member
5 0 0

My thème is Optimized, he isn't very well known.

https://frenchdeals.fr/products/dog-teethcare-toy

0 Likes
Highlighted
Pathfinder
105 13 22

Its password protected, share the password.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
0 Likes
New Member
5 0 0
Sorry « nanou »
0 Likes
Pathfinder
105 13 22

Can you provide me the design(image) of your product page ?

For more clarification.

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
0 Likes
New Member
5 0 0
{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template-optimised' %}

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}

{% endif %}



Is that what you want?
0 Likes
New Member
5 0 0

{% comment %}
The contents of the product.liquid template can be found in /sections/product-template.liquid
{% endcomment %}

{% section 'product-template-optimised' %}

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
(function($) {
var variantImages = {},
thumbnails,
variant,
variantImage,
optionValue;
{% for variant in product.variants %}
variant = {{ variant | json }};
if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
variantImage = variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
variantImages[variantImage] = variantImages[variantImage] || {};
{% for option in product.options %}
{% assign option_value = variant.options[forloop.index0] %}
{% assign option_key = 'option-' | append: forloop.index0 %}
if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
}
else {
var oldValue = variantImages[variantImage][{{ option_key | json }}];
if ( oldValue !== null && oldValue !== {{ option_value | json }} ) {
variantImages[variantImage][{{ option_key | json }}] = null;
}
}
{% endfor %}
}
{% endfor %}
$(function() {
thumbnails = $('img[src*="/products/"]').not(':first');
if (thumbnails.size()) {
thumbnails.bind('click', function() {
var image = $(this).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
if (typeof variantImages[image] !== 'undefined') {
{% for option in product.options %}
optionValue = variantImages[image]['option-{{ forloop.index0 }}'];
if (optionValue !== null && $('.single-option-selector:eq({{ forloop.index0 }}) option').filter(function() { return $(this).text() === optionValue }).length) {
$('.single-option-selector:eq({{ forloop.index0 }})').val(optionValue).trigger('change');
$(".product-variants:not('.form-upsell .product-variants')").val($(".product-variants-one").val());
$(".image-product img").attr("src",$(".product__image-wrapper:not(.hide) .zoomImg").attr('src'));
}
{% endfor %}
}
});
}
});
})(jQuery);
</script>
{% endif %}

0 Likes
Pathfinder
105 13 22
I am wants to your front product design in jpg image. Whose you want to display on the front.
For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: silencewebsolutions@gmail.com
0 Likes