How to add a modify product button to cart

1) In your cart template add the block of code (should be inside of line items loop)

{% assign customlink = false %}
{% if item.properties and item.properties.configId %}
{% assign customlink = item.properties.productUrl | append: '?configid=' | append: item.properties.configId %}
{% endif %}
{% if item.properties and item.properties._configId %}
{% assign customlink = item.properties._productUrl | append: '?configid=' | append: item.properties._configId %}
{% endif %}

2) Now you can select an element on the cart page, by clicking on which the customer will be redirected to the product page to modify the product (you can apply this functionality to all of the following elements or just some of them):

     A. Product Title

     Find this line: 

<a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>

    and replace it with this line:

{% if customLink %}
    <a href="{{ customlink }}&modifyProduct={{ item.key }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>
{% else %}
    <a href="{{ item.url }}" class="cart-item__name h4 break">{{ item.product.title | escape }}</a>
{% endif %}

    B. Product Image:

    Find this block of code:

<a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
<div class="cart-item__image-container gradient global-media-settings">
<img
    src="{{ item.image | image_url: width: 300 }}"
    class="cart-item__image"
    alt="{{ item.image.alt | escape }}"
    loading="lazy"
    width="150"
    height="{{ 150 | divided_by: item.image.aspect_ratio | ceil }}"
>
</div>

    And replace the first line of it with the following code:

{% if customLink %}
    <a href="{{ customlink }}&modifyProduct={{ item.key }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
{% else %}
    <a href="{{ item.url }}" class="cart-item__link" aria-hidden="true" tabindex="-1"> </a>
{% endif %}

    C. Create a custom button: 
    Find this block of code: 

{%- for property in item.properties -%}
  {%- assign property_first_char = property.first | slice: 0 -%}
  {%- if property.last != blank and property_first_char != '_' -%}
    <div class="product-option">
    <dt>{{ property.first }}:</dt>
    <dd>
    {% if property.last contains '/uploads/' %}
      <a href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
    {% else %}
      {{ property.last | split: '(' | first }}
    {% endif %}
    </dd>
    </div>
  {%- endif -%}
{%- endfor -%}

    Right after it, paste the following code: 

{% if customlink %}
<a class="cpb-modify-product--js" href="{{ customlink }}&modifyProduct={{ item.key }}">Modify product</a><br>
{% endif %}

3) Add to your "customproductbuilder-initializer.liquid" file jQuery and the new script (make sure that you are not duplicating this part in the file)

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
{{ 'customproductbuilder.js' | asset_url | script_tag }}

4) Create a new asset "customproductbuilder.js"

5) Fill it with the following code:

;(function($) {
document.body.addEventListener('CPB_ON_PRODUCT_MOUNTED', init);

function init() {
modifyProductInCartInit();
}

function modifyProductInCartInit() {
if(window.location.search.indexOf('&modifyProduct=') === -1) return;
var keyId = window.location.search.split('&modifyProduct=')[1];
keyId = keyId.split('&')[0];
var addToCartBtn = $('.cpb-add-to-cart-button');
addToCartBtn.find('span').html('Update Cart');
addToCartBtn.on('click', function() {
$.post('/cart/change.js', {
'id': keyId,
'quantity': 0
});
});
}

})(jQuery);

You can remove or edit this line "addToCartBtn.find('span').html('Update Cart');" if you don't want to change the add to cart button text or want to name it differently.