Product page functionality not working

[mtrsuperstore]

Problem

After developing our theme with Slate and deploying to our shopify store, we noticed that our product page was lacking some functionality. When switching variants, the SKU, Price, and image do not change from the default selected variant. Also, the "add to cart" button throws a 404 error. After looking for an obvious answer in the code (and not seeing one), we downloaded the most current "base theme" and tested it on a product page. It seems to not have the same functionality as our developed theme. Are we missing something simple?

Replication steps

Downloaded most current base theme, installed in development store (as well as live store), navigated to product page with variant, switched variant, saw no changes in SKU, price, or image.

More Information

Any additional information which might be helpful.

[huguestennier]

Just tested with a fresh install and cannot reproduce. Do you have any errors in the console?

Also moving this to starter-theme since it's not Slate related

[mtrsuperstore]

No errors in console (with the exception of product pages with embedded videos in the image carousel, but that's a different issue). When a variant is changes, the URL doesn not update with the variant id (post request URL update). When attemnpting to add a product to the cart I get this...

Oops, something went wrong.

What happened?
Parameter Missing or Invalid: Required parameter missing or invalid: id.

I also downloaded the starter theme once again and installed it into our development store. The same issue is coming up with no price/SKU updates, however the "add to cart" issue seems not to be there.

[stefcharle]

I am getting the same "Parameter Missing or Invalid: Required parameter missing or invalid: id" error after creating a new slate project based on starter-theme

Hope someone can help with this soon.

[badantlerday]

Also having this issue.

[stefcharle]

Completely understand that resources have been shifted from slate, but would be great if we can get this solved. I've been having to clone a previous theme that was built on a working version of starter-theme and it's not ideal.

[garrettboatman]

This is so frustrating. We can't get a working starter theme?

[HarisDev]

I'm having same problem with "missing parameter". Basically, problem is that form is missing variant id.

Quick fix could be adding basic variant dropdown between <form> and </form>:

<select name="id">
    {% for variant in product.variants %}
    <option value="{{ variant.id }}">{{ variant.title }}</option>
    {% endfor %}
  </select>

[garrettboatman]

@HarisDev You're right.

Commenting out the <noscript> in product.liquid fixes this.

{% comment %} <noscript> {% endcomment %}
  <select name="id">
    {% for variant in product.variants %}
      <option
        {% if variant == current_variant %}selected="selected"{% endif %}
        {% unless variant.available %}disabled="disabled"{% endunless %}
        value="{{ variant.id }}">
          {{ variant.title }}
      </option>
    {% endfor %}
  </select>
{% comment %} </noscript> {% endcomment %}

[Cam]

I personally think the noscript wrapper should really be removed and the no-js class used instead. It only really makes sense to use it if the js doesn't rely on that selector.

[mattias78]

Yeah I was having this same issue...

"Parameter Missing or Invalid: Required parameter missing or invalid: id"

I found that it didn't throw this error if a product had variants.

Be great to get this rectified so the starter theme works. Adding products to cart seems like a necessary feature for ecommerce themes ;)

[danyn]

the solution is here:
https://help.shopify.com/en/themes/liquid/objects/product#product-has_only_default_variant

The file is section/product.liquid

[danyn]

Some of the code in this repo might work for you:
https://github.com/danyn/theme-for-slate

[soulzzprajapati]

Hi @danyn

{% if product.has_only_default_variant %}
{% for option in product.options_with_values %}

      {% if forloop.index0 > 0 %}

        {% for value in option.values %}
          <input type="radio" id="Option{{ option.position }}-{{ value }}" name="options[{{ option.name }}]" value="{{ value }}"{% if option.selected_value == value %} checked{% endif %}>
          <label for="Option{{ option.position }}-{{ value }}">{{ value }}</label>
        {% endfor %}

      {% else %}

        <label for="Option{{ option.position }}">
          {{ option.name }}
        </label>

        <select
          id="Option{{ option.position }}"
          name="options[{{ option.name | escape }}]">
          {% for value in option.values %}
            <option
              value="{{ value | escape }}"
              {% if option.selected_value == value %}selected="selected"{% endif %}>
                {{ value }}
            </option>
          {% endfor %}
        </select>

      {% endif %}
    </div>
  {% endfor %}
{% else %}
  <input name="id" value="{{ variant.id }}" type="hidden">
{% endif %}

Could you give a full reference of the code you used, I tried copying the above code and I am still getting an error.

Thank you.

[danyn]

https://github.com/danyn/theme-for-slate

…

On Wed, May 15, 2019 at 8:57 PM soulzzprajapati ***@***.***> wrote: Hi @danyn <https://github.com/danyn> {% if product.has_only_default_variant %} {% for option in product.options_with_values %} {% if forloop.index0 > 0 %} {% for value in option.values %} <input type="radio" id="Option{{ option.position }}-{{ value }}" name="options[{{ option.name }}]" value="{{ value }}"{% if option.selected_value == value %} checked{% endif %}> <label for="Option{{ option.position }}-{{ value }}">{{ value }}</label> {% endfor %} {% else %} <label for="Option{{ option.position }}"> {{ option.name }} </label> <select id="Option{{ option.position }}" name="options[{{ option.name | escape }}]"> {% for value in option.values %} <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}> {{ value }} </option> {% endfor %} </select> {% endif %} </div> {% endfor %} {% else %} <input name="id" value="{{ variant.id }}" type="hidden"> {% endif %} Could you give a full reference of the code you used, I tried copying the above code and I am still getting an error. Thank you. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#128?email_source=notifications&email_token=AFQVJSBUSQPICQHIDTYTW3DPVTLSZA5CNFSM4GIFEHAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODVQSVNI#issuecomment-492907189>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFQVJSDMR7IZ64G4IPTPZETPVTLSZANCNFSM4GIFEHAA> .

-- Regards, Daniel Eisen | Victoria, Bc

[soulzzprajapati]

https://github.com/danyn/theme-for-slate

Hi @danyn,

Thanks for this. I have fixed the product being added to the cart. However, I am still getting this issue. Is this the same for you too? (This is when I am adding a product without any variation).
http://prntscr.com/nr7kaa

And Thank you once again for the code.

[driespieters]

To keep it working on products with and without variants you can add this to the product form:

{% if product.has_only_default_variant %} <input name="id" value="{{ product.first_available_variant.id }}" type="hidden"> {% endif %}

[phpMagpie]

Is the state of play that this starter theme (the one produced by Shopify) does not have a working product.js file? Working on a new theme and hit what appears to be a major brick wall.

I can see a product.js file which includes all sorts of useful functions, but the script is not being called from the products template. I managed to include the script by importing it in assets/scripts/templates/product.js but the scripts constructor/init doesn't appear to be getting called as the listeners don't react to changes in the product form.

Is there any documentation about how to get this working, as a functioning products page is a fundamental requirement of any Shopify theme.

[reilnuud]

@phpMagpie, per the updated readme, this repo has been essentially discontinued. I ended up completely redoing the product pages in templates using Slate and wouldn't recommend using it on future projects–I'm definitely not considering the plethora of outstanding issues and unfinished state of the repo. It's also using pretty antiquated, bloated methods for a number of functions. I now use Theme Kit and my own starter template. There's a somewhat helpful discussion about it here.

[Cam]

@phpMagpie There's no JS cart included in Starter Theme. We're (@Elkfox) releasing a new version of our toolkit soon that works on top of this theme. You could also look at Concrete in the meantime.

@reilnuud Starter Theme and Slate haven't been discontinued. But I don't think we can expect much in the way of updates for quite some time.

[phpMagpie]

@reilnuud this is more than unfortunate as we've just completed a full theme development using Slate. We chose to use Slate off the back of reading the following Shopify Blog articles:

• https://www.shopify.co.uk/partners/blog/shopify-starter-theme
• https://www.shopify.co.uk/partners/blog/shopify-slate-new-release

If Shopify are launching this at Unite 2018 and writing articles saying this is the way forward for theme developers, then people are going to act upon that advice. It's not like these articles are years old, so you can understand why we thought this new theme development tool was the way forward.

Those articles point you to https://shopify.github.io/slate/docs/about and https://shopify.github.io/slate/docs/create-a-new-slate-project, neither of which warn developers that Slate is in a state of limbo with no plans as to if/when that status will change.

I get that there are clear warnings about it being a beta release, but we assumed this was just because it was a relatively new project and development would continue beyond beta.

@Cam yeah, a js/ajax cart was the next problem to solve after the product page. I'll have a look at what you have in Concrete for inspiration :) Good to see that someone is trying to pick up the pieces around the mothballing of this by Shopify.

[daetal-us]

[Cam]

@reilnuud I've just finished Concrete v4 and will publish it as soon as possible. It is based on Slate, but has some extra components to get you started faster. You can see the WIP on this branch.

It is based on the same ideas we used to develop the framework that was used to build sites like; the official Harry Potter shop, the National Geographic shop, Warner Bros shop, Cartoon Network, Dude Perfect, Father John Misty, and a load more high performing sites.

I want to make it very clear that we (Elkfox) are dedicated to supporting the principles of Slate and the work the Shopify frontend team do. We consider our work as complementary and supplementary to theirs 👌

[phpMagpie]

@Cam that's great news and we will definitely have a go with your theme on our next project. We love how Slate works, so would be amazing if as a community we can pick this project up and keep updating it with our own starter themes.

We managed to get our Slate theme working, thanks to being able to dig around @danyn's code a bit and reading various posts. We also got the ajax cart working using @carolineschnapp's ajaxify-cart.

Only real issue we have now is Facebook Pixel's AddToCart event is not firing, but I think this is down to using ajaxify-cart and that we need to manually fire this event.

Cheers, Paul.

[danyn]

Hi, Cam and Paul. I just forked Concrete and am interested in Cam's work especially the ajax cart and pagination. I have been developing on Slate V1 and starter theme. I am getting great page load speeds. I look forward to learning from all the work that has gone into Concrete. Is anyone else getting really good page load speeds from google page speed tests? All the lazy loading and code splitting can been tuned quite well with what is there in slate. It definetelay got that part right on the mark. Regards, Dan

…

On Wed, Sep 4, 2019 at 12:25 AM Paul Gardner ***@***.***> wrote: @Cam <https://github.com/Cam> that's great news and we will definitely have a go with your theme on our next project. We love how Slate works, so would be amazing if as a community we can pick this project up and keep updating it with our own starter themes. We managed to get our Slate theme working, thanks to being able to dig around @danyn <https://github.com/danyn>'s code a bit and reading various posts. We also got the ajax cart working using @carolineschnapp <https://github.com/carolineschnapp>'s ajaxify-cart. Only real issue we have now is Facebook Pixel's AddToCart event is not firing, but I think this is down to using ajaxify-cart and that we need to manually fire this event. Cheers, Paul. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#128?email_source=notifications&email_token=AFQVJSHM67JQKQ3L7H22UODQH5PIDA5CNFSM4GIFEHAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD52UECY#issuecomment-527778315>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFQVJSEZWEOQEBZRO4RJERDQH5PIDANCNFSM4GIFEHAA> .

-- Regards, Daniel Eisen | Victoria, Bc