Product Attribute Targeting

Treepl Backlog
1

One of the issues we have had with BC in the past is that we can’t target the ‘price’ portion of an eCommerce product attribute and style it, hide it or format it.

That is because the full attribute content (description and price) is just part of the same span ie. “< span >Salt Water Rear Deck Wash $100< /span >”.

Can I request that there is a way to separate the price from the description in the eCommerce scripting if possible.

2

BC had {{salePrice}} , {{retailPrice}}, {{wholesalerPrice}}, {{totalPrice}}, {{totalRetailPrice} - which pulled out the price on its own in each various context and layouts.
I suspect Treepl would do something similar as sites need to migrate 1 to 1 for the most part.

3

@James this is specific to product attributes. The attribute {{attribute}} tag carries both the attribute name and price together so you can’t target the price separate to the name. If there was a separate < span > that separated the name from the price then this would fix the problem.

4

So far Treepl have exposed all layouts and most liquid tags to us, so I’m confident we’ll have full access to all of the ecommerce layouts.

Saying that, with Liquid you can do a lot. Even in BC it is possible to manipulate and reconstruct the product attributes (this is one example: http://www.loughlinfurniture.com.au/products/vanities/staples-alpine-white-vanity)

5

@Adam.Wilson I have a client who needs to be able to hide the product attribute price. Have you found a workaround for this in BC?

6

@SiroccoDigital yes, basically I use module_data to gather a Liquid collection of the products attributes and then completely reconstruct the attribute selects/radios/checkboxes. In doing this you can build them however you want - providing you maintain BC’s ID’s for their JS functions.

I’ll PM you with the code I use…

7

Have you done this with eComm product attributes in Treepl? I’d really like to style the attributes (hide price, custom radio button,etc), but I’m having trouble targeting the attributes once I’ve got them into a liquid collection. Appreciate any suggestions if so, I’m not very good identifying what I need from json - struggling a little to figure this out.

8

Apologies for resurrecting an old thread. I found this after:

Getting closer now.

9

Here is an example of how I have this setup for one of the attribute sets -

 {% for i in attr.items.attributes %}
        <h4>Options</h4>
        {% for x in i.options %} <img src="{{x.image}}">
        <div data-attr_group="{{i.id}}">
          <label><input type="checkbox" name="attr_2049_{{i.id}}" value="{{x.id}}">{{x.name}} </label>
        </div>
        {% endfor %}
        {% endfor %}

I hope this helps.

1 Like