Wrong variants are added to shopping cart

Highlighted
New Member
1 0 0

Hey everyone! We're desperately looking for a solution to an issue with product variants we run into. Would be amazing if someone could help us solve this issue.

 

When selecting a specific variant on the product page and adding this to the shopping cart, only the first variant appears on the shopping cart page. Not the one that was chosen.

 

Please see below what our product.liquid looks like. I hope I've provided enough information, if anyone can help and needs some more information please let me know!!

{% capture added_to_cart_link %}
  {% include 'icon', id: 'checkmark' %}
  {{ 'product.added_to_cart_link_html' | t }}
<script data-app="esc-out-of-stock" type="text/json">[{% for variant in product.variants %}{"id":{{ variant.id }},"title":"{{ variant.title | escape }}","option1":{% if variant.option1 %}"{{ variant.option1 | escape }}"{% else %}null{% endif %},"option2":{% if variant.option2 %}"{{ variant.option2 | escape }}"{% else %}null{% endif %},"option3":{% if variant.option3 %}"{{ variant.option3 | escape }}"{% else %}null{% endif %},"sku":{% if variant.sku %}"{{ variant.sku | escape }}"{% else %}null{% endif %},"requires_shipping":{{ variant.requires_shipping }},"taxable":{{ variant.taxable }},"featured_image":{% if variant.featured_image %}"{{ variant.featured_image }}"{% else %}null{% endif %},"available":{{ variant.available }},"name":"{{ variant.name }} | escape","public_title":"{{ variant.public_title }} | escape","options":{{ variant.options | json }},"price":{{ variant.price }},"weight":{% if variant.weight %}{{ variant.weight }}{% else %}0{% endif %},"compare_at_price":{% if variant.compare_at_price %}{{ variant.compare_at_price }}{% else %}null{% endif %},"inventory_quantity":{{ variant.inventory_quantity }},"inventory_management":{% if variant.inventory_management %}"{{ variant.inventory_management }}"{% else %}null{% endif %},"inventory_policy":{% if variant.inventory_policy %}"{{ variant.inventory_policy }}"{% else %}null{% endif %},"barcode":{% if variant.barcode %}"{{ variant.barcode }}"{% else %}null{% endif %}}{% unless forloop.last %},{% endunless %}{% endfor %}]</script>

{% endcapture %}

{% if section.settings.enable_menu_form %}
  {% assign enable_inline_form = false %}
{% else %}
  {% assign enable_inline_form = true %}
{% endif %}

<script
  type="application/json"
  data-section-type="static-product"
  data-section-id="{{ section.id }}"
  data-section-data>
  {
    "product": {{ product | json }},
    "selected_variant": {{ product.selected_variant | json }},
    "selected_or_first_available_variant": {{ product.selected_or_first_available_variant | json }},
    "money_format": {{ shop.money_format | json }},
    "form_is_inline": {{ enable_inline_form | json }},
    "text": {
      "added_to_cart_link": {{ added_to_cart_link | json }},
      "product_available": {{ 'product.add_to_cart.available' | t | json }},
      "product_unavailable": {{ 'product.add_to_cart.unavailable' | t | json }}
    }
  }
</script>

{% if enable_inline_form %}
  <div class="product-alert">
    <div class="product-alert-content">
      <div class="product-alert-dismiss">{% include 'icon', id: 'close' %}</div>
      <div class="product-alert-message"></div>
    </div>
  </div>
{% endif %}

<div
  class="product-wrapper {% if product.images.size == 0 %}product-wrapper-no-images{% endif %}"
  data-product-wrapper
>
  {%- if product.images.size > 0 -%}
    <section class="product-images Dev-image" data-product-images>
      {%- for image in product.images -%}
        <figure
          class="product-image"
          data-product-image
          data-product-image-index="{{ forloop.index0 }}"
          data-product-image-id="{{ image.id }}"
        >
          <img data-image-id="{{ image.id}}"  
            alt="{{ image.alt | escape }}"
            {% include 'img-src', img: image, size: '2048x2048' %}
          >
        </figure>
      {%- endfor -%}
      
       <div class="dev_informative-icons fortified_icons">
         {% if section.settings.img_1 %}
            <div class="Dev_icon">
              <img src="{{section.settings.img_1 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.img_2 %}
            <div class="Dev_icon">
              <img src="{{section.settings.img_2 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.img_3 %}
            <div class="Dev_icon">
              <img src="{{section.settings.img_3 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.img_4 %}
            <div class="Dev_icon">
              <img src="{{section.settings.img_4 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.img_5 %}
            <div class="Dev_icon">
              <img src="{{section.settings.img_5 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.img_6 %}
            <div class="Dev_icon">
              <img src="{{section.settings.img_6 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.img_7 %}
            <div class="Dev_icon">
              <img src="{{section.settings.img_7 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.img_8 %}
            <div class="Dev_icon">
              <img src="{{section.settings.img_8 | img_url: 'master'}}">
            </div>
         {% endif %}
      </div>
       <div class="dev_informative-icons snap_icons">
         {% if section.settings.snapimg_1 %}
            <div class="Dev_icon">
              <img src="{{section.settings.snapimg_1 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.snapimg_2 %}
            <div class="Dev_icon">
              <img src="{{section.settings.snapimg_2 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.snapimg_3 %}
            <div class="Dev_icon">
              <img src="{{section.settings.snapimg_3 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.snapimg_4 %}
            <div class="Dev_icon">
              <img src="{{section.settings.snapimg_4 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.snapimg_5 %}
            <div class="Dev_icon">
              <img src="{{section.settings.snapimg_5 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.snapimg_6 %}
            <div class="Dev_icon">
              <img src="{{section.settings.snapimg_6 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.snapimg_7 %}
            <div class="Dev_icon">
              <img src="{{section.settings.snapimg_7 | img_url: 'master'}}">
            </div>
         {% endif %}
         {% if section.settings.snapimg_8 %}
            <div class="Dev_icon">
              <img src="{{section.settings.snapimg_8 | img_url: 'master'}}">
            </div>
         {% endif %}
      </div>
      
    </section>
  {%- endif -%}

  <section class="product-details product-details-relative" data-product-details>
    {% if enable_inline_form %}
      {% include 'breadcrumbs' %}
    {% endif %}

    {% if section.settings.show_product_vendor %}
      <h2 class="product-vendor">
        <a href="{{ product.vendor | url_for_vendor }}">{{ product.vendor }}</a>
      </h2>
    {% endif %}


    <h1 class="product-title">{{ product.title }}</h1>
    {%- include 'product-price', variant: product.selected_or_first_available_variant -%}

    {% include 'product-form-nojs' %}

    {% if enable_inline_form %}
      {% include 'product-form-inline' %}
    {% endif %}

    {% if enable_inline_form and section.settings.enable_social_sharing %}
      {% include 'share-buttons' %}
    {% endif %}

    
    <div class="product-rte rte Dev_default_rte">
      <div>
      {% if product.id == 3554618867784 %}
       <ul class="tabs">
          <li><a href="#tab_1">Details</a></li>
          <li><a href="#tab_2">Features</a></li>
          <li><a href="#tab_3">Shipping</a></li>
        </ul>
        <div id="tab_1">
          {{ section.settings.details_hoodie }}
        </div>
        <div id="tab_2">
          {{ section.settings.features_hoodie }}
        </div>
        <div id="tab_3">
          {{ pages.ship.content }}
        </div>
      {% elsif product.id == 3930825916488 %}
       <ul class="tabs">
          <li><a href="#tab_1">Details</a></li>
          <li><a href="#tab_2">Features</a></li>
          <li><a href="#tab_3">Shipping</a></li>
        </ul>
        <div id="tab_1">
          {{ section.settings.details_shirt }}
        </div>
        <div id="tab_2">
          {{ section.settings.features_shirt }}
        </div>
        <div id="tab_3">
          {{ pages.ship.content }}
        </div>
      {% elsif collection.handle == 'essentials-collection' or product.handle contains 'essentials-collection' %}
       <ul class="tabs">
          <li><a href="#tab_1">Details</a></li>
          <li><a href="#tab_2">Features</a></li>
          <li><a href="#tab_3">Shipping</a></li>
        </ul>
        <div id="tab_1">
          {{ section.settings.details_ess }}
        </div>
        <div id="tab_2">
          {{ section.settings.features_ess }}
        </div>
        <div id="tab_3">
          {{ pages.ship.content }}
        </div>
      {% elsif collection.handle == 'bags' or product.handle contains 'bag' %}
       <ul class="tabs">
          <li><a href="#tab_1">Details</a></li>
          <li><a href="#tab_2">Features</a></li>
          <li><a href="#tab_3">Shipping</a></li>
        </ul>
        <div id="tab_1">
          {{ section.settings.details_tote }}
        </div>
        <div id="tab_2">
          {{ section.settings.features_tote }}
        </div>
        <div id="tab_3">
          {{ pages.ship.content }}
        </div>
      {% else %}
        <ul class="tabs">
          <li><a href="#tab-1">Details</a></li>
          <li><a href="#tab-2">Shipping</a></li>
        </ul>
        <div id="tab-1">
        {{ product.description }}
        </div>
        <div id="tab-2">
        {{ pages.ship.content }}
        </div>
    {% endif %}
    </div>
    </div>
    <div class="product-rte rte Dev_snap_rte">
     <div>
        <ul class="tabs">
          <li><a href="#tab_1">Details</a></li>
          <li><a href="#tab_2">Features</a></li>
          <li><a href="#tab_3">Shipping</a></li>
        </ul>
        <div id="tab_1">
          {{ section.settings.details_1 }}
        </div>
        <div id="tab_2">
          {{ section.settings.features_1 }}
        </div>
        <div id="tab_3">
          {{ pages.ship.content }}
        </div>
     </div>
   </div>
   <div class="product-rte rte Dev_fortified_rte">
     <div>
        <ul class="tabs">
          <li><a href="#tab1">Details</a></li>
          <li><a href="#tab2">Features</a></li>
          <li><a href="#tab3">Shipping</a></li>
        </ul>
        <div id="tab1">
          {{ section.settings.details }}
        </div>
        <div id="tab2">
           {{ section.settings.features }}
        </div>
       <div id="tab3">
          {{ pages.ship.content }}
        </div>
     </div>
   </div>
  </section>   
    


{% if enable_inline_form == false %}
  {%- include 'product-menu' -%}
{% endif %}

{%- for block in section.blocks -%}
  {%- assign product_count = block.settings.product-count | times: 1 -%}

 {%- if collection.all_products_count > 1 -%}
    <section class="section-related-products" {{ block.shopify_attributes }}>
      <span class="related-products-title">{{ 'related_products.title' | t }}</span>
      {%- include 'product-highlights',
        product_item_style: block.settings.product_item_style,
        use_quickshop: block.settings.enable_product_quickshop,
        product_count: product_count,
        product_emphasize: block.settings.product_emphasize
      -%}
    </section>
  {%- endif -%}
{%- endfor -%}

{% schema %}
{
  "name": "Product pages",
  "class": "section-product",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_menu_form",
      "label": "Enable bottom menu",
      "default": true,
      "info": "Displays product options and breadcrumbs in a sticky bottom menu."
    },
    {
      "id": "show_product_vendor",
      "type": "checkbox",
      "label": "Show product vendor",
      "default": false
    },
    {
      "type": "header",
      "content": "Sharing"
    },
    {
      "type": "checkbox",
      "id": "enable_social_sharing",
      "label": "Enable social sharing",
      "default": false
    },
    {
      "type": "header",
      "content": "Fortified description Details"
    },
    {
      "type": "richtext",
      "id": "details",
      "label": "Details Tab"
    },
    {
      "type": "richtext",
      "id": "features",
      "label": "Features Tab"
    },
    {
      "type": "header",
      "content": "Snap description Details"
    },
    {
      "type": "richtext",
      "id": "details_1",
      "label": "Details Tab"
    },
    {
      "type": "richtext",
      "id": "features_1",
      "label": "Features Tab"
    },
    {
      "type": "header",
      "content": "Essentials Collection description Details"
    },
    {
      "type": "richtext",
      "id": "details_ess",
      "label": "Details Tab"
    },
    {
      "type": "richtext",
      "id": "features_ess",
      "label": "Features Tab"
    },
    {
      "type": "header",
      "content": "Tote Bags description Details"
    },
    {
      "type": "richtext",
      "id": "details_tote",
      "label": "Details Tab"
    },
    {
      "type": "richtext",
      "id": "features_tote",
      "label": "Features Tab"
    },
    {
      "type": "header",
      "content": "Paradise Hoodie description Details"
    },
    {
      "type": "richtext",
      "id": "details_hoodie",
      "label": "Details Tab"
    },
    {
      "type": "richtext",
      "id": "features_hoodie",
      "label": "Features Tab"
    },
    {
      "type": "header",
      "content": "Paradise Shirt description Details"
    },
    {
      "type": "richtext",
      "id": "details_shirt",
      "label": "Details Tab"
    },
    {
      "type": "richtext",
      "id": "features_shirt",
      "label": "Features Tab"
    },
    {
      "type": "header",
      "content": "Fortified Informative Icons"
    },
    {
      "type": "image_picker",
      "id": "img_1",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "img_2",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "img_3",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "img_4",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "img_5",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "img_6",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "img_7",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "img_8",
      "label": "Icon Image"
    },
    {
      "type": "header",
      "content": "Snap Informative Icons"
    },
    {
      "type": "image_picker",
      "id": "snapimg_1",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "snapimg_2",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "snapimg_3",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "snapimg_4",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "snapimg_5",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "snapimg_6",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "snapimg_7",
      "label": "Icon Image"
    },
    {
      "type": "image_picker",
      "id": "snapimg_8",
      "label": "Icon Image"
    }
    
  ],
  "blocks": [
    {
      "type": "related_products",
      "name": "Related products",
      "settings": [
        {
          "id": "product_item_style",
          "type": "select",
          "label": "Product aspect ratio",
          "info": "Using an uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.",
          "options": [
            { "group": "Uncropped", "value": "natural", "label": "Natural" },
            { "group": "Uncropped", "value": "small", "label": "Short (4:3)" },
            { "group": "Uncropped", "value": "medium", "label": "Square (1:1)" },
            { "group": "Uncropped", "value": "large", "label": "Tall (2:3)" },
            { "group": "Cropped", "value": "cropped-small", "label": "Short (4:3)" },
            { "group": "Cropped", "value": "cropped-medium", "label": "Square (1:1)" },
            { "group": "Cropped", "value": "cropped-large", "label": "Tall (2:3)" }
          ],
          "default": "natural"
        },
        {
          "id": "enable_product_quickshop",
          "type": "checkbox",
          "label": "Enable product quickshop",
          "default": false
        },
        {
          "id": "product-count",
          "type": "range",
          "label": "Products",
          "min": 1,
          "max": 5,
          "step": 1,
          "default": 5
        },
        {
          "id": "product_emphasize",
          "type": "checkbox",
          "label": "Emphasize product",
          "info": "Creates an alternate layout on larger screens",
          "default": true
        }
      ]
    }
  ],
  "max_blocks": 1,
  "default": {
    "blocks": [
      {
        "type": "related_products",
        "settings": {}
      }
    ]
  }
}

{% endschema %}
<style>
ul.tabs {
  border-bottom: 1px solid #DDDDDD;
  display: block;
  margin: 0 0 20px;
  padding: 0;
}
ul.tabs li {
  display: block;
  float: left;
  height: 30px;
  margin-bottom: 0;
  padding: 0;
  width: auto;
}
ul.tabs li a {
  -moz-border-bottom-colors: none;
  -moz-border-image: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  background: none repeat scroll 0 0 #F5F5F5;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  display: block;
  font-size: 13px;
  height: 29px;
  line-height: 30px;
  margin: 0;
  padding: 0 20px;
  text-decoration: none;
  width: auto;
  color: #303030;
  border-bottom:none !important;
}
ul.tabs li a.active {
  background: none repeat scroll 0 0 #FFFFFF;
  border-left-width: 1px;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  color: #111111;
  height: 30px;
  margin: 0 0 0 -1px;
  padding-top: 4px;
  position: relative;
  top: -4px;
}
ul.tabs li:first-child a.active {
  margin-left: 0;
}
ul.tabs li:first-child a {
  border-top-left-radius: 2px;
  border-width: 1px 1px 0;
}
ul.tabs li:last-child a {
  border-top-right-radius: 2px;
}
ul.tabs:before, ul.tabs:after {
  content: " ";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0;
}
ul.tabs:after {
  clear: both;
}
</style>

 

 

0 Likes