Large Gap Under Main Product Photo

[afiumano]

When viewing a product page on mobile there is a large blank space under the photo. Sometimes that 'gap' goes away but it takes a split second after page load. Any fix for this? It looks like I am using version 10.06.

See attached screenshot from the Shadows demo framework.

[Nick]

It looks like this is a bug in the Shadows framework. The gap will disappear when the browser is resized but on load the gap does not get updated.

We have added it as a bug and will update the issue in a future release.

In the meantime the workaround would be to modify the PROD page Image Machine Head Template

If you add,

imageSizing();

directly after this line,

(document => {

https://github.com/mivaecommerce/sha...-head.mvt#L255

Then the function will run on page load and the gap will be updated.

Let me know if that does not work.

[afiumano]

That isn't the code I have in my Attribute Machine > Head Template:

AttributeMachine.prototype.Generate_Discount = function (discount) {
let discount_div;

discount_div = document.createElement('div');
discount_div.innerHTML = discount.descrip + ': ' + discount.formatted_discount;

return discount_div;
};

AttributeMachine.prototype.Generate_Swatch = function (product_code, attribute, option) {
let swatch_container = document.querySelector('#&mvt:attributemachine:swa tch_element_id;');
let swatch = document.createElement('li');
let swatchButton = document.createElement('button');
let img = document.createElement('img');

img.src = option.image;
img.setAttribute('alt', option.prompt);
img.setAttribute('loading', 'lazy');
swatchButton.setAttribute('type', 'button');
swatchButton.setAttribute('aria-label', option.prompt);
swatchButton.appendChild(img);
swatch.classList.add('o-list-inline__item');
swatch.setAttribute('data-code', option.code);
swatch.setAttribute('data-color', option.prompt);
swatch.appendChild(swatchButton);

setTimeout(function () {
if (swatch_container) {
let swatch_element = swatch_container.querySelector('ul');
let swatch_select = document.querySelector('[data-hook="attribute-swatch-select"]');
let swatch_selected = swatch_select.options[swatch_select.selectedIndex].text;
let swatch_name_element = document.querySelector('[data-hook="attribute-swatch-name"]');
let swatchElements = swatch_element.querySelectorAll('li');

swatch_element.removeAttribute('style');
swatch_element.classList.add('o-list-inline');
/**
* Adds the selected swatch name to the label.
*/
swatch_name_element.textContent = swatch_selected;

/**
* Adds an active class to the selected swatch.
*/
swatchElements.forEach(function (swatchElement) {
let swatchColor = swatchElement.getAttribute('data-code');
let swatchImage = swatchElement.querySelector('button');

if (swatchColor === swatch_select.options[swatch_select.selectedIndex].value) {
swatchImage.classList.add('x-product-layout-purchase__swatches--active');
}
});
}
}, 0);

return swatch;
};

AttributeMachine.prototype.Swatch_Click = function(input, attribute, option) {
let swatch_name_element = document.querySelector('[data-hook="attribute-swatch-name"]');
let i;
let swatchElements = input.machine.swatches.childNodes[0].childNodes;

for (i = 0; i < input.select.options.length; i++) {
if (input.select.options[i].value === option.code) {
input.select.selectedIndex = i;
}
}

this.Attribute_Changed(input);
swatch_name_element.innerHTML = option.prompt;

/**
* Adds focus back to the selected swatch.
*/
swatchElements.forEach(function (swatchElement) {
let swatchColor = swatchElement.getAttribute('data-code');
let swatchImage = swatchElement.querySelector('button');

if (swatchColor === input.select.options[input.select.selectedIndex].value) {
swatchImage.focus();
}
});
};


MivaEvents.SubscribeToEvent('variant_changed', function (data) {
AJAX_Call_Module(Update_Volume_Pricing, 'runtime', 'discount_volume', 'Runtime_VolumePricing_Load_Product_Variant', 'Product_Code=' + encodeURIComponent(data.product_code) + '&' + 'Variant_ID=' + encodeURIComponent(data.variant_id));
});

const Update_Volume_Pricing = function (priceData) {
const volumePricingContainer = document.querySelector('[data-volume-pricing]');

if (priceData.success === 1 && priceData.data.length > 0) {
volumePricingContainer.innerHTML = [
'<table class="o-table o-table--fixed c-table-simple">',
'<thead>',
'<tr class="c-table-simple__row">',
'<th class="c-table-simple__cell">Quantity</th>',
'<th class="c-table-simple__cell">Price</th>',
'</tr>',
'</thead>',
'<tbody data-pricing-grid>',
'</tbody>',
'</table>'
].join('');

let tableBody = volumePricingContainer.querySelector('[data-pricing-grid]');

priceData.data.forEach(function (entry) {
const pricingRow = document.createElement('tr');
const quantityCell = document.createElement('td');
const priceCell = document.createElement('td');

pricingRow.classList.add('c-table-simple__row');
quantityCell.classList.add('c-table-simple__cell');
priceCell.classList.add('c-table-simple__cell');

if (entry.low === entry.high) {
quantityCell.innerText = entry.low;
}
else if (entry.high) {
quantityCell.innerText = entry.low + ' - ' + entry.high;
}
else {
quantityCell.innerText = entry.low + '+';
}
priceCell.innerText = entry.formatted_price;
pricingRow.append(quantityCell, priceCell);
tableBody.append(pricingRow);
});
}
else {
volumePricingContainer.innerHTML = '';
}
};

[afiumano]

Why is my Attribute Machine > Head Template code different? I installed the Shadows framework directly from admin.

[Nick]

Why is my Attribute Machine > Head Template code different? I installed the Shadows framework directly from admin.

My apologies as I wrote it down incorrectly but inserted the correct link. The template is the Product Display Layout Image Machine Head Template.

[afiumano]

Nick Please see the code I posted above. That is the code I have in my Image Machine Head Template not what is in your link so why is my code different? I installed the Shadows framework directly from admin.

[afiumano]

Nick Nevermind - I see what you were saying now - sorry. I implemented your fix and it is working as expected. Thank you.