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 forums.ablecommerce.com. Please use your AbleCommerce username and password to Login. Forums Registration.

Notification

Icon
Error

Options
Go to last post Go to first unread
jeffr_ca  
#1 Posted : Thursday, September 26, 2019 9:38:05 AM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered
Joined: 1/7/2019(UTC)
Posts: 60

Thanks: 1 times
We've made some adjustments to tune the Product Options Grid format as recommended by Muhammad at Able:


1- Please open the file \Website\Views\Product\_BuyProductDialogOptionsList.cshtml

2- Search for these code lines

@if (Model.ShowMSRP)
{
<td class="col-xs-1 text-center">
<text>@Html.DisplayFor(model => model.Variants[i].MSRP)</text>
</td>
}
@if (Model.ShowPrice)
{
<td class="col-xs-1 text-center">
<span itemprop="price">@Html.DisplayFor(model => model.Variants[i].Price)</span>
</td>
}
<td class="col-xs-2 text-center">
<div class="row row-no-padding quantity">
<span class="product-quantity ">
<a class="btn btn-default" id="row-qty-minus">-</a>
<input type="text" min="1" max="999" value="1" class="form-control input-number resize-field addQty" id="modal-qty" />
<a class="btn btn-default" id="row-qty-plus">+</a>
</span>
</div>
</td>

3- Remove the text in Bold.
i-e col-xs-1 & col-xs-2

4- Save the file and see if your issue is resolved.


This has helped a great deal with the formatting. We requested a further adjustment to keep the Add to Cart & Add to Wishlist buttons horizontal instead of stacking. This works on Desktop, but causes a problem on mobile with the Quantity Spinners becoming dis-located.

<td class="@(AbleContext.Current.Store.Settings.WishlistsEnabled ? "col-xs-3" : "col-xs-2") text-right">

and replace it with

<td class="text-right">

We may need to keep a stacked format for the buttons in mobile, but horizontal on desktop.

-Jeff

Edited by user Thursday, September 26, 2019 10:10:02 AM(UTC)  | Reason: Not specified

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. Forums Registration.

jeffr_ca  
#2 Posted : Tuesday, October 1, 2019 8:17:08 AM(UTC)
jeffr_ca

Rank: Advanced Member

Groups: Authorized User, Developers, Registered
Joined: 1/7/2019(UTC)
Posts: 60

Thanks: 1 times
Nudge....

Just wondering if further work is in the queue for Able's team to more thoroughly format the Product Options Grid.

The above changes were helpful, but not complete enough to make it fully useable across devices.

Thanks!

-Jeff
Users browsing this topic
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.