Cart icon change in sections

[EdHarrison]

The cart or basket icon used in sections is confusing, it looks like an add to cart but really just takes you to the product.

I've found the png in site 1 but as it spins when mouse hovered is it as simple as replacing the basket image with for example an i for information which would be better?

John...if you read this could you tell me how you did this...
GOODBYE TWIDDLY BUTTONS
I got rid of all the twiddly circular buttons in sections and elsewhere that link to the product page. I felt they were distracting, took up too much space, and didn’t really do what you’d expect; they look like add to cart buttons, and might actually put off people who just want to view the product details. Users can still view a product by touching/clicking the image or title; this approach is good enough for Amazon, Wickes, Next, ASOS and M&S, so it’ll do for me.

Thanks Ed

[John Ennals]

Ed,

Assuming our sites are using the same layouts:

In Design Library, find Regular Product Summary. Make a backup copy of it. Then look for the following code in Regular Product Summary:

<actinic:block if="%21%3cactinic%3avariable%20name%3d%22SingleAddToCartButtonIsUsed%22%20%2f%3e" >
<p class="product-info">
<a class="add-to-cart-btn" href="<actinic:variable name="SearchCGIURL" />?PRODREF=<actinic:variable name="ProductID" />&amp;NOLOGIN=1<actinic:block if="%3cactinic%3avariable%20name%3d%22IsHostMode%22%20%2f%3e" >&amp;SHOP=<actinic:variable name="ShopID" /></actinic:block>">
<img src="cart-icon-w.png" class="cartIcon" alt="" />
</a>
</p>
</actinic:block>

If you delete this code, the twiddly buttons will go away permanently.

A better solution (and what I did) is to create a new variable, e.g.: CartButtonUsed (Place of setting: Site and Section, Initial and Top Level values: false). Then wrap the above code in a BLOCKIF with the condition: CartButtonUsed. This will enable you to turn the twiddly buttons on again for the site or just particular sections if you want to.

John

[EdHarrison]

Thank you John, excellent

[EdHarrison]

John, could I simply comment it out as a quick reversible solution?

Thanks Ed

[John Ennals]

John, could I simply comment it out as a quick reversible solution?

I don't think that will work because you can't comment out BLOCKIFs.

Why not use one of the two methods I suggested?

John

[EdHarrison]

Thanks John, I'll probably just delete it but save it as text file in case

I still may try an "i" for info ping in place of the basket icon and have a look.

[EdHarrison]

Unfortunately mine looks too different, I may speak to Jonathan Chappell and see if he wouldn't mind fixing it.

[John Ennals]

You can experiment using the Inspect function in your browser without changing anything permanently. For example, if you bring up a section page and just delete the bit of the code from <a> to </a> for the first product, you get this:

[EdHarrison]

Thanks John - unfortunately beyond me!

In standard product links I found similar....

<p class="product-info">
<actinic:block if="%28%3cactinic%3avariable%20name%3d%22PageType%22%20%2f%3e%20%3d%3d%20%22Section%22%29" >
<a class="add-to-cart-btn" href="<actinic:variable name="ProductPageName" />#SID=<actinic:variable name="SectionID" />">
<img src="cart-icon-w.png" class="cartIcon" alt="">
</a>
</actinic:block>
<actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpPageGenerated%22%20%2f%3e" >
<actinic:variable name="ExtendedInfoPageDesign"/>
</actinic:block>
</p>

I did try replacing cart-icon-w.png with my own Info graphic but it also appeared on the actual add to cart buttons and appeared reversed with a mouse hover, I assume it is some clever css needs dealing with

I might ask support as they happily take 3k plus a year from me for it!

[EdHarrison]

All done thanks it was in many places, homepage, also bought, latest products, recently viewed..

<a class="add-to-cart-btn" href="<actinic:variable name="ProductPageName" />#SID=<actinic:variable name="SectionID" />">
<img src="cart-icon-w.png" class="cartIcon" alt="">
</a>



Thanks Ed