Missing Add to Cart on some devices

[peblaco]

This is the fix I received from SellerDeck Support for moving Attributes and Components above Add To Cart. The fix removes the float and width on the attribute list that I suggested for 14.0.1 here and 14.0.2 here because it is the float that causes other elements to push off the side of the Attribute List and overlap or makes Add To Cart disappear. For the Attribute List instead of using CSS display block overflow hidden they suggest display table. I had to make some edits because they sent instructions for version 14.0.1 not 14.0.2 and missed the style in Responsive CSS Part 2. I added details for layout locations, 14.0.2 style changes, commented out CSS code with /* and */ to hide old styles rather than removing as you can then see what the original styles were if required. Edits added in parenthesis. It requires several changes to CSS so you have to be careful when editing. Make a backup before making changes. Remember to check the CSS code if future software upgrades are made.

The below code was sent by SellerDeck Support. Use at your own risk. It needs to be fully tested with different setups of component choices, browsers and mobile devices. A test on a default site with a default component and Chrome Developer Tools mobile emulator it looks okay.

In the [Design menu > Library > Layouts tab > Products >] 'Image on Left Text Wrapped Around' layout, move the following code:

<div id="idVars<actinic:variable name="ProductID" />">
<actinic:variable name="AttributeList" />
<actinic:variable name="ComponentList" />
</div>

To above the cart button placement code:

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsAddToCartButtonShown%22%20%2f%3e%20AND%20%0d%28%3cactinic%3avariable%20name%3d%22NumberAttributesInPushButtonGrid%22%20%2f%3e%20%3d%3d%200%29" >
<p class="cart-button-placement">
<actinic:variable name="AddToCartButton" />
</p>
</actinic:block>

In the [Design menu > Library > Layout tab > Theme Stylesheets >] Responsive CSS layout. changed the following code from:

form.imageOnLeftTextWrappedAround p.cart-button-placement, form.imageOnRightTextWrappedAround p.cart-button-placement {display:block;overflow:hidden;}

to:

form.imageOnLeftTextWrappedAround p.cart-button-placement, form.imageOnRightTextWrappedAround p.cart-button-placement { /* display:block;overflow:hidden; */ display:table;}

[NOTE For version 14.0.1 only]
Also, changed the following code from:

div[id^="idVars"] .attribute-list {
display:block;
overflow:hidden;
}

to:

div[id^="idVars"] .attribute-list {
/* display:block;
overflow:hidden; */
display:table;
margin:0.5em 0 1em;
}

[For version 14.0.2 you need to change the following]

div[id^="idVars"] .attribute-list {
float:left;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
width: 100%;
}

to:

div[id^="idVars"] .attribute-list {
/* float:left;
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
width: 100%; */
display:table;
margin:0.5em 0 1em;
}

[For version 14.0.2 you need to change the following]

div[id^="idVars"] .attribute-list .twoColumns {
-webkit-flex:0 0 48%;
flex:0 0 48%;
}

to:

div[id^="idVars"] .attribute-list .twoColumns {
/* -webkit-flex:0 0 48%;
flex:0 0 48%; */
}

[For version 14.0.2 you need to change the following]

div[id^="idVars"] .attribute-list .threeColumns {
-webkit-flex:0 0 32%;
flex:0 0 32%;
}

to:

div[id^="idVars"] .attribute-list .threeColumns {
/* -webkit-flex:0 0 32%;
flex:0 0 32%; */
}

[For version 14.0.1 and 14.0.2 you need to change the following]

@media screen and (max-width:1350px) {
div[id^="idVars"] .attribute-list {float:left; width:100%;}
#idInvoiceAccountAddresses {margin-left:26%;}
#idInvoiceAccountAddresses, #idDeliverAccountAddresses {width:30%;}
}

to:

@media screen and (max-width:1350px) {
div[id^="idVars"] .attribute-list {/* float:left; width:100%; */}
#idInvoiceAccountAddresses {margin-left:26%;}
#idInvoiceAccountAddresses, #idDeliverAccountAddresses {width:30%;}
}

[For version 14.0.2 you need to change the following at Design menu > Library > Layouts tab > Theme Stylesheets > Responsive CSS Part 2]

@media screen and (min-width:801px) and (max-width:1061px), (max-width:500px) {
div[id^="idVars"] .attribute-list .threeColumns {
-webkit-flex:0 0 48%;
flex:0 0 48%;
}
}

to

@media screen and (min-width:801px) and (max-width:1061px), (max-width:500px) {
div[id^="idVars"] .attribute-list .threeColumns {
/* -webkit-flex:0 0 48%;
flex:0 0 48%; */
}
}

[Mike Hughes]

So are sellerdeck going to test the fix and issue as 14.0.3?

I'm not going anywhere near* V14 until this while issue is fixed properly and tested.

Mike

* Well, going anywhere near putting it live. In fact I've stopped all development on my site in V14 until Sellerdeck get their act together.

[peblaco]

They have only added a wish list request WL-3137 and they said they added votes from that topic. There is not a problem in the default software where Attributes and Components are below Add To Cart hence why they only have it as a wish list request. If you wanted to contact SellerDeck and let them know your concern maybe that would help to get it changed.

[feemish]

Thanks again Louise for your MASSIVE help regarding this issue.

I must say though;

There is not a problem in the default software where Attributes and Components are below Add To Cart hence why they only have it as a wish list request.

Personally I would say that is actually a big problem!
I understand the 'Add to cart' button doesnt disappear when laid out like that... but what shopping cart.. anywhere.. has choices for size and colour etc AFTER the 'Add to cart' button. Its awful design... and goes against all logic and universal shopping cart protocol.

[feemish]

I'm going to asap. I'll report back.

[guccij]

I have made those changes. I have Norman's tabber so I changed the code in Tabbed Image on Left Text Wrapped Around before making the remaining changes in 14.0.1.

So far, so good.

Thank you Louise.

[feemish]

Changes made in 14.0.1

Add to cart button seems to be behaving itself!

Thanks again Louise.

I have been on at support for days and once again I find the solution from you.

[Mike Hughes]

First of all, thanks Louise. This is much appreciated.

I'm back to working on V14 now and have made the changes above to 14.0.1 but I'm still getting some odd behaviour with the placing of the add to cart button.

What I'm seeing as I narrow the browser width is:

1. When the choices and add to cart both fit to the right of the product image then everything is fine.

2. When neither fit beside the image and both wrap underneath then that is also fine.

3. The problem is on the transition when there's still room for one of the two items (and this is the case in both desktop and mobile view / widths). What happens is that the Choice element wraps under the image first and the 'Add to Cart' button stays to the right of the product image and messing up the order in which they're displayed.

Is there any way of tying the two together so that they both move as a single block? It would seem sensible to me that the add to cart button stays with the choice selection rather than them moving independently.

Or is this just me messing up something?

[Mike Hughes]

Or is this just me messing up something?

It looks like it is as everything seems to be working fine now.

Louise called me to see of I had it live anywhere and when we looked it was all working great.

I'll still see if I can get the two tied together. A simple <div> around the two didn't do it but I might just have some caching going on somewhere.

Thanks Louise.

Mike

[peblaco]

Try quick fix: <div style="display:table;"> CONTENT </div>

SellerDeck 2016 users:
Note if you upgrade to SellerDeck 2016 there is a new product layout called Customisable Product Layout which places components and attributes above the add to cart button without the version 2014 CSS issue, as a result of requests to fix the issue and the wish list request.

[Mike Hughes]

quick fix: <div style="display:table;"> CONTENT </div>

This worked perfectly.

Again thanks give I must.

Mike