在shopify

时间:2017-07-11 11:36:43

标签: javascript css ruby shopify

每次点击添加到购物车按钮时,我都会在shopify中收到此错误。

参数缺失或无效:带有该请求ID的id:

请求ID:08567c18-c095-4238-95e5-92e794c9bfbf

这是我的product.template.liquid

代码



<div class="product-template__container page-width" itemscope itemtype="http://schema.org/Product" id="ProductSection-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="product" data-enable-history-state="true"><meta itemprop="name" content="{{ product.title }}"><meta itemprop="url" content="{{ shop.url }}{{ product.url }}"><meta itemprop="image" content="{{ product.featured_image.src | img_url: '800x' }}"> {
  % comment %
}

Get first variant,
or deep linked one {
  % endcomment %
}

{
  %- assign current_variant=product.selected_or_first_available_variant -%
}

{
  %- assign product_thumb_size='110x110' -%
}

{
  %- assign product_image_zoom_size='1024x1024' -%
}

{
  %- assign product_image_scale='2' -%
}

{
  %- assign enable_zoom=section.settings.enable_zoom -%
}

{
  % case section.settings.image_size %
}

{
  % when 'small' %
}

{
  %- assign product_image_width='medium-up--one-third' -%
}

{
  %- assign product_description_width='medium-up--two-thirds' -%
}

{
  %- assign product_thumbnail_width='medium-up--one-third' -%
}

{
  %- assign product_image_size='345x' -%
}

{
  % when 'medium' %
}

{
  %- assign product_image_width='medium-up--one-half' -%
}

{
  %- assign product_description_width='medium-up--one-half' -%
}

{
  %- assign product_thumbnail_width='medium-up--one-quarter' -%
}

{
  %- assign product_image_size='530x' -%
}

{
  % when 'large' %
}

{
  %- assign product_image_width='medium-up--two-thirds' -%
}

{
  %- assign product_description_width='medium-up--one-third' -%
}

{
  %- assign product_thumbnail_width='medium-up--one-fifth' -%
}

{
  %- assign product_image_size='720x' -%
}

{
  % when 'full' %
}

{
  %- assign product_image_width='' -%
}

{
  %- assign product_description_width='' -%
}

{
  %- assign product_thumbnail_width='medium-up--one-eighth' -%
}

{
  %- assign product_image_size='1090x' -%
}

{
  %- assign enable_zoom=false -%
}

{
  % endcase %
}

<div class="grid product-single"><div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}"> {
  %- assign featured_img_src=current_variant.featured_image.src | default: product.featured_image.src -%
}

{
  %- assign featured_img_alt=current_variant.featured_image.alt | default: product.featured_image.alt -%
}

<div id="FeaturedImageZoom-{{ section.id }}" class="product-single__photo{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}" {
  % if enable_zoom %
}

data-zoom="{{ featured_img_src | img_url: product_image_zoom_size, scale: product_image_scale }}" {
  % endif %
}

><img src="{{ featured_img_src | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_img_alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img{% if enable_zoom %} js-zoom-enabled{% endif %}"></div> {
  % if product.images.size>1 %
}

{
  % if product.images.size>3 %
}

{
  %- assign enable_thumbnail_slides=true -%
}

{
  % endif %
}

<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}"> {
  % if enable_thumbnail_slides==true %
}

<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}"> {
  % include 'icon-chevron-left' %
}

<span class="icon__fallback-text"> {
  {
    'sections.slideshow.previous_slide' | t
  }
}

</span></button> {
  % endif %
}

<ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}"> {
  % for image in product.images %
}

<li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item"><a href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}" class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}" {
  % if enable_zoom %
}

data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}" {
  % endif %
}

><img class="product-single__thumbnail-image" src="{{ image.src | img_url: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}"></a></li> {
  % endfor %
}

</ul> {
  % if enable_thumbnail_slides==true %
}

<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}"> {
  % include 'icon-chevron-right' %
}

<span class="icon__fallback-text"> {
  {
    'sections.slideshow.next_slide' | t
  }
}

</span></button> {
  % endif %
}

</div> {
  % endif %
}

</div><div class="grid__item {{ product_description_width }}"><div class="product-single__meta"><h1 itemprop="name" class="product-single__title"> {
  {
    product.title
  }
}

</h1> {
  % if section.settings.show_vendor %
}

<p itemprop="brand" class="product-single__vendor"> {
  {
    product.vendor
  }
}

</p> {
  % endif %
}

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"><meta itemprop="priceCurrency" content="{{ shop.currency }}"><link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}"><p class="product-single__price product-single__price-{{ section.id }}{% unless current_variant.available %} product-price--sold-out{% endunless %}"> {
  % if current_variant.compare_at_price>current_variant.price %
}

<span class="visually-hidden"> {
  {
    'products.product.regular_price' | t
  }
}

</span><s id="ComparePrice-{{ section.id }}"> {
  {
    current_variant.compare_at_price | money
  }
}

</s><span class="product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single"><span id="ProductPrice-{{ section.id }}" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}"> {
  {
    current_variant.price | money
  }
}

</span><span class="product-price__sale-label product-price__sale-label-{{ section.id }}"> {
  {
    'products.product.on_sale' | t
  }
}

</span></span> {
  % else %
}

<span class="visually-hidden"> {
  {
    'products.product.regular_price' | t
  }
}

</span><s id="ComparePrice-{{ section.id }}" class="hide"> {
  {
    current_variant.compare_at_price | money
  }
}

</s><span class="product-price__price product-price__price-{{ section.id }}"><span id="ProductPrice-{{ section.id }}" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}"> {
  {
    current_variant.price | money
  }
}

</span><span class="product-price__sale-label product-price__sale-label-{{ section.id }} hide"> {
  {
    'products.product.on_sale' | t
  }
}

</span></span> {
  % endif %
}

</p><form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}"><!-- {
  % unless product.options.size==1 and product.variants[0].title=='Default Title' %
}

{
  % for option in product.options_with_values %
}

<div class="selector-wrapper js product-form__item"><label {
  % if option.name=='default' %
}

class="label--hidden" {
  % endif %
}

for="SingleOptionSelector-{{ forloop.index0 }}"> {
  {
    option.name
  }
}

</label><select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}"> {
  % for value in option.values %
}

<option value="{{ value | escape }}" {
  % if option.selected_value==value %
}

selected="selected" {
  % endif %
}

> {
  {
    value
  }
}

</option> {
  % endfor %
}

</select></div> {
  % endfor %
}

{
  % endunless %
}

--> {
  % if product.available and product.variants.size>1 %
}

{
  % for option in product.options %
}

{
  % include 'swatch' with option %
}

{
  % endfor %
}

{
  % endif %
}

<!--select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js"> {
  % for variant in product.variants %
}

{
  % if variant.available %
}

<option {
  % if variant==product.selected_or_first_available_variant %
}

selected="selected" {
  % endif %
}

value="{{ variant.id }}"> {
  {
    variant.title
  }
}

</option> {
  % else %
}

<option disabled="disabled"> {
  {
    variant.title
  }
}

- {
  {
    'products.product.sold_out' | t
  }
}

</option> {
  % endif %
}

{
  % endfor %
}

</select--> {
  % if section.settings.show_quantity_selector %
}

<div class="product-form__item product-form__item--quantity"><label for="Quantity"> {
  {
    'products.product.quantity' | t
  }
}

</label><input type="number" id="Quantity" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*"></div> {
  % endif %
}

<div class="product-form__item product-form__item--submit"><button type="submit" name="add" id="AddToCart-{{ section.id }}" {
  % unless current_variant.available %
}

disabled="disabled" {
  % endunless %
}

class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}"><span id="AddToCartText-{{ section.id }}"> {
  % unless current_variant.available %
}

{
  {
    'products.product.sold_out' | t
  }
}

{
  % else %
}

{
  {
    'products.product.add_to_cart' | t
  }
}

{
  % endunless %
}

</span></button></div></form></div><p> {
  % if section.settings.show_share_buttons %
}

{
  % include 'social-sharing',
  share_title: product.title, share_permalink: product.url, share_image: product %
}

{
  % endif %
}

</p></div></div></div></div><div class="product-single__description rte" itemprop="description"><div><ul class="tabs"><li><a href="#tab-1">Product Description</a></li><li><a href="#tab-2">Size Chart</a></li><li><a href="#tab-3">Shipping and Return</a></li></ul><div id="tab-1"> {
  {
    product.description
  }
}

</div><div id="tab-2"> {
  {
    page.size.chart
  }
}

</div><div id="tab-3"> {
  {
    page.shipping.return
  }
}

</div></div></div> {
  % if collection %
}

<div class="text-center return-link-wrapper"><a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link"> {
  % include 'icon-arrow-left' %
}

{
  {
    'products.product.back_to_collection' | t: title: collection.title
  }
}

</a></div> {
  % endif %
}

{
  % unless product==empty %
}

<script type="application/json" id="ProductJson-{{ section.id }}"> {
  {
    product | json
  }
}

</script> {
  % endunless %
}

{
  % schema %
}

{
  "name": "Product pages",
  "settings": [ {
    "type": "select",
    "id": "image_size",
    "label": "Image size",
    "options": [ {
      "value": "small", "label": "Small"
    }
    ,
    {
      "value": "medium", "label": "Medium"
    }
    ,
    {
      "value": "large", "label": "Large"
    }
    ,
    {
      "value": "full", "label": "Full-width"
    }
    ],
    "default": "medium"
  }
  ,
  {
    "type": "checkbox", "id": "show_quantity_selector", "label": "Show quantity selector", "default": false
  }
  ,
  {
    "type": "checkbox", "id": "show_variant_labels", "label": "Show variant labels", "default": true
  }
  ,
  {
    "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": false
  }
  ,
  {
    "type": "checkbox", "id": "enable_zoom", "label": "Enable image zoom", "default": true
  }
  ,
  {
    "type": "checkbox", "id": "show_share_buttons", "label": "Show social sharing buttons", "default": true
  }
  ]
}

{
  % 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>
&#13;
&#13;
&#13;

这是购物车模板液的代码。

&#13;
&#13;
<div class="page-width" data-section-id="{{ section.id }}" data-section-type="cart-template">

  {% if cart.item_count > 0 %}
    <div class="section-header text-center">
      <h1>{{ 'cart.general.title' | t }}</h1>
    </div>

    <form action="/cart" method="post" novalidate class="cart">
      <table>
        <thead class="cart__row cart__header">
          <th colspan="2">{{ 'cart.label.product' | t }}</th>
          <th>{{ 'cart.label.price' | t }}</th>
          <th class="text-center">{{ 'cart.label.quantity' | t }}</th>
          <th class="text-right">{{ 'cart.label.total' | t }}</th>
        </thead>
        <tbody>
          {% for item in cart.items %}
            <tr class="cart__row border-bottom line{{ forloop.index }} cart-flex{% if forloop.first %} border-top{% endif %}">
              <td class="cart__image-wrapper cart-flex-item">
                <a href="{{ item.url | within: collections.all }}">
                  <img class="cart__image" src="{{ item | img_url: '95x95', scale: 2 }}" alt="{{ item.title | escape }}">
                </a>
              </td>
              <td class="cart__meta small--text-left cart-flex-item">
                <div class="list-view-item__title">
                  <a href="{{ item.url }}">
                    {{ item.product.title }}
                    {% if item.quantity > 1 %}
                      <span class="medium-up--hide"><span class="visually-hidden">{{ 'cart.label.quantity' | t }}</span>(x{{ item.quantity }})</span>
                    {% endif %}
                  </a>
                </div>
                {% unless item.variant.title contains 'Default' %}
                  <div class="cart__meta-text">
                    {% for option in item.product.options %}
                      {{ option }}: {{ item.variant.options[forloop.index0] }}<br/>
                    {% endfor %}
                  </div>
                {% endunless %}

                {% comment %}
                  Optional, loop through custom product line items if available

                  Line item properties come in as having two parts. The first part will be passed with the default form,
                  but p.last is the actual custom property and may be blank. If it is, don't show it.

                  For more info on line item properties, visit:
                    - http://docs.shopify.com/support/your-store/products/how-do-I-collect-additional-information-on-the-product-page-Like-for-a-monogram-engraving-or-customization
                {% endcomment %}
                {%- assign property_size = item.properties | size -%}
                {% if property_size > 0 %}
                  <div class="cart__meta-text">
                    {% for p in item.properties %}
                      {% unless p.last == blank %}
                        {{ p.first }}:

                        {% comment %}
                          Check if there was an uploaded file associated
                        {% endcomment %}
                        {% if p.last contains '/uploads/' %}
                          <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                        {% else %}
                          {{ p.last }}
                        {% endif %}
                      {% endunless %}
                    {% endfor %}
                  </div>
                {% endif %}

                <p class="small--hide">
                  <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="btn btn--small btn--secondary cart__remove">{{ 'cart.general.remove' | t }}</a>
                </p>
              </td>
              <td class="cart__price-wrapper cart-flex-item">
                {{ item.price | money }}

                {% for discount in item.discounts %}
                  <div class="cart-item__discount medium-up--hide">{{ discount.title }}</div>
                {% endfor %}

                <div class="cart__edit medium-up--hide">
                  <button type="button" class="btn btn--secondary btn--small js-edit-toggle cart__edit--active" data-target="line{{ forloop.index }}">
                    <span class="cart__edit-text--edit">{{ 'cart.general.edit' | t }}</span>
                    <span class="cart__edit-text--cancel">{{ 'cart.general.cancel' | t }}</span>
                  </button>
                </div>
              </td>
              <td class="cart__update-wrapper cart-flex-item text-right">
                <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0" class="btn btn--small btn--secondary cart__remove medium-up--hide">{{ 'cart.general.remove' | t }}</a>
                <div class="cart__qty">
                  <label for="updates_{{ item.key }}" class="cart__qty-label">{{ 'cart.label.quantity' | t }}</label>
                  <input class="cart__qty-input" type="number" name="updates[]" id="updates_{{ item.key }}" value="{{ item.quantity }}" min="0" pattern="[0-9]*">
                </div>
                <input type="submit" name="update" class="btn btn--small cart__update medium-up--hide" value="{{ 'cart.general.update' | t }}">
              </td>
              <td class="text-right small--hide">
                {% if item.original_line_price != item.line_price %}
                  <div class="cart-item__original-price"><s>{{ item.original_line_price | money }}</s></div>
                {% endif %}

                <div>
                  {{ item.line_price | money }}
                </div>

                {% for discount in item.discounts %}
                  <div class="cart-item__discount">{{ discount.title }}</div>
                {% endfor %}
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>

      <footer class="cart__footer">
        <div class="grid">
          {% if section.settings.cart_notes_enable %}
            <div class="grid__item medium-up--one-half cart-note">
              <label for="CartSpecialInstructions" class="cart-note__label small--text-center">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" id="CartSpecialInstructions" class="cart-note__input">{{ cart.note }}</textarea>
            </div>
          {% endif %}
          <div class="grid__item text-right small--text-center{% if section.settings.cart_notes_enable %} medium-up--one-half{% endif %}">
            <div>
              <span class="cart__subtotal-title">{{ 'cart.general.subtotal' | t }}</span>
              <span class="cart__subtotal">{{ cart.total_price | money }}</span>
            </div>
            {% if cart.total_discounts > 0 %}
              <div class="cart__savings">
                {{ 'cart.general.savings' | t }}
                <span class="cart__savings-amount">{{ cart.total_discounts | money }}</span>
              </div>
            {% endif %}
            <div class="cart__shipping">{{ 'cart.general.shipping_at_checkout' | t }}</div>
            <a href="collections/all" class="btn btn--secondary cart__update cart__continue--large small--hide" >{{ 'cart.general.continue_shopping' | t }}</a>
            <input type="submit" name="update" class="btn btn--secondary cart__update cart__update--large small--hide" value="{{ 'cart.general.update' | t }}">
            <input type="submit" name="checkout" class="btn btn--small-wide" value="{{ 'cart.general.checkout' | t }}">
            {% if additional_checkout_buttons %}
              <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
            {% endif %}
          </div>
        </div>
      </footer>
    </form>
  {% else %}
    <div class="empty-page-content text-center">
      <h1>{{ 'cart.general.title' | t }}</h1>
      <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
      <div class="cookie-message">
        <p>{{ 'cart.general.cookies_required' | t }}</p>
      </div>
      <a href="/" class="btn btn--has-icon-after cart__continue-btn">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
    </div>
  {% endif %}
</div>

{% schema %}
  {
    "name": "Cart page",
    "settings": [
      {
        "type": "checkbox",
        "id": "cart_notes_enable",
        "label": "Enable cart notes",
        "default": false
      }
    ]
  }
{% endschema %}
&#13;
&#13;
&#13;

0 个答案:

没有答案