What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Mini-cart-item-wrapper showing unwanted data from Product Options By Bold App

Solved

Mini-cart-item-wrapper showing unwanted data from Product Options By Bold App

RusticMarlinUSA
Visitor
3 0 0

Hello!

 

We do our product customization through an app called "Product Options by Bold" and some unwanted information is showing up for personalized items when you hover over the "Cart" tab (See below). I want to keep the "Text" field showing and get rid of the other two lines marked in red. These lines do not show up once you actually click on cart.

 Cart Checkout Issue.JPG

The code where this issue is happening (Mini-cart.liquid) looks like this on the back end:

 </p>

          {% if item.properties %}
            {% for property in item.properties %}
              {% unless property.last == blank %}
                <p class="mini-cart-item-property">
                  <span class="property-label">{{ property.first }}:</span>
                  {% if property.last contains '/uploads/' %}
                    <a class="property-image" href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
                  {% else %}
                    <span class="property-value">{{ property.last }}</span>
                  {% endif %}
                </p>
              {% endunless %}
            {% endfor %}
          {% endif %}

If anyone could let me know how to change the code so that this stops showing that would be great!

Accepted Solution (1)
ArcticKeys
Tourist
8 1 1

This is an accepted solution.

If it was up to me, I'd ditch the for loop and list out only the attributes that I want to display.

 

For instance, assuming property had the following attributes: Qty, Title, Text, Price. I'd just display those in the <span class="property-label"> and <span class="property-value">

 

If you need a quick and dirty way, try something like this:

 

          {% if item.properties %}
            {% for property in item.properties %}
              {% unless property.last == blank or property.first contains '_boldOptionLocalStorageId' %}
                <p class="mini-cart-item-property">
                  <span class="property-label">{{ property.first }}:</span>                  {% if property.last contains '/uploads/' %}
                    <a class="property-image" href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
{% elsif property.last contains '' {% else %} <span class="property-value">{{ property.last }}</span> {% endif %} </p> {% endunless %} {% endfor %} {% endif %}

I did not test the code, but logic is if property.first contains _boldOptionLocalStorageId just skip it.

 

Hope it works. 

View solution in original post

Replies 7 (7)

ArcticKeys
Tourist
8 1 1

It seems that the for loop is reading every single property in the item and its value, including the _boldOptionLocalStorageId and its value.

 

The quick way to fix it is to have the code ignore it in the for loop. The other way is to just rewrite it without the for loop and only display the fields that you want to show in the cart. But it depends on how the code is written.

RusticMarlinUSA
Visitor
3 0 0

Ok so is there a command to insert into a certain area of this code to bypass the second item.properties in the mini-cart?

ArcticKeys
Tourist
8 1 1

This is an accepted solution.

If it was up to me, I'd ditch the for loop and list out only the attributes that I want to display.

 

For instance, assuming property had the following attributes: Qty, Title, Text, Price. I'd just display those in the <span class="property-label"> and <span class="property-value">

 

If you need a quick and dirty way, try something like this:

 

          {% if item.properties %}
            {% for property in item.properties %}
              {% unless property.last == blank or property.first contains '_boldOptionLocalStorageId' %}
                <p class="mini-cart-item-property">
                  <span class="property-label">{{ property.first }}:</span>                  {% if property.last contains '/uploads/' %}
                    <a class="property-image" href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
{% elsif property.last contains '' {% else %} <span class="property-value">{{ property.last }}</span> {% endif %} </p> {% endunless %} {% endfor %} {% endif %}

I did not test the code, but logic is if property.first contains _boldOptionLocalStorageId just skip it.

 

Hope it works. 

Lisa_E
Shopify Partner
5 0 4

I realize that I'm late to the party here, but all line item properties will show up in your checkout, except those that are prefixed with an underscore (like the Bold property in your screenshot), so it makes the most sense to have the same behavior in your cart.

You can update your mini-cart.liquid to show all line item properties that don't have the underscore at the beginning:

{% if item.properties %}
  {% for property in item.properties %}
    {% assign first_character_in_key = property.first | truncate: 1, '' %}
    {% unless property.last == blank or first_character_in_key == '_' %}
      <p class="mini-cart-item-property">
        <span class="property-label">{{ property.first }}:</span>
        {% if property.last contains '/uploads/' %}
          <a class="property-image" href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
        {% else %}
          <span class="property-value">{{ property.last }}</span>
        {% endif %}
      </p>
    {% endunless %}
  {% endfor %}
{% endif %}


the relevant changes are:

{% assign first_character_in_key = p.first | truncate: 1, '' %}
{% unless p.last == blank or first_character_in_key == '_' %}

on line 3/4 that check for the initial underscore and skip over those properties.

 

salesolve
Visitor
1 0 0

Screenshot_10.png

 

I have face the same type of issue with my website, can somebody help me, please? My Website link:https://lushspree.com/

When I add any product in my cart then i can see this error message

kpisces12
New Member
8 0 0

F662CA95-EDFE-473E-8766-090CC286FE2B.jpeg

  

94496A13-198D-40BC-BD89-AEF9BE1E41C5.jpeg

On my Ready to Ship Wig product images and Custom Wigs (Create a Krown) product image, the options set show up over the image preventing customers from being able to see nor click on the image. I am only having that problem with those two product images. Attached are pictures to show what I’m talking about. 

can anyone help with this?

website: www.houseofkrowns.com

password: Kiera23

EasifyApps-Zoe
Shopify Partner
582 15 49

Hi @RusticMarlinUSA,

 

When facing app-related issues, it's crucial to receive prompt and reliable support from the app provider. If you find that the current app isn't meeting your expectations in terms of support, it might be time to explore other options.

 

Allow me to recommend the Easify Product Options app as a viable alternative 🤗. Not only does it offer all the features provided by the Bold Product Options app, but it also goes above and beyond by introducing additional functionalities.

 

For instance, it provides a Live Preview directly within the app, allowing you to visualize your options before publishing. Additionally, it offers Tiered wholesale pricing, enabling you to encourage larger orders at a more affordable price point.

 

The Easify Product Options app comes in 2 versions: a Free plan and a Pro plan priced at only $9.99 per month (or $7.99 per month if paid annually). By making the switch, you can enjoy a host of enhanced features at a significantly lower cost 🙌.

 

Check out the below demo showcasing the versatility of custom options created with the app. For even more examples, take a look here.

 

cakee.jpg

 

EasifyAppsZoe_0-1688237016636.png

 

EasifyAppsZoe_1-1688237182191.png

EASIFY - MAKING SHOPIFY SIMPLE & SWEET!
Easify Product Options: Create custom product options 10X faster & easier!
Easify Product Attachments: Effortlessly add downloadable PDF files (or any other format) to Shopify pages!
Try for Free | 24/7 Live Chat Support