Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
I've run into a situation where the Product page data is not updating when selecting variants from drop-down lists. The Price & the SKU for the variant selected doesn't change on the product page, however if the product is added to the cart the correct variant values are applied. Seeking assistance to determine how to fix this. As far as I can tell, none of the edits by Able to fix our Product Options Grid should be affecting this. Thanks for suggestions. -Jeff VariantDropDownDataNotUpdating.JPG (56kb) downloaded 2 time(s).
|
|
|
|
Rank: Advanced Member
Groups: Admin, Administrators, Developers, Registered, HelpDesk, Authorized User Joined: 7/31/2019(UTC) Posts: 77
Was thanked: 8 time(s) in 8 post(s)
|
Hi,
Please look into your browser web console for any errors and post the details here.
For example, to open browser web console for Firefox use the following keys:
Ctrl + Shift + K
Thanks. |
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
Hi Naveed,
Yes, as follows from Chrome:
Uncaught ReferenceError: _DefaultImageUrl is not defined at OptionSelectionChanged (app?v=Vc0MKBWhNx7Ciq0oSWaTiyQqfLNYvr3N2widPd-SHow1:1) at HTMLSelectElement.onchange (CrystaLac-Brite-Tone-Instrument-Finish:330) OptionSelectionChanged @ app?v=Vc0MKBWhNx7Ciq0oSWaTiyQqfLNYvr3N2widPd-SHow1:1 onchange @ CrystaLac-Brite-Tone-Instrument-Finish:330
It appears related to images. This is a migration from 7.0.3 but we don't have swatch images specified for these variants. In one of our products where we click on swatches to choose the variant, that page works.
-Jeff
|
|
|
|
Rank: Advanced Member
Groups: Admin, Administrators, Developers, Registered, HelpDesk, Authorized User Joined: 7/31/2019(UTC) Posts: 77
Was thanked: 8 time(s) in 8 post(s)
|
Yes, it seems you got the issue.
Please fix the missing swatch images and I think it should work. |
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
But we have hundreds of variants where we've never had any swatch images specified. We don't use the toggle shown: Should the system be ignoring the empty image URL if this toggle is not on? Perhaps a bug to be logged? -Jeff VariantThumbnailSelector.JPG (42kb) downloaded 0 time(s).
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
Hi Naveed, Found this section in app.js that refers to the condition where the swatch is absent (line 13). Is this not properly handling the condition? A bug fix would be the preferred solution instead of populating hundreds of variant image URLS as a workaround. -Jeff Code:// option choices image swap function
function OptionSelectionChanged(dropDownId) {
var optDropDown = document.getElementById(dropDownId);
if (optDropDown != undefined) {
var opt_index = optDropDown.selectedIndex;
var optid = optDropDown.options[opt_index].value;
var images = eval(dropDownId + '_Images');
var pImage = document.getElementById('miImage');
// determine the resized and large image url's and update
if (pImage != undefined) {
if ((images != undefined) && (images[optid] != undefined)) pImage.src = images[optid];
// image will be force updated to the default image when swatch image is absent
else if (_DefaultImageUrl != undefined) pImage.src = _DefaultImageUrl;
// update the large image url used by fancybox, so it show correct image for selected option choice
var pathRegexp = /.*GetImage\.ashx\?Path=(~|%7e)(.*?)&.*/im;
match = pathRegexp.exec(pImage.src);
if (match != null) {
var pImageUrl = document.getElementById('ProductImageUrl');
if (pImageUrl != undefined) {
pImageUrl.href = match[2];
}
}
}
}
return true;
}
|
|
|
|
Rank: Advanced Member
Groups: Admin, Administrators, Developers, Registered, HelpDesk, Authorized User Joined: 7/31/2019(UTC) Posts: 77
Was thanked: 8 time(s) in 8 post(s)
|
Hi,
Yes, you are right, if you have unchecked the "Show Thumbnail Images" option then it should not check the images.
In this case there is some other issue. The swatch images is an optional feature and it is tested and working good at my end.
Do you have product images defined?
Please give me the product page URL if its online available, and I can check for the issue.
Thanks. |
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
|
|
|
|
Rank: Administration
Groups: Admin, Administrators, HelpDesk, System, Authorized User, Developers, Registered Joined: 10/5/2018(UTC) Posts: 175
Thanks: 8 times Was thanked: 17 time(s) in 15 post(s)
|
Hi, Thanks for providing the details. Here is how you can have it fixed for all your products. - Go to HTML Snippets and add a new snippet call it Default Image Fix. - In the HTML section of edit screen, go the second last icon on toolbar with HTML angle brackets to switch source view. - Clear any HTML in source view and then copy paste following HTML into it. Code:
<script>
var _DefaultImageUrl;
</script>
- Again click the icon to switch off source view. - use the Save button in sticky footer. - Now go to Website > Design > Page Templates and open default page template for Products. Out of the box its Product pages. - Edit the template, go to Design tab and choose to edit content. - In the Left Toolbar choose the HTML snippets sub tab with a Notepad Icon. - You will see Default Image Fix in available snippets. Drag it and place it under the Header in page sections rendered on right side. - Once snippet is docked under the Header, choose Save And Close from the sticky footer. It will save changes and make the content read only again. - In content you will be able to see your snippet entry under header. That's it you are all done. - Open the pages having issue and try the variant selections. The prices should update as expected, console shouldn't be complaining about defaulting image now.
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
Thanks Mazhar. The solution fixes the variant updates on Product Pages, however the issue remains when using the Quick View for a product. There is also a new problem created where the image path for a product gets malformed after making variant selections. https://acv9.woodessence...es%2fgf-enduro-var_c.jpgIs there a deeper issue with this bug that we should try to address? -Jeff VariantImageRepair01.JPG (32kb) downloaded 3 time(s).
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
|
|
|
|
Rank: Administration
Groups: Admin, Administrators, HelpDesk, System, Authorized User, Developers, Registered Joined: 10/5/2018(UTC) Posts: 175
Thanks: 8 times Was thanked: 17 time(s) in 15 post(s)
|
I am able to reproduce the issue. Please try this fix, edit your /scripts/app.js file and locate following line of code. Code:
pImageUrl.href = match[2];
and update it like this Code:
pImageUrl.href = decodeURIComponent(match[2]);
This should fix the issue with main image click after you switch the option selections. In order to fix the Quick View, simple add following code at the top of app.js. Make it the very first line in file. Save the app.js and finally remove the HTML snippet you added to products page template. The fix for Quick View also works for the product page and you no longer need the HTML snippet. I am going to report these issues.
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
Thanks Mazhar!
That appears to be working on both issues.
I'll continue testing and report back to confirm.
-Jeff
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
Hi...we're working with our upgraded 9.0.3 and have found a continuing problem in this area. The images that are being specified in multi-option variants are not being updated on the product page or on the product Quick View page. I have quickly re-created the problem on a new AC9.0.3 "Demo Store" installation. Please view the Spiky Ball product for an example. http://demo.ablecommerce.../Toys/Spiky-massage-ballThere should be 8 variants, each with a different image. When selecting color & size, the part number updates but the image does not. If the item is placed in the shopping cart, the variant image is visible there and will also be visible if you view the cart and click the product. But as soon as you try to make any new selections, only the product image will display. Thanks for taking a further look at this problem. -Jeff
|
|
|
|
Rank: Advanced Member
Groups: Admin, Developers, Registered, HelpDesk, Authorized User Joined: 10/5/2018(UTC) Posts: 704
Thanks: 5 times Was thanked: 113 time(s) in 112 post(s)
|
Variants images will be displayed when you are using the Product Options Grid. I am not sure if this is supported for BuyProductDialog when changing the variant options though we do support this feature for choices images.
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
This is certainly a broken function.
It doesn't work correctly when using the standard installation using out of the box "Buy Product Dialog" widget in the "Product Detail In Tabs" Inner Template.
When you add the selected variant to the shopping cart, the cart displays the variant image. When you proceed to Checkout, the checkout confirmation shows the variant image.
If you're browsing your cart where one of the variant images is properly showing and click on the product description, it will show the variant image in the Product Page. But as soon as you click any drop-down, the image reverts back to the product default image.
You're suggesting that if you toggle your choices in the buy product page, we can see an updated part number but don't support showing the matching image? Like every other cart on the market would?
This is a bug!
Let's please get this looked at for a fix.
-Jeff
|
|
|
|
Rank: Advanced Member
Groups: Admin, Developers, Registered, HelpDesk, Authorized User Joined: 10/5/2018(UTC) Posts: 704
Thanks: 5 times Was thanked: 113 time(s) in 112 post(s)
|
Hi Jeff,
Thanks for the details. I am registering this issue to look into this in detail.
|
|
|
|
Rank: Advanced Member
Groups: Authorized User, Developers, Registered, HelpDesk Joined: 1/7/2019(UTC) Posts: 112
Thanks: 1 times Was thanked: 2 time(s) in 2 post(s)
|
Thank you. Getting a quick fix on this would be very much appreciated because for all the images (1000+) we have uploaded in to respective variants, currently they will only show up in the cart & checkout as thumbnails or icons. We never see the primary image for any variants on the Product page or in Quick View.
-Jeff
|
|
|
|
Forum Jump
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.
Important Information:
The AbleCommerce Forums uses cookies. By continuing to browse this site, you are agreeing to our use of cookies.
More Details
Close