Line item properties in Dawn Theme

Solved
gunnar-1
Shopify Partner
7 0 5

Hi There,

I'm currently switching my shop to the new Dawn theme and my original theme was based on Debut. It seems that the Dawn theme uses an Ajax cart to submit an add to cart action, but I'm unable to add the chosen line item properties. Can anybody help me with the code I need to change, or add to the product-form.js file to achieve this?

Thank you in advance.

Accepted Solution (1)

Accepted Solutions
LamQSolutions
Pathfinder
117 28 42

This is an accepted solution.

Hi,

To add the line in the Dawn theme, you can follow these steps below

1. Go to file sections/main-product.liquid, find <div class="product-form__input product-form__quantity"> and insert the following under that line

<div>
   <style>
      .product__info-container--sticky {
      position: static !important;
      }
   </style>
   <label class="form__label" for="pinfel-select">Pinfel pack</label>
   <div class="select" id="pinfel-select">
      <select required class="select__select required" id="pinfel">
         <option class="fruta" value="Fruta">{{ 'products.product.fruit' | t }}</option>
         <option class="jogos" value="Jogos">{{ 'products.product.games' | t }}</option>
         <option class="rock" value="Rock">Rock</option>
         <option class="espaco" value="Espaço">{{ 'products.product.space' | t }}</option>
      </select>
      {% render 'icon-caret' %}
   </div>
</div>
</div>

2. Go to the file assets/product-form.js, find const body = JSON.stringify({ and add the following code under that line

properties: { Pinfel: $('#pinfel-select select').val() },
Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.

View solution in original post

Replies 35 (35)
gunnar-1
Shopify Partner
7 0 5

Hi @LuckyNigam ,

Thanks for your rapid reply, but I'm looking for a solution that we can share here with others who face the same issue, so if you could post a fix for the Dawn theme to handle line item properties, it would be much appreciated.

Thanks in advance!

LamQSolutions
Pathfinder
117 28 42

Hi,

Could you share your change on the Debut theme? So we can understand your idea closer.

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
gunnar-1
Shopify Partner
7 0 5

Hi @LamQSolutions ,

Here's the line item property I have added to the product template which works in the old Debut theme, but doesn't work in the new Dawn theme, because the old Debut theme didn't use Ajax and the new Dawn theme has a complete new way of handling the add to cart functionality:

<label class="form__label" for="pinfel-select">Pinfel pack</label>
<div class="select">
<select required class="select__select required" id="pinfel" name="properties[Pinfel]">
<option class="fruta" value="Fruta">{{ 'products.product.fruit' | t }}</option>
<option class="jogos" value="Jogos">{{ 'products.product.games' | t }}</option>
<option class="rock" value="Rock">Rock</option>
<option class="espaco" value="Espaço">{{ 'products.product.space' | t }}</option>
</select>
{% render 'icon-caret' %}
</div>

Thanks in advance!

LamQSolutions
Pathfinder
117 28 42

This is an accepted solution.

Hi,

To add the line in the Dawn theme, you can follow these steps below

1. Go to file sections/main-product.liquid, find <div class="product-form__input product-form__quantity"> and insert the following under that line

<div>
   <style>
      .product__info-container--sticky {
      position: static !important;
      }
   </style>
   <label class="form__label" for="pinfel-select">Pinfel pack</label>
   <div class="select" id="pinfel-select">
      <select required class="select__select required" id="pinfel">
         <option class="fruta" value="Fruta">{{ 'products.product.fruit' | t }}</option>
         <option class="jogos" value="Jogos">{{ 'products.product.games' | t }}</option>
         <option class="rock" value="Rock">Rock</option>
         <option class="espaco" value="Espaço">{{ 'products.product.space' | t }}</option>
      </select>
      {% render 'icon-caret' %}
   </div>
</div>
</div>

2. Go to the file assets/product-form.js, find const body = JSON.stringify({ and add the following code under that line

properties: { Pinfel: $('#pinfel-select select').val() },
Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.

View solution in original post

gunnar-1
Shopify Partner
7 0 5

Hi @LamQSolutions ,

I had to make a few small adjustments to make it work, but you directed me in the right direction and it works now! Thanks! 

LamQSolutions
Pathfinder
117 28 42

Hi @gunnar-1 

Glad to hear that the problem was solved! Could you please share your change so it can help other people?

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
gunnar-1
Shopify Partner
7 0 5

Hi @LamQSolutions ,

Ok, here's my working solution, it's not pretty and I'm sure it could be done better, but it works and hopefully people that need it can adjust it to their needs:

main-product.liquid:

{%- if product.tags contains 'pinfel' -%}
<div class="product-form__input product-form__input--dropdown product-form__pinfel">
<label class="form__label" for="pinfel-select">Pinfel pack</label>
<div class="select" id="pinfel-select">
<select required class="select__select required" id="pinfel" data-type="pinfel-select">
<option class="fruta" value="Fruta">{{ 'products.product.fruit' | t }}</option>
<option class="jogos" value="Jogos">{{ 'products.product.games' | t }}</option>
<option class="rock" value="Rock">Rock</option>
<option class="espaco" value="Espaço">{{ 'products.product.space' | t }}</option>
</select>
{% render 'icon-caret' %}
</div>
</div>
{%- else -%}
<span value="0" data-type="pinfel-select"></span>
{%- endif -%}

product-form.js:

onSubmitHandler(evt) {
evt.preventDefault();
this.itemProperty = document.querySelector('[data-type="pinfel-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: { Pinfel: 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');
});
}

LamQSolutions
Pathfinder
117 28 42

Thanks for sharing!

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling creating scroll-based animations visually.
Awesome Product Description adding tabs and beautiful contents to product description.
acerill
Shopify Partner
4 0 2

This solution works fine but requires an update to product-form.js

Does anyone know how line item properties can be used by theme app extensions? In other words, how can a section on the product page contribute to the line item properties without modifying the theme files?

Thanks!