logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error
Buy Product Options Grid Problem - Buy Product Options Grid is not functioning
Options
Go to last post Go to first unread
Previous Topic Next Topic
jeffr_ca  
#1 Posted : Saturday, April 11, 2020 2:12:02 PM(UTC)
jeffr_ca

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)
Hello,

I have placed the "Buy Product Options Grid" onto a product page. It appears fine, but none of the controls are working.

The +/- quantity spinners do not increment the quantity field. The Add to Cart and Add to Wishlist have no effect.



Thanks,

-Jeff

Edited by user Saturday, May 9, 2020 9:31:44 PM(UTC)  | Reason: Not specified
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
jeffr_ca  
#2 Posted : Tuesday, April 14, 2020 11:17:59 AM(UTC)
jeffr_ca

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)
Nudge....

Is there a chance of a quick fix on this? It is a siginficant key for our live deployment of AC9.

The controls had worked on a prior version of AC9, but broke in the re-work of the tables for 9.0.2

Thanks,

-Jeff
Back to top
Naveed Ashraf  
#3 Posted : Wednesday, April 15, 2020 7:40:38 AM(UTC)
Naveed Ashraf

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 Jeff,

I have confirmed that there is some issue with the Buy Product With Options, I am looking into it and will reply after some investigation.

Thanks for reporting the issue.

Naveed
Thanks for your support!
Naveed Ashraf
Ablecommerce.com
Developer Assistance Available
Back to top
jeffr_ca  
#4 Posted : Tuesday, April 28, 2020 10:10:35 PM(UTC)
jeffr_ca

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,

Any luck finding a solution to this problem?

Thanks,

-Jeff
Back to top
mazhar  
#5 Posted : Friday, May 1, 2020 2:57:19 PM(UTC)
mazhar

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 Jef,

Please take backup of /Scripts/app.js file and edit the orignal file. Find all instances of the following code, there will four locations
Code:
var parentRow = $(this).closest("tr");

and update each of these four locations like this
Code:
var parentRow = $(this).closest("div.able-grid-row");


Now search
Code:
var subscribedMessage = $(this).closest("td").

and update it with
Code:
var subscribedMessage = $(this).closest("div.able-grid-content").


Lastly, search following
Code:

$(this).closest("td")
            .find("div.invNotificationForm")
            .show();

and update it with
Code:

$(this).closest("div.able-grid-content")
            .find("div.invNotificationForm")
            .show();


save the file and try the grid again. it should be working as expected now.
Back to top
jeffr_ca  
#6 Posted : Saturday, May 2, 2020 11:20:24 AM(UTC)
jeffr_ca

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 very much Mazhar...that is working now. That's a big feature for me.

Is there a way that we could make the grid not "refresh" each time the "Add" button is clicked while on that product page? For example, if you set a quantity of 10 for one of the options and then click "Add", the 10 selected will be added to the Cart, but the grid is refreshed to showing quantity 0.

It would be helpful if the grid retained the last quantity for the number "Added", so you can see & build a list of options items while adding. This is how it worked in the 7.0.3 version we are moving from.

In the 7.0.3 version, the grid only refreshed after you left and returned to the product page.

Now, what would be really cool is if you leave the product page and then return, that the grid would re-populate with the actual quantities you may have in your shopping cart already....the customer could then see/adjust a dynamic list in the grid. :)

-Jeff

Edited by user Saturday, May 9, 2020 9:32:40 PM(UTC)  | Reason: Not specified
Back to top
mazhar  
#7 Posted : Saturday, May 2, 2020 2:27:12 PM(UTC)
mazhar

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 Jeff, I think page reload can be disabled. In the very same /Scripts/app.js file locate following function definetion.
Code:
function onBuyProductOptionListSuccess(response) {

Then locate following code within the body of this function code between opening and closing curly braces {}.
Code:

// redirect to target url
    if (targetUrl && targetUrl.length > 0) {
        if (targetUrl.includes('/Checkout/Basket')) {
            window.location.reload();
        }
        else {
            window.location = targetUrl;
        }
    }

and update it like this
Code:

// redirect to target url
    if (targetUrl && targetUrl.length > 0) {
        if (targetUrl.includes('/Checkout/Basket')) {
            //window.location.reload();
        }
        else {
            window.location = targetUrl;
        }
    }


This would disable page reload upon add to the basket or wishlist button.
Back to top
jeffr_ca  
#8 Posted : Saturday, May 2, 2020 3:07:01 PM(UTC)
jeffr_ca

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 looks much better.

I appreciate your help on this!

-Jeff
Back to top
jeffr_ca  
#9 Posted : Saturday, May 2, 2020 3:39:27 PM(UTC)
jeffr_ca

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 again Mazhar, I'm still curious whether it may be feasible to have the grid populate with quantities if the items already exist in the cart? I'm expecting that the actual function of the button would need to change from "Add" to an "Update Quantity" behaviour.

Just wondering if this is worth pursuing or is it out of scope for now?

-Jeff
Back to top
mazhar  
#10 Posted : Saturday, May 2, 2020 8:05:04 PM(UTC)
mazhar

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)
It would need some customization to the grid codes but I think it can be achieved. You are correct about having some update behavior if a variant is already in the basket while viewing the product variants page.
Back to top
jeffr_ca  
#11 Posted : Monday, May 4, 2020 11:22:52 PM(UTC)
jeffr_ca

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 Mazhar...May I get a little further assistance with the tuning of the Buy Product Options Grid (BPOG) Widget?

I've copied & editted a new Inner Template to utilize the BPOG. I've Reduced the width of the product image and increased the width for the grid to be located beside the image. This is fine.

I've switched off some of the unrequired columns in the BPOG. But the BPOG seems to have a phantom column on the right hand side that becomes visible and is consuming space.

Please see the following for reference:

ProductOptionsGridColumns.JPG (55kb) downloaded 0 time(s).
AC V9.0.2
ProductOptionsGridColumnsOnPriorVersion.JPG (72kb) downloaded 1 time(s).
AC 7.0.3

When resizing the new BPOG doesn't respond well to display size breaks. You can try here:
https://acv9.woodessence.com/Abrasives/Abranet-Mesh-Sanding/Mirka-Abranet-ACE-HD-Discs

Also, when we remove the standard "Buy Product" Widget, we lose some of the data like the "Review Ratings", "Product Name" & "Product Sku". These elements don't appear as separate widgets to be positioned on the product page. The existing "Product Name" widge is of header size, not like what is showing in the "Buy Product" Widget. Could these elements be spun off into seperate widgets?

BuyProductDataFields.JPG (26kb) downloaded 0 time(s).

Thanks for any help you can offer.

-Jeff
Back to top
jeffr_ca  
#12 Posted : Wednesday, May 6, 2020 9:24:24 AM(UTC)
jeffr_ca

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)
If we place the Buy Product Options Grid in a full width zone, we still get issues with columns. I've turned on Inventory Status for this layout. Overall the layout needs some further testing and tweaking.

During this I also ran into an possible bug where the Store Config/General/Tracking Inventory strings are not being saved...will post this as a new Bug Report.

BuyProductOptionsGrid_Inventory.JPG (87kb) downloaded 0 time(s).
Back to top
shari  
#13 Posted : Thursday, May 7, 2020 5:59:20 AM(UTC)
shaharyar

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,

The right side empty column space issue occurs after disabling most of the columns. Actually, in the recent updates, the table HTML is updated to a bootstrap responsive HTML.
This surely needs some improvements. The grid is not dynamic and adaptive to the widget settings changes. Hopefully, this will be fixed in the next release whenever it will come.

For now, for your specific case as can be seen from screenshots, my recommendations are:
1- Use this product option grid in a full-width container as you shared in your last screenshot.
2- Try switching ON the SKU field and GTIN field.

These changes will fix the extra column space on the right side.

BUT if you really don't want to display SKU and GTIN fields then you need to edit the HTML. If this is the case please mention so that I can share the HTML updates. But still, the HTML updates will not be dynamic and will resolve the issue for only one specific case and it may fail for products with multiple options.

So the best option is to try enabling some of the fields to fill up the empty space.
Unfortunately, this is all we can do right now.

Best of luck!
Back to top
shari  
#14 Posted : Thursday, May 7, 2020 6:04:36 AM(UTC)
shaharyar

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)
Quote:
Also, when we remove the standard "Buy Product" Widget, we lose some of the data like the "Review Ratings", "Product Name" & "Product Sku". These elements don't appear as separate widgets to be positioned on the product page. The existing "Product Name" widget is of header size, not like what is showing in the "Buy Product" Widget. Could these elements be spun off into seperate widgets?


Sure, these elements can be turned into separate widgets but this needs some custom development. We can provide multiple new widgets by implementing an AC plugin.
Back to top
jeffr_ca  
#15 Posted : Thursday, May 7, 2020 8:31:03 AM(UTC)
jeffr_ca

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 Shari,

If you could please post the html updates for this widget, we can at least try them out and see if we can make it work.

We don't need/want all the columns showing because it clutters the interface and consumes too much screen real-estate. The columns that we DO wish to show will need to properly size for their content (ie. the Inventory Messages).

This feature is mission critical for our deployment and if it doesn't work decently, we have no migration path from 7.0.3.

-Jeff
Back to top
mazhar  
#16 Posted : Thursday, May 7, 2020 4:43:07 PM(UTC)
mazhar

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)
The issue with the phantom column seems related to styles only. Please add the following styles in your Theme's custom.css file. Edit /Themes/YourTheme/Content/custom.css file and add following styles in it.

Code:

#buyProductDialogOptionsListWidget .able-grid-bordered {
    border:none;
}

#buyProductDialogOptionsListWidget .able-grid-bordered .able-grid-head {
    background:none;
}

#buyProductDialogOptionsListWidget .able-grid > .able-grid-head > .able-grid-row > .able-grid-col {
    background:#206BA8;
}

#buyProductDialogOptionsListWidget .able-grid-bordered .able-grid-head > .able-grid-row > .able-grid-col , #buyProductDialogOptionsListWidget .able-grid-bordered > .able-grid-body > .able-grid-row > .able-grid-col {
    border: 1px solid #EBEBEB;
}


The scope of these styles only applies to options grid styles and shouldn't effect any other location. Let's see if makes things any better.
Back to top
jeffr_ca  
#17 Posted : Thursday, May 7, 2020 5:41:51 PM(UTC)
jeffr_ca

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 has removed the border outline, but the widget is still leaving the right hand side of the page blank.

I've set up two layouts to test behaviour of this widget:

https://acv9.woodessence...rka-Abranet-ACE-HD-Discs
https://acv9.woodessence...Abranet-6-H-L-Mesh-Discs

It's not stretching to the right on either layout to fill the available space.

We will need to have the "Variant Name" column expand to fit its contents. Of the columns, the Quantity Column appears to re-size in priority to others that should be re-sizing.

-Jeff
Back to top
judy at Web2Market  
#18 Posted : Monday, June 29, 2020 11:45:01 AM(UTC)
judy at Web2Market

Rank: Advanced Member

Groups: Developers
Joined: 11/7/2018(UTC)
Posts: 303

Thanks: 21 times
Was thanked: 5 time(s) in 5 post(s)
mazhar,
could you upload the app.js file that has been fixed? I've tried replacing the lines of code per your instructions and my updown and quantity buttons still don't work.
Thanks
Back to top
shari  
#19 Posted : Tuesday, June 30, 2020 4:45:52 AM(UTC)
shaharyar

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)
Please take a backup of the original file at location /Website/Scripts/app.js and copy the attached file in /Website/Scripts folder. Please don't forget to update the file extension to .js

app.js.txt (21kb) downloaded 3 time(s).
Back to top
judy at Web2Market  
#20 Posted : Tuesday, June 30, 2020 8:07:09 AM(UTC)
judy at Web2Market

Rank: Advanced Member

Groups: Developers
Joined: 11/7/2018(UTC)
Posts: 303

Thanks: 21 times
Was thanked: 5 time(s) in 5 post(s)
Thank you very much!
Back to top
Users browsing this topic
Guest (5)
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.

Privacy Policy | Powered by YAF.NET 2.2.4.14 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.352 seconds.