Missing Add to Cart on some devices

[Buzby]

It is starting to feel like Sellerdeck is now open source

[peblaco]

There is a change to the code in the 14.0.2 patch, if you moved Attributes and Components and added a fix, be aware new float styles make the button disappear again so another fix needs applying.

Responsive CSS styles in 14.0.1 were:
.attribute-list display block, overflow hidden
media query for screens 1350px and below .attribute-list float left, width 100%

Responsive CSS styles in 14.0.2 are:
.attribute-list float left, flex wrap, width 100%
.attribute-list twoColumns flex 0 0 48%
.attribute-list threeColumns flex 0 0 32%
media query for screens 1350px and below .attribute-list float left, width 100%

Responsive CSS Part 2 styles in 14.0.2 are:
media query for screens min-width 801px max-width1061px max-width 500px
.attribute-list threeColumns flex 0 0 48%

The temporary fix is the same as previously mentioned, the attribute-list styles would have to be commented out and a main attribute-list style would need adding with display block and overflow hidden.

The new patch CSS does fix the default software bug mentioned with the Product Link disappearing because of the float issue.

Bear in mind if you change code you would have to check it again if you upgrade to any subsequent patches or new versions in future.

[peblaco]

I found another similar problem, if you move the product description down, the attribute list is placed in the middle of the description. The Attributes use CSS float left which causes the problem.

[Buzby]

Louise I had this problem in 14.01 and had to send a snapshot to Sellerdeck for it to be resolved.

Sellerdeck were aware of it, and know how to fix it. So why is it still in 14.02?

[Buzby]

Hi Louise,

I had attributes all over the place, and mixing with the product description.

This sorted the problem HERE but was on 14.01.

[Buzby]

I again have missing cart buttons, but only on some products, but across all devices.

I suspended ordering which removed the cart button, but when I reinstated ordering again i noticed later in the day that the cart button was missing.

As i've not been able to replicate it again, I'm not sure if suspending orders was the cause or a coincidence.

If you look at this page HERE and click on the 1st product you will see the cart button in place, however click on most of the others, and you will see it has now gone.

If I import a snapshot from before I suspended ordering, all the cart buttons are there.

[feemish]

This is deeply worrying.

A shopping cart where 'add to cart' buttons are sometimes not appearing.

Could there be a worse bug?

Sellerdeck had better sort this before the words gets out!

We need a proper clarification from Sellerdeck... and advice on how to safely move the choices above the add to cart button! The fact that choices were below the add to cart in the first place (and in tiny text) is a very basic error in my opinion.

[peblaco]

Below is the reply I received from SellerDeck Support about moving the choices above Add To Cart and moving down the Product Description without it causing a disappearing button or layout problems:

"As this is customizing of the original Responsive Product Design there isn't too much we can do to support it. We can help with perform minor customization in the default responsive design however we're unable to support any issues these changes make or any advanced changes such as the adjusting the Product Layout entirely. I have created a Wish List for more customization on the Product Page for example moving the Add to Cart below the Attributes/Components and moving the description lower in the page: WL-3137"

I ask anyone who also wants SellerDeck to add these changes to please take a minute to let SellerDeck know and quote the wish list reference number WL-3137 to request the change. Wish list requests usually only make it into the default software if a number of people make the same request. The more people can request it, the more likely they would look at making these needed changes.

[feemish]

I will make this 'wish list' request, but I am aghast that Sellerdeck seem to consider trying to fix their responsive product design is 'customising it'.

On what other ecommerce package will you see see size or colour choices BELOW the 'add to cart' button.. its just plain wrong. You make your choice THEN you add to cart. How on earth did it get designed that way?

I'm getting quite frustrated with all the errors and 'bugs' I'm finding.

Sellerdeck should treat this as urgent... Add to cart buttons are disappearing when people try and put them in the correct place!

[peblaco]

I posted a topic in the Wish List section as it may be quicker and easier for others to add a "vote" there that SellerDeck can see. Please see here: Request to improve product layout - Please vote.

[feemish]

thanks Louise. I really hope Sellerdeck treat this as seriously as they should.

[graphicz]

Modified v14 Smart layout with add to cart thus:

<div id="idVars<actinic:variable name="ProductID" />">
		<actinic:variable name="AttributeList" /> 
		<actinic:variable name="ComponentList" />
		</div>
		<p class="product-text">
			<actinic:variable name="ProductLinks" />
		</p>
		
		<actinic:block if="%3cactinic%3avariable%20name%3d%22FileURLNotEmpty%22%20%2f%3e" >
			<p class="product-text"><a href="<actinic:variable name="ProductLinkInfo" />">
				<actinic:variable encoding="actinic" name="ProductLinkText" /> 
			</a></p>
		</actinic:block>

		<actinic:block if="%3cactinic%3avariable%20name%3d%22DiscountDescriptionIsShownForProducts%22%20%2f%3e" >      
			<p class="product-text"><actinic:variable name="DiscountList" value="Standard Discount List" /></p>
		</actinic:block>

		<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOtherInfoPromptShown%22%20%2f%3e" >
			<fieldset class="product-prompt">
				<label><span class="actrequired"><actinic:variable encoding="actinic" name="OtherInfoPrompt" /></span></label>
				<input class="input-border" type="text" name="O_<actinic:variable name="ProductID" />" maxlength="1000" value="" />
			</fieldset>
		</actinic:block>

		<actinic:block if="%3cactinic%3avariable%20name%3d%22IsDatePromptShown%22%20%2f%3e" >
			<fieldset class="product-prompt">
				<label><span class="actrequired"><actinic:variable name="DatePrompt" /></span></label>
				<actinic:variable name="DayList" /><actinic:variable name="MonthList" /><actinic:variable name="YearList" />
			</fieldset>
		</actinic:block>
		<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>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22IsOutOfStockShown%22%20%2f%3e" >
			<p class="cart-button-placement">
				<strong><span class="actrequired"><actinic:variable name="OutOfStock" /></span></strong>
			</p>
		</actinic:block>
		<actinic:block if="%3cactinic%3avariable%20name%3d%22IsCatalogSuspendedShown%22%20%2f%3e" >
			<p class="cart-button-placement">
				<strong><span class="actrequired"><actinic:variable name="CatalogSuspended" /></span></strong>
			</p>
		</actinic:block>

The transparent border doesn't work, had to comment out overflow:hidden and all is well. Responsive css line 667

form.imageOnLeftTextWrappedAround p.cart-button-placement, form.imageOnRightTextWrappedAround p.cart-button-placement {display:block; /*overflow:hidden; */border: 1px solid transparent;}

Thanks

[graphicz]

IMHO the responsive v14 is very heavily coded.
One of the responsive boilerplates I use has one media query another five
SD 2014 has 101 http://community.sellerdeck.com/showthread.php?t=56094

[feemish]

I just had a customer call me and ask..

"If I choose size 20mm then the 'Add to Cart' button disappears.. does that mean its out of stock?"


20mm is not out of stock. The 'Add to Cart' button is disappearing when a choice is made!!
He was using Chrome on a Mac and looking at this product

I wonder how many other people this is happening to without them knowing.

Support are looking at this for me right now.

I also had a friend looking at my site in Firefox and he noticed that at certain screen sizes the 'add to cart button' moves over the choice layout.. see attached

I am rapidly losing confidence in the responsive themes.

I am using the default product layout with only one small change.. a change that support told me to do... which was to move;

<div id="idVarsProductID">
AttributeList
ComponentList
</div>

above the 'quantity' code... so that customers would see the choose size above the 'add to cart' button (as it should be)

This is such a massive issue I am surprised Sellerdeck have not been on here to explain what to do about it. How do we solve it? Does Graphicz code sort it out?

[peblaco]

a change that support told me to do... which was to move; <div id="idVarsProductID">AttributeListComponentList</div> above the 'quantity' code

Unfortunately the fix SellerDeck Support gave you is not stable to work correctly, there is still a CSS float on the list so it can still cause elements to overlap or disappear and it is conditional on a long product description.

Does Graphicz code sort it out?

The code by graphicz does stop the disappearing Add To Cart. However there could be drawbacks, the removal of overflow hidden on the paragraph for Add To Cart forces it to stay below Attribute List, but they can be wrapped under the image if there is not a long product description and the code still has CSS float on the Attribute List so could be vulnerable to float problems for elements that follow it.

The best workaround is to take the float problems out of the picture and keep the elements on the right of the image where possible. SellerDeck Support sent another fix for the Attributes / Components above Add To Cart issue which they called a "long term workaround".