Dawn Theme: Adding Multiple Custom Line Items

GGMMdev
New Member
1 0 0

After following a few tutorials and looking elsewhere on this forum, I am still not able to get my multiple custom line items to show up in the cart. I would also like these to be shown at checkout. I put my line item code in the product form on main-product.liquid. See below.

<product-form class="product-form">
              {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                    
              
              <div class="no-js-hidden line-item-property__field" id="Color" data-section="{{ section.id }}" data-url="{{ product.url }}">
                      <fieldset class="js product-form__input" id="Color-Select">
                        <legend class="form__label">Color</legend>
                          <input type="radio" id="Color-MeridianRaw"
                                name="properties[Color]"
                                value="Meridian Raw"
                                form="product-form-{{ section.id }}"
                                checked {% if option.selected_value == "Meridian Raw" %}checked{% endif %}
                          >
                          <label for="Color-MeridianRaw">
                            Meridian Raw
                          </label>
                          <input type="radio" id="Color-SatinSteel"
                                name="properties[Color]"
                                value="Satin Steel"
                                form="product-form-{{ section.id }}"
                                {% if option.selected_value == "Satin Steel" %}checked{% endif %}
                          >
                          <label for="Color-SatinSteel">
                            Satin Steel
                          </label>
                          <input type="radio" id="Color-Carbon"
                                name="properties[Color]"
                                value="Carbon"
                                form="product-form-{{ section.id }}"
                                {% if option.selected_value == "Carbon" %}checked{% endif %}
                          >
                          <label for="Color-Carbon">
                            Carbon
                          </label>
                          <input type="radio" id="Color-MeridianBlue"
                                name="properties[Color]"
                                value="Meridian Blue"
                                form="product-form-{{ section.id }}"
                                {% if option.selected_value == "Meridian Blue" %}checked{% endif %}
                          >
                          <label for="Color-MeridianBlue">
                            Meridian Blue
                          </label>
                      </fieldset>
                    </div>

                <!-- Length -->
                <div class="no-js-hidden line-item-property__field" id="Length" data-section="{{ section.id }}" data-url="{{ product.url }}">
                  <fieldset class="js product-form__input">
                    <legend class="form__label">Length</legend>
                      <input type="radio" id="Length-ThirtyThree"
                            name="properties[Length]"
                            value="Length-ThirtyThree"
                            form="product-form-{{ section.id }}"
                            checked {% if option.selected_value == "Length-ThirtyThree" %}checked{% endif %}
                      >
                      <label for="Length-ThirtyThree">
                        33"
                      </label>
                      <input type="radio" id="Length-ThirtyFour"
                            name="properties[Length]"
                            value="Length-ThirtyFour"
                            form="product-form-{{ section.id }}"
                            {% if option.selected_value == "Length-ThirtyFour" %}checked{% endif %}
                      >
                      <label for="Length-ThirtyFour">
                        34"
                      </label>
                      <input type="radio" id="Length-ThirtyFive"
                            name="properties[Length]"
                            value="Length-ThirtyFive"
                            form="product-form-{{ section.id }}"
                            {% if option.selected_value == "Length-ThirtyFive" %}checked{% endif %}
                      >
                      <label for="Length-ThirtyFive">
                        35"
                      </label>
                  </fieldset>
                </div>

                <!-- Shaft -->
                <div class="no-js-hidden line-item-property__field" id="Shaft" data-section="{{ section.id }}" data-url="{{ product.url }}">
                  <fieldset class="js product-form__input">
                    <legend class="form__label">Shaft</legend>
                      <input type="radio" id="Silver-Chrome"
                            name="properties[Shaft]"
                            value="Silver-Chrome"
                            form="product-form-{{ section.id }}"
                            checked {% if option.selected_value == "Silver-Chrome" %}checked{% endif %}
                      >
                      <label for="Silver-Chrome">
                        Silver Chrome
                      </label>
                      <input type="radio" id="Black-Chrome"
                            name="properties[Shaft]"
                            value="Black-Chrome"
                            form="product-form-{{ section.id }}"
                            {% if option.selected_value == "Black-Chrome" %}checked{% endif %}
                      >
                      <label for="Black-Chrome">
                        Black Chrome
                      </label>
                  </fieldset>

                </div> 

                <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                <div class="product-form__buttons">
                  <button
                    type="submit"
                    name="add"
                    class="product-form__submit button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
                  {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                  >
                      {%- if product.selected_or_first_available_variant.available -%}
                        {{ 'products.product.add_to_cart' | t }}
                      {%- else -%}
                        {{ 'products.product.sold_out' | t }}
                      {%- endif -%}
                  </button>
                  {%- if block.settings.show_dynamic_checkout -%}
                    {{ form | payment_button }}
                  {%- endif -%}
                </div>
              {%- endform -%}
            </product-form>

 

This Code is in my main-cart-items.liquid

<dl>
                        {%- if item.product.has_only_default_variant == false -%}
                          {%- for option in item.options_with_values -%}
                            <div class="product-option">
                              <dt>{{ option.name }}: </dt>
                              <dd>{{ option.value }}</dd>
                            </div>
                          {%- endfor -%}
                        {%- endif -%}

                        {%- 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 }}" target="_blank">
                                  {{ property.last | split: '/' | last }}
                                </a>
                              {%- else -%}
                                {{ property.last }}
                              {%- endif -%}
                            </dd>
                          </div>
                        {%- endif -%}
                      {%- endfor -%}

                      {% for line_item in cart.line_items %}
                        <!-- line item info -->

                        {% unless line_item.properties == empty %}
                          {% for property in line_item.properties %}
                            {{ property.first }}:

                            {% if property.last contains '/uploads/' %}
                              <a href="{{ property.last }}">{{ property.last | split: '/' | last }}</a>
                            {% else %}
                              {{ property.last }}
                            {% endif %}
                          {% endfor %}
                        {% endfor %}
                      {% endunless %}
                      
                      </dl>

 

And here is my product-form.js

class ProductForm extends HTMLElement {
  constructor() {
    super();   

    this.form = this.querySelector('form');
    this.form.addEventListener('submit', this.onSubmitHandler.bind(this));
    this.cartNotification = document.querySelector('cart-notification');
  }

  onSubmitHandler(evt) {
    evt.preventDefault();
    this.itemProperty = document.querySelector('fieldset#Color-Select');
    this.cartNotification.setActiveElement(document.activeElement);
    
    const submitButton = this.querySelector('[type="submit"]');

    submitButton.setAttribute('disabled', true);
    submitButton.classList.add('loading');

    const body = JSON.stringify({
      properties: { Color: this.itemProperty.value },
      ...JSON.parse(serializeForm(this.form)),
      sections: this.cartNotification.getSectionsToRender().map((section) => section.id),
      sections_url: window.location.pathname
    });

    fetch(`${routes.cart_add_url}`, { ...fetchConfig('javascript'), body })
      .then((response) => response.json())
      .then((parsedState) => {
        this.cartNotification.renderContents(parsedState);
      })
      .catch((e) => {
        console.error(e);
      })
      .finally(() => {
        submitButton.classList.remove('loading');
        submitButton.removeAttribute('disabled');
      });
  }
}

customElements.define('product-form', ProductForm);

 

As you can see above I tried getting atleast one of my line item properties to show and it didn't work.

What am i missing?

0 Likes
YuChen
Tourist
15 0 1

What is the reason why adding attributes to the dawn 2.0 theme in this way does not take effect?微信截图_20210830161410.png

0 Likes
Tmac
Shopify Partner
13 0 4

Stop high jacking threads

0 Likes
ilc
Tourist
3 0 1

I'm experiencing the same thing.

 

I generated my custom product field and added it to my Dawn product template. I see the code to output them on cart template, but it doesn't seem to be working.

 

 

0 Likes