I created a variant for one of our subscription products to give our customers the option to choose a “tough toy” option for their dog. On the drop down field, the variant does not display when you select it. When you hit add to cart, it does not add the variant, just the default product. I believe this is a javascript issue but can’t figure out the problem.
Here is the console error:
tions.js:1 GET https://www.pupmomcrate.com/products/medium-dog-crate-25-55-lbs-3-month-prepay-1.json net::ERR_ABORTED 404
value @ options.js:1
value @ options.js:1
value @ options.js:1
value @ options.js:1
o.emit @ options.js:1
value @ options.js:1
(anonymous) @ options.js:1
options.js:1 Uncaught (in promise) Error
at value (options.js:1:16193)
value @ options.js:1
Promise.then (async)
value @ options.js:1
o.emit @ options.js:1
value @ options.js:1
(anonymous) @ options.js:1
I am not sure why it’s trying to pull this URL:
www.pupmomcrate.com/products/medium-dog-crate-25-55-lbs-3-month-prepay-1.json
when the URL should beL:
www.pupmomcrate.com/products/medium-dog-crate-25-55-lbs-3-month-prepay.json
here is the code from our product-liquid file
{% assign fitting_guide_icon = fitting_guide_icon | default: blank %}
{% assign fitting_guide_url = fitting_guide_url | default: blank %}
{% assign show_brand_names = show_brand_names | default: false %}
{% assign show_email_link = show_email_link | default: false %}
{% assign callout = callout | default: false %}
{% assign show_quantity = show_quantity | default: false %}
{% assign show_spb = show_spb | default: false %}
{% assign selected_variant = product.selected_or_first_available_variant %}
{% assign is_default = product.has_only_default_variant %}
{% assign enable_image_zoom = enable_image_zoom | default: false %}
{% assign gallery_layout = gallery_layout | default: 'list' %}
{% assign selected_media = selected_variant.featured_media | default: product.featured_media %}
{% assign show_media_borders = show_media_borders | default: false %}
{% assign onboarding = onboarding | default: false %}
{% assign details_alignment = details_alignment | default: section.settings.details_alignment %}
<section
class="
product-area
clearfix
subflow
"
>
<div class="row">
<h1 class="label" style="font-size: 1.5em;color: #685a91;margin-top: 31px;
text-align: center;
">
{% if product != empty %}
CUSTOMIZE YOUR CRATE!
{% else %}
{{ 'onboarding.product_name' | t }}
{% endif %}
</h1>
<div class="col">
<ul id="progress-bar" class="progressbar finalizes">
<li class="active">SIZE</li>
<li>PLAN</li>
<li>CUSTOMIZE</li>
<li>FINALIZE</li>
</ul>
</div>
</div>
{%
render 'product-gallery',
product: product,
selected_media: selected_media,
gallery_layout: gallery_layout,
show_media_borders: show_media_borders,
enable_image_zoom: enable_image_zoom,
%}
<div class="product-details-wrapper">
<div class="
product-details
product-details-alignment-{{ details_alignment }}
{% if product.media.size > 1 %}
border
{% endif %}
{% if is_default and show_quantity == false %}
no-options
{% endif %}
"
>
<!-- <div class="header">
{% if show_brand_names %}
<h3 class="brand">
{% if product != empty %}
{{ product.vendor }}
{% else %}
{{ 'onboarding.product_vendor' | t }}
{% endif %}
</h3>
{% endif %}
<div class="product-details__price sale">
{% if product != empty %}
{% if selected_variant.compare_at_price > selected_variant.price or product.has_only_default_variant == false %}
{% comment %} If product has variants, this will be dynamically hidden or shown {% endcomment %}
<s class="original money">{{ selected_variant.compare_at_price | money }}</s>
{% endif %}
<span class="money money--last">{{ selected_variant.price | money }}</span>
{% else %}
<span class="money money--last">{{ 'onboarding.product_price' | t }}</span>
{% endif %}
{% capture total_quantity %}<span class="product-details__total-quantity" data-total-quantity>{{ selected_variant.unit_price_measurement.quantity_value }}{{ selected_variant.unit_price_measurement.quantity_unit }}</span>{% endcapture %}
{% capture unit_price %}<span class="product-details__unit-price-amount money" data-unit-price-amount>{{ selected_variant.unit_price | money }}</span>{% endcapture %}
{% capture unit_measure %}<span class="product-details__unit-price-measure" data-unit-price-measure>{%- if selected_variant.unit_price_measurement.reference_value != 1 -%}{{ selected_variant.unit_price_measurement.reference_value }}{%- endif %}{{ selected_variant.unit_price_measurement.reference_unit }}</span>{% endcapture %}
<div
class="
product-details__unit-price
{% unless selected_variant.unit_price_measurement %}hidden{% endunless %}
"
data-unit-price
>
{{ 'products.product.price_per_unit_html' | t: total_quantity: total_quantity, unit_price: unit_price, unit_measure: unit_measure | strip_newlines }}
</div>
{%- capture tax_text -%}
{{ 'products.product.tax_line_html' | t }}
{%- endcapture -%}
{%- if tax_text != blank -%}
<div class="
product-details__tax
{% unless selected_variant.taxable %}hidden{% endunless %}
"
data-tax-line
>
{{ tax_text }}
</div>
{%- endif -%}
</div>
{% if show_sku and selected_variant.sku != empty %}
<span class="product-variant-sku">
<strong>
{{ 'products.product.sku' | t }}
</strong>
<span
data-product-variant-sku
>
{{- selected_variant.sku | default: '' -}}
</span>
</span>
{% endif %}
</div>-->
{% if show_description and product.description.size > 0 %}
<div class="description">
<div class="rte">{{ product.description }}</div>
</div>
{% endif %}
<div class="options {% unless show_quantity and product.variants.size > 0 %}has-no-variants{% endunless %} {% unless product.available %}unavailable{% endunless %}">
{% assign form_id = product.id %}
{% capture form_classes %}
product-form
{% if show_spb %}
product-form-has-spb
{% endif %}
{% if selected_variant.available == false %}
product-form-outofstock
{% endif %}
{% endcapture %}
{% if product != empty and product.available %}
{%
form 'product',
product,
data-productid: product.id,
id: form_id,
class: form_classes,
data-product-form: "",
name: 'pupform'
%}
<!-- <h2>Crate Customizer</h2>
<p class="line-item-property__field pup-name-field">
<label for="whats-your-pups-name">What's your pup's name?</label>
<input id="whats-your-pups-name" type="text" name="properties[What's your pup's name?]" required="required">
</p>
<p class="line-item-property__field pup-bday-field">
<label for="whats-your-pups-birthday">What's Your Pup's Birthday?</label>
<input id="whats-your-pups-birthday" type="text" name="properties[What's your pup's birthday?]" required="required">
</p>
<p class="line-item-property__field pup-gender-field">
<label>Is Your Pup A Girl or Boy?</label><br>
<input type="radio" name="properties[Is your pup a girl or boy?]" value="Girl" required="required"> <span>Girl</span><br>
<input type="radio" name="properties[Is your pup a girl or boy?]" value="Boy"> <span>Boy</span><br>
</p> -->
<div class="bold_options" data-product-id="{{ product.id }}"></div>
{% if product.available %}{% render 'subscription-product' %}{% endif %}
<div class="product-form-grid product-form-grid-{{ variant_options_style }}">
{% unless is_default %}
{%
render 'product-options',
product: product,
form_id: form_id,
selected_variant: selected_variant,
style: variant_options_style,
%}
{% else %}
<input
class="
product-select
"
name="id" data-productid="{{ product.id }}"
data-productid="{{product.id}}"
value="{{ product.variants[0].id }}"
type="hidden"
data-variant-title="{{ product.variants[0].title }}"
/>
{% endunless %}
<div class="product-infiniteoptions js-required side-labels" id="infiniteoptions-container"></div>
<div class="product-uploadery js-required side-labels" id="uploadery-container"></div>
{% if show_quantity %}
<label
class="
product-quantity-label
"
>
{{ 'general.quantity' | t }}:
</label>
<input
type="number"
class="
product-quantity-input
"
name="quantity"
value="1"
min="0"
pattern="\d*"
>
{% else %}
<input
type="hidden"
name="quantity"
value="1"
>
{% endif %}
</div>
<button
type="submit"
class="
product-submit
action-button
submit
{% if show_spb %}
desaturated
{% endif %}
"
{% unless selected_variant.available %}
disabled
{% endunless %}
{% if onboarding %}
disabled
{% endif %}
data-product-submit
data-product-variant-id="{{ product.selected_or_first_available_variant.id }}"
>
<span class="product-card-interaction-addtocart-available_">
{% if selected_variant.available %}
{{ 'products.product_item.add_to_cart' | t }}
{% else %}
{{ 'products.product_item.sold_out' | t }}
{% endif %}
</span>
<span class="product-card-interaction-addtocart-error">
{{ 'products.product_item.unavailable' | t }}
</span>
<div class="product-card-interaction-addtocart-spinner">
{% render 'icon' with 'spinner' %}
</div>
</button>
{% if show_spb %}
{{ form | payment_button }}
{% endif %}
{% endform %}
{% else %}
<div class="product-form unavailable">
<button
class="
product-submit
action-button
submit
unavailable
disabled
"
data-product-submit
>
{{ 'products.product.sold_out' | t }}
</button>
</div>
{% endif %}
</div>
{% assign product_interaction_count = 0 %}
{% if fitting_guide_url != blank %}
{% assign product_interaction_count = product_interaction_count | plus: 1 %}
{% endif %}
{% if show_email_link %}
{% assign product_interaction_count = product_interaction_count | plus: 1 %}
{% endif %}
{% if show_social_buttons %}
{% assign product_interaction_count = product_interaction_count | plus: 1 %}
{% endif %}
{% if product_interaction_count > 0 %}
<div class="product-interactions product-interactions-{{ product_interaction_count }}">
{% if fitting_guide_url != blank %}
<a
class="product-interaction fitting-guide"
href="{{ pages[fitting_guide_url].url }}"
>
{% render 'icon' with fitting_guide_icon %}
<span class="product-interaction-title">{{ 'products.product.fitting_guide' | t }}</span>
</a>
{% endif %}
{% if show_email_link %}
<a
class="product-interaction email-us"
href="mailto:{{ shop.email }}?Subject={{ product.title | escape }}"
>
{% render 'icon' with 'mail' %}
<span class="product-interaction-title">{{ 'products.product.email_us' | t }}</span>
</a>
{% endif %}
{% if show_social_buttons %}
{% assign product_canonical_url = shop.url | append: product.url %}
{% assign product_email_subject = 'products.product.share_email_subject' | t: product: product.title %}
{% assign product_email_body = 'products.product.share_email_body' | t: product: product.title, product_url: product_canonical_url %}
{% assign product_image = product.featured_media.preview_image | default: page_image | img_url: '1024x1024' %}
{% assign product_description = product.title | escape %}
<div class="product-interaction share-this">
{%
render 'share-this',
share_canonical_url: product_canonical_url,
email_subject: product_email_subject,
email_body: product_email_body,
image: product_image,
description: product_description,
%}
</div>
{% endif %}
</div>
{% endif %}
{% if callout %}
<a class="product-callout" href="{{ product.url | within: collection }}">
{{ 'products.product.visit_page' | t }}<span>→</span>
</a>
{% endif %}
</div>
</div>
</section>